Sencha Inc. | HTML5 Apps

Setting Up Your First Ext GWT Project in Eclipse

Published Nov 10, 2010 | Brendan Coughran | Tutorial | Easy
Last Updated Jul 29, 2011

This Tutorial is most relevant to , 2.x.

Setting Up Your First Ext GWT Project in Eclipse by Brendan CoughranFor 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

20100920-gxt0

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.

20100920-gxt1

Resources

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

20100920-gxt2

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 (see http://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.

20100920-gxt3

Share this post:
Leave a reply

Written by Brendan Coughran
Brendan leads the Sencha GXT graphics effort at Sencha. He is passionate about graphics technology and has years of experience developing with Java. He has worked with dozens of graphics APIs, ranging from using ncurses for terminal interfaces to building his own software renderer.
Follow Brendan on Twitter

1 Comment

Ali Karimi

3 years ago

Hi
I have a problem plz help me.
You mentioned in “Create User Defined Library” :
.... Navigate to the root folder of the Ext GWT download and add the “gxt.jar” file. ....
gxt.jar file does not exist in your zip file.
I unzipped gxt-2.2.5 and found gxt-2.2.5-gwt2.jar and gxt-2.2.5-gwt22.jar and gxt-2.2.5-gwt17.jar
but not GXT.jar
which is must added to my project?
thankfully

 

Leave a comment:

Commenting is not available in this channel entry.