Sencha Inc. | HTML5 Apps

Ext GWT and Maven

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

This Tutorial is most relevant to , 2.x.

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

All of the above + working Maven installation which means you should be able to open a command prompt, type in
mvn \-version
and get the result. Don't have Maven yet? Time to visit Maven site [6]

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

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
which will pull in various dependency JARs and run tests

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
that should bring up your app in the hosted mode

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"
and navigating to the folder that contains your project

Run

mvn gwt:eclipse
from command line

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
. You should see a window with a single button "Hello". Go ahead - click on it!

Share this post:
Leave a reply

Written by Darrell Meyer
Darrell Meyer leads the Sencha GXT product team at Sencha. Before joining the company, Darrell was the creator of the popular open source MyGWT Widget Library for Google Web Toolkit (GWT). Darrell brings his expert Java and GWT knowledge to Sencha. With 10+ year’s experience building enterprise web applications, Darrell is equally well versed as both a software architect and user interface expert.
Follow Darrell on Twitter

1 Comment

Thamizharasu

3 years ago

Hi,
I tried to setup Ext-Gwt project based on maven setup guide. Unfortunately this document is outdated and my project is not running. Do you have any latest steps to setup the project using maven?

Thanks,
Tham

Leave a comment:

Commenting is not available in this channel entry.