Most, of the internet applications on the web now look/behave more like the desktop applications.Ex. Facebook, GMail, YMail etc. Most of these are supported with a technology called AJAX popularized by Google, the pioneers of this being Microsoft, when they first used it within Outlook.

There exists a google framework which lets you build such sites at a fast pace, without learning JS, simply using JAVA.The concept of running the whole website on a JS sounded hard to digest at first.But, it works like a charm.The default version of GWT provided by google does not support too many components(widgets).
So, to build a rich looking UI, If you look around for some component frameworks based on GWT, you will come across a lot of them, names like GWT-Ext (now Smart GWT) and Ext – GWT ( written by EXTJS guys ) are very prominently used.

If you use the Google GWT plug in on eclipse, it does most of the work for you to get started to write some code. There are few things that needs to be done to use GXT, the getting started tutorials are quite elaborate here, but not very illustrative and do not explain the changes effectively for a beginner. I just thought that I will put this up for the benefit of the others who might attempt to use this library.

One very good aspect of GWT, is writing java code and letting the compiler aka Google weave the magic for you, to give you a awesome looking website. We are trying to use GXT ( Ext – GWT ) to create a sample application that is AJAX enabled. Lets start :

1. Install the plugin/SDK for GWT. For more details hit this link Getting Started

2. Download the gxt library/SDK

3. Create a GWT web application project in eclipse.Uncheck ‘use google app-engine’ unless you wanted to host it on the google app engine.

4. Add, the ‘gxt.jar’ to the build path.

5. Since, we would like to use GXT to build our application
a. Delete the Greeting*.java classes from the client and server folders of the project.
b. Clear the onModuleLoad() method
c. Open up the web.xml file, and delete the servlets tag completely
d. Introduce this line inherits name='com.extjs.gxt.ui.GXT' instead of inherits name='com.google.gwt.user.theme.standard.Standard'. This is to indicate that we will be using the GXT specific components/themes instead of the GWT standard.
e. Delete HelloGXT.css,GXT has its own CSS that gives it the flashy look.
f. Include the following line in the HelloGXT.html file link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css"
instead of link type="text/css" rel="stylesheet" href="HelloGXT.css"

6. Copy the entire resources folder from the SDK into the war folder, as below

7. Put this code, in the onModuleLoad() method :

public void onModuleLoad()
{
LayoutContainer c = new LayoutContainer();

HBoxLayout layout = new HBoxLayout();
layout.setPadding(new Padding(5));
layout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);
layout.setPack(BoxLayoutPack.CENTER);
c.setLayout(layout);

HBoxLayoutData flex = new HBoxLayoutData(new Margins(0, 5, 0, 0));
flex.setFlex(1);

c.add(new Button(“Save”), new HBoxLayoutData(new Margins(0, 5, 0,
0)));

flex = new HBoxLayoutData(new Margins(0, 5, 0, 0));
flex.setFlex(1);

c.add(new Button(“Cancel”), new HBoxLayoutData(new Margins(0, 5, 0,
0)));

RootPanel.get().add(c);
}

7. Launch the application : Run as “Web Application Project” . Voila see your Java Code as a web page – Its a JS, it runs on most browsers in the world, you do not need to know JS. Neither do you need to know CSS unless you want to override it.

For more reading on how GWT can help you with your hobby website designs, Visit the official Google GWT website or
the Ext-GWT site here.