Sharing Experiences: June 2009

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.

To my mind GWT is going to take the lead among the web application development tools. So this is the high time to start learning about GWT. Here I describe you how to create your first GWT application in Eclipse 3.4 (Ganymede).

If you have not installed Google plugin and SDK for eclipse please go to this page and follow the instructions.

Create your project
Select File-> New-> Web Application project. Enter "FirstGwtApp" for your project name and "com.ratul.FirstGwtApp" for the package name.

Create GWT entry point

Now you have to create an Entry point class which is similar to the main method in Java.
Right click on the "com.ratul.FirstGwtApp.client" and select New-> Class. Enter "HelloWorld" as the name of the class.

This class must implement the interface "com.google.gwt.core.client.EntryPoint".
So click on the Add button and write "entrypoint" in the choose interface text field.
Select the matching item.

Here is the code of the HelloWorld class

package com.ratul.FirstGwtApp.client;

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

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

@Override
public void onModuleLoad() {
Label label = new Label("Enter your name:");
final TextBox textBox = new TextBox();
Button button = new Button("Click Here");
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert("Hello "+ textBox.getText());
}
});

RootPanel.get().add(label);
RootPanel.get().add(textBox);
RootPanel.get().add(button);
}
}

Now change the FirstGwtApp.gwt.xml in package com.ratul.FirstGwtApp to set the HelloWorld class as the entry point class of your application.

Create a Start HTML page

In the war folder you will find a file, named FirstGwtApp.html. Between the body tag write the following code

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabindex="-1" style="border: 0pt none ; position: absolute; width: 0pt; height: 0pt;"></iframe>

<h1>Welcome to my first GWT Application</h1>

Configure the web.xml

Go to war-> WEB-INF folder and there you will find a web.xml file. The Google Plug-in created this configuration file and placed a reference to a servlet.
Set the FirstGwtApp.html as the welcome file of your application.

You are only one step away from running your first GWT application.

Run GWT application

To run your application right-click the project and select Run As -> "Web application".

The result will be like this.

Enter your name in the text field and click on the button. Your name will be appeared in the alert window :).

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

Getting started with GWT : Create your first GWT application in Eclipse 3.4

About Me

Total Pageviews

Blog Archive

Tags

Followers

remplaza_fecha('Friday, June 12, 2009');