Home » Enterprise Java » gwt » GWT Table Example

About Mohammad Meraj Zia

Mohammad Meraj Zia
I did my Engineering in Information Technology from IET, Lucknow, India. Currently doing MSc in Information Technology from Derby University. I have worked in Java/J2EE domain for the last 10 years. Have good understanding of Payment and Finance domains.

GWT Table Example

In this example we will learn how to use Tables in GWT. Google Web Toolkit is a development framework for creating Ajax-enabled web applications in Java.  A CellTable represents a tabular view that supports paging and columns. A FlexTable on the other hand allows user to create cell on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns. Tools and technologies used in this example are Java 1.8, Eclipse Luna 4.4.2, Eclipse GWT Plugin 2.6

1. Introduction

A cell table (data presentation table) provides high-performance rendering of large data sets in a tabular view. A CellTable is used to represent a data in tabular format. The Column class defines the Cell used to render a column. ImplementColumn.getValue(Object) to retrieve the field value from the row object that will be rendered in the Cell. A Header can be placed at the top (header) or bottom (footer) of the CellTable. You can specify a header as text using AbstractCellTable.addColumn(Column, String), or you can create a custom Header that can change with the value of the cells, such as a column total. The Header will be rendered every time the row data changes or the table is redrawn. If you pass the same header instance (==) into adjacent columns, the header will span the columns.

The FlexTable class extends the HTMLTable.
public class FlexTable extends HTMLTable

2. Creating GWT project

To create a new GWT project go to File->New->Other, then type ‘Web App’. Choose ‘Web Application Project’ under ‘Google’.

Figure 1. Create new Web Application Project

Figure 1. Create new Web Application Project

On the next window enter the Project name (‘GWTTable’) and the Package (com.javacodegeeks). Leave the other details as it is and click on ‘Finish’. Eclipse will generate some files automatically for you.

Figure 2. Create Project

Figure 2. Create Project

For this example we don’t need to change the GWT configuration file. We only need to change the Entry point class – ‘GWTTable.java’.

3. Java classes

First we show the model class which we are using for populating the data in the CellTable. It’s a simple POJO representation of address data.

Address.java

package com.javacodegeeks.client;

public class Address {

  private String firstLine;
  private String secondLine;
  private String town;
  private String country;

  public Address(String firstLine, String secondLine, String town, String country) {
    this.firstLine = firstLine;
    this.secondLine = secondLine;
    this.town = town;
    this.country = country;
}

  public String getFirstLineOfAddress() {
    return this.firstLine;
  }

  public String getSecondLineOfAddress() {
    return this.secondLine;
  }

  public String getTown() {
    return this.town;
  }

  public String getCountry() {
    return this.country;
  }
}

Now we will see the Entry point class.

GWTTable.java

package com.javacodegeeks.client;
import java.util.ArrayList;
import java.util.List;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWTTable implements EntryPoint {

  /**
  * This is the entry point method.
  */
  public void onModuleLoad() {
    FlexTable flexTable = createFlexTable();

    CellTable<Address> cellTableOfAddress = new CellTable<Address>();
    // The policy that determines how keyboard selection will work. Keyboard
    // selection is enabled.
    cellTableOfAddress.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

    // Add a text columns to show the details.
    TextColumn<Address> columnFirstLine = new TextColumn<Address>() {
      @Override
      public String getValue(Address object) {
        return object.getFirstLineOfAddress();
      }
    };
    cellTableOfAddress.addColumn(columnFirstLine, "First line");

    TextColumn<Address> columnSecondLine = new TextColumn<Address>() {
      @Override
      public String getValue(Address object) {
        return object.getSecondLineOfAddress();
      }
    };
    cellTableOfAddress.addColumn(columnSecondLine, "Second line");

    TextColumn<Address> townColumn = new TextColumn<Address>() {
      @Override
      public String getValue(Address object) {
        return object.getTown();
      }
    };
    cellTableOfAddress.addColumn(townColumn, "Town");

    TextColumn<Address> countryColumn = new TextColumn<Address>() {
      @Override
      public String getValue(Address object) {
        return object.getCountry();
      }
    };
    cellTableOfAddress.addColumn(countryColumn, "Country");

    final SingleSelectionModel<Address> selectionModel = new SingleSelectionModel<Address>();
    cellTableOfAddress.setSelectionModel(selectionModel);
    selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {

      public void onSelectionChange(SelectionChangeEvent event) {

        Address selectedAddress = selectionModel.getSelectedObject();
        if (selectedAddress != null) {
          Window.alert("Selected: First line: " + selectedAddress.getFirstLineOfAddress() + ", Second line: " + selectedAddress.getSecondLineOfAddress());
        }
      }
    });

    List<Address> addresses = new ArrayList<Address>() {
      {
        add(new Address("Cell Table", "First line", "Oxford", "UK"));
        add(new Address("Cell Table", "Second line", "Cambrige", "UK"));
      }
    };

    cellTableOfAddress.setRowCount(addresses.size(), true);
    cellTableOfAddress.setRowData(0, addresses);

    VerticalPanel vp = new VerticalPanel();
    vp.setBorderWidth(1);
    vp.add(flexTable);
    vp.add(cellTableOfAddress);

    RootPanel.get("container").add(vp);
}

  private FlexTable createFlexTable() {
    FlexTable flexTable = new FlexTable();
    flexTable.setBorderWidth(1);
    flexTable.setText(0, 0, "This is an example of flextable");
    flexTable.setText(2, 2, "This is also an example of flextable");
    flexTable.getFlexCellFormatter().setColSpan(1, 0, 3);
    return flexTable;
  }
}

4. Difference

Here we will discuss the differences between these two GWT table types.

CellTable always has the same number of rows and/or columns while a FlexTable can have different rows per column and different columns per row (This is made possible due to the html properties rowspan and colspan). Thus when you need flexibale rows or columns you can use FlexTable and otherwise CellTable. However, FlexTable is extremely slow in Internet Explorer, due to slow DOM methods that are used to create a the table. Therefore, avoid FlexTable if you can or only use it create a simple layout (although in that case the DockPanel might be somewhat easier to use).

5. Compile

To compile the application right click on the project and select ‘Google’ ==> ‘GWT Compile’. A popu-up will be displayed. Click the ‘Compile’ button. GWT will start compiling your projects for different permutations. Below is the result of compilation which you see in the ‘Console’ window.

Compiling module com.javacodegeeks.GWTTable
  Compiling 5 permutations
    Compiling permutation 0...
    Compiling permutation 1...
    Compiling permutation 2...
    Compiling permutation 3...
    Compiling permutation 4...
  Compile of permutations succeeded
Linking into E:\meraj\study\eclipse-workspace\GWTTable\war\gwttable
  Link succeeded
  Compilation succeeded -- 95.073s

6. Running the application

To run the application right click on the project and select ‘Run As’ ==> ‘Web Application (Classic Dev Mode)’. Eclipse will display a URL in the ‘Development Mode’ tab. Copy this URL and paste it on you favourite browser. Remove the part after ‘.html’ and click enter.

Figure 3. Output

Figure 3. Output

7. Download the source file

This was an example of GWT Tables.

Download
You can download the full source code of this example here: GWT Table. Please note that to save space the jar files from the lib directly have been removed.
0 0 vote
Article Rating

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x