X
Business

Getting started with Google Web Toolkit (GWT)

Start with some Java, add a pinch of Eclipse, stir in the Google Web Tookit, and before you know it you're developing and debugging Ajax code from the comfort of your favorite IDE. Take a sip with this walkthrough with screenshots.
Written by Ed Burnette, Contributor

Getting started developing with Google Web Toolkit is easy. First you need a copy of Java. Although it works with older versions (such as the IBM JRE 1.4.2 that came with my Thinkpad), you might as well get the latest Sun JDK 5.0 update or the latest JDK 6.0 snapshot.

Note: Sun has a taken a page from Microsoft's playbook and bundled their NetBeans IDE in the 5.0 JDK. However this is often an *older version* of the JDK (for example as of this writing it's back at update 6 while the regular JDK download is at update 7), and this kind of bundling should be discouraged anyway. Fortunately, you can still get just the plain JDK without NetBeans and save yourself 70MB of extra downloading at the same time.

Second, you need a copy of the Eclipse IDE. Although it should work with Eclipse 3.1.2, you might as well get the latest Eclipse 3.2 release candidate. Go to the Eclipse downloads page, pick 3.2RC6 (or later), and then get the Eclipse package for your platform (Windows, Linux, Mac, etc.). You can either get the full SDK (the one that has all the sources and programmer documentation), or you can just get the Platform Runtime Binary (34MB) plus the JDT Runtime Binary (19MB), for a total of 53MB.

Note: In a future version of Eclipse I hope this will be easier, perhaps with an install program and better compression that will make it even smaller and easier. But for now, you have to use a zip or gzip program to unpack it yourself.

Next, download and unzip the Google Web Toolkit itself and you're ready to create your first project.  

Note: Right now there are no Eclipse plug-ins to create a GWT project so you have to do some manual steps at this point. Hopefully that void will be filled soon.

At a command prompt, run these commands (Substitute the appropriate paths for your system):

cd c:\gwt-projects
mkdir MyProject
cd MyProject
projectCreator -eclipse MyProject
applicationCreator -eclipse MyProject \
   com.mycompany.client.MyApplication

The projectCreator and applicationCreator commands are two shell scripts that are supplied as part of GWT, so you'll need to specify the path to them or add the GWT directory to your system PATH variable. "MyProject" and "MyApplication" are just example names; you can use anything you want.

Now start up Eclipse and import this project into your workspace (File > Import > Existing Projects Into Workspace). The project will build and if all is successful you will end up with something like this:

Burnette_gwt_project.png

If you follow Google's Getting Started instructions it says to just click on the green "Run" button to get your project started in "hosted" mode, but that's not quite correct. Plus, you'll want to run the program in Debug mode most of the time anyway. So select Run > Debug..., and click on the launch configuration titled MyApplication (under Java Application). Then click on Debug. Two windows will appear: The GWT Development Shell (this is kind of like a console window) and the Wrapper HTML window (a special web browser).

Burnette_gwt_MyApplication.png
 

Verify that the application works by clicking on the 'Click me' button. The text "Hello World!" will appear.

Ok, now for the neat part. Leave the application running and switch back to the Eclipse window. Set a breakpoint in the onClick() method in MyApplication.java by double-clicking the "gutter" area next to the line:

 
Burnette_gwt_MyApplicationBreakpoint.png

Then switch over to the application window and click the 'Click me' button. Eclipse will stop at the line in your Java code where you put the breakpoint. Hmm, that's Java code, yet you're writing an Ajax application that will eventually be deployed in pure JavaScript. All the power of Eclipse, the debugger, refactoring, source management, etc. is suddenly available in the Ajax world. Can you begin to see the potential of this technology?

Well that's enough for now. Google has put together some pretty nice documentation on GWT but I'll be writing more about it from my own unique perspective as I put it through its paces. Let me know if there are any particular areas you want me to explore, and be sure to check out the GWT Forum for support from all the other GWT users and developers.

Editorial standards