Sencha Inc. | HTML5 Apps

Blog

Setting Up Your First Ext GWT Project in Eclipse

November 10, 2010 | Brendan Coughran

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

There are 25 responses. Add yours.

Loiane

4 years ago

Very helpful! Thanks!

Ara Minosian

4 years ago

Do you know way to integrate this with JSF?

Brendan

4 years ago

No, JSF is targeting user interfaces on the server side, where as GWT is on the client side.

Nikolay

4 years ago

Thanks!

Gian Marco Gherardi

4 years ago

With GWT 2.x, you should also change HTML doctype:

aodkung

4 years ago

i love Ext JS

R M

4 years ago

I have a couple questions about Ext GWT 3.0 related to license pricing and release schedule. I tried posting these from your contacts page (http://www.sencha.com/contact/index.php), but it wouldn’t accept my work email address as a valid email address (please fix this if you can, it’s a bit unfair that I can’t post because of geography/nationality!) so I’m posting here.

I’d appreciate it if someone wrote back to me as soon as possible.

Cheers

Gabriel

4 years ago

Thanks.
Its works

Docexoyt

4 years ago

Hi, I am trying to follow example here. But I am using eclipse3.5 and GXT 2.2.1 They do not work for me.
The error is like this:
Loading modules
  com.hello.gxt.HelloGXT
    Loading inherited module ‘com.extjs.gxt.ui.GXT’
      [ERROR] Unexpected error while processing XML
java.lang.NoClassDefFoundError: com/google/gwt/core/ext/Generator

Do you have any idea ?

Farrukh Naveed Anjum

4 years ago

Hello There, I am getting this exception.

onModuleLoad() threw an exception

Exception while loading module com.hello.gxt.client.HelloGXT. See Development Mode for details.
java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:183) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) at java.lang.Thread.run(Unknown Source) Caused by: java.lang.VerifyError: (class: com/extjs/gxt/ui/client/widget/Container, method: getItemCount signature: ()I) Illegal constant pool index at com.extjs.gxt.ui.client.widget.MessageBox.getDialog(MessageBox.java:337) at com.extjs.gxt.ui.client.widget.MessageBox.show(MessageBox.java:745) at com.extjs.gxt.ui.client.widget.MessageBox.info(MessageBox.java:144) at com.hello.gxt.client.HelloGXT.onModuleLoad(HelloGXT.java:27) ... 9 more


Here is my Code

package com.hello.gxt.client;

import com.extjs.gxt.ui.client.widget.MessageBox;
import com.hello.gxt.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
* Entry point classes define onModuleLoad().
*/
public class HelloGXT implements EntryPoint{
@Override
public void onModuleLoad() {
  MessageBox.info(“Message”, “Hello World!!”, null);
}
}

Please do guide me what is the wrong.

wafflemakerwaringpros

4 years ago

i am really impressed and even-handed after to conjecture thanks pro the choice info like update us fitted fully kismet in your be loath of thanks things being what they are again.

guilherme

4 years ago

When i Compile in Linux or windows i ve this error:

All lines was added like example

Compiling module com.hello.gxt.HelloGXT
  [ERROR] Errors in ‘jar:file:/C:/Users/guilherme/workspace/gxt.jar!/com/extjs/gxt/ui/client/data/BeanModelLookup.java’
    [ERROR]  Internal compiler error
java.lang.IncompatibleClassChangeError: Found interface com.google.gwt.core.ext.typeinfo.JClassType, but class was expected
at com.extjs.gxt.ui.rebind.core.BeanModelGenerator.isBeanMarker(BeanModelGenerator.java:197)

guilherme

4 years ago

Please downgrade the GWT 2.2 to 2.0.4 this make the gxt funct correctly

Nanina00

4 years ago

Hi,

Can someone tell me how to do GXT with Oracle. I have a problem I can not connect to my database. I’m using GWT 2.0 and GXT 2.0 on Eclipse Helios.

Thanks

Jonathan

4 years ago

Farrukh Naveed Anjum, Have you find your answer? I’m having similar issue. I just installed Eclipse, GWT 2.2.0, Ext GWT as mentionned and get the following message :

MessageBox cannot be resolved…  in class HelloGXT.java

When I cut and past the entrypoint method as asked on the page, I get the error message.

Please advise if any solutions.

Jonathan


package com.hello.gxt.client;

import com.hello.gxt.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
* Entry point classes define onModuleLoad().
*/
public class HelloGXT implements EntryPoint{
@Override
public void onModuleLoad() {
  MessageBox.info(“Message”, “Hello World!!”, null);
}
}

Ivan Aquino

4 years ago

Thanks so much for this example, this worked out of the box.

Naked Webcam bjp

4 years ago

Thank You for this post. and I had to say that You have right in this what Your saying.       
I will back here again… Wish you all the best and will come back at this blog

dslava

3 years ago

Your blog is worth reading just a suggestion though have you thought about spam filtering? there are a hell of a lot of comments!

Wandile Chamane

3 years ago

Hi,

Can anyone tell me when will EXT GWT v3.0 be available.

Sergey_Bennchi

3 years ago

It’s good. But this posted in http://nevashedelo.ru/
lohotron? aferizm!!!

Michael

3 years ago

it’s good. bu t how to deploy my application in my service?

Jorge

3 years ago

Great!! Thanks!

VaryGreme

3 years ago

Although bill could not defend his reputation with his fists, a method.

veli

3 years ago

hi dear All.
First: Mr Jonathan Please write the following statement to the head of your program:
import com.extjs.gxt.ui.client.widget.MessageBox;

Second.I have a big problem: such that I did what is writing in http://www.sencha.com/blog/setting-up-your-first-ext-gwt-project-in-eclipse/  At f.irst times my first project run correctly. But then owing to some problems, I deleted Eclipse,GWT, and Ext GWT. (all of them what I had installed). Then I want to do it again: i e I installed: Eclipse (indigo), ADT, GWT, Ext-GWT 2.5. But when I run the program it gives the error ,it doesn’t give link to show my program in a browser. some mistakes in Console are: “Failure while parsing XML”... [ERROR] shell failed in doStartup method… Can you help me please?

veli

3 years ago

Hi again..
Did anybody read my comment? smile.
Moreover I want to add the console and .xml file here to give you more information about mistake..:
xml file:
<?xml version=“1.0” encoding=“UTF-8”?>
<module rename-to=‘hellogxt’>
  <!—Inherit the core Web Toolkit stuff.                —>
  <inherits name=‘com.google.gwt.user.User’>

  <!—Inherit the default GWT style sheet.  You can change     —>
  <!—the theme of your GWT application by uncommenting       —>
  <!—any one of the following lines.                  —>
  <inherits name=‘com.google.gwt.user.theme.clean.Clean’>
  <!—<inherits name=‘com.google.gwt.user.theme.standard.Standard’>—>
  <!—<inherits name=‘com.google.gwt.user.theme.chrome.Chrome’>—>
  <!—<inherits name=‘com.google.gwt.user.theme.dark.Dark’>  —>

  <!—Other module inherits                         —>

<inherits name=‘com.extjs.gxt.ui.GXT’ >
           
  <!—Specify the app entry point class.                —>
  <entry-point class=‘com.hello.gxt.client.HelloGXT’>

  <!—Specify the paths for translatable code             —>
  <source path=‘client’>
  <source path=‘shared’>

</module>
====================================================
AND THE CONSOLE:

[Fatal Error] :1:7: The processing instruction target matching “[xX][mM][lL]” is not allowed.
Loading modules
  com.hello.gxt.HelloGXT
    [ERROR] Failure while parsing XML
org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 7; The processing instruction target matching “[xX][mM][lL]” is not allowed.
at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(Unknown Source)
at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(Unknown Source)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.parse(ReflectiveParser.java:347)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.access$200(ReflectiveParser.java:68)
at com.google.gwt.dev.util.xml.ReflectiveParser.parse(ReflectiveParser.java:418)
at com.google.gwt.dev.cfg.ModuleDefLoader.nestedLoad(ModuleDefLoader.java:296)
at com.google.gwt.dev.cfg.ModuleDefLoader$1.load(ModuleDefLoader.java:198)
at com.google.gwt.dev.cfg.ModuleDefLoader.doLoadModule(ModuleDefLoader.java:324)
at com.google.gwt.dev.cfg.ModuleDefLoader.loadFromClassPath(ModuleDefLoader.java:156)
at com.google.gwt.dev.DevModeBase.loadModule(DevModeBase.java:992)
at com.google.gwt.dev.DevMode.loadModule(DevMode.java:557)
at com.google.gwt.dev.DevMode.doStartup(DevMode.java:443)
at com.google.gwt.dev.DevModeBase.startUp(DevModeBase.java:1058)
at com.google.gwt.dev.DevModeBase.run(DevModeBase.java:811)
at com.google.gwt.dev.DevMode.main(DevMode.java:311)
    [ERROR] Unexpected error while processing XML
com.google.gwt.core.ext.UnableToCompleteException: (see previous log entries)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.parse(ReflectiveParser.java:371)
at com.google.gwt.dev.util.xml.ReflectiveParser$Impl.access$200(ReflectiveParser.java:68)
at com.google.gwt.dev.util.xml.ReflectiveParser.parse(ReflectiveParser.java:418)
at com.google.gwt.dev.cfg.ModuleDefLoader.nestedLoad(ModuleDefLoader.java:296)
at com.google.gwt.dev.cfg.ModuleDefLoader$1.load(ModuleDefLoader.java:198)
at com.google.gwt.dev.cfg.ModuleDefLoader.doLoadModule(ModuleDefLoader.java:324)
at com.google.gwt.dev.cfg.ModuleDefLoader.loadFromClassPath(ModuleDefLoader.java:156)
at com.google.gwt.dev.DevModeBase.loadModule(DevModeBase.java:992)
at com.google.gwt.dev.DevMode.loadModule(DevMode.java:557)
at com.google.gwt.dev.DevMode.doStartup(DevMode.java:443)
at com.google.gwt.dev.DevModeBase.startUp(DevModeBase.java:1058)
at com.google.gwt.dev.DevModeBase.run(DevModeBase.java:811)
at com.google.gwt.dev.DevMode.main(DevMode.java:311)
[ERROR] shell failed in doStartup method

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.