Home » Enterprise Java » gwt » GWT CellTable Example

About Mohammad Meraj Zia

Senior Java Developer

GWT CellTable Example

In this example we will learn how to use CellTable in GWT. The 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. Tools and technologies used in this example are Java 1.8, Eclipse Luna 4.4.2, Eclipse GWT Plugin 2.6

1. Introduction

A GWT CellTable is used to represent a data in tabular format. The Column class defines the Cell used to render a column. Implement Column.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.

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

Figure 1. Create New Web Application

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

For this example we don’t need to change the GWT configuration file. We only need to change the Entry point class – ‘GWTCellTable.java’. We will create a new model class in the shared folder called – ‘Employee.java’.

3. Java classes

First we show the model class – Employee.java. It represents an employee data. It’s a simple class which uses constructor to set the values and getters to retrieve them.

Employee.java

package com.javacodegeeks.shared;

public class Employee {

  private String name;
  private String department;
  private String location;

  public Employee(String name, String department, String location) {
    this.name = name;
    this.department = department;
    this.location = location;
  }

  public String getName() {
    return name;
  }

  public String getDepartment() {
    return department;
  }

  public String getLocation() {
    return location;
  }
}

Now we will see the entry point class. First we create a CellTable instance with the Employee data: CellTable<Employee> cellTable = new CellTable<Employee>.() Then we create text columns and add these to the table: cellTable.addColumn(nameColumn, "Name"). Then we define the selection model to handle user selection. Enum HasKeyboardSelectionPolicy.KeyboardSelectionPolicy is used to determine how keyboard selection will work.

GWTCelltable.java

package com.javacodegeeks.client;

import java.util.Arrays;
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.RootPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;
import com.javacodegeeks.shared.Employee;

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

  private static final List<Employee> EMPLOYEES = Arrays.asList(
    new Employee("Nicole Kidman", "Accounts", "New York"),
    new Employee("Tom Cruise", "HR", "Ney York")
  );

  /**
  * This is the entry point method.
  */
  public void onModuleLoad() {
    CellTable<Employee> cellTable = new CellTable<Employee>();
    cellTable.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

    addNameColumn(cellTable);
    addDepartmentColumn(cellTable);
    addLocationColumn(cellTable);

    // Add a selection model to handle user selection.
    final SingleSelectionModel<Employee> singleSelectionModel = new SingleSelectionModel<Employee>();
    cellTable.setSelectionModel(singleSelectionModel);
    singleSelectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
      public void onSelectionChange(SelectionChangeEvent event) {
        Employee selectedEmployee = singleSelectionModel.getSelectedObject();
        if (selectedEmployee != null) {
          Window.alert("Selected: " + selectedEmployee.getName());
        }
      }
    });

    // Set the total row count. This isn't strictly necessary, but it affects
    // paging calculations, so its good habit to keep the row count up to date.
    cellTable.setRowCount(EMPLOYEES.size(), true);

    // Push the data into the widget.
    cellTable.setRowData(0, EMPLOYEES);

    // Add it to the root panel.
    RootPanel.get().add(cellTable);
  }

  private void addNameColumn(CellTable<Employee> cellTable) {
    TextColumn<Employee> nameColumn = new TextColumn<Employee>() {

      @Override
      public String getValue(Employee object) {
        return object.getName();
      }
    };

    // Add column to table
    cellTable.addColumn(nameColumn, "Name");
  }

  private void addDepartmentColumn(CellTable<Employee> cellTable) {
    TextColumn<Employee> departmentColumn = new TextColumn<Employee>() {

      @Override
      public String getValue(Employee object) {
        return object.getDepartment();
      }
    };

    // Add column to table
    cellTable.addColumn(departmentColumn, "Department");
  }

  private void addLocationColumn(CellTable<Employee> cellTable) {
    TextColumn<Employee> locationColumn = new TextColumn<Employee>() {

      @Override
      public String getValue(Employee object) {
        return object.getLocation();
      }
    };

    // Add column to table
    cellTable.addColumn(locationColumn, "Location");
  }
}

4. Column Sorting

CellTable has built-in support for column sorting. Use Column.setSortable(boolean) to make a column sortable. Users will then be able to click on the column header and trigger a ColumnSortEvent. How you handle the event depends on how you push data into your CellTable. GWT provides a default implementation of ColumnSortEvent.Handler called ColumnSortEvent.ListHandler that is designed to perform local sorting of a java.util.List.

// Create a data provider.
ListDataProvider<Employee> employeeListDataProvider = new ListDataProvider<Employee>();

// Connect the table to the data provider.
employeeListDataProvider.addDataDisplay(table);

// Add the data to the data provider, which automatically pushes it to the widget.
List<Employee> list = employeeListDataProvider.getList();
for (Employee employee: EMPLOYEES) {
  list.add(employee);
}

// Add a ColumnSortEvent.ListHandler to connect sorting to the list.
ListHandler<Employee> columnSortHandler = new ListHandler<Tester.Employee>(list);
columnSortHandler.setComparator(nameColumn,
  new Comparator<Tester.Employee>() {
    public int compare(Employee o1, Employee o2) {
      if (o1 == o2) {
        return 0;
      }

      // Compare the name columns.
      if (o1 != null) {
        return (o2 != null) ? o1.name.compareTo(o2.name) : 1;
      }
      return -1;
    }
  });
table.addColumnSortHandler(columnSortHandler);
table.getColumnSortList().push(nameColumn);

GWT provides a default implementation of ColumnSortEvent.Handler called ColumnSortEvent.AsyncHandler that helps with asynchronous (server-side) column sorting. When the user sorts a Column, AsyncHandler calls HasData.setVisibleRangeAndClearData(Range, boolean) , which triggers a RangeChangeEvent to the AsyncDataProvider.

By default, columns in a CellTable expand to fit the contents of the Cells. This works fine for a static table, but if the content changes due to paging or user interaction, the columns might change width and appear jumpy. CellTable provides an API that gives you fine grain control of how the available width is distributed between columns.

In order to gain fine-grain control over the width of columns, you must set the table layout to ‘fixed’ by passing true into CellTable.setWidth(String, boolean). Once in fixed-width mode, tables behave differently than they normally would. The following sections describe recipes for achieving various effects.

If you want to assign a specific width to every column, then you must set the table width to ‘auto’ and assign an absolute width to every column. If you set the width of the table to ‘auto’ and do not set the width of a column, the column will not be visible. Columns default to a width of 0.

5. Compile

To compile the application right click on the project and select ‘Google’ ==> ‘GWT Compile’.

Figure 2. GWT Compile

Figure 2. GWT Compile

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.  You will see the button displayed on the screen. Click on the button. Magic!!!,

Figure 3. Running the application

Figure 3. Running the application

7. Download the source file

This was an example of using CellTable in GWT.

Download
You can download the full source code of this example here : GWT Celltable

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

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

0 Comments
Inline Feedbacks
View all comments