GWT Basics: AJAX Programming with Java

Prior to JavaScript and other client-side languages, Web browsers operated as if they were HTML dumb terminals, merely presenting Web pages generated on a server. For such pages, every user action requires a full page refresh, with a round-trip over the Internet, which degrades performance and thus user satisfaction. It may be fine for a great many websites, but it is completely inadequate for high-performance dynamic Web applications. Even e-commerce sites using wholesale page refreshes every time, find that users can encounter all kinds of problems. For instance, e-commerce sites often exhort customers to not use their browser's Back button while shopping online, and to not click the Submit button twice should the purchase page fail to respond. But what if the network hangs and customer does not know if the purchase went through?

Traditional use of JavaScript made it possible to embed functionality on the client-side, with far superior speed, by eliminating network traffic. It was — and continues to be — ideal for such needs as user form validation. But such JavaScript code does not communicate with the server, and thus has no way of accessing application data from a database, or even maintaining state in between page refreshes.

AJAX Overview

AJAX (Asynchronous JavaScript and XML) evolved in an effort to solve the aforesaid problems, by allowing the browser to communicate with the server, behind the scenes, without having to refresh the entire page. It accomplishes this by using JavaScript to only change that portion of the current Web page that needs to be changed. AJAX can make the user's browser behave more like a desktop application, combining server interaction with far greater performance than traditional server-side languages. AJAX is asynchronous in the sense that the needed data is obtained from the server and loaded without interfering with the display and behavior of the current Web page. The data is requested through use of the XMLHttpRequest object, and typically formatted in XML — hence the rest of the acronym.

But raw AJAX programming can be quite difficult, partly because AJAX code is typically quite daunting, and partly because Web browsers have implemented JavaScript differently, despite a convergence upon ECMAScript standards, promulgated by the European Computer Manufacturers Association (ECMA). As a result, AJAX programmers can spend much of their development time dealing with incompatibilities among browsers and operating systems.

GWT to the Rescue

Google's answer to these difficulties, is the Google Web Toolkit (GWT), an open source software development framework that allows the programmer to write Java code, which then gets translated into AJAX code. More specifically, the GWT compiler converts the Java classes into browser-compliant HTML and JavaScript code.

The key idea is that GWT is intended to make AJAX programming much easier — especially for programmers already adept with Java.

In this tutorial, I will show where to obtain GWT, how to install it, and how to get a demo application up and running. Due to space limitations, I will not be able to get into the details of all the capabilities offered by GWT, but I will show how to get started, and where the interested reader can go from there.

To begin, visit the main GWT page.

Click on the link to "Download Google Web Toolkit (GWT)", which takes you to the download page.

Click the link to download the latest version of GWT, which is, as of this writing, version 1.4. Older versions are available, but there is no advantage or reason to use one of them. GWT is available for Windows, Linux, and Mac OS X. In this tutorial, I will be using it in a Windows environment. However, the steps outlined below are applicable for Linux and Mac OS X.

Installing GWT

Before you begin the GWT installation process, verify that your target machine has a recent installation of the Java Runtime Engine (JRE). The GWT installation page states that you need the Java SDK (Software Development Kit) — a subset of which is the Java SE Development Kit (JDK) — but my testing suggests that only the JRE is needed. Most Internet users probably have the JRE installed on their machines, but not a full SDK.

If you have an earlier version of GWT already installed on your computer, remove it by simply deleting the contents of that directory. There is no need to go through any Windows application uninstall process, because the GWT installation does not use any sort of installer executable, does not add keys to the Windows Registry, and does not put an entry in the Control Panel's "Add or Remove Programs" applet.

Once you have finished downloading the GWT Zip file, extract its contents into a new or existing GWT directory, which can be thought of as the GWT root directory. (Henceforth in this tutorial, all directory paths will be relative to the GWT root directory.) The top level directories and files are shown in the figure below.

Running Sample Applications

The best way to verify your GWT installation, is by running one of the sample applications included in the GWT installation. I will start with the simplest one of all: the well-worn "Hello, world" example.

GWT applications can be run in one of two modes: hosted mode and Web mode. In the former mode, your application runs in the Java Virtual Machine (JVM). This is normally what you will use for debugging your GWT applications. In the latter mode, your application is first "compiled" into HTML and JavaScript code, and is run by your Web browser. Thus, the created files can be uploaded to a remote Web server, and run by any Internet user with a JavaScript-capable browser. That is not true for hosted mode, which can be thought of as the mode for running an application by interpreting its code within the JVM.

I will first try the Hello application in hosted mode. At the command line, navigate to the directory samples\Hello\ within your GWT root directory. Run the script Hello-shell.cmd. If Java and GWT have been installed correctly, then two windows should appear: the development shell and the hosted mode browser. The GWT development shell shown below indicates that it is starting an HTTP request on port 8888.

The development shell launches the Hello window, which looks much like a Web browser. The Hello application is running at the URL http://localhost:8888/com.google.gwt.sample.hello.Hello/Hello.html. This corresponds to the file Hello.html located in the directory samples\Hello\www\com.google.gwt.sample.hello.Hello\.

If you click on the button labeled "Click me", it pops up a dialog box that reads "Hello, AJAX".

The hosted mode browser is a child process of (i.e., dependent upon) the development shell window. Closing the latter will also close the former, if you click "Yes" at the confirmation dialog box that pops up.

The Java source code used to create this application, is located in samples\Hello\src\com\google\gwt\sample\hello\client\Hello.java. I will not discuss the details of the Java code, but it implements an EntryPoint class and a method thereof, onModuleLoad(). EntryPoint is a core GWT class, imported with several others — mostly user interface classes.

The HTML source code is simplicity itself; the operative line calls the JavaScript created by the Hello-shell.cmd script:

<script language="javascript" src="https://www.ross.ws/_writing/articles/GWT%20Basics%20AJAX%20Programming%20with%20Java/com.google.gwt.sample.hello.Hello.nocache.js"></script>

To run the sample application in Web mode, at the command line used earlier, run the script Hello-compile.cmd, which should report that the output was written into the directory samples\Hello\www\com.google.gwt.sample.hello.Hello. Then open the file www\com.google.gwt.sample.hello.Hello\Hello.html in a Web browser (in the figure below, Firefox). Make sure that your browser supports JavaScript (almost all do) and has JavaScript enabled.

The "Click me" button behaves just as it did in hosted mode.

Running a sample application is also the quickest way to get an idea of what GWT is capable of. For instance, the application KitchenSink illustrates a sizable portion of the controls available within GWT:

These controls include widgets, such as buttons, check boxes, and radio buttons:

Panels include basic panels, docking panels, and tables:

Lists include the regular drop-down boxes and lists that can be created using simple HTML, as well as more advanced lists, such as suggestion combo boxes and trees:

Text controls include regular entry fields, read-only fields, password entry fields, text areas, and even a built-in WYSIWYG editor.

Pop-up controls include simple pop-ups and draggable dialog boxes.

These are the most commonly used controls utilized for building user interfaces in GWT applications.

Resources

Google's GWT resources page has links to presentations, developer tools and libraries, articles and tutorials, books, a developer forum, a contributor forum, and an IRC channel on Freenode. In addition, the main GWT page mentioned earlier has links to blog entries, featured products, and user groups — all of which have RSS feeds

If you choose to explore AJAX development, and you wish to avoid the hassles of writing JavaScript that can handle the differences among browsers, then give GWT a try — especially if you have prior experience writing code in Java. Sun Microsystems may have failed to win widespread usage and development of Java applets, but Google may succeed with GWT applications.