ONJava.com -- The Independent Source for Enterprise Java
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Working with the Google Web Toolkit
Pages: 1, 2, 3, 4, 5

Project Basics

GWT uses a basic structure that might seem a little alien at first, so let's take a quick tour. The code we will be using is available as a ready-to-run application in the Resources section. It provides an implementation of a simple Table class that will toggle a CSS element on a selected row and an RPC call to fetch information for the table from the server.

First is the [Module].gwt.xml file. This is an XML marker in your project that maps to an EntryPoint class for a particular module. Think of a module as being a self contained display, like a JFrame. In "Table.gwt.xml," our module is as follows:

<module>

 <!-- Inherit the core Web Toolkit stuff.                  -->
 <inherits name='com.google.gwt.user.User'/>

 <!-- Specify the app entry point class.                   -->
 <entry-point class='com.totsp.gwt.client.TableEntryPoint'/>
  
</module>

Next, to start up our module, we need a root HTML document to run. Here we are using src/java/com/totsp/gwt/public/Table.html. To embed your entry point into your HTML document, you need to include two things. First, add a meta tag that indicates what the module you want to include is:

<meta name='gwt:module' 
    content='com.totsp.gwt.Table'>

Second, at the point in the HTML where you want the GWT to start rendering, you include the gwt.js boilerplate JavaScript file:

<script type="text/javascript" 
    src="gwt.js"></script>

This will then run a default script and inspect the gwt:module value to decide what it needs to start up. Also notice that you place your HTML host page, CSS files, and graphic assets in the public package of your Java source tree, not in the web app. This is a little counter-intuitive, but the GWTShell and the GWTCompile steps expect to load them out of here. You can't, however, really put them in the web app folder, because GWT will clobber them with defaults if you do.

Pretty simple so far. Now we need to start actually writing our classes. The first one is our EntryPoint implementation. This is what actually starts rendering stuff.

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class TableEntryPoint implements EntryPoint {
    
  private Table table;

  public void onModuleLoad() {
    table = new Table( null, "myTable" );
    table.setStyleName("myTable");
    RootPanel.get().add(table);
    getData(); //just ignore this for the moment.
  }

Looking over these classes, we have a few things here. First is the Window class. This maps, roughly, to what you would think of as the JavaScript window object. It exposes alert() and getClientWidth() among other things. The RootPanel is a singleton class that returns the root for placing widgets via get(). This singleton methodology is pretty convenient for working with, so we are going to add this to our classes. Next is Widget. This is the base class for widgets and is used for event handlers, such as the following from the "Hello" example:

 Button b = new Button("Click me", new ClickListener() {
  public void onClick(Widget sender) {
    Window.alert("Hello, Ajax");
  }
});

To start up our EntryPoint class, we need to override the onModuleLoad() method with our code to build our display. For the purposes of this article, we are only going to use our simple Table class.

The Table class contains a very simple operation. It extends FlexTable, then adds itself as a listener to itself. When a table row is clicked that isn't the header row (if there is one), it adds a CSS style name postfixed with -selected to that row. Everything else is done in the CSS.

public void onCellClicked(SourcesTableEvents sender, 
            int row, int cell) {
    this.getRowFormatter()
        .removeStyleName(selectedRow, selectedStyle);
    if ((source.getHeaderRow() == null) || (row > 0)) {
        this.getRowFormatter()
            .addStyleName(row, selectedStyle);
        selectedRow = row;
    }
}

The table also has a method for populating data from a TableDataSource. Let's look at that next.

Pages: 1, 2, 3, 4, 5

Next Pagearrow