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…

Over the last month (when time permitted) I have been experimenting with Google Web Toolkit (GWT) for RIA development.  I have benefited a lot from the efforts of other developers that have blogged regarding GWT development, and it’s definitely expedited the GWT learning curve for me.  In the spirit of community I figured I’d share my experiments with the Spring, Skyway Builder, and GWT development community.  Hopefully others will find the information here helpful.

My specific goal was to use Skyway Builder 6.3 to generate the Spring back-end of a GWT application and use basic GWT development techniques for the front-end.  There are many ways for a GWT application to integrate with server-side logic, and the specific approach that I took was to use the DWR functionality in Skyway Builder EE.  In the future (if someone else hasn’t beat me to it) I’ll will explore and share other ways to leverage Skyway Builder for integrating GWT and Spring development.

Rather than just tell you that my experiment was successful, I wanted to describe the steps that I took in detail.  As a result, this series of blog posts will resemble a Skyway Recipe, and I hope to provide sufficient details so that you can recreate this project on your own.  This series will consist 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

Step 1. Install Skyway Builder

As far as my development environment is concerned, I’m using Eclipse IDE for Java Developers 3.4.2 (a.k.a. Eclipse Ganymede).  I have installed the Skyway Builder 6.3 plugins, and the installation instructions can be found here.  If you are going to follow along with this blog/tutorial, please note that Skyway Builder 6.3 EE is required, which contains the RIA development accelerators, including DWR support.  While you can certainly use DWR with Skyway Builder 6.3 CE projects, the instructions for doing that is beyond the scope of this blog post.

Step 2. Sandbox Setup

You may also want to setup a sandbox for running the GWT application.  GWT comes with it’s own application server (I believe Jetty), but I ultimately want to deploy this application to Tomcat 6.0.  If you don’t already have database and application server, the Sandbox for Spring setup guide on the Skyway community site may be helpful to you.

Step 3. Install Google Plugin for Eclipse

Once you have Skyway Builder 6.3 running in Eclipse, the next step is to install the Google Plugin for Eclipse. I added the Google Plugin for Eclipse 3.4 update site [http://dl.google.com/eclipse/plugin/3.4], and I installed “Google Plugin for Eclipse 3.4” and “Google Web Toolkit SDK 1.7.0” features.  I didn’t install Google App Engine Java SDK 1.2.2.  If you need the full installation instructions, they can be found here.

Step 4. Create Project

The next step is to create an Eclipse project for the GWT application.  There are many ways to go about this.  The project could originate from Skyway Builder, the GWT project wizard (GWT plugin), or standard Eclipse.  Since you are most likely already familiar with creating standard Eclipse projects, I decided for the purpose of my GWT project that I was going to start with a standard Eclipse Dynamic Web Project.  This will also give me an opportunity to share with you how to prepare a dynamic web project for Skyway Builder and/or GWT.

I created the Dynamic Web Project in Eclipse, and I specified TodoGWT as the name of the project and war as the Content Directory.  While the default content directory name for dynamic web projects is WebContent, the content directory must be changed to war due to a GWT requirement.

New Dynamic Web Project – Dynamic Web Project

New Dynamic Web Project – Web Module

Step 5. Enable project for Google Web Toolkit

The Google Plugin for Eclipse adds GWT development functionality to Eclipse, but the individual projects need to be configured to use the GWT functionality.  This is accomplished by enabling GWT in the project properties.  (TodoGWT –>right-click –> Properties –> Google –> Web Tool Kit –> Enable “Use Google Web Toolkit”)

Step 6. Add code generation source folders

As part of code generation Skyway Builder needs to know where to generate the code and Spring context files in the target project.  These locations can be fully customized, but I setup the project to use the folders that Skyway expects by default, which includes the following two source folders:

• generated – the folder where Skyway will by default generate the Spring and Java code
• resources – the folder where Skyway will by default generate the Spring context files

Here are the steps for adding code generation source folders:

1. Add generated folder to project (TodoGWT –> right-click –> New –> Folder)
2. Add resources folder to project (TodoGWT –> right-click –> New –> Folder)
3. Configure generated and resources folder to be source folders in Eclipse (TodoGWT –> right-click –> Build Path –> Configure Build Path).  Switch to Source tab, and add the generated and resources folder.

Step 7. Create Spring DSL project

With the dynamic web project ready for GWT and Skyway Builder, the next step is to create the Spring DSL project using Skyway Builder.  This is accomplished by switching to the Skyway Builder perspective in Eclipse and creating a Skyway project using File–>New–>Skyway Project or clicking on the “New Skyway Project” toolbar icon.  The New Project wizard will prompt you for a project name (TodoModels), and I used all the defaults for all the other items in the wizard.

The New Project wizard created two projects:

• TodoModels – this is the project that will contain our Spring DSL artifacts
• TodoModels-Web – by default Skyway Builder creates a dynamic web project as the target for code generation, however we won’t use this project.

Since we created our own dynamic web project in an earlier step, we won’t use the TodoModels-Web project.  (Note: In the next version of Skyway Builder we’re going to make the automated creation of the target project optional.)  Before I permanently delete this unused project, I must reconfigure the TodoModels project to generate into TodoGWT, the dynamic web project that I manually created earlier.

Here are the steps to reconfigure TodoModels:

1. Open Spring DSL editor (double-click on Spring DSL icon in TodoModels project)
2. Using Category Mapping tab, reconfigure target project (Project) to TodoGWT.  Please note that changing the target project for one category will change the target project for all of them.
3. Using Category Mapping tab, select “Disable automatic dependency updates to project”.  To accomodate GWT plugins we’re going to manage classpath manually, and this option will disable Skyway Builder from automatically updating the classpath using classpath libraries which isn’t supported by GWT plugins.
4. Using Code Generation tab, reconfigure WebContents references to war (to match GWT project structure).  There are the code generation entries that need be updated:
   1. Web Deployment Descriptor
   2. Editable DWR Config
   3. Generated DWR Config
5. Save the changes to Spring DSL (File–>Save)

Spring DSL – Category Mapping Tab

Spring DSL – Code Generation Tab

Now that all references to the TodoModels-Web project have been removed, you now can delete the TodoModels-Web project.

Step 8. Add runtime libraries to classpath

Since we disabled automatic dependency updates for the the TodoGWT project, we need to manage the dependencies manually, which consists of manually adding all the dependent libraries to the project.  Skyway Software provides an archive with all the required libraries that can be downloaded from here (Updated 10/5/09: skyway_ee_all.zip skyway_all.zip).   You need to download and unzip the jar files to the TodoGWT/war/WEB-INF/libs folder.  If you do this outside of Eclipse, don’t forget to refresh you project (TodoGWT–>right-click–>Refresh)

That concludes part 1 of this series.  In summary we’ve installed Skyway Builder and the Google Plugins for Eclipse.  We created a dynamic web project (TodoGWT) and a Spring DSL project (TodoModels) for this development project, and we’ve configured the Spring DSL project to generate into the dynamic web project.  We’ve also added all the required libraries to the dynamic web project.  We’re ready to start implementing our project, and in part two (of this five part series of blog posts) we will scaffold the back-end of the GWT application and DWR-enable the Spring services (@Service) using Skyway Builder.

Stay tuned for part 2.