Learn the future of web development

In this tutorial we are going to work through creating multiple modules for a GWT web application. Multiple modules are a great way to organize and reuse your GWT code, and it is a good way to develop multiple GWT pages with only one entry point. If you are not familiar with the structure of a GWT application then you should probably read this tutorial first.

There are two ways in which you can load multiple modules in a GWT application, and they are as follows:

1. Compile each module separately and then include each module with a script tag in your html host page.
2. Create a top level module XML definition that includes all the modules you want to include. Compile the top level module to create a single set of JavaScript output.

The GWT team states “The first approach may seem the easiest and most obvious. However, the second approach will lead to much better end-user performace. The problem with loading multiple modules is that each module has to be downloaded seperately by the end-user’s browser. In addition, each module will contain redundant copies of GWT library code and could possibly conflict with each other during event handling. The second approach is strongly recommended.” Since the second approach is recommended, then that is the approach we are going to take. So let’s get started.

A GWT web application is organized into Java packages, and because of this we need to understand the package hierarchy. The first package in a GWT application is the (default web application packages) “org.yournamehere” package. This package contains your Main.gwt.xml file, and you should notice that this file is used to inherit other GWT modules. Primarily you must inherit the “com.google.gwt.user.User” package to get GWT to work in the first place. Based on the package structure, I think you can probably figure out that this is how we are going to inherit our own modules. The second package we are going to concern ourselves with is the org.yournamehere.client package, which is the package that contains you client side code.

So because of the packaging structure we can create our own modules that can be used in multiple GWT applications. The example we are going to use for this tutorial is to develop a module for providing security for our application. The security package may contain client side code for developing a log in, creating an account, and perhaps even some verification code. Me personally, I like to name my packages similar to the way in which GWT has named their packages, and you want to make sure your package names have a meaning for what you are developing. This is just simple naming practices.

For our security module we are going to create a new package in Netbeans called “org.yournamehere.security”. This package will contain our Security.gwt.xml file, and this file should look like the following:

<?xml version="1.0" encoding="UTF-8"?>
<module>
   <inherits name="com.google.gwt.user.User"/>
   <!--You can add other modules as well by inheriting them-->
</module>

Now that we have created our Security.gwt.xml file, we can create our client package, which we will call “org.yournamehere.security.client”. The next step would be to add class files to the client package, and develop out your module.

Once you have finished developing your module, you will need to inherit the module in your Main.gwt.xml file. So you just need to write out the following inherits statement, so your Main.gwt.xml file will look like below.

<?xml version="1.0" encoding="UTF-8"?>
<module>
   <inherits name="com.google.gwt.user.User"/>
   <inherits name="org.yournamehere.security.Security"/>
</module>

Once you have inherited the module in your Main.gwt.xml file, you are ready to use the module in your web application. It’s really that easy.

I now want to cover something important I found while doing research for this tutorial. You are able to include multiple entry points into your web application. Why you would want to do this is beyond me, but you are certainly capable of doing so. I bring this up because you want to be careful in including an entry point in a module that is going to be inherited by either another module or the main module itself. The GWT team states “If you are loading multiple GWT modules within the same page, each module’s EntryPoint will be called as soon as both that module and the outer document is ready. Two modules’ EntryPoints are not guaranteed to fire at the same time, or in the same order in which their selection scripts were specified in the host page.” You should be aware of this if you are considering using multiple entry points, but I would recommend against this practice.

As always if you have any questions, please leave a comment.