First steps with GWT - 001

The Google Widget Toolkit (GWT) is the simple and consistent way to build the WEB client applications by using the Java language. The "toolkit" is actually a "compiler" of the Java code into Javascript, which is executed on client's machine. Because of that, it means that not every Java class is supported by GWT. Its latest version (GWT 1.5 RC1) supports the JDK 5.x, including generics and smart for loops.

The official web site is located here:


The widgets are UI controls that will be used in our "java pages" (has nothing to do with JSP J). They are very similar (panels, layouts, event listeners etc.) with the "Swing cousins", but so different (some widgets UI don't keep reference to the model or children, so further actions like edit or delete are not possible) from them. The whole list of them can be found at the following link: as well as the developer's guide:


There are different types (free or not) of other libraries that, based on GWT, have created more widgets, and look and feels. Here we present two of them: GWT-Ext and GWT-Ext-UX.

1. GWT-Ext

This is a free library that is built on top of GWT and EXT (don't make confusion with Ext GWT that is built by company ExtJS and is not free). The GWT-Ext has nicer controls and functionality, and it can be found at this link:

2. GWT-Ext UX

This is a smaller free library that is an user's extension, similar like the previous one (GWT-Ext). It can be found at link:

Both extensions have demo web sites, where the whole collection of widgets can be found, including their sources.

Development environment

The development can be done with various IDs (Eclipse, JIdea, etc), but here we are talking about Eclipse, because everybody knows, that it's free and very powerful.

So we have here the small list of some prerequisites:

The GWT Designer plug-in is from the company Instantiations and, unfortunately, it's not free but it seems to be the best; at least you can use the evaluation version.

First project with Eclipse

A project has a specific directory structure and files. A GWT project contains at least one "module". The main file is with extension ".gwt.html", and it's the descriptor of the application. It includes other modules that are inherited, the entry point, new modules we are defining, servlets mapping, different application init properties, etc.

We can create a new project using the Eclipse new project wizard (using extensively the next button).

After we hit the button "Finish" the project is generated and it has the following content (see the below image). It contains 3 main packages: "client", "server" and "public".

Under client we have the code that will be "compiled" in Javascript and will run on client's machine (see here that there are Java class restrictions).

Under server we have the code that will run, obviously, on the server machine, and it can use any Java class (Java à Javascript conversion doesn't happen here).

Under public we have the other web resources, which can be used with the GWT, like: html pages, css files, images etc.

From now on, we can add more code to the packages: client, server or public, based on what we want to achieve :-) Success :-)

No comments:

Post a Comment