Oct
29
2009

Tutorial: GWT, Maven and Eclipse with M2Eclipse

This tutorial shows how to develop Rich Internet applications with the Google Web Toolkit (GWT) using a state of the art Software  Development Environment, especially Maven integrated in Eclipse through m2eclipse (There is another plugin IAM, but in this tutorial we will use M2Eclipse). We will set up the environment, create a web application that is using Google Maps and debug it. This tutorial is the Maven version of this one using Cypal Studio.

Preliminaries

First we have to download Java and Eclipse. We will not download the Google Web Toolkit, Cypal Studio or the Google Maps library for GWT like in my last tutorial.

  1. Download and install the Java SE Development Kit
    You need the JDK to run Eclipse, the GWT Hosted Mode-Browser and the GWT-Compiler. On MacOS the JDK is installed by default, for other operating systems you can download the JDK from Sun.
  2. Download and unzip the Eclipse IDE for Java EE Developers
    Download Eclipse for EE Developers. You can unzip Eclipse to whereever you like, for example into the folder applications or programs.
  3. Sign up for a Google Maps Api-Key (optional, only necessary for production use)
    This step is optional for development on your local computer (localhost). You can sign up for a key here.

Setup the eclipse workspace and configure plugins

Configure the eclipse workspace and project. This section contains only the configuration of eclipse, no source code that you would check in for example into svn.

  1. Eclipse Workspace
    Open Eclipse and choose a directory as workspace (project configuration and source code will/can be stored here).
    eclipse-galileo-select-workspace
    When Eclipse has started, you will see the welcome screen:
    eclipse-galileo-welcome
    Close the Welcome screen with the arrow on the right side and the workspace is displayed:
    eclipse-galileo-workspace
  2. Add the m2eclipse plugin (Integration of Maven into Eclipse)
    Open Help/Install New Software… and click Add on the upper right side:
    eclipse-galileo-install-new-software
    Enter M2Eclipse as name, http://m2eclipse.sonatype.org/update/ as Location and click OK:
    eclipse-galileo-new-software-add-site
    Select the items shown and click Next:
    eclipse-galileo-install-software-available-software
    Review the details and click Next:
    eclipse-galileo-install-software-review-details
    Accept the license and click Finish:
    eclipse-galileo-install-software-review-license
    Wait until the download has finished and the installation is complete and restart Eclipse (click yes).

Your first GWT application with Maven and Eclipse

Now we will create a simple GWT application based on an archetype.

  1. Create a Maven project
    Select File/New/Other… , select Maven project and click Next:
    eclipse-galileo-new-project-maven
    Click Next:
    eclipse-galileo-new-maven-project-name-and-location
    Select the gwt-maven-plugin archetype from org.codehaus.mojo and click Next:
    eclipse-galileo-new-maven-project-archetype
    Enter Maven details for this project and click Finish:
    eclipse-galileo-new-maven-project-archetype-parameters
    Your workspace will look like this:
    eclipse-galileo-workspace-with-project
  2. Edit the pom.xml
    This is the Project Object Model – maven project configuration file. Change the version of GWT to 1.7.o 
    <gwt.version>1.7.0</gwt.version>

    Add the following dependency to the dependencies:

    <dependency>
 <groupId>com.google.gwt.google-apis</groupId>
 <artifactId>gwt-maps</artifactId>
 <scope>provided</scope>
 <version>1.0.4</version>
 </dependency>

    Add the following line direct below the gwt.version-tag within the properties:

    <runTarget>com.claudiushauptmann.gwt.maven.sample.Application/Application.html</runTarget>

    Change the plugin version to 1.1:

    <plugin>
 <groupId>org.codehaus.mojo</groupId>
 <artifactId>gwt-maven-plugin</artifactId>
 <version>1.1</version>
 <executions>
 <execution>
 <goals>
 <goal>compile</goal>
 <goal>generateAsync</goal>
 <goal>test</goal>
 </goals>
 </execution>
 </executions>
 </plugin>
  3. Edit the Application.gwt.xml
    This is the gwt module descriptor. We have to tell it, that we are using the Google Maps library (Yes, we have to do this twice. One time for Java and on time for GWT, because GWT should not use all Java libraries). Add the following lines:

    <script src="http://maps.google.com/maps?gwt=1&amp;file=api&amp;v=2" />
 <inherits name="com.google.gwt.maps.GoogleMaps">
  4. Edit the entrypoint (Application.java)
    This is the code that will be executed when the site is openend:

    package com.claudiushauptmann.gwt.maven.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.control.MapTypeControl;
import com.google.gwt.maps.client.control.SmallMapControl;
import com.google.gwt.maps.client.event.MapClickHandler;
import com.google.gwt.maps.client.geom.LatLng;
import com.google.gwt.maps.client.overlay.Marker;
import com.google.gwt.maps.client.overlay.Overlay;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Application implements EntryPoint {

 /**
 * This is the entry point method.
 */
 public void onModuleLoad() {
 MapWidget mapWiget = new MapWidget(LatLng.newInstance(48.136559,
 11.576318), 13);
 mapWiget.setSize("500px", "300px");

 mapWiget.addControl(new SmallMapControl());
 mapWiget.addControl(new MapTypeControl());

 mapWiget.addMapClickHandler(new MapClickHandler() {
 public void onClick(MapClickEvent e) {
 MapWidget sender = e.getSender();
 Overlay overlay = e.getOverlay();
 LatLng point = e.getLatLng();

 if (overlay != null && overlay instanceof Marker) {
 sender.removeOverlay(overlay);
 } else {
 sender.addOverlay(new Marker(point));
 }
 }
 });

 RootPanel.get().add(mapWiget);</pre>
}
<pre>}

Building the project

The build will be run automatically when debugging the project.

  1. Select your project in the Project Explorer.
  2. Click Run/Run As/Maven install.

Debugging the project

Of course, you can use a plugin like Cypal Studio or the Google plugin for Eclipse. This is a way that works stable on Mac, Linux and Windows.

  1. Select your project in the Project Explorer.
  2. Select Run/Run As/Maven build…
  3. Type gwt:debug as goal, give your launch configuration a name and click Run:
    eclipse-galileo-maven-gwt-launch-configuration
  4. Select your project in the Project Explorer.
  5. Select Run/Debug configurations.
  6. Select Remote Java Application in the list on the left side and click the new launch configuration symbol on the upper left side and click Debug:
    eclipse-galileo-gwt-launch-configuration
  7. The hosted mode browser will open and every time you click on the map a marker will appear:
    GWT-hosted-mode
    GWT-hosted-mode-browser

Thank you for reading my tutorial! Please leave a comment and/or make a link from your web site.

Written by Claudius in: Rich Internet Applications | Tags: , , , , , , , , , , , , , ,

20 Comments »

  • pablo

    Thanks for the tutorial.

    I use Eclipse Galileo 64 bit and trying to use GWT I get the error “…wrong ELF class: ELFCLASS32 (Possible cause: architecture word width mismatch)…”

    Is there any way round to this other than using 32 bit both jdk and eclipse?

    Comment | November 23, 2009
  • Claudius Hauptmann

    Hi Pablo!

    You could run GWT within Eclipse Galileo 64bit and then Google Plugin for Eclipse to figure out whether it is a GWT specific problem or it’s Eclipse/your jdk.

    Perhaps it is possible to run your Eclipse 64bit and the GWT compiler and Hosted Mode Browser inside a 32bit jdk?

    Please leave a comment if you find a solution.

    Comment | November 23, 2009
  • Zephyr Loh

    Hi there,

    When i try to debug the project (step 6 in Debugging the project). I got an error message “Failed to connect to remote VM” . Can you help me with this?

    Thanks

    Comment | January 11, 2010
  • Claudius Hauptmann

    Hi Zephyr, please paste some log message from step 3.

    Comment | January 11, 2010
  • Zephyr Loh

    I’m having problem pasting the log msgs here, cause I get a blank screen after i clicked the submit comment button :(

    Comment | January 11, 2010
  • Zephyr Loh

    11/01/10 5:09:33 PM: [INFO] User settings file does not exist C:\Users\acer\.m2\settings.xml
    11/01/10 5:09:34 PM: Eclipse is running in a JRE, but a JDK is required
    Some Maven plugins may not work when importing projects or updating source folders.
    11/01/10 5:09:42 PM: Updating index http://repo1.maven.org/maven2/
    11/01/10 5:09:45 PM: Downloading central : nexus-maven-repository-index.properties

    Comment | January 11, 2010
  • Zephyr Loh

    11/01/10 5:09:45 PM: Downloaded [central] -> http://repo1.maven.org/maven2/.index/nexus-maven-repository-index.properties
    11/01/10 5:09:45 PM: Updated index for http://repo1.maven.org/maven2/ Sat Jan 09 17:50:45 SGT 2010
    11/01/10 5:11:06 PM: Creating new launch configuration
    11/01/10 5:11:51 PM: E:\Eclipse\my-first-gwt-project-with-maven

    Comment | January 11, 2010
  • Zephyr Loh

    11/01/10 5:11:51 PM: Build type none : gwt:debug
    11/01/10 5:11:51 PM: mvn -B -s C:\Users\acer\.m2\settings.xml gwt:debug
    11/01/10 5:11:51 PM: Build type none : gwt:debug

    ========================================================
    The details of problem is – “Failed to connect to remote VM. Network is unreachable: connect”
    ========================================================
    Succeeded after breaking the post in few parts :) Sorry for the hassle

    Comment | January 11, 2010
  • Claudius Hauptmann

    You should receive the following log messages in step 3 (mvn gwt:debug), otherwise you will not be able to connect in step 6:
    [INFO] Listening for transport dt_socket at address: 8000

    Comment | January 11, 2010
  • Zephyr Loh

    so you mean, I should get mvn: gwt:debug instead of Build type none: gwt:debug ?

    Does it have to do with Eclipse is running on a JRE but JDK? However I got my JDK installed at drive D same with Eclipse and JRE at drive C.

    Comment | January 12, 2010
  • Claudius Hauptmann

    Hi Zephyr, since I’m using a Mac I cannot test the differences between JDK und JRE, because there is a JDK preinstalled and no JRE available.
    The correct command without m2eclipse is “mvn gwt:debug”, so you should enter gwt:debug in step 3.

    Comment | January 12, 2010
  • Zephyr Loh

    yup, i entered gwt:debug in step 3 but still the same problem occurred.

    Is tomcat needed? cause I don’t have Tomcat installed.

    Comment | January 12, 2010
  • yushanyuan

    how to import an exiting maven project into eclipse? i want use the debug?

    Comment | January 20, 2010
  • ho6i

    hi,

    how could i use development mode with eclipse, mvn and ejbs deployed on jboss server? Is there any way to tell dev mode rpc-s that use ejbs to know where the ejbs are deployed?

    Comment | February 6, 2010
  • Keith

    Thanks for publishing the above. Here’s a couple of typos and a question.

    tep 2:
    * Reads: …1.7.o
    ** Should read: …1.7.0
    (but see question below)

    Step 3:
    * Reads: One time for Java and on time for GWT, because GWT should not use all Java libraries
    ** Should read: Once for Java and nce for GWT, because GWT should not use all Java libraries

    * You all say that we need to tell the build that we are using the Google Maps library twice but you only say where to make the change once. You need to include the Setup Eclipse Workspace Step 4 from the Cypal blog

    Step 4:
    In the Application.java there’s an error in the download file at the end. There’s some ‘s embedded

    Question: In section 2 you specify the GWT 1.7.0 and plugin 1.1 versions but the latest (at the time of writing is 1.7.1 and 1.2. Are there problems with the latest versions or was this just that at the time you wrote the blog you had to change to the latest version?

    Comment | February 16, 2010
  • Claudius Hauptmann

    Hello Keith, thank you! These were the latest versions at the time I wrote this tutorial. Now I’m using plugin version 1.2 and for example gwt 1.7.1.

    Comment | February 16, 2010
  • Jeroen Marsman

    Great tutorial, thanks for sharing!

    Comment | February 26, 2010
  • Adriana

    thank you thank you thank you. GREAT tutorial, easy to follow and was the only way I could set this to work! I really appreciate it :D

    Comment | April 27, 2010
  • Appu

    Hi,
    While I am running the application (Run As->maven Install) getting the following errors. Could you please help in solving the error. By the way I am just learning gwt/maven/eclipse.

    PS: Error message are below.

    Regards,
    Appu

    [INFO] Scanning for projects…
    [INFO]
    [INFO] ————————————————————————
    [INFO] Building Unnamed – com.claudiushauptmann:my-gwt-project-with-maven:war:0.0.1-SNAPSHOT 0.0.1-SNAPSHOT
    [INFO] ————————————————————————
    [INFO]
    [INFO] — gwt-maven-plugin:1.1:generateAsync (default) @ my-gwt-project-with-maven —
    [INFO] using GWT jars from project dependencies : 2.0.3
    [INFO] ————————————————————————
    [INFO] BUILD FAILURE
    [INFO] ————————————————————————
    [INFO] Total time: 0.625s
    [INFO] Finished at: Thu Apr 29 10:49:06 CDT 2010
    [INFO] Final Memory: 2M/15M
    [INFO] ————————————————————————
    [ERROR] Failed to execute goal org.codehaus.mojo:gwt-maven-plugin:1.1:generateAsync (default) on project my-gwt-project-with-maven: artifact not found – Unable to download the artifact from any repository

    Comment | April 29, 2010
  • narsimhamudiraj

    Hi, there is some of problems eclipse with cypalstudio plugin .
    i have placed jar files properly in plugin folder.its showing on window frafernce properly.but not showing in create new project for cypal configuration settings.IDE is eclipse galileo. thanks

    Comment | July 8, 2010

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress. Theme: TheBuckmaker