SHEKAR SANA : A basic Introduction to GWT EXT

Introduction To GWT EXT:

This is a basic tutorial to understand the working of GWTEXT. It gives a basic Hello world example using Gwt, GwtExt, and eclipse.

GWT

The Google Web Toolkit is an open source toolkit allowing developers to create Ajax applications in the Java programming language. GWT supports rapid client/server development and debugging in any Java IDE. In a subsequent deployment step, the GWT compiler translates a working Java application into equivalent JavaScript that programmatically manipulates a web browser's HTML DOM using DHTMLtechniques. GWT emphasizes reusable, efficient solutions to recurring Ajax challenges, namely asynchronous remote procedure calls, history management, book marking, and cross-browser portability.

EXT

Ext (pronounced "extent") is an open-source JavaScript library, for building richly interactive web applications using techniques such as AJAX, DHTML and DOM scripting. Originally built as an extension of YUI, Ext can now also extend jQuery and Script.aculo.us. As of version 1.1, Ext can run stand-alone without relying on any of those external libraries, though they remain an option for integration.Ext JS is an excellent framework for building web applications that have desktop like functionality in a web browser. Ext is one of the best Javascript Ajax library around and this is evident by the amazing UI's that can built with it. Ext has a large number of polished widgets but requires the developer to be proficient in Javascript in order to build larger well designed web apps

GWT-EXT

GWT-EXT is a library that integrates GWT and EXT. One of the primary goals is to make the GWT-Ext widgets and API's work seamlessly with the core GWT infrastructure and its API's

SETUP INSTRUCTIONS

We will see the working of GWT-EXT in eclipse 3.3 using the plug-in GWT Designer

GwtDesigner is a tool used to work with GWT.a 14 day trial can be downloaded from

The site http://www.instantiations.com/gwtdesigner/

Creating a new GWT project in Eclipse(GWT Designer installed)

File>New>Project>Designer>GWT>GWT Java Project>Next
Now enter the Project Name>DemoGwtExt>Next. Click on > create Gwt module
Enter the Module name(ExGwtExt) and Package name(com.sfeir)
Now a project named ExGwtExt is created in eclipse
Next we will see the necessary libraries to be downloaded
First download Ext from http://extjs.com/download
Download gwtext-0.9.1.Zip http://code.google.com/p/gwt-ext/
Save the two libraries in your convenient folder ,Unzip gwtext-0.9.1.Zip and you can find the Jar file gwtext.jar in that folder.

Now we need to add gwtext.jar to the class path to our project DemoGwtExt.In eclipse right click on the project àBuild pathàConfigure Build Path in the Tab Libraries click on add external jars there you can set the gwtext.jar , Now gwtext.jar file has been set to the class path

Few modifications have to be done to the ExGwtExt.gwt.xml file. After modifications the file looks like this

<inherits name="com.gwtext.GwtExt"/> //line to be added//

<entry-point class="com.sfeir.client.ExGwtExt"/>

</module>

The downloaded library Ext contains many compiled java script and directories. In that we need ext-all.js and the entire resources andadapter directories. and copy these to the public folder in our /src/com/sfeir/public/js/ext/ resources

/src/com/sfeir/public/js/ext/ adapter

/src/com/sfeir/public/js/ext-all.js

Now open the ExGwtExt.html found in the public folder, and add the following lines which are displayed as bold letters to the ExGwtExt.html

<html>

<head>

<title>Wrapper HTML for ExGwtExt</title>

</head>

<body>

<! -- OPTIONAL: include this if you want history support -->

</body>

</html>

That’s all we have done all the necessary steps to configure GwtExt in our project .

Hello World Example

We will see an example to display Hello World on the screen using GwtExt.

Open ExGwtExt.java (src/com/sfeir/client/ExGwtExt.java) and code the program like this

package com.sfeir.client;

/**

*Import the necessary package to run the program

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.Window;

import com.google.gwt.user.client.ui.RootPanel;

import com.gwtext.client.core.EventObject;

import com.gwtext.client.widgets.Button;

import com.gwtext.client.widgets.ButtonConfig;

import com.gwtext.client.widgets.MessageBox;

import com.gwtext.client.widgets.event.ButtonListenerAdapter;

/**

* Entry point classes define <code>onModuleLoad () </code>.

public class gwtExt implements EntryPoint

{

public void onModuleLoad() {

RootPanel rootPanel = RootPanel.get ();

Button but= new Button (new ButtonConfig () {

{

setText("Example of hello world");

setButtonListener (new ButtonListenerAdapter()

{

public void onClick(Button button, EventObject e) {

MessageBox.alert("Gwt-Ext", "<< hello World example >>");

}

});

}

});

rootPanel.add (but, 300,300);

}

Save the project and now run the project as GWT application in hosted mode. Now we can see a Button when clicked on that it displays Hello World example

We can also run the program in web mode by clicking on compile button in the hosted mode screen

This is the output seen in Hosted mode.Thats all it’s so easy to integrate GwtExt in our Gwt project so that we use well polished widgets in our project

Conclusion

This is a basic tutorial for integrating GWTEXT in your GWT application, thus we can enjoy the amazing functionality of Ext in GWT, in the coming series we can see how to integrate Forms, Panels , Grids from GWTEXT in GWT.

Reference

http://code.google.com/p/gwt-ext/

Eclipse http://www.eclipse.org/

Google Web Toolkit http://code.google.com/webtoolkit/

GWTDesigner http://www.instantiations.com/gwtdesigner/

Official GWT Blogs http://groups.google.com/group/Google-Web-Toolkit

Official GWT Forum http://googlewebtoolkit.blogspot.com/

Shekar Sana