MyEclipse for Spring 10.0: GWT 2.1 and Spring Scaffolding

http://www.myeclipseide.com/documentation/quickstarts/ME4STutorialScaffoldingGWT/scaffoldinggwtarticle.html#N1031B

MyEclipse for Spring 10.0: GWT 2.1 and Spring Scaffolding

Scaffolding a Google Web Toolkit (GWT) 2.1 and Spring CRUD application in minutes

Niel Eyde

Skyway Software, Inc.

<support@skywaysoftware.com>

Copyright © 2011 Skyway Software

Table of Contents

1. Introduction 2. Goal 3. Prerequisites 4. Install Google Eclipse Plugins 5. Create Web Project 6. Configure web project for GWT 7. Scaffold from Database Tables 8. GWT Compile 9. Deploy the App 10. What's generated? 11. Conclusion 12. Additional Developer Resources

1. Introduction

One of the goals of MyEclipse for Spring (ME4S) is to help developers write less code from scratch and use code generation more broadly, and ME4S offers the richest set of code generation options available anywhere. ME4S can generate software components for Spring MVC, Spring Web Flow, Spring Security, REST, JAX-WS, Adobe Flex, Google Web Toolkit (GWT), JPA, DAO and JSF 2.0/Primefaces. As an alternative to writing software components from scratch, ME4S helps developers generate software components that are specific to their project. In many cases the software components may be used as-is, or they may be used as a starting point for further development. Furthermore the developer can edit the ME4S templates to further customize how the software components are generated.

Scaffolding refers to the superset of ME4S's broad code generation functions, from generating a specific set of requested software components to generating fully implemented ready-to-run applications. Besides the obvious benefits of reducing application development effort and sparing developers from some of the chores of development, scaffolding is also frequently used for rapidly developing functional prototypes, learning new technologies, and application modernization projects. The ability to quickly generate a full application is very beneficial to prototyping because you can iterate on a domain model and regenerate a functional prototype in minutes. The prototype can be used with business analysts as a tool for elaborating requirements and as the starting point for development. ME4S helps many developers learn new technologies by generating contextual reference projects, which are personalized projects that are based on their own data model. This is a considerably better approach than hunting for sample projects that are often incomplete, don't follow modern best practices, and are based on trivial data models. ME4S can also be used to jumpstart an application modernization effort by leveraging application artifacts from the current system for generating a significant portion of the application components for the new system.

The objective of this tutorial is to walk you through the generation of software components for Google Web Toolkit (GWT), a software development kit for building rich internet applications that run inside a html/javascript browser. The goals of GWT are to simplify the development of rich AJAX applications by using Java to implement the applications, which ultimately is compiled into javascript applications. In addition to generating the GWT software components, this tutorial will also generate the software components for the service, domain, and data access layers. This will result in a fully implemented ready-to-run GWT application that can be immediately used for validating and testing the generated GWT components, and it will also serve a reference implementation for how the generated GWT components integrate with the other components of an application.

The MyEclipse for Spring scaffolding capabilities support two GWT recipes.

GWT 2.0 - based on best practices prescribed in Ray Ryan’s Google I/O 2009 "Best Practices for Architecting GWT App" presentation and GWT reference implementations, including Model-View-Presenter, UI Binder and GWT RPC

GWT 2.1+ - based on best practices prescribed in Ray Ryan’s Google I/O 2010 "Architecting GWT apps" presentation and GWT reference implementations, including Places & Activities (Model-View-Presenter enhancements), UI Binder, and Request Factory (alternative to GWT RPC)

This tutorial will focus on the GWT 2.1 implementation.

Figure 1. Application Layers - GWT 2.1



Application Architecture:

Web Layer - GWT 2.1

Service Layer - Spring (@Service)

Domain Layer - JPA (@Entity)

Data Access Layer - Spring (@Repository)

What about other web technologies?

This tutorial is focused on JavaServer Faces, but the scaffolding wizard can also generate the web layer implementation for Spring MVC, Spring Web Flow, JavaServer Faces 2.0 (JSF), Adobe Flex, Google Web Toolkit (GWT) and iPhone.

Figure 2. MyEclipse for Spring CRUD Scaffolding



MyEclipse for Spring uses the Create-Read-Update-Delete (CRUD) application pattern for generating applications that allows the end-user to manage application data. While CRUD isn't the only application pattern, it's a fairly typical application pattern. While not all web applications are satisfied solely by the CRUD application pattern, developers find that the resulting generated application artifacts lend themselves to being easily re-used, customized and extended. CRUD applications are tied to an application domain model that is used as the input into the scaffolding engine. The domain model can exist in many forms, and the MyEclipse for Spring scaffolding functionality supports the use of Java beans, JPA entities, or database tables as inputs.

2. Goal

This tutorial is going to walk you through producing a ready-to-run GWT 2.1 and Spring 3.0 application that implements the CRUD application pattern for a domain model.

Domain model: CUSTOMERS table from the MyEclipse Derby database.

Target Container: MyEclipse Tomcat

Target Database: MyEclipse Derby

MyEclipse for Spring will be used to generate the entire JSF 2.0, Primefaces and Spring 3.0 application within a matter of minutes that includes:

A JPA entity corresponding to domain model (CUSTOMERS)

A DAO for managing the JPA entity,

Finder methods (JPA named queries) in the DAO based on domain model fields,

A Service with fully implemented CRUD operations for managing domain model,

GWT 2.1 UI components using UIBinder

GWT Activities and Places classes to support GWT UI flow

GWT RequestFactory classes for integrating with remote data services

Service and data access adapters for GWT

CSS for UI styling

JUnits for every Service and Controller,

SpringSource certified code and configuration files,

Generated code that follows Spring Recipes,

3. Prerequisites

The prerequisites needed to complete this tutorial are:

Download MyEclipse for Spring 10.0

4. Install Google Eclipse Plugins

If you're going to do GWT development in MyEclipse (or Eclipse), then you will need the Google Eclipse Plugins (GEP). GEP includes the GWT SDK and some tools for GWT development. Among other things GEP will be used to compile the GWT application that is generated by MyEclipse for Spring.

GEP is available in the Pulse catalog, and it can be easily added to your installation using the MyEclipse Configuration Center.

Open the MyEclipse Configuration Center from the Help-->MyEclipse Configuration Center menu

Figure 3. MyEclipse Configuration Center



Switch to the Software tab. Search for "Google" to find the Google Plugin for Eclipse software in the Pulse catalog. Follow the standard process for adding software from the Pulse catalog, right-click on the entry and select Add to Profile.

Figure 4. Add to Profile: Google Plugin for Eclipse



Using Google Eclipse Update Site

The software catalog will always include the latest version of the Google Plugin for Eclipse, but you can always install directly from the Google Eclipse update site.

Verify the the Google Plugin for Eclipse is shown as a pending software update, and click the Apply Change button.

Figure 5. Apply change to profile



When the installation is complete, you will be prompted to restart MyEclipse for Spring.

5. Create Web Project

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

Figure 6. New Web Project



Incompatible Compiler Compliance Level

If you get a popup dialog regarding the project compiler compliance level not matching the workspace default, specify that you want to use a custom setting for the project [click the Yes button].

6. Configure web project for GWT

Before we start generating the GWT application, the project requires some basic GWT setup using some of the tools provided by the Google Eclipse Plugin.

To setup the project for GWT, right-click on the CustomersGwtApp and select Google-->Web Toolkit Settings...

Figure 7. Web Toolkit Settings



The first thing to do is to specify that this project will use GWT. From the Google-->Web Toolkit group, check the Use Google Web Toolkit checkbox.

Figure 8. Use Google Web Toolkit



The next step is to specify that the current project has a WAR directory. From the Google-->Web Application group, check the This project has a WAR directory checkbox. The WAR directory should be automatically configured. If not, specify the WAR directory. The Launch and deploy from this directory checkbox should also be checked.

Figure 9. Web Application - WAR directory

7. Scaffold from Database Tables

It's now time to generate all the software components and configuration files required to implement the CRUD application.

Right-click on the CustomersGwtApp project, and choose MyEclipse > Scaffold Spring CRUD application...

Figure 10. Scaffolding Wizard



The first step is to select the type of artifact you want to scaffold from. As mentioned in the introduction there are a variety of possible inputs into scaffolding. For this tutorial we're going to scaffold from a pre-existing database table that comes with the MyEclipse Derby database. Choose the Database Schema option on the Select Artifact Type(s) panel. Click the Next button.

Figure 11. Select Artifact Type(s)



The next step is to select the DB connection for accessing the MyEclipse Derby database. This panel will show you all configured DB connections in the MyEclipse workspace, and you must select the MyEclipse Derby connection, which is a preconfigured DB connection in MyEclipse. Click the Next button.

Figure 12. Specify Persistence Connection Properties



The next step is to specify which database table(s) to scaffold an application from. Start by selecting the desired schema, and the select the database table(s) that should be used for scaffolding. When the CLASSICCARS schema is selected, the tables list will be populated with a list of tables. The CUSTOMER table should be added to the scaffolding list. Click the Next button.

Figure 13. Select Database Tables



The next panel will prompt you to select parent objects. This panel also lets you override the derived name of the Java Object that will be created from the database table. Since we're only scaffolding from a single database table, the Customer Java object must be the parent. For GWT scaffolding ALL tables must be selected as parent objects. This is because the GWT client assumes that the CRUD services have been generated for all tables. Making an object a parent causes the back-end services to be generated for that table. For this tutorial there's nothing that needs to be changed on this panel so just click the Next button.

Figure 14. Database Scaffolding Options



Overriding derived Java object names

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.

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 org.customerapp 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.

Figure 15. Application Layers and Packages



The next step is to specify which web clients should 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, JavaServer Faces (JSF), Adobe Flex, GWT, and iPhone. This tutorial is focused on GWT, so click on the Generate checkbox for Google Web Toolkit.

Figure 16. Select Web Client



The next step is to select the GWT recipe that should be used. As explained in the introduction, MyEclipse for Spring supports two different GWT scaffolding recipes. For this tutorial we'll be generating using the GWT 2.1 recipe which encompasses the latest GWT technology and best practices from the Google GWT team.

Figure 17. Select GWT Options



The next step is an optional step to specify the REST scaffolding options. Since REST scaffolding is beyond the scope of this tutorial, we'll just skip to the next step of the wizard.

Figure 18. REST options



The next step is in an optional step to customize the UI. For this tutorial we'll go with the defaults.

Figure 19. Customize UI



Overriding field names for user interface

The field names are automatically derived from the column names of the selected database tables, but the field name can be overridden by double-clicking on the name and typing a new name.

The next step is to specify where the application (source code, configuration files, JSP, etc...) should be generated to in the current project and a few additional scaffolding options. For this panel the defaults are fine. Click the Next button.

Figure 20. Select Target Folders



The final configuration step is to specify the libraries that should be added to the current project, how they should be added (classpath containers or copied into project), and the version of Spring to use. For this panel the defaults are fine. Click the Next button.

Figure 21. Runtime Dependencies



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.

Figure 22. Summary



That's it. Once the wizard is complete you have a generrated a GWT 2.1 and Spring application that implements the CRUD application pattern for the domain model (CUSTOMERS DB table).

8. GWT Compile

The GWT code that was generated by MyEclipse for Spring needs to be compiled into Javascript using the GWT SDK

Right-click on the CustomersGwtApp project, and select Google-->GWT Compile

Figure 23. Google-->GWT Compile



The GWT Compile window should be preset with valid compile options. To initiate the compile, click the Compile button.

Figure 24. GWT Compile



The compile will take approximately one minute to complete. You can monitor the progress using the Eclipse Console view. When the compile is complete, you will see a "Compilation succeeded " message in the console.

9. Deploy the App

The next step is to see the application in operation by deploying it to Tomcat. The running application can be used for validating the generated GWT components and observing the integration with the other components of the application

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

Figure 25. Run As --> MyEclipse Server Application



MyEclipse Tomcat will start up. The first page will be a dashboard for accessing all scaffolded web clients. Since this tutorial only scaffolded a single database table for GWT, the only option under Google Web Toolkit is View GWT Scaffolding. Click on it to see the generated GWT application in operation.

Run in a separate web browser?

If you want to run the GWT application in a separate browser, use the following URL: http://localhost/CustomersGwtApp/

Figure 26. Dashboard



The GWT application can be used to (a) list all customers, (b) view customer details, (c) edit customer details, (d) delete customers and (e) add new customers. The following screen shots show some of the views.

Figure 27. CustomersGwtApp - List



Figure 28. CustomersGwtApp - Edit Details

10. What's generated?

The scaffolded application is compromised of many integrated software components, and the following diagrams provide an overview of which software components were generated and where they can be found in the project. Understanding what gets generated (and where) will help you find the individual or set of software components that you want use in your own developent projects.

Scaffolding Note

In order to ease your way into code generation with ME4S, this tutorial only involved scaffolding from a single database table. Therefore only the software components for managing a single entity were generated, and there were no entity relationships. When you start generating for multiple entities, potentially with entity relationships, there will be a lot more software components generated than what was generated with this tutorial. Even though there's a lot more code, it will all be grouped and organized as shown in the following diagrams.

Figure 29. What's generated with GWT Scaffolding



The GWT 2.1 scaffolding blueprint provides a snapshot of what gets generated during scaffolding. The GWT blueprint and the blueprints for the other ME4S code generations capabilities are covered in more detail in the MyEclipse for Spring reference guide. (see Additional Developer Resources).

Figure 30. GWT 2.1 Scaffolding Blueprint

11. Conclusion

Now that you have a running GWT application, you may want re-run the tutorial and scaffold different web clients, including Spring MVC, Spring Web Flow, Adobe Flex, JavaServer Faces 2.0, and iPhone.

You may also want to try the Spring Annotator, JAX-WS Annotator and JPA annotator tutorials which are available in the Eclipse help system and online (see Additional Developer Resources).

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

12. Additional Developer Resources

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

Reference - Eclipse Help (MyEclipse for Spring 10.0 --> MyEclipse for Spring Reference) or Education Materials (online)

Tutorials - Eclipse Help (MyEclipse for Spring 10.0 --> Tutorials) or Education Materials (online)

Screencasts - MyEclipse for Spring YouTube Channel (online)

Support Forums - MyEclipse for Spring Forums (online)

Blog - MyEclipse for Spring Posts (online)