Starting with Google Web toolkit (GWT) in Eclipse

Google Web Toolkit (GWT) is a web development toolkit is an AJAX framework developed by Google. It’s a very good initiative from Google to provide a niche way to implement an AJAX based web application. More details about GWT can be found at Google web site (http://code.google.com/webtoolkit/). To know usability and limitations of GWT, please refer “GWT: Uses and Limitations”.

Installing GWT SDK and Eclipse plug-in is pretty straight forward which is apparent from the steps below.

GWT SDK Installation (optional):

1. Download GWT SDK from Google website (http://code.google.com/webtoolkit/download.html)
2. Extract (unpack) the GWT-x.x.x.zip archive file contents to some folder in the files system e.g. C:\GWT
3. Add the above folder i.e. C:\GWT into the path variable.
4. This completes GWT SDK installer. To verify the installation, try opening a command prompt and run the command “webAppCreator”. If it asks for arguments, the installation can be considered as done for now.

Eclipse plug-in Installation:

1. Open the eclipse editor.
2. Go to Help ->Install New Software
3. Add GWT plug-in update site as http://dl.google.com/eclipse/plugin/3.3 or http://dl.google.com/eclipse/plugin/3.4 or http://dl.google.com/eclipse/plugin/3.5 depending on the eclipse version.
4. Select the above site and follow the instructions to install GWT plug-in in eclipse. Select the appropriate GWT version in intermediate screen.
5. At this point, we would be able to see extra icons (Google Compile, Create GWT Web application) in Eclipse command bar.
6. If at any point of time, we want to change the GWT SDK version to its standalone version, we can change by following two simple steps.
1. In eclipse, go to Window ->Preferences -> Google -> Web Toolkit
2. Click on add, and select the GWT installation directory such as C:\GWT and check the check box in front of it.

Creating first GWT Application:

1. To create a GWT application, simply create on icon in Eclipse Command bar to create GWT Web Application.
2. In the new dialogue screen, provide the details as below:
1. Project Name: Name of the project e.g. MyFirstProject
2. Package: the starting package for the web application e.g. com.first.myproject
3. Check the check box for GWT SDK and make sure the right version is selected.
4. Uncheck the checkbox for “Google App engine” and click finish.
3. At this point, “MyFirstProject” is created in the workspace with all required class path defined and a default entry point class named “MyFirstProject.java” in com.first.myproject package.
4. Right click “MyFirstProject” in workspace and select Google -> GWT compile. It should open a new dialogue showing “MyFirstProject” as entry point. Make sure it’s selected. If required change the logging options, and output style. Click on compile.
5. It should compile the “MyFirstProject” project without any error and “Compilation succeeded” should appear in workspace console.
6. To run the application, right click on “MyFirstProject” in work space and select Run As-> web Application. It should start the application in hosted mode. We should see two new windows open. One window is for GWT inline server console and other has the application start page having welcome message and “Click Me” button.
7. If all above steps passed successfully, congratulations!! Our first GWT web application is created and running in hosted mode at this point.
8. To run the application on any other web server such as Tomcat, just add the project to the server (if server is running within eclipse) or export the project as WAR file and deploy it on the web server.

Now let’s go through the most important section which is about understanding the GWT application components. We will consider above project as our example.

Understanding the GWT Application components:

1. If the above created project “MyFirstProject” is opened in navigator view, we can see following files.
1. Under “src” folder of the project, there will be full package structure i.e. com/first/myproject
2. Under the last folder i.e. mypoject, we should see two folders namely “client” and “public” and one xml file named as “MyFirstProject.gwt.xml”.
2. Client package a very important package and it’s used in the client module of the application. All the classes within this package should be self contained and shouldn’t have any reference to classes not available to client server including the server side code of the MyFirstProject project.
3. MyFirstProject.gwt.xml is the configuration file for the MyFirstProject project and all GWT specific configurations are to be made in the file including the constructs to include certain external files/components into client application.
4. Public package contains the generated HTML/JavaScript and is used as the starting page of the MyFirstProject application.
5. MyFirstProject.java extends com.google.gwt.core.client.EntryPoint class implements the method onModuleLoad () which is the starting point of the application.

To understand client/server concept of GWT, let’s create one simple dummy service and make use of it in the section below.

Working with GWT:

1. Assuming the GWT is installed and first application is successfully created, let’s enhance the “Click Me” button functionality to retrieve the greeting message from the server.
2. To achieve the above functionality, create an interface called GreetingService in com.first.myproject.client package @RemoteServiceRelativePath ("greet").
3. Add a method signature as below in GreetingService.java

public String getGreetMessage ();

4. Create another interface named GreetingServiceAsync in com.first.myproject.client package with a method signature as below:

public void getGreetMessage (AsyncCallback < String > callback);

5. Create a new package as com.first.myproject.server
6. Create a GreetingService implementation class named GreetingServiceImpl with a method as below:

public String getGreetMessage () {

      String welcomeMessage=”Welcome to the GWT world”;

 return welcomeMessage;

}

Note: Service interface and Service Async interface is created in client package while service implementation is created in server package.

7. Now open previously created entry point class named “MyFirstProject” and change implementation of button.addClickListener(new ClickListener() {.. as below:

button.addClickListener (new ClickListener () {

   public void onClick (Widget sender) {

          GreetingServiceAsync greetingService = (GreetingServiceAsync)GWT.create(GreetingService.class);

greetingService. getGreetMessage(new AsyncCallback() {

      public void onFailure(Throwable caught) {

            label.setText("server call failed!");

           }

          public void onFailure(String messageFromServer) {

            label.setText (messageFromServer);

           }

}

8. This completes the implementation of first asynchronous service call the server on click if “Click Me” button.

From the above example, it’s clear that in GWT application, there is a clear separation on client and server side code. Above all, every call to server is an asynchronous call and all the UI components are created in Java using style elements except the welcome page.