Here's a good source for the basics of Google Web Toolkit. see here

In this article, he discusses the basics and Also touches on JSNI and tips on server-side implementations...
He also touches on the script.aculo.us jscrip library...

The script.aculo.us is a great way to add interactivity to your site and
enhances the users experience through effects.

For more info, visit the script.aculo.us home page and see online demonstration...

There is also a sources that wraps the script.aculo.us and makes it easy to integrate
in GWT... See the GWT Component library.

Other custom widgets are also found here like the calendar widget and the auto-completion Widget.

Here's a little custom widget that is very easy to code and to implement...
A custom button with different states, Mouseh hover, Mouse down and Mouse out...

You can set different stylenames to and assign other background images to distiguish one state
from the other... here's the code... :)

MyButton.java

package MyPackage.customwidgets;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Button;

public class MyButton extends Button {
String styleName = new String();
public MyButton(String style) {
styleName = style;
}
public MyButton(String style, String label) {
setText(label);
styleName = style;
}
public void onLoad() {
setStyleName(styleName + "Normal");
sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS);
}
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
switch(DOM.eventGetType(event)) {
case Event.ONMOUSEDOWN:
super.setStyleName(styleName + "Down");
break;
case Event.ONMOUSEUP:
super.setStyleName(styleName + "Hover");
break;
case Event.ONMOUSEOVER:
super.setStyleName(styleName + "Hover");
break;
case Event.ONMOUSEOUT:
super.setStyleName(styleName + "Normal");
break;
}
}
}

just add the following css to your project...

.[YOURBUTTONSTYLENAME]Hover{}
.[YOURBUTTONSTYLENAME]Down{}
.[YOURBUTTONSTYLENAME]Normal{}

[YOURBUTTON STYLENAME] REFERS TO THE SPECIFIC STYLENAME OF YOUR BUTTONS. JUST PUT THE 3 KEY WORDS AFTER WITH NO WHITE SPACE IN BETWEEN...

To create a new MyButton class, simply:

MyButton myButton = new MyButton("[YOURBUTTONSTYLENAME]", "Button TEXT");

This is a just basic code demonstrating the use of DOM and event handlers
Other eventhandlers are available... just visit the GWT documentation or the GWT forums :)

GWT sample code... customizing widgets...

Here is an example, A flexTable or a Grid which now includes double clicks, mulitple select and right click events...

There are four classes, for FlexTable, Grid, TableListener collection, and Table listener interface...
We need to extend all this classes and overridde some methods...

Here's what i've come up so far...

GridWithDoubleClick.java

import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;

import java.util.ArrayList;

public class GridWithDoubleClick extends Grid {
private TableListenerCollectionWithDoubleClick tableListeners;
private boolean isShiftKeyDown = false;
private ArrayList selectedRows = new ArrayList();

public GridWithDoubleClick() {
super();
disableContextMenu(getElement());
setselectedhighlight(getElement());
sinkEvents(Event.ONMOUSEUP| Event.ONDBLCLICK | Event.BUTTON_RIGHT | Event.ONKEYDOWN | Event.ONKEYUP );
}

public void onBrowserEvent(Event event) {
// Find out which cell was actually clicked.
Element td = getEventTargetCell(event);
if (td == null) {
return;
}
Element tr = DOM.getParent(td);
Element body = DOM.getParent(tr);
int row = DOM.getChildIndex(body, tr);
int column = DOM.getChildIndex(tr, td);
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEUP: {
switch(DOM.eventGetButton(event)){
case Event.BUTTON_LEFT:
if (this.tableListeners != null)
{
// Fire the event.
if (DOM.eventGetShiftKey(event))
{
selectedRows.add(new String().valueOf(row));
tableListeners.fireMultipleCellClicked(this, row, column);
}
else
{
tableListeners.fireCellClicked(this, row, column);
selectedRows = null;
selectedRows = new ArrayList();
}
}

break;

case Event.BUTTON_RIGHT:
if (this.tableListeners != null)
{
// Fire the event.
tableListeners.fireRightClicked(this, row, column, DOM.eventGetClientX(event), DOM.eventGetClientY(event));
//tableListeners.fireRightClicked(this, row, column);
}
break;
default:{
//do nothing
}
break;
}
break;
}
case Event.ONDBLCLICK: {
if (this.tableListeners != null && !DOM.eventGetShiftKey(event)) {
// Fire the event.
tableListeners.fireCellDblClicked(this, row, column);

}
break;
}

default: {
// Do nothing
}
break;
}
}

public ArrayList getSelectedRows()
{
return selectedRows;
}

//overide this methods pra maka fire sa atong ghimo na interface ug listener collections
public void addTableListener(TableListenerWithDoubleClick listener) {
if (tableListeners == null) {
tableListeners = new TableListenerCollectionWithDoubleClick();
}
tableListeners.add(listener);
}
public void removeTableListener(TableListenerWithDoubleClick listener)
{
if (tableListeners != null)
{
tableListeners.remove(listener);
}
}

private native void disableContextMenu(Element elem) /*-{
elem.oncontextmenu=function(a,b) {return false};
}-*/;

private native void setselectedhighlight(Element elem ) /*-{
elem.onselectstart=function(a,b) {return false};


}-*/;
}

Do the same for flexTable... you can also sink other events that you like and just add the condition in the switch...

In the code, we override the onbrowser event and sink the events needed.

TableListenerCollectionWithDoubleClick.java


import com.google.gwt.user.client.ui.SourcesTableEvents;
import java.util.Vector;
import java.util.Iterator;

public class TableListenerCollectionWithDoubleClick extends Vector {

public void fireCellClicked(SourcesTableEvents sender, int row, int cell) {
for (Iterator it = iterator(); it.hasNext();) {
TableListenerWithDoubleClick listener = (TableListenerWithDoubleClick) it.next();
listener.onCellClicked(sender, row, cell);
}
}

public void fireCellDblClicked(SourcesTableEvents sender, int row, int cell) {
for (Iterator it = iterator(); it.hasNext();) {
TableListenerWithDoubleClick listener = (TableListenerWithDoubleClick) it.next();
listener.onCellDblClicked(sender, row, cell);
}
}

public void fireMultipleCellClicked(SourcesTableEvents sender, int row, int cell) {
for (Iterator it = iterator(); it.hasNext();) {
TableListenerWithDoubleClick listener = (TableListenerWithDoubleClick) it.next();
listener.onMultipleCellClicked(sender, row, cell);
}
}
public void fireRightClicked(SourcesTableEvents sender, int row, int cell, int mouseX, int mouseY) {
for (Iterator it = iterator(); it.hasNext();) {
TableListenerWithDoubleClick listener = (TableListenerWithDoubleClick) it.next();
listener.onCellRightClicked(sender, row, cell, mouseX, mouseY);
}
}/*
public void fireRightClicked(SourcesTableEvents sender, int row, int cell) {
for (Iterator it = iterator(); it.hasNext();) {
TableListenerWithDoubleClick listener = (TableListenerWithDoubleClick) it.next();
listener.onCellRightClicked(sender, row, cell);
}
}*/
}

As you can see above, i've added fireRightClicked and . These are the methods that fire the onCellRightClicked and onMultipleCellClicked in the new TableListenerWithDoubleClick interface.

Here's the code for TableListenerWithDoubleClick interface

TableListenerWithDoubleClick.java

import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.user.client.ui.SourcesTableEvents;

public interface TableListenerWithDoubleClick extends TableListener{

public void onCellClicked(SourcesTableEvents sender, int row, int cell);
public void onCellDblClicked(SourcesTableEvents sender, int row, int cell);
public void onMultipleCellClicked(SourcesTableEvents sender, int row, int cell);
public void onCellRightClicked(SourcesTableEvents sender, int row, int cell, int mouseX, int mouseY);
//public void onCellRightClicked(SourcesTableEvents sender, int row, int cell);
}

These works the same way as the currently included implementation...
Just include all the include all the files in you class (you can name them to anything you want).
Sample:

import MyPackage.GridWithDoubleClick
import MyPackage.FlexTableWithDoubleClick
import MyPackage.TableListenerWithDoubleClick

GridWithDoubleClick mygrid = new GridWithDoubleClick();

myGrid.addTableListener(new TableListenerWithDoubleClick()
{
//implement all the methods in the tableListener with click methods...
});

this works with the latest version of GWT.

Ajax programming using GWT.

GWT - google web toolkit basically lets you code Ajax capable web applications. GWT is basically a front end, serving as the User Interface for web Application. It can easily be integrated with servlets as backend. The remote proceedure call (RPC) included in the toolkit is also quite easy to use.

As compared to other offerings like dojo and QooxDoo, GWT is written in JAVA. This means a web developer may not know a thing about javascript and still be able to code AJAX applications. This is also convenient as servlets are also written in JAVA.


To start, download the latest Java SDK here.

You will also need Java capable IDE. You may use either Eclipse or Net beans.
If you use netbeans, you will also need this plugin. (this also containes a good tutorial on GWT)

Then download the latest GWT available here. In this writting, 1.2 is the latest released version.

Install all components then you are all set to write your first GWT application.

1st

The first steps are always the hardest