GWT - CellList Widget

Previous
Quiz
Next

Introduction

The CellList widget represents a single column list of cells.

Class Declaration

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

public class CellList<T>
   extends AbstractHasData<T>

Class Constructors

Sr.No. Constructor & Description
1

CellList(Cell<T> cell)

Construct a new CellList.
2

CellList(Cell<T> cell, CellList.Resources resources)

Construct a new CellList with the specified CellList.Resources.
3

CellList(Cell<T> cell, CellList.Resources resources, ProvidesKey<T> keyProvider)

Construct a new CellList with the specified CellList.Resources and key provider.
4

CellList(Cell<T> cell, ProvidesKey<T> keyProvider)

Construct a new CellList with the specified key provider.

Class Methods

Sr.No. Function name & Description
1

protected boolean dependsOnSelection()

Check whether or not the cells in the view depend on the selection state.
2

protected void doSelection(Event event, T value, int indexOnPage)

Deprecated. use Abstract HasData.add Cell Preview Handler(com.google.gwt.view.client.Cell Preview Event.Handler) instead.
3

protected void fireEventToCell(Cell.Context context, Event event, Element parent, T value)

Fire an event to the cell.
4

protected Cell<T> getCell()

Return the cell used to render each item.
5

protected Element getCellParent(Element item)

Get the parent element that wraps the cell from the list item.
6

protected Element getChildContainer()

Return the element that holds the rendered cells.
7

SafeHtml getEmptyListMessage()

Get the message that is displayed when there is no data.
8

protected Element getKeyboardSelectedElement()

Get the element that has keyboard selection.
9

Element getRowElement(int indexOnPage)

Get the Element for the specified index.
10

protected boolean isKeyboardNavigationSuppressed()

Check if keyboard navigation is being suppressed, such as when the user is editing a cell.
11

protected void onBlur()

Called when the widget is blurred.
12

protected void onBrowserEvent2(Event event)

Called after AbstractHasData.onBrowserEvent(Event) completes.
13

protected void onFocus()

Called when the widget is focused.
14

protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)

Render all row values into the specified SafeHtmlBuilder.
15

protected boolean resetFocusOnCell()

Reset focus on the currently focused cell.
16

void setEmptyListMessage(SafeHtml html)

Set the message to display when there is no data.
17

protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)

Update an element to reflect its keyboard selected state.
18

protected void setSelected(Element elem, boolean selected)

Deprecated. this method is never called by AbstractHasData, render the selected styles in renderRowValues(SafeHtmlBuilder, List, int, SelectionModel)
19

void setValueUpdater(ValueUpdater<T> valueUpdater)

Set the value updater to use when cells modify items.

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

CellList Widget Example

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

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile 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>CellList 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 CellList widget.

package com.tutorialspoint.client;

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

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.Cell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.ProvidesKey;
import com.google.gwt.view.client.SelectionModel;
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 static int nextId = 0;
      private final int id;
      private String name;

      public Contact(String name) {
         nextId++;
         this.id = nextId;
         this.name = name;
      }
   }

   /**
    * A custom {@link Cell} used to render a {@link Contact}.
    */
   
   private static class ContactCell extends AbstractCell<Contact> {
      @Override
      public void render(Contact value, Object key, SafeHtmlBuilder sb) {
         if (value != null) {
            sb.appendEscaped(value.name);
         }		
      }
   }

   /**
    * The list of data to display.
    */
   
   private static final List<Contact> CONTACTS = Arrays.asList(new Contact(
      "John"), new Contact("Joe"), new Contact("Michael"),
      new Contact("Sarah"), new Contact("George"));

   public void onModuleLoad() {
      /*
       * Define a key provider for a Contact. We use the unique ID 
       * as the key, which allows to maintain selection even if the
       * name changes.
       */
      
      ProvidesKey<Contact> keyProvider = new ProvidesKey<Contact>() {
         public Object getKey(Contact item) {
            // Always do a null check.
            return (item == null) ? null : item.id;
         }
      };

      // Create a CellList using the keyProvider.
      CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),      
      keyProvider);

      // Push data into the CellList.
      cellList.setRowCount(CONTACTS.size(), true);
      cellList.setRowData(0, CONTACTS);

      // Add a selection model using the same keyProvider.
      SelectionModel<Contact> selectionModel 
      = new SingleSelectionModel<Contact>(
      keyProvider);
      cellList.setSelectionModel(selectionModel);

      /*
       * Select a contact. The selectionModel will select based on the 
       * ID because we used a keyProvider.
       */
      Contact sarah = CONTACTS.get(3);
      selectionModel.setSelected(sarah, true);

      // Modify the name of the contact.
      sarah.name = "Sara";

      /*
       * Redraw the CellList. Sarah/Sara will still be selected because we
       * identify her by ID. If we did not use a keyProvider, 
       * Sara would not be selected.
       */
      cellList.redraw();

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);	    
      panel.setWidth("200");
      panel.add(cellList);

      // 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 CellList Widget
gwt_complex_widgets.htm
Print Page
Previous
Next
Advertisements