Setting Up Your First Ext GWT Project in Eclipse

For those of you just entering the Ext GWT world, this is a quick guide for setting up your first project in Eclipse.

Prerequisites

It is assumed you already have a working Eclipse install with a recent JDK on your computer. This guide was made using Eclipse 3.6 and JDK 6.

GWT

Follow the GWT setup: http://code.google.com/eclipse/docs/getting_started.html

Ext GWT

Download the latest Ext GWT release (currently 2.2.0).http://www.sencha.com/products/gwt/download.php

Create User Defined Library

Select Windows > Preferences and select Java > Build Path > User Libraries in the preference tree. Click New and type "GXT" into the User library name field. Make sure your new library is selected and click Add JARs. Navigate to the root folder of the Ext GWT download and add the "gxt.jar" file. Click OK.

Create Project

Click the New Web Application Project button in Google toolbar to create a new GWT project. Alternatively, if you don't see the button in the toolbar, you can click File > New > Other and select Web Application Project under the Google folder and click Next. In the Project name field, write "HelloGXT". In the Package field, write "com.hello.gxt". Make sure under Google SDKs the "Use Google Web Toolkit" box is checked. Click Finish.

Build Path

In the Project Explorer, you will see a new folder with your project's name. Right click that folder and click Build Path > Configure Build Path. This takes you to the Properties of your project under the Java Build Path settings. Click Add Library and then select User Library and click Next. Make sure the check box for your Ext GWT library is checked and click Finish. Your Ext GWT library should now appear in your build path.

Resources

Copy the resources folder from the Ext GWT download into your war folder.

HTML

Open HelloGXT.html in Eclipse and delete the table and h1 data in the body tag. Add the following lines to the head tag.

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

XML

Open HelloGXt.gwt.xml in Eclipse. Add the following line under the Other module inherits line.

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

Hello World

To test that you have properly setup Ext GWT, try running this sample program. Replace the EntryPoint class in HelloGXT.java with the sample below.

public class HelloGXT implements EntryPoint{
	@Override
	public void onModuleLoad() {
		MessageBox.info("Message", "Hello World!!", null);
	}
}

Run your program like any GWT project (seehttp://code.google.com/eclipse/docs/getting_started.html). If you setup Ext GWT correctly, you should see a message box with the words Hello World!! Congratulations! You have created your first Ext GWT project.