Software Engineering for Ajax - Part 2 / Page 4
Software Engineering for Ajax - Part 2 [con't]
Building and Sharing Modules
Each GWT module is not necessarily a full application, but it can be used as a reusable library for other applications instead. The GWT module structure, also used for applications, gives you the tools necessary to package your module and share it with other applications. In fact, GWT itself is divided into several modules, as you've seen with the user interface, XML, JSON, HTTP, and RPC modules, so you've already used the process of importing other libraries.
Using Modules
GWT modules are distributed as jar files that you can include in your application by adding them to your project's classpath and inheriting their project name in your application's module file. This is the same process that you use to include the GWT library classes in your application. In this case GWT automatically adds the modu le jar file, gwt-user.jar, to your project's classpath when you generate the project using the GWT createProject script. The createApplication script then generates a module XML file for your applic ation and automatically adds the com.google.gwt.user.User module to it. When we generate the module XML file for the Gadget Desktop application in Chapter 6, we get the following XML:
This module file tells the GWT compiler how to compile the application to JavaScript. The inherits element tells the compiler that we are using classes from the name module, which will also need to be compiled to JavaScript. We can continue to add modules from gwt-user.jar since the file is are already on the classpath. For new modules in other jar files, we first need to add the jar to the classpath. In Eclipse, you can do this by going to the project's Properties dialog and selecting the Libraries tab from Java Build Path, as shown in Figure 4-46.
From here you can add and remove jar files. Notice that gwt-user.jar is already in the list. For the Gadget Desktop application we add the gwtgoogle-apis library to the project to use the Gears module from it. First, we add the gwt-google-apis jar to this list, and then the application's module XML file inherits the Gears module like this:
Notice also that this project imports the JSON and XML modules which are already in the gwt-user.jar file. If you miss this step--adding the inherits tag to your application's module file--you will get an error from the GWT compiler that it can't find the module that you're using.
Creating a Reusable Module If you've built a GWT application, you've already built a reusable module. The only difference is that your application has specified an entry point and can be turned into a GWT application loaded on its own in the GWT hosted mode browser or web browser. You could reference the application's module file from another application to reuse its components.
You create a module the same way you create an application, using GWT's applicationCreator script. You may want to use the ant flag with this script to build an ant file that will automatically package your module in a jar file for distribution.
The module structure of GWT is hierarchical using inheritance. For example, if you write a module that inherits GWT's User module, then any module or application that uses your module also automatically inherits GWT's User module. This is an important feature, since it allows the users of your module to automatically get all the requirements to run. GWT takes this concept further and lets you also inject resources into modules to ensure CSS or other JavaScript libraries are automatically included.
For example, if you were creating a module of widgets that required default CSS to be included, you could reference this in the module XML like this:
The widgets file would need to be included in your module's public files, and when other modules inherit your module they would automatically get the widgets.css file without directly including it.
You can similarly include JavaScript in your module using the script tag like this:
This tag is similar to the script tag that you would use in your HTML file to include a JavaScript library, except that this file would be automatically included with every module that includes this module.
As of GWT 1.4 you can use image bundles to include resources with your reusable modules. Image bundles allow you to package several images together into a single image for deployment. If you use an image bundle within your module, applications that use your module will automatically generate the single image. In Chapter 6, images bundles are used to build the Gadget toolbar in the Gadget Desktop application.
Sharing a Compiled Application (Mashups)
Sometimes you'd like to share your compiled JavaScript application for use on other web sites. As of GWT 1. 4, other web sites can easily load your application using the cross-site version of the generated JavaScript. The cross-site version has -xs appended to the package name for the JavaScript file name, and you can find it in the www directory after compiling an application. For example, to include the Hangman application developed in Chapter 1, you would use the following script tag:
Notice that this line differs from the line found in the original host HTML page for the application; it has the addition of -xs in the filename and is loading the script from the gwtapps.com domain.
Each application that you share may have additional requirements for integration on another site. In the Hangman example, the application looks for an HTML element with the ID hangman, so anyone including this on their site would need to also have the following HTML in the location where they'd like the Hangman application to show up:
Deploying Applications
Deploying a GWT application can be as easy as deploying a regular web page. A simple GWT client is made up of HTML and JavaScript files that can be copied to a directory on a web server and loaded into a browser. For example, the Gadget Desktop application in Chapter 6 does not use any server-side code, so its files for deployment are simply its JavaScript files, several image files, and the host HTML file. You can install this application on any web server simply by copying the files.
Deploying to a Web Server
You've seen how to set up development environments with Java tools, run the GWT scripts, and use the GWT jar files, but for a client-side application these files are left on the development machine. You simply need to run the GWT compile script, or click the Compile button in the GWT hosted mode browser, to generate th e files needed for deployment. For example, compiling the Gadget Desktop application can be done from the command line. Or it can be compiled from the hosted mode browser, as shown in Figure 4-47. GWT places these files in a directory named after your application inside the www directory for your project, as you can see in Figure 4-48. This is the file list that you would copy to a directory on your web server.
Deploying a Servlet to a Servlet Container
If you are using GWT-RPC, you will need to deploy your service implementation to a servlet container. Although the GWT hosted mode browser runs an embedded version of Tomcat, deploying to a regular Tomcat instance is somewhat different. If you are deploying to Tomcat, you'll need to add your application to its webapps directory. Figure 4-49 outlines the steps to add your application to Tomcat's directory structure.
Let's look at the five steps shown in Figure 4-49. First you need to locate the installation directory for Tomcat. Second, you need to create your application directory under the webapps directory. Third, you need to set up your web.xml file in the WEB-INF directory for your application. For the Instant Messenger application, the file looks like this:
Fourth, copy your servlet class to the class' directory in the WEB-INF directory. Finally, fifth, copy the gwt-servlet.jar file to the lib directory in the WEB-INF directory. The gwt-servlet.jar file has the GWT classes required to support the server-side RPC. You could use gwt-user.jar instead, but gwt-servlet.jar is smaller and therefore preferred. Deployment can be automated by using a build tool such as Ant.
Automating Deployment with Ant
As you can see from the previous section, deployment to a server container often involves many steps of compiling code, copying files, and creating directories. When a task involves many steps like this, it is best to automate the process. Ant is the ideal Java tool for automating build tasks like this. With it you can accomplish all of the previous steps of deploying a GWT web application with one Ant step.
Ant is a command line tool that accepts an XML build file. The build file contains a list of build targets with steps to accomplish build tasks. There is rich support for different types of steps, including copying files, creating directories, and compiling code. The Ant system is also extensible, so you can develop new steps or add new steps from other developers.
Let's run through an example of how to build a GWT application for use on a servlet container with Ant. First, verify that you have Ant installed and in your path. You should be able to type ant -version at the command line, as shown in Figure 4-50.
If you don't have Ant installed, you can download it from http:// ant.apache.org. After ensuring that An t is installed on your development machine, you can write a build.xml file for a project. The following is the build.xml file we will use:
The file begins by defining a project element with a default target. This target is run when one is not specified on the command line. The first few elements inside the project tag are property definition elements. You can place variables in these elements that will be reused throughout the build file. For example, in this file we have the source directories and jar directories set for use later. Inside the attributes you can see how the properties can be referenced with the ${name} format. Before the targets are defined in the file, we set a path element. This element lists the jar files and directories that are on the classpath. We use this classpath later and can refer to it by its ID.
The first target, compile-gwt, runs the GWT compiler on our GWT module. The module is not specified in this target. Instead the ${app} placeholder is used. We have not defined th is as a property, but we can pass in this variable as a command line argument. This gives the build file the flexibility of being used for more than one application. Running this target generates the compiled JavaScript files for the application and copies all of the public files used for the project to the www directory.
The second target, compile, uses the regular javac compiler to compile all of the other Java class files. These are class files that will be needed on the server and will include the GWT-RPC service servlet if one is used. The Ant script copies these class files to the www directory under WEB-INF/ classes. This is the standard location for class files for a servlet container web application.
The final target, deploy, copies the required GWT library, gwt-servlet.jar, to the WEB-INF/lib directory. This is the standard location for jar files for a servlet container web application. The target also copies a predefined web.xml file to the www directory. The web.xml file is required to describe the servlets in the web application.
Running the task for the Instant Messenger application in Chapter 9 results in the output shown in Figure 4-51. Once this is complete, we should have a www directory that is ready to be used in a servlet container, and which follows the conventions for servlet containers for file names and locations, as illustrated in Figure 4-52.
Summary
GWT simplifies real software engineering for Ajax applications. This was really lacking when attempting to build substantial applications based on JavaScript. Using Eclipse to write and debug applications can substantially increase development productivity. Java organization and modularization help you decouple application parts and leverage existing code. Testing and benchmarking using JUnit helps en sure that your applications are of high quality and perform well. When it's time to deploy your application, Ant can automate any tedious tasks. Overall, the ability to leverage the vast range of mature Java software engineering tools is a significant part of creating great Ajax applications with GWT.
Printed with permission from from the book Google Web Toolkit Applications written by Ryan Dewsbury. ISBN 0321501969  Copyright © 2007 Prentice Hall.
Digg This
Add to del.icio.us
URL:
Find a programming school near you
