From Learn About the Ext JavaScript Library

Contents 1 Preamble 2 Required 3 Creating the project 4 Adding ExtGWT dependency 5 Migrating to Eclipse 6 Prepping for fun 6.1 Clean errors 6.2 Add ExtGWT to the project

Preamble

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 \
-DarchetypeRepository=http://snapshots.repository.codehaus.org \
-DarchetypeGroupId=org.codehaus.mojo
-DarchetypeArtifactId=gwt-maven-plugin \
-DarchetypeVersion=1.1 -DgroupId=com.mycompany.foo -DartifactId=gwtest

• 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

  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)

1. Import maven project to your Eclipse by clicking

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

   and navigating to the folder that contains your project
2. Run

   mvn gwt:eclipse

   from command line
3. Go back to Eclipse, refresh project folder then right-click on the project node and select "Run As GWT Application"
4. Dismiss the GWT emulator since it will give you "Page not found" error. I will create a run target for you
5. Click Run->Run Configuration->GWT Application->Application
6. In the right pane next to the HTML field click "Browse" button
7. From the pop-up select war/com.td.engtools.Application/Application.html
8. 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:

1. 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
2. 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" />

1. Add the line below to Application.gwt.xml

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

1. Remove the line below from Application.gwt.xml

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

1. Remove classes from Application.css you don't need these. Hint: you may later use this file to put your custom CSS
2. 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);
 
  }
 
}

1. Modify Application.java onModuleLoad() method

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

1. 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!