Google Web Toolkit GWT Java AJAX Programming

AJAX applications are great for creating web applications that are highly interactive and provide a great user experience, while being comparable to desktop applications in functionality, without the hassle of downloading or installing anything.

AJAX applications combine XML data interchange along with HTML and CSS for styling the interface, the XMLHttpRequest object for asynchronous communication with the server application, and JavaScript for dynamic interaction with the provided data. This enables one to build applications that are part of the Web 2.0 revolution—web applications that rival a desktop application in responsiveness. We can build web pages using AJAX to communicate with the server in the background, without reloading the page. We can even replace different sections of the displayed web page without refreshing the page. AJAX, finally enables us to take the traditional desktop-oriented applications, such as word processors, spreadsheets, and drawing programs, and serve them to users via the Web.

The GWT provides a Java-based development environment that enables you to build AJAX applications using the Java language. It encapsulates the XMLHttpRequest object API, and minimizes the cross-browser issues. So, you can quickly and efficiently build AJAX applications without worrying too much about tailoring your code to work in various browsers. It allows you to leverage the Standard Widget Toolkit (SWT) or Swing style programming by providing a framework that enables you to combine widgets into user interfaces. This is a great way to improve productivity and shorten your development time lines, by leveraging your knowledge of the Java programming language and your familiarity with the event-based interface development framework.

GWT provides a set of ready-to-use user interface widgets that you can immediately utilize to create new applications. It also provides a simple way to create innovative widgets by combining the existing ones. You can use the Eclipse IDE to create, debug, and unit-test your AJAX applications. You can build RPC services to provide certain functionalities that can be accessed asynchronously from your web applications easily using the GWT RPC framework. GWT enables you to integrate easily with servers written in other languages, so you can quickly enhance your applications to provide a much better user experience by utilizing the AJAX framework.

By the end of this book you will:

We are going to download GWT and its prerequisites, install them to the hard disk, and then run one of the sample applications shipped with the GWT distribution to ensure that it works correctly.

Time for Action—Downloading GWT

In order to use the GWT, you will need to have Java SDK installed. If you do not already have the Java SDK, you can download the latest version from http://java.sun.com/javase/downloads/. Install the SDK using the instructions provided by the download for your platform.

Note

Java 1.4.2 is the safest version of Java to use with GWT, as it is completely compatible with this version, and you can be sure that your application code will compile correctly. GWT also works with the two newer versions of the Java platform—1.5 and 1.6; however, you will not be able to use any of the newer features of the Java language introduced in these versions in your GWT application code

Now, you are ready to download GWT:

1. 1. GWT is available for Windows XP/2000, Linux, and Mac OS X platforms from the GWT download page (http://code.google.com/webtoolkit/download.html). This download includes the GWT compiler, hosted web browser, GWT class libraries, and several sample applications.

   Please read the Terms and Conditions of usage before downloading it. The latest version available is 1.3 RC 1, released December 12, 2006. Select the file for your platform. Here is a sample window showing the versions available for GWT:

1. 2. Unzip the downloaded GWT distribution to your hard disk. It will create a directory named gwt-windows-xxx on Windows and gwt-linux-xxx on Linux, where xxx is the version number of the downloaded distribution. We will refer to the directory that contains the unzipped distribution as GWT_HOME. The GWT_HOME directory contains a samples folder with seven applications.

2. 3. In order to ensure that the GWT is correctly installed, run the Hello sample application for your platform by executing the startup script for your platform (the executable scripts for Windows have the extension .cmd and the ones for Linux have the extension .sh).

   Execute the Hello-shell script for your platform. Here is a screenshot of the Hello application running successfully in the hosted GWT browser:

• Click on the Click me button and you will get a dialog box as follows:

What Just Happened?

The GWT_HOME directory contains all the scripts, files, and libraries needed for GWT development, which are as follows:

• doc: This directory contains the API documentation for the various GWT classes. The API documentation is provided in two formats—the Google custom format and the familiar javadoc format.

• samples: A directory that contains the sample applications.

• gwt-*.jar: These are the Java libraries that contain the GWT classes.

• index.html: This file is used as Readme for the GWT. It also provides a starting point for the GWT documentation along with pointers to other sources of information.

• gwt-ll.dll and swt-win32-3235.dll: These are Windows' shared libraries (Windows only).

• libgwt-11.so, libswt-gtk-3235.so, libswt-mozilla17-profile-gcc3-gtk-3235.so, libswt-mozilla17-profile-gtk-3235.so, libswt-mozilla-gcc3-gtk-3235.so, libswt-mozilla-gtk-3235.so, and libswt-pi-gtk-3235.so: These are Linux shared libraries (Linux only).

• applicationCreator: This is a Script file for creating a new application.

• junitCreator: This is a Script file for creating a new JUnit test.

• projectCreator: This is a Script file for creating a new project.

• i18nCreator: This is a Script file for creating internationalization scripts.

When you executed Hello-shell.cmd, you started up the GWT development shell and provided the Hello.html file as a parameter to it. The development shell then launched a special hosted web browser and displayed the Hello.html file in it. The hosted web browser is an embedded SWT web browser that has hooks into the Java Virtual Machine (JVM). This makes it possible to debug the Java code for the application, using a Java development environment such as Eclipse.

Here is a screenshot of the development shell that starts up first:

There's More!

You can customize several of the options provided to the GWT development shell on startup. Run the development shell, from a command prompt, in the GWT_HOME directory to see the various options available:

@java -cp "gwt-user.jar;gwt-dev-windows.jar" com.google.gwt.dev. GWTShell help

You will see a screen similar to this one:

If you want to try out different settings, such as a different port numbers, you can modify the Hello-shell.cmd file to use these options.

The Linux version of GWT contains 32-bit SWT library bindings that are used by the hosted web browser. In order to run the samples or use the GWT hosted browser on a 64-bit platform such as AMD64, you need to do the following:

• Use a 32-bit JDK with 32-bit binary compatibility enabled.

• Set the environment variable LD_LIBRARY_PATH to the Mozilla directory in your GWT distribution, before starting the GWT shell.

Google provides a set of sample applications with the GWT distribution, which demonstrate several of its features. This task will explain how to run one of these samples—the KitchenSink application.

Time for Action—Getting into KitchenSink

There are seven sample applications provided with the GWT distribution—Hello, DynaTable, I18N, JSON, KitchenSink, SimpleXML, and Mail, each of which demonstrates a set of GWT features. In this task, we will explore the KitchenSink sample application, as it demonstrates all of the user-interface widgets that are provided with GWT. So, let's get into KitchenSink:

1. 1. Run the KitchenSink application for your platform by executing the KitchenSink-shell script in the GWT_HOME/samples/KitchenSink directory. Here is the KitchenSink application:

1. 2. Click on the Compile/Browse button. The KitchenSink application will be automatically compiled and the system browser for your platform will start up and display the KitchenSink application.

2. 3. Explore the application by clicking on each of the widget names in the navigation tree on the left. The frame on the right will display the selected widget and its variations. We will be using most of these widgets to build AJAX applications in later tasks.

3. 4. You can add the KitchenSink sample as an Eclipse project to your workspace and browse the Java source code that is eventually compiled into HTML and JavaScript by the GWT compiler. We can use the projectCreator file helper script provided by GWT to generate the Eclipse project files for the KitchenSink application.

4. 5. Navigate to your GWT_HOME directory and run the following command in a command prompt.

   projectCreator.cmd -eclipse -ignore -out samples\KitchenSink
   
   

   • This will create the Eclipse platform project files, which can be imported into your Eclipse workspace. We will learn more about this script in the next chapter, when we create a new application from scratch.

5. 6. Import the samples/KitchenSink/.project file into your Eclipse workspace. You can follow the above steps for each of the sample projects to generate their Eclipse project files, and then import them into your workspace. Here is an Eclipse workspace displaying the KitchenSink.java file:

If you know how to program in Java, you can build an AJAX application using GWT, without any exposure to the complexities of either the XMLHttpRequest object API or the variations in the various browser implementations of the XMLHttpRequest object API.

What Just Happened?

The GWT development shell starts up, and runs the hosted web browser with the KitchenSink application running in it. The shell contains an embedded version of the Tomcat servlet container that listens on port 8888. When you run in the web mode, the application is compiled into HTML and JavaScript from Java. The compiled application is stored in the KitchenSink/www directory, and this directory itself is registered as a web application with Tomcat. This is how Tomcat is able to serve up the application to requesting web browsers.

As long as the development shell is running, you can even use other external web browsers to connect to the KitchenSink application by using the URL http://localhost:8888/com.google.gwt.sample.kitchensink.KitchenSink/KitchenSink.html.

However, when we use an external browser to connect to the development shell, we cannot use breakpoints, and thus lose the debug capabilities provided when we run the application using the hosted browser. In order to access the application from another computer, ensure that you use either a DNS-resolvable machine name or the machine's IP address instead of localhost.

GWT consists of four main components that are layered together to provide the framework for writing AJAX applications using the toolkit:

• GWT Java-to-JavaScript Compiler: You use the GWT compiler to compile your GWT applications to JavaScript. The application can then be deployed to a web container. This is referred to as running in web mode. When you click on the Compile/Browse button, the Java code for the KitchenSink project is compiled by the Java-to-JavaScript compiler into pure HTML and JavaScript. The resulting artifacts are copied automatically to the KitchenSink/www folder.

• GWT Hosted Web Browser: This enables you to run and execute your GWT applications as Java in the Java Virtual Machine (JVM) without compiling to JavaScript first. This is referred to as running in hosted mode. GWT accomplishes this by embedding a special SWT browser control that contains hooks into the JVM. This special browser utilizes an Internet Explorer control on Windows or a Mozilla control on Linux. When you run the KitchenSink sample, the embedded SWT browser is what you see displaying the application.

• JRE emulation library: This contains JavaScript implementations of most of the widely used classes of the java.lang and java.util packages from the Java standard class library. Only some of the commonly used classes from these two packages are supported. None of the other Java packages in the JDK are currently part of this emulation library. These are the only classes that can be used by you for the client side of the AJAX application. You are of course free to use the entire Java class library for the server-side implementation. The Java code in the KitchenSink project is compiled into JavaScript using this emulation library.

• GWT Web UI class library: This provides a set of custom interfaces and classes that enable you to create various widgets such as buttons, text boxes, images, and text. GWT ships with most of the widgets commonly used in web applications. This is the class library that provides the Java widgets that are used in the KitchenSink application.

Check if the GWT license is appropriate for you. These are the main features that you need to keep in mind:

You can use GWT to build any application you want and distribute the application under any license. You can also distribute the Java, HTML, JavaScript, and any other content generated by the GWT, along with the GWT tools that were used to generate that content, as long as you follow the terms of the Apache License.

In this chapter, we learned about the basic components of GWT. We saw how to download and install GWT, and explored the GWT sample application. Finally, we discussed the licensing terms for GWT.

In the next chapter, we will learn how to create a new GWT application from scratch.