GWT - CellTable Widget

Advertisements


Introduction

The CellTable widget represents a A tabular view that supports paging and columns.

Class declaration

Following is the declaration for com.google.gwt.user.cellview.client.CellTable<T> class:

public class CellTable<T>
   extends AbstractHasData<T>

Class constructors

S.N.Constructor & Description
1CellTable()
Constructs a table with a default page size of 15.
2CellTable(int pageSize)
Constructs a table with the given page size.
3CellTable(int pageSize, CellTable.Resources resources)
Constructs a table with the given page size with the specified CellTable.BasicResources.
4CellTable(int pageSize, CellTable.Resources resources, ProvidesKey<T> keyProvider)
Constructs a table with the given page size, the specified CellTable.BasicResources, and the given key provider.
5CellTable(int pageSize, ProvidesKey<T> keyProvider)
Constructs a table with the given page size and the given key provider.
6CellTable(ProvidesKey<T> keyProvider)
Constructs a table with a default page size of 15, and the given key provider.

Class methods

S.N.Function name & Description
1void addColumn(Column<T,?> col)
Adds a column to the table.
2void addColumn(Column<T,?> col, Header<?> header)
Adds a column to the table with an associated header.
3void addColumn(Column<T,?> col, Header<?> header, Header<?> footer)
Adds a column to the table with an associated header and footer.
4void addColumn(Column<T,?> col, SafeHtml headerHtml)
Adds a column to the table with an associated SafeHtml header.
5void addColumn(Column<T,?> col, SafeHtml headerHtml, SafeHtml footerHtml)
Adds a column to the table with an associated SafeHtml header and footer.
6void addColumn(Column<T,?> col, java.lang.String headerString)
Adds a column to the table with an associated String header.
7void addColumn(Column<T,?> col, java.lang.String headerString, java.lang.String footerString)
Adds a column to the table with an associated String header and footer.
8void addColumnStyleName(int index, java.lang.String styleName)
Add a style name to the TableColElement at the specified index, creating it if necessary.
9protected Element convertToElements(SafeHtml html)
Convert the specified HTML into DOM elements and return the parent of the DOM elements.
10protected boolean dependsOnSelection()
Check whether or not the cells in the view depend on the selection state.
11protected void doSelection(Event event, T value, int row, int column)
Deprecated. use AbstractHasData.addCellPreviewHandler(com.google.gwt.view.client.CellPreviewEvent.Handler) instead
12int getBodyHeight()
Return the height of the table body.
13protected Element getChildContainer()
Return the element that holds the rendered cells.
14int getHeaderHeight()
Return the height of the table header.
15protected Element getKeyboardSelectedElement()
Get the element that has keyboard selection.
16TableRowElement getRowElement(int row)
Get the TableRowElement for the specified row.
17protected boolean isKeyboardNavigationSuppressed()
Check if keyboard navigation is being suppressed, such as when the user is editing a cell.
18protected void onBlur()
Called when the widget is blurred.
19protected void onBrowserEvent2(Event event)
Called after AbstractHasData.onBrowserEvent(Event) completes.
20protected void onFocus()
Called when the widget is focused.
21void redrawFooters()
Redraw the table's footers.
22void redrawHeaders()
Redraw the table's headers.
23void removeColumn(Column<T,?> col)
Remove a column.
24void removeColumn(int index)
Remove a column.
25void removeColumnStyleName(int index, java.lang.String styleName)
Remove a style from the TableColElement at the specified index.
26protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)
Render all row values into the specified SafeHtmlBuilder.
27protected void replaceAllChildren(java.util.List<T> values, SafeHtml html)
Replace all children with the specified html.
28protected boolean resetFocusOnCell()
Reset focus on the currently focused cell.
29protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)
Update an element to reflect its keyboard selected state.
30void setRowStyles(RowStyles<T> rowStyles)
Sets the object used to determine how a row is styled; the change will take effect the next time that the table is rendered.
31protected void setSelected(Element elem, boolean selected)
Deprecated. this method is never called by AbstractHasData, render the selected styles in renderRowValues(SafeHtmlBuilder, List, int, SelectionModel)

Methods inherited

This class inherits methods from the following classes:

  • com.google.gwt.user.client.ui.UIObject

  • com.google.gwt.user.client.ui.Widget

  • com.google.gwt.user.cellview.client.AbstractHasData

  • java.lang.Object

CellTable Widget Example

This example will take you through simple steps to show usage of a CellTable Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.                       -->
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.tutorialspoint.client.HelloWorld'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
   text-align: center;
   font-family: verdana, sans-serif;
}
h1{
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
   <link rel="stylesheet" href="HelloWorld.css"/>
   <script language="javascript" src="helloworld/helloworld.nocache.js">
   </script>
</head>
<body>

<h1>CellTable Widget Demonstration</h1>
<div id="gwtContainer"></div>

</body>
</html>

Let us have following content of Java file src/com.tutorialspoint/HelloWorld.java which will demonstrate use of CellTable widget.

package com.tutorialspoint.client;

import java.util.Arrays;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
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.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
import com.google.gwt.view.client.SingleSelectionModel;

public class HelloWorld implements EntryPoint {
   /**
   * A simple data type that represents a contact.
   */
   private static class Contact {
      private final String address;
      private final Date birthday;
      private final String name;

      public Contact(String name, Date birthday, String address) {
         this.name = name;
         this.birthday = birthday;
         this.address = address;
      }
   }

   /**
   * The list of data to display.
   */
   private static final List<Contact> CONTACTS = Arrays.asList(
      new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue"),
      new Contact("Joe", new Date(85, 2, 22), "22 Lance Ln"),
      new Contact("George",new Date(46, 6, 6),"1600 Pennsylvania Avenue"));

   public void onModuleLoad() {
      // Create a CellTable.
      CellTable<Contact> table = new CellTable<Contact>();
      table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

      // Add a text column to show the name.
      TextColumn<Contact> nameColumn = 
      new TextColumn<Contact>() {
         @Override
         public String getValue(Contact object) {
            return object.name;
         }
      };
      table.addColumn(nameColumn, "Name");

      // Add a date column to show the birthday.
      DateCell dateCell = new DateCell();
      Column<Contact, Date> dateColumn 
      = new Column<Contact, Date>(dateCell) {
         @Override
         public Date getValue(Contact object) {
            return object.birthday;
         }
      };
      table.addColumn(dateColumn, "Birthday");

      // Add a text column to show the address.
      TextColumn<Contact> addressColumn 
      = new TextColumn<Contact>() {
         @Override
         public String getValue(Contact object) {
            return object.address;
         }
      };
      table.addColumn(addressColumn, "Address");

      // Add a selection model to handle user selection.
      final SingleSelectionModel<Contact> selectionModel 
      = new SingleSelectionModel<Contact>();
      table.setSelectionModel(selectionModel);
      selectionModel.addSelectionChangeHandler(
      new SelectionChangeEvent.Handler() {
         public void onSelectionChange(SelectionChangeEvent event) {
            Contact selected = selectionModel.getSelectedObject();
            if (selected != null) {
               Window.alert("You selected: " + selected.name);
            }
         }
      });

      // 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.
      table.setRowCount(CONTACTS.size(), true);

      // Push the data into the widget.
      table.setRowData(0, CONTACTS);

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);	    
      panel.setWidth("400");
      panel.add(table);

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

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result:

GWT CellTable Widget

Advertisements
Advertisements