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

Prepared on behalf of GROUPE SFEIR, under the guidance of DIDIER GIRARD (CTO) GROUPE SFEIR www.sfeir.com

By SIVAGURU Sreekanth. Software Engineer GROUP SFEIR.


Many Thanks to Sanjiv Jivan for his invaluable contribution in integrating GWT and EXT


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 DHTML techniques. 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 pathConfigure 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

<module>

<inherits name="com.google.gwt.user.User"/>

<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 and adapter 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>

<meta name='gwt:module' content='com.sfeir.ExGwtExt'/>

<link type="text/css" rel='stylesheet' href='ExGwtExt.css'/>

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

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" />

<script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>

<script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>

<script type="text/javascript" src="js/ext/ext-all.js"></script>

</head>

<body>

<script language="javascript" src="gwt.js"></script>

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

<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

</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 (newButtonListenerAdapter() {

          public voidonClick(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


Sanjiv Jivan Creator of GWTEXT 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/