Using Google Web Toolkit for Developing Rich Internet Applications

Google Web Toolkit (GWT) is an open source framework for developing Rich Internet Applications. It lets developers create Ajax applications using the Java programming language, and it takes care of the rest by generating cross platform HTML/ Javascript (JS) code.

GWT simplifies writing Ajax enabled web applications by taking care of the JS code, since writing and debugging JS code is really hard. It is even harder to write cross platform JS code. Using GWT, developers only need to write pure Java code, and it is easy to debug Java thanks to various debuggers for the Java platform, and since the code base is Java, it is possible to catch various errors during compile time instead of facing them at runtime when using JS. Since GWT handles the Java-to-JS compiling, developers also do not need to worry about compatibility issues between browsers: you will have a single Java code base and it will work on several browsers without any effort. In addition, GWT provides internationalization support and JUnit integration for the web applications.

GWT applications consist of modules, and each module has a separate gwt.xml file. This configuration file defines the the entry point for module where the module usually renders the UI of the application, and registers handlers for the widgets. In this configuration file, we also specify the modules that this module inherits, and the themes it uses.

The client libraries of GWT provide several Widgets like Labels, Panels, or FormPanels to create user interfaces. The user interface and event handling model used by GWT Widgets is similar to Swing. For example to create a simple Button, and add an event handler for onclick events:

final Button submitButton = new Button("Upload File");
submitButton.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
      resumeForm.submit();
   }
});

GWT also supports Remote Procedure Calls (RPC) to perform both synchronous and asynchronous remote procedure calls to remote services. First, we define the interfaces for the service:

@RemoteServiceRelativePath("processFile")
public interface FileProcessingService extends RemoteService {
	String processFile(String fileName);
}

Then we provide the implementation:

public class FileProcessingServiceImpl extends RemoteServiceServlet implements
		FileProcessingService {
   public String processFile(String fileName) {
// Code for processing the file
      return fileName;
   }
}

Finally, to call the service first we create a proxy, and then we perform the actual method call:

private final FileProcessingServiceAsync fileProcessingService = GWT
		.create(FileProcessingService.class);
this.service.processFile(fileName, new AsyncCallback() {
   @Override
   public void onSuccess(String result) {
      statusLabel.setStyleName("serverResponseLabelOK");
      statusLabel.setText("Triggered File Processing Service");
      statusLabel.setVisible(true);
   }
   @Override
   public void onFailure(Throwable caught) {
      statusLabel.setStyleName("serverResponseLabelError");
      statusLabel.setText("RPC Failed");
   }
});

In the example, the service is called asynchronously, and so an AsyncCallback is defined to handle both success and failure cases. In addition as you see in the example, it is also possible to specify the CSS style for the widgets with the setStyleName method which takes a CSS class name as an argument.

In addition to these capabilities, GWT also supports Javascript Native Interface (JSNI) so it lets developers wrap existing JS code into GWT applications, and interact with the browser directly. You can find the documentation for JSNI here.

For developing GWT applications, there is a nice Eclipse plugin here. After the application is developed, to deploy it, you compile with the GWT compiler, and package your web application in a war file, and deploy it to your application server. To get you started you can download the sample application here. In this example, a FormPanel is created where a user enters his email address, and uploads a file to the server. To upload the file, there is a separate Servlet handling the file upload using the Apache Commons File Upload libraries. When the file is uploaded, a remote service is triggered by RPC, and that service post processes the uploaded file. Hence this example demonstrates the use of Widgets, and file upload mechanism in GWT, and it also demonstrates the use of using CSS styles with your Widgets, the Timers provided by GWT, and it uses the RPC capabilities of GWT. Finally, the example shows how to package, and deploy a GWT application to an application server (in this example Apache Tomcat 6.0.20) using Ant. Before deploying the application, please do not forget to modify the build.properties to set the directories for your GWT installation, and Tomcat installation directory.