Original URL: http://www.theregister.co.uk/2006/06/26/google_gwt/

Googled by GWT - Part 1

Yes, Ermintrude, there is an alternative to AJAX...

By John Hunt

Posted in Developer, 26th June 2006 13:18 GMT

I have done a great deal of client oriented Swing-based work over the years. I admit to really enjoying this, as you get immediate feedback in terms of the UI you are developing and, when run within tools like Eclipse, a very rich development environment. I have always really liked the speed with which you can change some code, run it, debug it, make a change and continue debugging. This can be really useful for sorting out those niggly little logical or behavioural issues.

For me, this is one of the biggest weaknesses in the current crop of Web 2.0 development environments – the lack of a rich code-compile-execute-debug environment. I also have to admit to being one of those people who feels that while techniques such as AJAX (Asynchronous JavaScript And XML) help to provide a richer user experience, they require that the developer be master of too many different technologies (JavaScript, XML, CSS, HTML etc.).

Of course, despite being a hardened Swing programmer I too find the latest buzz around AJAX interesting; but am still left feeling that the whole programming model is at too low a level. It reminds me of the way in which I used to code X Windows applications nearly 20 years ago. What I really want from a Web 2.0 development environment is something at a higher level, more like Swing but for web applications.

In the past Echo looked like it might offer such an environment, with its Swing-like GUI components and event model – but it never really caught on. Now however, we have the Google Web Toolkit (GWT) – which, like Echo, is essentially a Swing-like Java development environment that generates HTML and JavaScript web applications. And, of course, it has Google behind it, which not only gives it a much higher profile but suggests that ongoing support will be available.

Overview

One major difference between Echo and GWT is that Echo dynamically generated the HTML and JavaScript it sent to the client, while GWT performs a once only translation of the pure Java GUI into the HTML / JavaScript equivalent – which offers not only better performance but the possibility that the deployment environment may not involve Java at all!

So what is GWT – essentially it is a set of Java GUI components, that lets a developer create a web client application within an IDE such as Eclipse, then test and debug this client before generating a pure HTML and JavaScript runtime client (GWT can be downloaded from here).

GWT provides four primary components, these are:

GWT applications can be run in two modes:

  1. Hosted mode - In hosted mode, a GWT application is implemented as a pure Java application running within a single JVM. GWT implements hosted mode by providing a simple web server like component (the GWT Development shell) and special web browser. This allows you to view and test your application within a pure Java world using tools such as Eclipse and the Eclipse debugger (see below).
  2. Web mode - In web mode, the GWT application runs as pure JavaScript and HTML. This is the JavaScript and HTML code that is generated from your Java classes, using the GWT Java-to-JavaScript compiler. When you deploy your GWT applications into a production environment, you will deploy the JavaScript and HTML version to your web servers. Thus, it is this version that will be used by the running environment.

To develop a GWT application, the normal development cycle would be:

  1. Using an IDE such as Eclipse, create the GUI client, execute, and test and debug this within the IDE's debugging environment/runtime environment. Once you are happy with the behaviour of the client …
  2. … convert the GUI client into JavaScript and HTML using the GWT’s Java-to-JavaScript compiler.</li
  3. Test your application in each supported web browser.

The easiest way to get started with GWT is to create an appropriate application structure, which can be done in any IDE. However, GWT comes with direct support for the Eclipse IDE, which is what we'll use in the example below.

Setting up an Eclipse GWT project

GWT comes with a command line utility called applicationCreator. This handy little tool automatically generates all the files you'll need in order to start a GWT based Eclipse project. This is done by specify –eclipse and the name of your project, for example:


c:\javalibs\gwt-windows-1.0.21>projectCreator -eclipse HelloWorld

Created directory c:\javalibs\gwt-windows-1.0.21\src

Created file c:\javalibs\gwt-windows-1.0.21\.project

Created file c:\javalibs\gwt-windows-1.0.21\.classpath

Once you have done that you can use the applicationCreator tool to construct the basic structure of your application for you. For example:


c:\javalibs\gwt-windows-1.0.21>applicationCreator -eclipse HelloWorld com.regdev

.client.HelloWorldApplication

Created directory c:\javalibs\gwt-windows-1.0.21\src\com\regdev

Created directory c:\javalibs\gwt-windows-1.0.21\src\com\regdev\client

Created directory c:\javalibs\gwt-windows-1.0.21\src\com\regdev\public

Created file c:\javalibs\gwt-windows-1.0.21\src\com\regdev\HelloWorldApplication.gwt.xml

Created file c:\javalibs\gwt-windows-1.0.21\src\com\regdev\public\HelloWorldApplication.html

Created file c:\javalibs\gwt-windows-1.0.21\src\com\regdev\client\HelloWorldApplication.java

Created file c:\javalibs\gwt-windows-1.0.21\HelloWorldApplication.launch

Created file c:\javalibs\gwt-windows-1.0.21\HelloWorldApplication-shell.cmd

Created file c:\javalibs\gwt-windows-1.0.21\HelloWorldApplication-compile.cmd

Note the use of the –eclipse option in the applicationCreator command above. This ensures the tool creates the correct structure for Eclipse. If you do not include –eclipse then the structure created is essentially the same but without the Eclipse specific elements. For example, instead of a HelloWorldApplication.launch file you will get some scripts such as a script called MyApplication-shell and a compilation script called MyApplication-compile that will allow you to compile and run your GWT application etc.

There is actually guidance provided by Google on the best structure for a GWT project. This is useful information, as some elements of a GWT project may not be where you expect them to be.

Once you have done that, you can import your new GWT project into Eclipse. In my version of Eclipse, I did this by creating a new project from an existing resource (as illustrated in Figure 1).

Screenshot illustrating creating the new Java project (Figure 1).

The end result is that I now have an Eclipse project containing the skeleton of a GWT project with some sample code that I can now edit. This is illustrated in Figure 2.

Screenshot illustrating the skeleton GWT project (Figure 2).

Indeed, so much has been done for you that you can now run this application as it stands from within Eclipse. I did this by selecting the green Run option and then selecting the HelloWorldApplication configuration under the Java Application node in the right hand tree. This ran immediately starting the GWT project in hosted mode. The result was that the screen in Figure 3 was displayed.

Screen shot showing Hello World application displayed (Figure 3).

One really nice feature of this was that it was trivial to use the Eclipse debugger to place break points within your code to test out various logical or functional elements.

Remember that in Hosted Mode your application runs in a pure Java environment that makes Java oriented debugging straight-forward and provides a very Swing like feel to the whole development experience. Web mode on the other hand represents the way in which the deployed application will run – that is as AJAX hosted on an appropriate server. As some issues may be introduced in this compilation, merely testing within the Host environment is, I think, not sufficient to be sure that there will be no problems in the web mode version of the application.

Dissecting A GWT application – the next article

In the next part of this column, we will look in detail at the simple GWT application built above. ®