64bit Karmic and Eclipse GWT plugin

After upgrading to Ubuntu 9.10 from 9.04, the GWT plugin for Eclipse doesn’t work so well when trying to run an app in hosted mode.

** Unable to load Mozilla for hosted mode **
java.lang.UnsatisfiedLinkError: /home/igough/installs/eclipse-3.5/plugins/com.google.gwt.eclipse.sdkbundle.linux_1.7.1.v200909221731/gwt-linux-1.7.1/mozilla-1.7.12/libxpcom.so: libstdc++.so.5: cannot open shared object file: No such file or directory

Karmic does not have libstdc++.so.5 as part of the distribution but you can download the one from 9.04 from the Ubuntu repository. I am running 64 bit Ubuntu, and would normally download the 64 bit version of the library, but the GWT Eclipse plugin uses a 32 bit version of Mozilla for hosted mode. And its hosted mode that wants the Standard C++ library. So we must download and install the 32 bit version.

Download libstdc++5_3.3.6-17ubuntu1_i386.deb from the Ubuntu respository link above. Then install using:

Once you do this, hosted mode should work again.

GWT Module using Maven

Note, this discussion is based on:

  • GWT libraries 1.6.4
  • Apache Maven 2.2.1

I like Maven because it makes me much more productive. It takes care of a lot a project management details and makes the code saved in my repository smaller. When it comes to creating GWT modules (reusable libraries), I was hoping that I could use Maven to keep track of dependencies between applications and modules, as well as dependencies between modules. This discussion presents what is needed to make a GWT module in a Maven project.

There are two important points to remember when making a GWT module using Maven:

  1. The produced JAR file must contain a module file (*.gwt.xml)
  2. The produced JAR file must contain the source files needed in the module. This is because these source files must be compiled in the context of the application.

Maven Project

The first step is to set up a normal Maven project to produce a JAR file artifact.

This command will generate two java files called App.java and AppTest.java. You can delete them.

In an example:

Modules must be compiled using Java 6, therefore the pom.xml file must be modified accordingly. Edit the pom.xml file

and add the following content at the appropriate place:

Module File

A module file is required. In Maven, this file should be in the resource directory. Create a module file in the usual resources directory with an appropriate name and an extension of .gwt.xml

Use the following content as a starting point for the module file:

There is nothing else required in the module file. Note that the name of the module is “Module0”, in the global name space. If one wants to use a longer name space such as “com.example.Module0”, then the full modulfe file name would be: “src/main/resources/com/example/Module0.gwt.xml”.

Since the Java source files for the module are to be located in a subdirectory of the module other than the standard “client” subdirectory (in this case, the name of the directory is “gwt”), one must add a “source” directive to the module file, as such:

Include Source Files in JAR artifact

As stated above, source files must be added to the JAR artifact. Therefore, the pom.xml file must be augmented to include the source files as well as the standard resources directory. Edit pom.xml and add the following:

Test JAR generation

For example, create a Bean class to test:

with the following content:

Now, generate artifact:

You can verify the content of your JAR artifact:

Note that the module file, the source and compiled version of the class are included.

Include Module in an application

To include the new module in an application or another module, two steps are required:

  1. Add a reference to the module file in the upstream application/module.
  2. Add the module JAR as a dependency of the upstream application/module.

Edit the GWT module file (.gwt.xml) in the upstream application/module and add the following directive:

Do not forget to put the fully qualified name, including the name space, if required.

If the upstream application/module uses Maven, then adding the module as a dependency is simple. Edit the pom.xml file in the upstream project and add the JAR artifact produced by the module:

Create a module with GWT Widgets

In the module, if one wishes to create GWT widgets, then one must include the core Web toolkit module from GWT. Two steps are required:

  1. Add dependency in the module file
  2. Add dependency in the Maven pom.xml file.

Edit the module file

and add the following directive:

Then, edit the pom.xml file

and add the dependency

Set up GWT application with Maven

This demo is based on:

  • GWT libraries 1.6.4
  • Apache Maven 2.2.1
  • GWT Maven plugin 1.1

Before you start your GWT application, you need to figure out:

  • Package and name of your module, e.g. org.package.Module. In the example, ‘org.package’ is the package name; ‘Module’ is the module name; and, ‘org.package.Module’ is the full module name.
  • Maven group and artifact id for your application

To create a GWT application using maven, use the following recipe:

1. Create regular WAR project/module, using Java 1.5 or above.

1.a. Using maven create module

> mvn archetype:create -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-webapp -DgroupId=<group-id> -DartifactId=<artifact-id>

1.b. Use Java 1.5. Edit the pom.xml file created in the previous step and add:

2. Edit pom.xml:

2.a. Add maven GWT plugin

2.b. Add desired version of GWT as a property

2.c. Add dependencies on needed libraries

3. If a web.xml file was not created during module creation, then you must provide one. This is necessary to create a WAR module. In /src/main/webapp/WEB-INF/web.xml :

*** At this point, you have a GWT maven module.

> mvn package

will create a WAR file. However, no GWT code is generated. ***

4. Create a GWT module file. A module file is a XML file with a name that ends with ‘.gwt.xml’. In Maven, the GWT module file is a resource, therefore it must be located under /src/main/resource. One has to determine the location of the file from the package name. Therefore, if the fully qualified name of the module is ‘org.package.Module’, then one needs to create a file called ‘/src/main/resource/org/package/Module.gwt.xml’.

The location of the module file in relation to the entry point class is important. Consistency is really important in the names.

You have to adjust the values in the file: JS_DIR, ORG.PACKAGE.client.MainView and STYLE.css. Those values are dependent on your installation.

JS_DIR is the directory in the WAR structure under which generated files will be located.

org.package.client.Main is the name of the entry point class. (See point below)

STYLE.css is the style sheet used. This is a stylesheet added to page when the entry point class is run. This file should be found in the ‘public’ portion of the application. It is packaged with the generated javascript files by the GWT compiler.

5. Create a public directory. Under the resource directory that contains the module file, create a sub-directory called ‘public’. In this directory, put the resource files that need to be accessible by the application. For example, style sheets and images can be placed there. Files located in the public directory are copied in the generated directory by the GWT compiler.

6. Create a GWT entry point class. A GWT entry point class defines the mainline of a module. This is written in Java. Therefore, the file defining the entry point class must be located under /src/main/java. All Java files destined for the client GUI must reside in a sub-package of the module called ‘client’. Therefore, if one wanted to name the entry point class ‘Main’ for the ‘org.package.Module’ module, the the fully qualified name for the class would be org.package.client.Main. Therefore, one would create a file named ‘/src/main/java/org/package/client/Main.java with the following content:

*** At this point, the maven GWT plugin should be generating javascript code from the java source code. A number of files can be found here:

…/target/${project.name}/JS_DIR

Opening the war file, the same generated scripts should be found under …/JSDIR

***

7. Create an HTML file that uses the generated scripts. Under the directory …/src/main/webapp, create a file called “index.html” with the following content:

Above, you need to adjust the values for JS_DIR, as specified in previous points.

*** At this point, you have a complete GWT application. The WAR file is generated by:

> mvn package

The generated WAR file can be deployed on a servlet container (Tomcat, Jetty, etc.) The web.xml file specifies to load index.html as default, and index.html loads and runs the generated javascript module.

***

The complete directory structure is