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
Subscribe by reader
Subscribe by email
Share