10 May, 2012

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

GWT Features

GWT Specific Features:

GWT Designer supports the following unique features:

Application Launching
Application Compiling
Build & Deployment
CSS Support
Enhanced Compilation
Image Bundles
Internationalization (i18n)
JUnit Test Creation
Palette
Panels
Projects
Refactoring
Remote Services
Using GWT-Ext
Using Ext GWT (GXT)
Using SmartGWT

Related Sites:

http://developerlife.com/tutorials/?p=80

http://googlewebtoolkit.blogspot.in/2008/08/
gwt-15-now-available.html

http://www.vogella.com/articles/GWT/article.html

https://developers.google.com/web-toolkit/doc/
latest/tutorial/gettingstarted

BY

Shekar Sana

Setting-up GWT-Ext for GWT 1.6 with Eclipse

GWT-EXT:

GWT-Ext is a great set of widgets for the Google Web Toolkit (GWT). At the time of writing the release candidates for GWT 1.6 are out. GWT 1.6 has a different project structure and embedded Java Servlet (Jetty) server. These changes bring the advantage that the project structure can be deployed directly to a Java Servlet server (such as Jetty of TomCat) without having to manually create the WAR directory. A slight disadvantage is that the setup documentation for GWT-EXT is no longer quite right.

Below I describe the steps necessary to create a GWT 1.6 project with eclipse and configure it for GWT-Ext.

Install the Google Plugin for Eclipse (http://code.google.com/eclipse/docs/getting_started.html).
Use the plugin to create simple GWT application:
1. Select File -> New -> Web Application Project from the Eclipse menu.
2. In the New Web Application Project wizard, enter a name for your project (e.g. MegaDeth) and a java package name, e.g., com.megadeth.
3. Take the tick out of the Use Google App Engine tick box.
4. Click Finish.
To run the application:
1. Right click it in package explorer and select Run As -> Run Configurations
2. Put a tick in the Automatically Select Unused Port tickbox.
3. Click Run to see the default GWT 1.6 application
Download gwtext-2.0.5.zip, unpack it and copy the gwtext.jar to war\WEB-INF\lib in the project directory.
Create a js directory in the war directory of the project.
Download ext-2.0.2.zip, unpack it and copy the contents to the js directory.
Right click on the project in package explorer and select Refresh so that eclipse can see the new jar and js directory.
Add gwtext.jar to the project:
1. Right click on the project in package explore
2. Select Properties -> Java Build Path -> Libraries.
3. Click Add JARs, navigate to gwtext.jar in the project and double click it.
4. Click OK to close the properties dialog.

In the project's gwt.xml file (e.g. com.megadeth\MegaDeth.gwt.xml) at the hightlight lines below:

<inherits name='com.google.gwt.user.User'/>
<inherits name='com.gwtext.GwtExt' />
...
<entry-point class='com.megadeth.client.MegaDeth'/>
<stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
<script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
<script src="../js/ext-2.0.2/ext-all.js" />

Change the project's entry point (e.g. com.megadeth.client.MegaDeth.java) to the following:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;

public class MegaDeth implements EntryPoint 
{
 public void onModuleLoad() 
 {
  Panel mainPanel = new Panel();   
  mainPanel.setTitle("Hello World!");
  mainPanel.setHeight(300);
  mainPanel.setWidth(500);   
  RootPanel.get().add(mainPanel);
 }
}

Remove the following from the project html file (e.g. war/MegaDeth.html):
    <h1>Web Application Starter Project</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
    </table>

Run the application as before to see a GWT-Ext panel.

Shekar Sana

GWT Plugin ....Setup

Downloading and Installing the Plugin

Installing the Plugin

These instructions assume that you have already installed some flavor of Eclipse. If you have not, Eclipse can be downloaded from http://www.eclipse.org/downloads/.

Note: As an alternative to installing from the update site, you can install the Google Plugin for Eclipse by downloading and installing an archive of the update site.

Update sites

If you are already familiar with installing Eclipse plugins, you can just use the update site URL below for your version of Eclipse.

Eclipse 3.7 (Indigo)

http://dl.google.com/eclipse/plugin/3.7

Eclipse 3.6 (Helios)

http://dl.google.com/eclipse/plugin/3.6

Eclipse 3.5 (Galileo)

http://dl.google.com/eclipse/plugin/3.5

Steps:

Fire up Eclipse and go to Help -> Install New Software…

Once the download page opens, paste one of the links from bellow into the “Work with” text box and click the Add button. The url you use is depends on which version of Eclipse you are running.
Select all the available options that are loaded into the selection box and click the Nextbutton.
Click the Next button to confirm that you actually want to install the plugin.
Agree to the Terms and Conditions and click the Finish button.
Eclipse will go off and pull down all the relevant plugin goodness. Once the magic elves are done doing their thing, click Yes to restart Eclipse.

`Once it is done`

`Then install the GWT Designer:`

Eclipse 3.7 (Indigo)

http://dl.google.com/eclipse/inst/d2gwt/latest/3.7

`Eclipse 3.6 (Helios)`

http://dl.google.com/eclipse/inst/d2gwt/latest/3.6

`Eclipse 3.5 (Galileo)`

http://dl.google.com/eclipse/inst/d2gwt/latest/3.5







Procedure is same as above. 




For Creating sample GWT APplication:(Help you more)



https://developers.google.com/web-toolkit/tools/gwtdesigner/tutorials/loginmanager....




 Related site:

http://courses.coreservlets.com/Course-Materials/gwt.html








     BY





Shekar Sana

Few Lines About Me

I work fast only when i like to work. Otherwise, am slow and relaxed most of the time. I am still searching the right career for myself... exploring various fields and learning from the mistakes and the great ups and down. On the whole, I relish every second of my life. I care about very few people. My close buddies : I treasure them. My hobbies are Listening To Music and Playing Cricket. I have a gift of immense imagination . . So basically, am a learner. Not yet perfect! Yea! Thats me! ♥ :)

SHEKAR SANA

Pages