Published Feb 11, 2010 | Darrell Meyer | Tutorial | Easy
Last Updated Jul 11, 2011

This tutorial covers step-by-step creation of a simple GXT/GWT/Maven project utilizing the following tools:

• Maven Eclipse plugin [1]
• Maven GWT plugin [2]
• GWT SDK [3]
• Google Eclipse plugin [4]
• ExtGWT [5]

It's intended for developers and anyone who wants to become familiar with GWT and the toolstack

Required

mvn \-version

Creating the project

Open command prompt in the directory you want to create your project and use GWT archetype by executing the following command

mvn archetype:generate \
   -DarchetypeGroupId=org.codehaus.mojo \
   -DarchetypeArtifactId=gwt-maven-plugin \
   -DarchetypeVersion=1.2 \
   -DgroupId=myGroupId \
   -DartifactId=myArtifactId

Open pom.xml since there are few thing you want to change

Add codehouse Mojo maven repository

<repositories>
  	<repository>
            <id>codehaus-maven-repo</id>
            <name>Codehaus repo</name>
            <url>http://repository.codehaus.org/org/codehaus/mojo/</url>
        </repository>
  </repositories>

You may want to add few other repos such as

• http://gwt-maven.googlecode.com/svn/trunk/mavenrepo/
• http://snapshots.repository.codehaus.org/

Update GWT version

<gwt.version>1.7.0</gwt.version>

Remove commented out section of pom.xml (unless you will need it later)

Modify pom.xml, set the gwt-maven-plugin plugin version to 1.1

At this point you should be able to execute

mvn verify

Now - lets verify that out GWT-specific tasks can be run

Add run target to gwt-maven-plugin section. Open pom.xml and inside gwt-maven-plugin definition add the following lines

<configuration>
  <runTarget>com.mycompany.foo.Application/Application.html</runTarget>
</configuration>

This target, of course can be changed later if you rename any packages or file names

Execute

mvn gwt:run

Adding ExtGWT dependency

Adding extGWT is as easy as adding another dependency. Let's make it a little better configurable following GWT conventions. So in your pom.xml:

Add ext.version element within properties tag

<gxt.version>2.0.1</gxt.version>

Add gxt dependency

<dependency>
     <groupId>com.extjs</groupId>
     <artifactId>gxt</artifactId>
     <version>${gxt.version}</version>
     <scope>provided</scope>
   </dependency>

Migrating to Eclipse

It was fun but we want to develop our project in Eclipse. Here are the steps (order is important)

Import maven project to your Eclipse by clicking

Eclipse->File->Import->General->"Maven project"

Run

mvn gwt:eclipse

Go back to Eclipse, refresh project folder then right-click on the project node and select "Run As GWT Application"

Dismiss the GWT emulator since it will give you "Page not found" error. I will create a run target for you

Click Run->Run Configuration->GWT Application->Application

In the right pane next to the HTML field click "Browse" button

From the pop-up select war/com.td.engtools.Application/Application.html

Now you should be able to run emulator in the hosting mode from both command-line and from Eclipse

From now on tutorial will refer to root of your project (as seen in Eclipse) as $PROJECT

Prepping for fun

Clean errors

As is - our only test file generates some errors in Android console. To get rid of these add the following line into Application.gwt.xml

<source path="client" excludes="*/*Test*.java" />

WARNING: Do not name your "regular" java file TestSomething.java that is reserved for "real" test classes!!!

Add ExtGWT to the project

We don't have to worry about gxt.jar however we still need bring in non-java files and add some configurations. So you will need to download actual extGWT distro. Once you have it:

Manually copy $GXT-ROOT/resources to new ext folder nested in the public folder of your client where currently you have your Application.html and Application.css ($PROJECT/src/main/resources/com/mycompany/foo/public/gxt) These will be copied over to war folder as part of the build process

Add the following 2 lines to $PROJECT/src/main/resources/com/td/engtools/public/Application.html

<script language='javascript' src='resources/flash/swfobject.js'></script>
<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />

Add the line below to Application.gwt.xml

<inherits name='com.extjs.gxt.ui.GXT'/>

Remove the line below from Application.gwt.xml

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

Remove classes from Application.css you don't need these. Hint: you may later use this file to put your custom CSS

Now, the actual fun part! Create java file in the same package as Application.java with the following content

package com.mycompany.foo.client;
 
 
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
 
public class HelloWorldExample extends LayoutContainer {
 
  public HelloWorldExample() {
    setLayout(new FlowLayout(10));
 
    final Window window = new Window();
    window.setSize(500, 300);
    window.setPlain(true);
    window.setModal(true);
    window.setBlinkModal(true);
    window.setHeading("Hello Window");
    window.setLayout(new FitLayout());
 
    TabPanel panel = new TabPanel();
    panel.setBorders(false);
    TabItem item1 = new TabItem("Hello World 1");
    item1.addText("Hello...");
    item1.addStyleName("pad-text");
 
    TabItem item2 = new TabItem("Hello World 2");
    item2.addText("... World!");
    item2.addStyleName("pad-text");
    panel.add(item1);
    panel.add(item2);
 
    window.add(panel, new FitData(4));
 
    window.addButton(new Button("Hello"));
    window.addButton(new Button("World"));
 
    Button btn = new Button("Hello World");
    btn.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        window.show();
      }
    });
    add(btn);
 
  }
 
}

Modify Application.java onModuleLoad() method

/**
   * This is the entry point method.
   */
  public void onModuleLoad()
  {
     HelloWorldExample hello = new HelloWorldExample();
     RootPanel.get().add( hello );
  }

Run the app from Eclipse or by executing

mvn gwt:run