How to use Ext GWT(GXT) in Eclipse 3.4 to create a rich internet application

Ext GWT is a Java library for building rich internet applications with the Google Web Toolkit (GWT). If you have started working with GWT you will find the Ext GWT library very helpful for its high performance and customizable UI widgets. Here I describe you how to use this library in your GWT project.

First of all download Ext GWT 1.2.4 SDK, the latest stable version of this library and extract it.

Now Create a GWT project by following the steps I have described in my previous blog. Follow the steps to add gxt.jar to the project.

->Right click on project and select the properties menu..
->Select Java Build Path.
->Select Libraries tab.
->Click on Add External JARS and select gxt.jar. (You will find this jar file inside the folder where you have extracted the library previously. )



Now change the your_project_name.gwt.xml file. Add the following line in this file.

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





Here goes the tricky part. You will find a folder named resources in the extracted folder. This contains the css and images used in this library. Copy the css and images folder in the war folder of your application. Now add the following stylesheet to your host page.

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />


And remember Ext GWT requires no doctype or the following doctype (quirksmode).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


That's all. You are now ready to use the Ext GWT library to enhance your application.

5 comments:

Hillol June 14, 2009 at 1:55 AM  

Nice tutorial Zawoad...
But, if you want to make your project compatible with the GWT 1.6.* multi-module concept, Go to http://extjs.com/products/gxt/download.php and download the latest build for GXT 2.0 or later. It'll solve your problem with even more ease.

Waqas Malik October 12, 2010 at 12:04 AM  

Zawoad just make a little change in html code: you mentioned ext-all.css but its related to GWT-EXT. So change it to gxt-all.css to enable EXT-GWT css.

Luca May 10, 2011 at 9:36 AM  
This comment has been removed by the author.
aaryan August 19, 2011 at 6:50 AM  

Hi , hope u are fine...
i have some issue related to GXT grid.

i have a model class ex.
stock(string name, int salary)

and one dummy data class for this model with values like
ex.
stock("sasd",123213);
stock("sad",122);
stock("aa",12321);

now i want to display only those stock details ,where salary is more than 122.
How can i achieve this,? please provide an example.
I'll be very thankful to you.

Maya February 3, 2012 at 2:17 AM  

I have following warning
the following entry 'jar file path' will not be available on server's classpath.

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers

    There was an error in this gadget