Jump Start Your AJAX Development with the Google Web Toolkit

Introduction

Ever since Google Maps and Gmail came to existence and Jesse James Garrett in his February 2005 article titledAjax: A New Approach to Web Applications coined the term, a significant hype has been building around AJAX.

Although the name AJAX is relatively new, the technology itself is not. Asynchronous JavaScript and XML (AJAX) was around for more than a decade, before Google’s extensive usage of the technology in their applications such as Google Maps and Gmail made it popular and Jesse James Garrett’s article gave it a brand name. Most developers did not use it due to the lack of a 'proper' Integrated Development Environment (IDE) to write and debug JavaScript. Simply put; when your killer application complains of a JavaScript error at line 546, you do not want to be the one spending late nights trying to figure out what went wrong, with no other tool to help you, but a text editor with syntax highlighting at the most.

With time came an array of competing 'frameworks', which were supposed to make AJAX development a breeze. However, there was a problem. In most cases, these frameworks were JavaScript libraries, which the developers could import and use in their applications. It is a fact that they took some burden off the developers by providing a tried and tested set of AJAX widgets to use in their applications, but they still failed to address the fundamental issue highlighted in the previous paragraph, which is the lack of a functional IDE. Then, the people who started the AJAX hype came up with a solution, the Google Web Toolkit (GWT).

GWT consists of a set of libraries and command line tools, including a Java to JavaScript translator. It also includes its own testing environment based on Apache Tomcat, which can be used to launch and debug your AJAX application within the Eclipse IDE.

When one uses the GWT to develop an AJAX application with this approach, all the advanced development functionality in the Eclipse IDE become available automatically, including application testing with JUnit integration provided by the GWT and debugging.

The Google Web Toolkit addresses the development of an AJAX application in a very methodical manner. To summarize the steps;

1. Create an Eclipse project using the projectCreator and applicationCreator tools,
2. Write your AJAX application in Java, using the Eclipse IDE and GWT widgets,
3. Debug your code, using the Eclipse IDE and the GWT environment and
4. Finally, run the Java to JavaScript translator to generate the JavaScript.

Now that you have a basic idea of how the GWT approaches AJAX development, you can take a deep dive and create a 'Hello World' application.

Creating an Eclipse Project

First and foremost, download the GWT [1]. Once you have downloaded and extracted the archive, I recommend that you add the toolkit executables to your 'PATH' environment variable. This allows you to call the tools from anywhere using a command line.

After setting things up, you can create a pre-configured Eclipse project using the following command. This will create a project directory at the current location with the given name. However, you need an 'application' to start your work. In comes the second command. The following command will create a Java application inside your 'HelloWorld' project. It will have com.mycompany.client.MyApplication as its main class.

Note: All your AJAX client code should be inside a package namespace ending with '.client' (e.g., com.mycompany.client). The GWT translator will only look for code inside this package, while converting Java to JavaScript. You can not have other package names for your AJAX client, since those will be assumed by the translator as server side code.

cmdLine$ projectCreator -eclipse HelloWorld

Fig 1: Command outputs while creating the HelloWorld skeleton

Importing the Project into the Eclipse IDE

Now that you have finished creating the skeleton application (Fig 1), it is time to import it into the Eclipse IDE. Anyone familiar with Eclipse can do this easily using the File -> Import menu. Once imported into the Eclipse workspace, you can work with the client code just like you would with any other Java application (Fig 2).

Please note that the generated skeleton itself is a 'HelloWorld' application and it is not required for us to write any additional code in order to get it running.

Fig 2: Our Application imported into the Eclipse IDE

Running 'HelloWorld'

All the facilities provided by Eclipse to Java developers are available to you. Apart from that, the GWT provides a testing and debugging environment based on Tomcat as shown in Fig 3. All we have to do is to go to the Run -> Run menu in Eclipse and select MyApplication as the main entry point.

Fig 3: Preparing to launch our skeleton application

Fig 4: HelloWorld running in hosted mode

Translating the 'HelloWorld' client into JavaScript

If you browse to the directory containing your HelloWorld project, you will see that the GWT has created two shell scripts (.bat files for Windows users) named MyApplication-shell and MyApplication-compile. The first script launches the application outside the Eclipse IDE, if required. The important script at this point, however, is the second one. This script will call the GWT translator with the appropriate parameters, to compile our client Java code into JavaScript. This script will create a separate directory named 'www' with all the necessary JavaScript and HTML files required to host your AJAX web application client in a web server as depicted in Fig 5 and Fig 6.

Inside this directory you will find MyApplication.html, which is the starting point HTML for your application and gwt.js and other XML and HTML files containing the JavaScript generated by the GWT translator.

Fig 5: Translating our application to JavaScript

Fig 6: The 'www' directory contents

Conclusion

The Google Web Toolkit tries to address one of the fundamental issues of AJAX adoption using an effective approach. You saw how easy it was to get a simple HelloWorld application up and running with the tools available. The most important thing I must stress after this brief encounter is that all the tools in the GWT and Eclipse are non-proprietary Free and Open Source Software (FOSS). This means that they are available free of charge for all to use.

References

1. The GWT Home [2]
2. Eclipse IDE Home [3] 
3. Ajax: A New Approach to Web Applications; Article by Jesse James Garrett [4]
4. Getting started by google [5] (something like this page)