Blog of Claudius Hauptmann

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).
   
   When Eclipse has started, you will see the welcome screen:
   
   Close the Welcome screen with the arrow on the right side and the workspace is displayed:
   
2. Add the m2eclipse plugin (Integration of Maven into Eclipse)
   Open Help/Install New Software… and click Add on the upper right side:
   
   Enter M2Eclipse as name, http://m2eclipse.sonatype.org/update/ as Location and click OK:
   
   Select the items shown and click Next:
   
   Review the details and click Next:
   
   Accept the license and click Finish:
   
   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:
   
   Click Next:
   
   Select the gwt-maven-plugin archetype from org.codehaus.mojo and click Next:
   
   Enter Maven details for this project and click Finish:
   
   Your workspace will look like this:
   
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:
   
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:
   
7. The hosted mode browser will open and every time you click on the map a marker will appear:
   
   

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