Sencha Inc. | HTML5 Apps

Getting Started with Ext GWT

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

This Tutorial is most relevant to , 2.x.

System Requirements

Library Setup

This is a guide for setting up your environment in Eclipse.

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 a 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.

Project Setup

These instructions are for configuring Eclipse. Setup for other IDEs should be similar. It is assumed you already followed the Library Setup.

Create Project

  • Start a new GWT project by clicking File > New > Project.
  • Under Google select Web Application Project 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);
  }
}

Test

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!

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

3 Comments

quqf

3 years ago

qqf

Jam One

3 years ago

I tried this demo and I get an error:

MessageBox cannot be resolved. I tried importing org.eclipse.swt.widgets but it could not be found in my eclipse. I am using the Eclipse SDK Version 3.7 with Java version 1.6.0, do you have any idea how to fix this? Am I failing to import something?

Tercio Gaudencio Filho

3 years ago

@Jam One, you need to import com.extjs.gxt.ui.client.widget.MessageBox.

Leave a comment:

Commenting is not available in this channel entry.