Home > Articles > Programming > Ajax

Software Engineering for Ajax Using the Google Web Toolkit

  • Print
  • + Share This
This chapter looks at how to use the Java software engineering tools in GWT to build nontrivial high-quality Ajax applications.
This chapter is from the book

This chapter is from the book

Perhaps the greatest advantage of using the Google Web Toolkit to build Ajax applications is having the capability to leverage advanced software engineering. JavaScript was never meant to be used to build large applications. It lacks language features that assist in code organization and compile-time type checking. It also lacks mature tools for building large applications, such as automation, integrated development environments, debugging, and testing. This chapter looks at how to use the Java software engineering tools in GWT to build nontrivial high-quality Ajax applications.

Setting Up the Development Environment

To build applications with GWT, you need the Java Development Kit (JDK) 1.4 or greater. Many other Java tools can also assist with your development, such as an IDE like Eclipse or a build tool like Ant. All of these tools bring a lot of value to the process of building Ajax applications. It is important to note that users don't need any of these tools to use your application. They do not even need to have Java installed on their computer; they only need a reasonably modern web browser like Firefox, Internet Explorer, Safari, or Opera. The GWT compiler compiles your application so it conforms to web-standard technology.

Installing the Java Development Kit

The JDK, a package provided by Sun Microsystems, includes the Java Runtime Environment (JRE), which is required to run Java programs on your computer, and command line developer tools which let you compile Java classes to create code that can run. The JDK is on Sun's web site at http://java.sun.com/javase/downloads.

You can choose from several options to download, but the minimum you need is the JDK without anything else bundled. Some options come with NetBeans or Java EE, but these are not required. There is also a download option for JRE, but this does not include the developer tools that you need.

Once you download the JDK (approximately 50MB), you need to install it. On Windows, the download is an executable file that runs the installation. Install the JDK with all the default options.

Installing the Google Web Toolkit

The GWT complements the JDK by adding the ability to compile your Java code to JavaScript so that it can run in a web browser without the Java Runtime Environment. Think of the GWT as another compiler to run Java on a new platform—your web browser. It also provides a hosted mode browser that lets you take advantage of Java's powerful debugging features, just like you would debug a normal Java application. JavaScript debugging tools are primitive compared to what Java and GWT allow you to do. You can find the Google Web Toolkit SDK at http://code.google.com/webtoolkit/download.html.

On Windows, the GWT zip file is approximately 13MB. After you download it, extract the file to your preferred installation directory. On Mac and Linux you can extract the download using this tar command:

tar xvzf gwt-mac-1.3.3.tar.gz

Let's look inside the distribution. The following list gives you a brief overview of the important files that come with GWT.

  • gwt-user.jar

    This is the GWT library. It contains the Java classes that you use to build your application with GWT. Your application uses this file when you run it in hosted mode, but this file is not used when your application is deployed, since your application code and the code used in this file are translated to JavaScript.

  • gwt-servlet.jar

    This stripped down version of gwt-user.jar has the classes required for the server side of your application. It is much smaller than gwt-user.jar and better for deployment since it does not contain the GWT classes that are required for hosted mode.

  • applicationCreator

    This script produces the files required to start a GWT application. The generated files produce a runnable bare-bones GWT application.

  • projectCreator

    This script generates project files for an Eclipse GWT project.

  • junitCreator

    This script generates a starter test case along with scripts that start the tests in web mode and hosted mode.

  • i18nCreator

    This script generates an interface based on a properties file for internationalizing an application.

With only the JDK and GWT installed, you can write, run, and compile web-based applications.

For convenience, you should put the GWT installation directory on your path so that you can call the GWT scripts without specifying the full installation path each time. For example, if you installed GWT to c:\code\gwt (this is a Windows path; for Mac and Linux you would similarly use your install path), you would add this to your PATH variable. Then at a command line you can run the applicationCreator script inside your application directory without specifying the script's full path, as shown in Figure 4-1.

Figure 4-1

Figure 4-1 Running the applicationCreator script for a GWT project

Running this script creates the application named HelloWorld in the current directory. It also generates scripts that let you run the application. You can run this application by just typing the following line:


Running this generated script causes GWT to load its hosted browser, which in turn loads the generated application. The hosted browser displays the default generated application, as illustrated in Figure 4-2.

Figure 4-2

Figure 4-2 Running the default generated project in hosted mode

You can also compile the application so that it can be used in a standard browser using the generated HelloWorld-compile script, as seen in Figure 4-3.

Figure 4-3

Figure 4-3 Compiling the project from the command line

The compile script builds the HTML and JavaScript files, which you need to deploy the application, and copies them to the www directory in your application directory, as shown in Figure 4-4.

Figure 4-4

Figure 4-4 The files generated from compiling a GWT project

The generated application can be run in any browser by simply loading the host file. In this HelloWorld application, the host file is named HelloWorld.html. Loading this file in Firefox, as shown in Figure 4-5, results in the same application as in GWT's hosted browser in Figure 4-2, with the major difference being the lack of any Java dependency.

Figure 4-5

Figure 4-5 The default project compiled and running in Firefox

So you can see that the minimum environment for building web applications with GWT is small, only requiring GWT and the JDK to be installed. However, you'll be able to speed up the development process by using many of the available Java tools. For example, an IDE like Eclipse is usually used to speed up Java development.

Installing Eclipse

Eclipse is an open source IDE developed in Java and supported by major technology companies including IBM. An IDE allows you to write, organize, test, and debug software in an efficient way. There are many IDEs for Java, and you can use any of them for GWT development. If you do not have a Java IDE installed, I suggest using Eclipse since it works very well and has support with the GWT scripts to help integration.

Eclipse lets you write, organize, test, and debug your GWT Ajax applications in a productive way. It has great support for the Java language, including refactoring and content assist.1 You can develop using many languages through plugins with Eclipse by taking advantage of Eclipse's rich plugin framework, but the most widely used language is Java. You can find the Eclipse download at www.eclipse.org/downloads.

Select the Eclipse SDK from this page. After you download the file (approximately 120MB), extract the file to your preferred installation directory. On Windows, the default location for the file eclipse.exe is in the root of the installation directory; you may want to create a shortcut to the file since you will be using it frequently to edit and debug your code.

  • + Share This
  • 🔖 Save To Your Account