AJAX Programming with Java
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?
functionality on the client-side, with far superior speed, by
eliminating network traffic. It was — and continues to be — ideal for
communicate with the server, and thus has no way of accessing
application data from a database, or even maintaining state in between
the aforesaid problems, by allowing the browser to communicate with the
server, behind the scenes, without having to refresh the entire page.
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
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
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.
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"
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. We will start with the simplest one of all: the well-worn "Hello, world" example.
We 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. We 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 "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.
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
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
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.