Thursday, July 3, 2008

Google Web Toolkit - Simple Example

The Google Web Toolkit (GWT) is a framework that allows for web development using Java. The framework will convert the Java code into html/javascript.

This approach makes developing and debugging feature rich clients much easier than writing javascript yourself.

To get familiar with the framework I wrote a simple getting started app inspired from the GWT docs. It simply creates a button, label and grid.

It adds an event to the button to hide the label. Also adds a TableListener to the grid. I use this to capture cell clicks and popup a dialog.

Reading the docs you can then style this using css with the following attributes:

* .gwt-DialogBox { the outside of the dialog }
* .gwt-DialogBox .Caption { the caption }



/*
* mcintoshEntryPoint.java
*
* Created on June 29, 2008, 1:46 PM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/
package com.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HTMLTable;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.user.client.ui.Widget;

/**
*
* @author avalanche
*/
public class mcintoshEntryPoint implements EntryPoint {

/** Creates a new instance of mcintoshEntryPoint */
public mcintoshEntryPoint() {
}

private static class MyDialog extends DialogBox {

public MyDialog(String text) {
// Set the dialog box's caption.
setText(text);

// DialogBox is a SimplePanel, so you have to set its widget property to
// whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {

public void onClick(Widget sender) {
MyDialog.this.hide();
}
});
setWidget(ok);
}
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, Chris!!!");
final Button button = new Button("Click me!");
final HTMLTable table = new Grid(5, 5);
// Put some values in the grid cells.
for (int row = 0; row < 5; ++row) {
for (int col = 0; col < 5; ++col) {
table.setText(row, col, "" + row + ", " + col);
}
}

button.addClickListener(new ClickListener() {

public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
});

table.addTableListener(new TableListener() {

public void onCellClicked(SourcesTableEvents arg0, int arg1, int arg2) {
new MyDialog("You clicked" + arg1 + "," + arg2).show();
}
});



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

2 comments:

petertparker said...

Hi Nice Blog A quality, web development services company will have experience with many web sites similar to yours. They will have cut their teeth on past projects, and found the right approach that will ensure you get what you need, and to do so in an organized manner. Ask them to explain their project development methods, and project planning methods. You need to be convinced that not only do they have the ability to deliver your web site to you with all of your requirements met, but they have a plan on how get it done. On time and on budget.

mscheffler said...

Nice example. Thanks!