Sunday, February 5, 2012

Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 1)

In this tutorial, we will create a simple GWT application and integrate it with Spring. We will use GWTHandler to map GWT's RPC services to Spring beans, and utilize the GWT Maven plugin to manage and build our project. Our application is a Hello World-style application that you typically when creating a new GWT project.


Dependencies

  • Spring core 3.1.0.RELEASE
  • Maven
  • GWT Maven Plugin 2.4.0
  • gwt-sl 1.3-RC1
  • See pom.xml for details

Github

To access the source code, please visit the project's Github repository (click here)

Functional Specs

Before we start, let's define our application's specs as follows:
  • Create a simple Hello World-style application
  • Use GWT Maven plugin to manage the project
  • Integrate Spring

Screenshots

Before we start with the actual development, let's preview how our application will look like.

Entry page
The entry page is the only page that users can access. Here, users can enter their name.
Entry page

After the user has submitted his name, a popup message will appear.
Popup message without Spring

After we've integrated Spring, we shall see a different popup message.
Popup message with Spring

Next

In the next section, we will create our GWT project using the GWT Maven plugin. Click here to proceed
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 1) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 2)

Review

In the previous section, we have laid down the functional specs of the application. In this section, we will discuss the project's structure and create the GWT application using the GWT Maven plugin.


Project Structure

Our application is a Maven project. It has been auto-generated using the Maven GWT plugin tool.

Starting with GWT Maven

To start this project, you are required to have the following:

Also, take note of the following:
  • You're not required to download the GWT SDK!
  • You can skip Eclipse and opt for command-line style development, but you must have Maven installed.
  • If you use STS, m2eclipse is already installed.

What is GWT Maven Plugin?

The GWT Maven Plugin allows you to setup your GWT web application development using Maven as build tool. It allows you to organize and setup, integrate with a development environment, and run GWT SDK tools from the Maven command line.

If you're new to GWT, please read the GWT documentation. If you're new to Maven, please read the Maven Getting Started Guide

Source: http://mojo.codehaus.org/gwt-maven-plugin/index.html

What is m2eclipse?

The goal of the m2ec project is to provide a first-class Apache Maven support in the Eclipse IDE, making it easier to edit Maven's pom.xml, run a build from the IDE and much more.

Source: http://eclipse.org/m2e/

Creating the Project

1. Open Eclipse (I'm using SpringSource Tool Suite here)

2. Go to File and create a new Maven project

3. On the Select an Archetype section, type gwt-maven-plugin. Then click Next.

4. On the Specify Archetype parameters section, enter the following details (Don't forget to add the module property). Then click Finish.

5. Once the project has been auto-generated, you'll notice some errors. This is because the GreetingServiceAsync and Message are missing! You must generate them by triggering a Maven command or let Maven generate them automatically for you.


Add the Missing Classes

To add the missing classes manually, we need to run the following Maven goals:
  • gwt:generateAsync - it's purpose is to generate the Async interfaces
  • gwt:i18n - it's purpose is to generate internationalization interfaces
For more info regarding these goals, please see Generate Async interfaces for GWT-RPC services and Generate i18n interfaces for message bundles

To generate these interfaces manually, follow these steps:

6. Right-click on your project. Select Run As, then Run Configurations

7. Select the Maven build... option. You should see a new Run Configurations window.

8. Fill it up with the following information (make sure to update the workspace!):

9. Run the goal and you should see the following output:
[INFO] Scanning for projects...
[INFO] -------------------------------------
[INFO] Building GWT Maven Archetype
[INFO]    task-segment: [gwt:generateAsync]
[INFO] -------------------------------------
[INFO] [gwt:generateAsync {execution: default-cli}]
[INFO] -------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -------------------------------------
[INFO] Total time: 13 seconds
[INFO] Finished at: Tue Jan 31 11:00:42 CST 2012
[INFO] Final Memory: 15M/38M
[INFO] -------------------------------------

10. Now, let's generate the internalization interfaces. Create a new Run Configurations (same with the previous steps).

11. Fill it up with the following information (make sure to update the workspace!):

12. Run the goal and you should see the following output:
[INFO] Scanning for projects...
[INFO] -------------------------------------
[INFO] Building GWT Maven Archetype
[INFO]    task-segment: [gwt:i18n]
[INFO] -------------------------------------
[INFO] [gwt:i18n {execution: default-cli}]
[INFO] -------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -------------------------------------
[INFO] Total time: 5 seconds
[INFO] Finished at: Tue Jan 31 11:08:39 CST 2012
[INFO] Final Memory: 15M/38M
[INFO] -------------------------------------

Copying the Generated Interfaces

After generating the interfaces, we must copy and paste them on the src/main/java folder

13. Copy the following files: GenerateAsync and Messages

14. Paste them to the src/main/java folder

Running the Project

To run the project using Maven, we will use the gwt:run command.

15. Create a new Run Configurations.

16. Fill it up with the following information (make sure to update the workspace!):

17. Run the goal and you should see the following output:
[INFO] Scanning for projects...
[INFO] -------------------------------------
[INFO] Building GWT Maven Archetype
[INFO]    task-segment: [gwt:run]
[INFO] -------------------------------------
[INFO] Preparing gwt:run
[INFO] [gwt:i18n {execution: default}]
[INFO] [gwt:generateAsync {execution: default}]
[INFO] [resources:resources {execution: default-resources}]
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 3 resources
[INFO] [compiler:compile {execution: default-compile}]
[INFO] Compiling 1 source file to C:\workspace\spring-gwt-tutorial\target\spring-gwt-tutorial-0.0.1-SNAPSHOT\WEB-INF\classes
[INFO] [war:exploded {execution: default}]
[INFO] Exploding webapp
[INFO] Assembling webapp [spring-gwt-tutorial] in [C:\workspace\spring-gwt-tutorial\target\spring-gwt-tutorial-0.0.1-SNAPSHOT]
[INFO] Processing war project
[INFO] Copying webapp resources [C:\workspace\spring-gwt-tutorial\src\main\webapp]
[INFO] Webapp assembled in [126 msecs]
[INFO] [gwt:run {execution: default-cli}]
[INFO] create exploded Jetty webapp in C:\workspace\spring-gwt-tutorial\target\spring-gwt-tutorial-0.0.1-SNAPSHOT
[INFO] auto discovered modules [org.krams.tutorial.gwtmodule]

18. When the app starts to run, you should see the following GWT Development Mode windows


19. Click the Launch Default Browser to see the application's entry page.
Entry page

20. Enter a name and click Send. You should get a response similar to the following:
Popup message without Spring

Congratulations! You've just managed to create a simple GWT Maven project!

Next

In the next section we will study how to integrate Spring and GWTHandler in our GWT project. Click here to proceed
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 2) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 3)

Review

In the previous section, we have discussed how to generate a simple GWT application using the GWT Maven plugin. In this section, we will study how to integrate Spring and GWT using the GWTHandler library via configuration and modifying existing classes.


Integrating GWTHandler

What is GWTHandler?

The GWTHandler is part of the GWT Server Library--a collection of Java server side components for the Google Web Toolkit AJAX framework with the current focus on the Spring framework by facilitating publishing of Spring beans as RPC services.

The GWTHandler allows you to quickly map multiple RPC service beans to different URLs very similar to the way Spring's SimpleUrlHandlerMapping maps URLs to controllers.

Source: http://code.google.com/p/gwt-sl/

Configuration

The initial step in configuring the GWTHandler is to declare our XML configuration files:
  • web.xml
  • gwt-servlet.xml
  • applicationContext.xml

In the web.xml the part that you need to pay extra attention is the url-pattern. Here we've declared the pattern as /gwtmodule/rpc/*. This means all RPC calls should follow that pattern!


The gwt-servlet.xml is nothing but a simple bean declaration. Here we've declared a GWTHandler bean, and it contains one mapping. We've mapped all calls to /greet to be processed by a GreetingService implementation. Remember this is an RPC call,sSo if you have plans of calling this RPC mapping, you must also take account the mapping the gwt-servlet.xml! In other words, the complete path is rpc/greet.


In the applicationContext.xml we've basically enabled annotation scanning.


Classes

The second step in configuring the GWTHandler is to modify our existing classes to take advantage of the GWTHandler.

We will create a new service class:
  • SpringService

And edit the following classes:
  • GreetingService
  • GreetingServiceImpl

The SpringService basically prints out a Hello *name* from Spring 3.1 message.


As discussed earlier, to use the /greet RPC mapping, we have to consider the parent mapping from the gwt-servlet.xml as well. In other words, the complete mapping for this RPC is rpc/greet


Next we modify the GreetingServiceImpl to take advantage of the SpringService implementation. So instead of the original reply that includes server information, we're now returning a simple "hello" message instead.


For completion purposes, we will also show the contents of the gwtmodule class, though nothing has been changed.


Next

In the next section, we will build and run the application using Maven, and show how to import the project in Eclipse. Click here to proceed.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 3) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 4)

Review

In the previous section, we have studied how to generate a simple GWT application using the GWT Maven plugin. We've also learned how integrate Spring and GWT using the GWTHandler library. In this section, we will build and run the application using Maven, and show how to import the project in Eclipse (if you've decided in Part 2 to use command-line based development).


Running the Application

Access the source code

To download the source code, please visit the project's Github repository (click here)

Building with Maven

  1. Ensure Maven is installed
  2. Open a command window (Windows) or a terminal (Linux/Mac)
  3. Run the following command:
    mvn gwt:run
  4. You should see the following output:
    [INFO] Scanning for projects...
    [INFO] ------------------------------------------
    [INFO] Building GWT Maven Archetype
    [INFO]    task-segment: [gwt:run]
    [INFO] ------------------------------------------
    [INFO] Preparing gwt:run
    [INFO] [gwt:i18n {execution: default}]
    [INFO] [gwt:generateAsync {execution: default}]
    [INFO] [gwt:run {execution: default-cli}]
    [ERROR] INFO: Mapped URL path [/greet] onto handler of type [class org.gwtwidgets.server.spring.GWTRPCServiceExporter]
    [ERROR] Feb 5, 2012 2:49:45 PM org.springframework.web.servlet.FrameworkServlet initServlet
    
  5. Note: If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

  1. Follow the steps with Building with Maven
  2. Open a browser
  3. Enter the following URL (8080 is the default port for Tomcat):
    http://127.0.0.1:8888/gwtmodule.html?gwt.codesvr=127.0.0.1:9997
    Or better yet, on the GWT Development Mode window, click on the Launch Default Browser button.
You should see the following page (the popup message will appear when you submit a name):

Import the project in Eclipse

  1. Ensure Maven is installed
  2. Open a command window (Windows) or a terminal (Linux/Mac)
  3. Run the following command:
    mvn eclipse:eclipse -Dwtpversion=2.0
  4. You should see the following output:
    [INFO] Scanning for projects...
    [INFO] Searching repository for plugin with prefix: 'eclipse'.
    [INFO] org.apache.maven.plugins: checking for updates from central
    [INFO] org.apache.maven.plugins: checking for updates from snapshots
    [INFO] org.codehaus.mojo: checking for updates from central
    [INFO] org.codehaus.mojo: checking for updates from snapshots
    [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
    [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
    [INFO] -----------------------------------------
    [INFO] Building GWT Maven Archetype
    [INFO]    task-segment: [eclipse:eclipse]
    [INFO] -----------------------------------------
    [INFO] Preparing eclipse:eclipse
    [INFO] [gwt:i18n {execution: default}]
    [INFO] [gwt:generateAsync {execution: default}]
    [INFO] [eclipse:eclipse {execution: default-cli}
    [INFO] Adding support for WTP version 2.0.
    [INFO] -----------------------------------------
    [INFO] BUILD SUCCESSFUL
    [INFO] -----------------------------------------
    
    This command will add the following files to your project:
    .classpath
    .project
    .settings
    target
    You may have to enable "show hidden files" in your file explorer to view them
  5. Open Eclipse and import the project

Maven Issues

If in case you have Maven repository issues, you can always download the depedencies directly from Sonatype OSS for Google GWT.

Conclusion

That's it! We've have successfully completed our GWT and Spring integration. We've learned how to generate a simple GWT project using the GWT Maven plugin, and integrate Spring using the GWTHandler library.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History


Revision Date Description
1 Feb 5 2012 Uploaded tutorial and Github repository

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring 3.1: GWT Maven Plugin and GWTHandler Integration (Part 4) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share