GWT Experience - Create GWT Module Project with Maven GWT Plugin

I Have played with GWT for quite a long time, reading the book "GWT in Action", trying Tutorials and many blogs (Deploying GWT Applications in SpringSource dm Server, etc.)

Now I feel it is time to add rich client UI to Open Toast project.

Use Maven GWT plugin to create GWT module project

There are many ways to create a GWT application from scratch. Normally people use webAppCreator tool in command line, or use Google Plugin for Eclipse. The problem is the brand new application created by Google tools has different directory and package layout from other Open Toast modules.

We all know Convention over Configuration, and the question is whose convention we follow? Seems GWT team is not following Maven's convention (as far as GWT 1.7.x). But I want to make our development/build/deployment be consistent with Maven, for long term benefit. Fortunately, there is a Maven plugin Mojo Maven GWT Plugin or "gwt-maven-plugin" to solve the problem.

Since release 1.1, mojo gwt-maven-plugin merged with Google Code GWT-maven-plugin, and it is pretty stable now.

So first, I tried to create our administration by gwt-maven-plugin archetype. Inside opentoast root folder, run the command:

mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo -DarchetypeArtifactId=gwt-maven-plugin -DarchetypeVersion=1.1 -DgroupId=org.opentoast -DartifactId=org.opentoast.admin

During creation, set project version to 0.0.2, and package to org.open.toast.admin. After that I have to change several settings in pom.xml. The gwt.version is changed to 1.7.1, the current release; and gwt-maven-plugin version is changed to 1.1 instead of 1.1-SNAPSHOT.

Then I can test the new admin application in hosted mode by command:

mvn -DrunTarget=org.opentoast.admin.Application/Application.html gwt:run

A very simple Web application with just a line of text.

The whole project structure is very consistent with standard Maven project layout, such as src/main/java, src/main/resources, src/main/webapp. But there are still 2 issues I don't feel comfortable with. First, the GWT XML module file is put inside java folder, at src/main/java/org/opentoast/admin/Application.gwt.xml. Second, html and css files are inside resources folder instead of webapp. Application.html and Application.css are located at src/main/resources/org/opentoast/admin/public folder.

From GWT Developer Guide - "Modules: Units of configuration", we know public sub-package under module xml file's located package contains static resources used by the GWT module. Since client code may reference those resources by GWT.getModuleBaseURL() + "resourceName.png", I think better we keep it.

For first issue, I tried to move Application.gwt.xml to resources folder, at src/main/resources/org/opentoast/admin/Application.gwt.xml, and I can still run application in hosted mode, so maybe it is OK to do that.

Rename module name

After running the application in hosted mode, GWT created a folder war in root directory, and compiled Java code into Javascript. The generated Javascript file org.opentoast.admin.Application.nocache.js was put inside war/org.opentoast.admin.Application/ folder. Seems the GWT module name is org.opentoast.admin.Application, which is too long with full package name. It is very easy to change it to a much shorter name admin.

First, update GWT module xml file by adding rename-to attribute to module element:

....

Next, update Application.html to load correct js file:

Try to launch the application by mvn -DrunTarget=admin/Application.html gwt:run, and it works fine. There is new folder admin inside war, with all public resources and generated js file admin.nocache.js.

Later I tried to integrate this GWT project into the bigger Open Toast Project with quite a few small challenges, and that will be my next blog.