Update 7/9/2010 – MyEclipse for Spring 8.6 now generates full ready-to-run GWT applications based on MVP and UI Binder in minutes. Just point the scaffolding wizard at your database tables, Java beans, or JPA Entities. You can learn more about it from the Generating Enterprise Class GWT applications for Spring post that I wrote on Genuitec blog. Or, you can keep reading my original post…

In part one we installed the Skyway Builder plugins and the Google Plugins for Eclipse, and we created the GWT project (dynamic web project) and the Spring DSL project.  In part two we implemented the back-end of the GWT application using Spring and Direct Web Remoting (DWR).  Now we will build the GWT front-end.

Before we get started lets me make it clear that I will  describe the steps for creating the GWT front-end, but I won’t be explaining GWT development concepts in much detail.  I’m assuming that you already understand GWT.  You definitely don’t want me, a self-professed GWT novice, teaching you GWT.  If you aren’t familiar with GWT, then I recommend you start with the GWT tutorial.  As I stated in earlier blog posts, the purpose of this series of blog posts is to share with you one approach to integrating a GWT front-end with Spring-based back-end services.  This is a topic that I think I have a pretty good grasp of, but I certainly welcome feedback.  I am describing the steps for creating the GWT front-end only for the sake of completeness of the integration example.

Step 12: Create the GWT Skeleton

Using the Google Plugins for Eclipse, we’re going to create the skeleton of the GWT application.  This will include creating a GWT module, entry point class and html page.  Here are the steps:

• Create a new GWT module (TodoGWT –> right-click –> New –> Other –> Google Web Toolkit –> Module): Package = org.todo, Module = Todo

• Create new Entry point class (TodoGWT –> right-click –> New –> Other –> Google Web Toolkit –> Entry Point Class): Name = TodoApp

• Create new HTML page (TodoGWT –> right-click –> New –> Other –> Google Web Toolkit –> HTML Page): todo.html

Step 13: Add GWT dependencies

GWT doesn’t natively support java.math.BigDecimal or java.math.BigInteger, but support is available through the gwt-math.  You will need to download the jar file and add it to the TodoGWT/war/WEB-INF/lib folder.

Next we’re going to add some entries to the GWT module.  Open the Todo.gwt.xml (TodoGWT/Java Resources/src/org.todo) and add the following inherits entries:

• com.googlecode.gwt.math.Math – this adds GWT support for BigInteger and BigDecimal using gwt-math library
• com.google.gwt.json.JSON – this adds GWT support for JSON types
• com.google.gwt.user.theme.chrome.Chrome – this adds a standard GWT theme

Here’s the module configuration in Todo.gwt.xml including the additional dependencies:

<module>
<inherits name=”com.google.gwt.user.User” />
<inherits name=’com.google.gwt.json.JSON’/>
<inherits name=’com.google.gwt.user.theme.chrome.Chrome’/>
<inherits name=”com.googlecode.gwt.math.Math”/>
<entry-point class=”org.todo.client.TodoApp”/>
</module>

Step 14: Configure sitemesh

You can update the sitemesh decorators.xml file to exclude url for the GWT HTML page.

<excludes>
<pattern>/j_spring_security_logout</pattern>
<pattern>/pages/logout-redirect.jsp</pattern>
<pattern>/dwr/*</pattern>
<pattern>/todo.html</pattern>
</excludes>

In part 4 I will cover the implementation of the GWT front-end.  I will provide you with all the code for the GWT front-end, but I will be primarily focussed on the integration of the front-end with the back-end DWR services.

This series consists of five parts:

• Part 1 – Setup of development environment; Setup of the GWT project
• Part 2 – Scaffold Spring back-end for GWT application
• Part 3 – Create GWT Front-end Skeleton
• Part 4 – GWT and Spring Integration
• Part 5 – Deploy and Test GWT application on Tomcat