By Michael J. Ross
2008-03-10

Introduction

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 Web sites, 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, we will learn where to obtain GWT, how to install it, and how to get a demo application up and running. Due to space limitations, we will not be able to get into the details of all the capabilities offered by GWT, but we will see 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, we will be using it in a Windows environment. However, the steps outlined below are applicable for Linux and Mac OS X.