GWT Basics: AJAX Programming with Java
This article was published by DeveloperTutorials.com, .
GWT to the Rescue
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.
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.
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 "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