MyEclipse Logo

MyEclipse for Spring 8.6: GWT Scaffolding

Scaffolding a Spring GWT application in minutes

Abstract

This tutorial details steps and tips required to create a fully functional SpringSource certified Java GWT web application using MyEclipse for Spring.


Table of Contents

1. Introduction
2. Goal
3. Prerequisites
4. Create and Setup the Web Project
5. Scaffold from Database Tables
6. GWT Compile
7. Deploy the App
8. Additional Dependencies
9. Maven
10. Development Mode - Debugging GWT
11. Additional Developer Resources

1. Introduction

MyEclipse for Spring 8.6 (ME4S) supports the generation of Google Web Toolkit (GWT) Client and Service layers based on various sources of input. While developers may generate this code into any project, it will only compile when the appropriate classpath dependencies have been added, and it will only be runnable once the GWT compilation and packaging processes have occurred. ME4S does not redistribute GWT technologies but rather relies on the tooling options offered by Google directly. This document describes the steps to create a ready to run completely implemented CRUD Spring GWT application.

Developers may wish to start with a Google Web Project and generate code into that project, or they may wish to start with a MyEclipse Web Project and simply add the GWT capabilities to that project. The benefit to beginning with a MyEclipse Web Project is that it will be deployable to the local servers defined in the MyEclipse For Spring product.

ME4S currently supports GWT 2.0.4 which is generally available at the time of the 8.6 release. We intend to support GWT 2.1 as quickly as possible as it moves towards general availability. The code that is generated from ME4S is intended to follow the best practices for GWT 2.0 as prescribed by Ray Ryan’s Google I/O presentation. To learn more about MyEclipse for Spring Scaffolding in general and the other front-end scaffolding options like Spring MVC, Spring Web Flow, iPhone, or Flex (see Additional Developer Resources).

2. Goal

Customer Payment Spring GWT runtime application

Figure 1. Customer Payment Spring GWT runtime application


This tutorial is going to walk you through producing this ready-to-run GWT application with a Spring back-end that implements the CRUD application pattern for a domain model.

  • Domain model: CUSTOMER and PAYMENT tables from the MyEclipse Derby database.

  • Target Container: MyEclipse Tomcat

  • Target Database: MyEclipse Derby

3. Prerequisites

The prerequisites needed to complete this tutorial are:

  1. Download MyEclipse for Spring 8.6

  2. Google Plugin for Eclipse 2.0.4: Open MyEclipse for Spring, and:

    • Go to the Software and Workspace Center (also a perspective)

    • Click the Software tab, and type gwt in the search field

      Google Plugin for Eclipse in the Software and Workspace Center

      Figure 2. Google Plugin for Eclipse in the Software and Workspace Center


    • Double-click the Google Plugin for Eclipse and Apply the update. You will need to restart MyEclipse for Spring

      Alternatively, it can be installed through the catalog by using the Eclipse update site: http://dl.google.com/eclipse/plugin/3.5 (Eclipse 3.5, Galileo)

      NOTE: Ensure the 2.0.4 GWT SDK is being used. (Preferences > Google > Web toolkit). If earlier versions of the GWT toolkit were installed, the update doesn't automatically switch to 2.0.4.

4. Create and Setup the Web Project

  1. Create a MyEclipse Web Project (or Eclipse Dynamic Web Project) called ShowMeTheMoney.

    MAVEN NOTE: See the section on Maven towards the end of this tutorial if you are planning to use maven.

    JDK NOTE: If you plan to use GWT Development Mode to debug, you'll want to use Java 1.6 (see section at the bottom of this tutorial).

    PROJECT NOTE: If using the New Web Application Project wizard from the Google tooling plugin, right-click on the project and select MyEclipse > Add Web Project Capabilities after creating the project. The remaining steps in this section can be skipped.

  2. Right-click the ShowMeTheMoney project, and choose Properties.

  3. Navigate to the Google > Web Application property. Check the "This project has a WAR directory" option, and select the WebRoot folder as the WAR directory.

    Google Web Application property pane

    Figure 3. Google Web Application property pane


  4. Go to the Web Toolkit property, and check "Use Google Web Toolkit". Click OK.

    Google Web Toolkit property pane

    Figure 4. Google Web Toolkit property pane


  5. NOTE: If using the New Web Application Project wizard from the Google tooling plugin, right-click on the project and select MyEclipse > Add Web Project Capabilities...

5. Scaffold from Database Tables

For inputs into this GWT application, we will use the CUSTOMER and PAYMENT database tables from the CLASSICCARS schema found in the Integrated MyEclipse Derby database. For a detail review of each Scaffold wizard panel with screen shots, please take a look at the MyEclipse for Spring MVC Scaffolding tutorial.

  1. Right-click the ShowMeTheMoney project, and choose MyEclipse > Scaffold Spring CRUD application from...

    MyEclipse for Spring Scaffolding Menu Option

    Figure 5. MyEclipse for Spring Scaffolding Menu Option


  2. In the Select Artifact Type(s) wizard pane, select Database Schema. Click Next.

  3. In the Select DB Connection pane, select the MyEclipse Derby database connection. Click Next.

  4. The next step is to select the desired schema and database tables that will be used for scaffolding. Select the CLASSICCARS schema and Add the CUSTOMER and PAYMENT tables to the Scaffolding list. Click Next.

    Select Database Tables

    Figure 6. Select Database Tables


  5. The next panel will prompt you to select parent objects, and this panel also lets you override the derived name of the Java Object that will be created from the database table. Choose the Customer table as the Parent object. Click Next.

    Note: Java Object names are automatically derived from table names, but the name can be overridden by double-clicking on the name and typing a new name.

  6. The next step is to specify which layers of the application should be scaffolded and which package names should be used for each layer. All the layers are enabled by default. Enter com.acme.smtm as the base package. The package names for the different layers will be automatically derived from the base package. A sub-package (i.e. web, service, DAO, and domain) will be added to the end of the base package.

  7. The next step is to specify the GWT web client to be generated for the web layer. As you can see, there are a variety of different web clients available, including Spring MVC, Spring Web Flow, Adobe Flex, GWT, and iPhone. This tutorial is focused on Spring GWT, so click the Generate checkbox for Google Web Toolkit.

    Select GWT Web Client

    Figure 7. Select GWT Web Client


  8. The next step is in an optional step to customize the User Interface and choose the List and Picker fields.

    List Fields are the columns included in the lists of data shown in the front end. All List fields are enabled by default. You may want to think about removing unnecessary fields from the list if your application begins to become to large horizontally.

    Picker Fields are primarily used in the GWT scaffolded application to populate the display text when picking a child record for a parent. For example in the ShowMeTheMoney application, a listing of customer numbers and check numbers will be shown in the pop-up when selecting payments for a customer. The picker fields are also used for the Parent tab titles. If no Picker fields are chosen, the primary keys will be used.

    The Field labels can also be customized in this pane by clicking in the field and typing a different name as shown below.

    Customize UI, List, and Picker

    Figure 8. Customize UI, List, and Picker


    List & Picker fields in the runtime Application

    Figure 9. List & Picker fields in the runtime Application


  9. After clicking next, the final configuration step is to specify the generation destinations, library options, and Spring version. For this panel the defaults are fine. Click Next.

  10. The final panel will give you a summary of everything that will be generated for you. Click the Finish button to scaffold the application from the information you provided in the wizard.

6. GWT Compile

  1. A couple more Google tweaks to the project and it will be ready to deploy! Right-click the project, and select Google > Web Toolkit Settings...

  2. Remove all the Entry Point Modules, except for ShowMeTheMoneyGWTCrud. Click OK.

    Remove unnecessary Entry Point Modules

    Figure 10. Remove unnecessary Entry Point Modules


  3. Right-click the project, and select Google > GWT Compile. Use the defaults and click Compile. The Console view will display the GWT compile results.

    NOTE #1: The GWT compile generates all the necessary GWT front-end code, most of which can be found in the /WebRoot/gwt.* folder.

    NOTE #2: In ME4S 8.6 Milestone 2, after the GWT compile, Javascript Validation may take a while to complete. This validation can be shut off by unchecking the Manual and Build checkboxes in the Validation pane in Preferences. This should be corrected in the GA version.

    GWT Compile

    Figure 11. GWT Compile


7. Deploy the App

  1. To deploy the application, right-click on the ShowMeTheMoney project and select Run As --> MyEclipse Server Application.

    NOTE: In ME4S 8.6 Milestone 2, the best browsers to use for GWT scaffolded apps are IE, Firefox, or Chrome. Safari is supported with the 2.0.4 version of the Google plugin. If you run a GWT scaffolded app on Safari and the master grid does not load, this is usually an indication that the app was compiled with 2.0.3 or earlier.

  2. MyEclipse Tomcat will start up. The first page will be a dashboard for accessing the GWT web client. Click View GWT Scaffolding.

    ShowMeTheMoney - GWT Runtime Application

    Figure 12. ShowMeTheMoney - GWT Runtime Application


8. Additional Dependencies

MyEclipse For Spring generates front end software components that are prewired to work with the data model that was fed to the scaffolding wizard. This simplifies the process of future development by giving the developer a rich set of components that can be combined for new purposes beyond simple crud scaffolding. In version 8.6 the List/Table components that are generated utilize the Paging Scroll table from the GWT Incubator project.

9. Maven

MyEclipse For Spring supports the use of Maven by generally providing the ability to automatically add entries to the POM file of the target project when code is being generated. ME4S does not however add the GWT dependencies automatically because the GWT tooling from Google generally manages the classpath for Eclipse based projects and reports errors when the GWT classpath containers are removed from the project. There is a great deal of information available to those who wish to fully build and deploy GWT based projects from Maven alone. For more information visit the Mojo GWT Maven plugin project.

If you are using the MyEclipse Maven Support in a Web Project, you will need to remove the following dependency from the pom.xml file after scaffolding GWT:

    <dependency> 
    	<groupId>jasperreports</groupId> 
    	<artifactId>jasperreports</artifactId> 
    	<version>2.0.5</version> 
    </dependency>
	
If not, you may see java.lang.NoSuchFieldError: reportUnusedDeclaredThrownExceptionIncludeDocCommentReference when trying to do the GWT Compile.

10. Development Mode - Debugging GWT

GWT offers a nice debugging capability when running in development mode. Development mode allows you to do real time updates to GWT source files and see them in UI without redeploying. You can also step through your running application which has since been compiled to javascript as though you were stepping through the Java in a running Java application.

To debug an application, we recommend using Chrome as your browser and downloading the Google Web Toolkit Developer Plugin for Chrome which is prompted to download the first time you enter the development mode URL in Chrome (see last step below). We also recommend using JDK 1.6 (or the same JDK targeted in the Chrome plugin) due to reported bugs documented in the GWT Issue 4254. Here are the steps:

  1. Right click on the generated [ProjectName]GWTCrud.html file that was generated into the WebRoot of your project.

  2. Choose Debug As... > Debug Configurations.

  3. Choose Web Application and Press the "New" button in the upper left corner.

  4. Give it a name.

  5. Click the Server tab and uncheck the "Run Built in Server" checkbox.

  6. Click the GWT tab and select the [ProjectName]GWTCrud.html in the URL field.

  7. By default GWT will create a URL for you when you launch the Debug target that represents a URL that you should be able to copy/paste into a browser that supports the debugging plugin. If you are running your application on your local Tomcat server for example, this URL will be incorrect as the default port may not match, and the WebContextRoot is not on the URL by default. You can work around this by making the following changes

    1. Click the "Arguments" tab

    2. Add -port 8080 to the begging of the arguments list before -startupUrl (NOTE: we've noticed extra parameters like this one are not persisted in the debug configuration as other tabs are navigated in the wizard. If you Apply and Debug from this pane, it should persist. Take note of the port in the last step to ensure it's 8080, or the Tomcat port can be changed to 8888)

    3. Add your ContextRoot and slash (Usually your project name) to the -startupUrl parameter like: ShowMeTheMoney/ShowMeTheMoneyGWTCrud.html

  8. Apply your changes and click Debug.

  9. Drop break points where ever you like in your code.

  10. Run the project on the MyEclipse Tomcat server.

  11. In the Development Mode tab, right-click the URL console window, copy and paste it in your browser window. If you don't have the plugin for debugging, it should ask you to install it as shown in the following image.

    GWT Developer Plugin download prompt in Chrome

    Figure 13. GWT Developer Plugin download prompt in Chrome


11. Additional Developer Resources

What was your experience with this tutorial? Share your experience with us by completing a very brief survey.

Thank you for you interest in MyEclipse for Spring. If you are interested in learning more, the following developer resources are available:

Developer Resources