GWT - Tree Widget

Advertisements


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

S.N.Constructor & Description
1CellList(Cell<T> cell)
Construct a new CellList.
2CellList(Cell<T> cell, CellList.Resources resources)
Construct a new CellList with the specified CellList.Resources.
3CellList(Cell<T> cell, CellList.Resources resources, ProvidesKey<T> keyProvider)
Construct a new CellList with the specified CellList.Resources and key provider.
4CellList(Cell<T> cell, ProvidesKey<T> keyProvider)
Construct a new CellList with the specified key provider.

Class methods

S.N.Function name & Description
1protected boolean dependsOnSelection()
Check whether or not the cells in the view depend on the selection state.
2protected void doSelection(Event event, T value, int indexOnPage)
Deprecated. use AbstractHasData.addCellPreviewHandler(com.google.gwt.view.client.CellPreviewEvent.Handler) instead
3protected void fireEventToCell(Cell.Context context, Event event, Element parent, T value)
Fire an event to the cell.
4protected Cell<T> getCell()
Return the cell used to render each item.
5protected Element getCellParent(Element item)
Get the parent element that wraps the cell from the list item.
6protected Element getChildContainer()
Return the element that holds the rendered cells.
7SafeHtml getEmptyListMessage()
Get the message that is displayed when there is no data.
8protected Element getKeyboardSelectedElement()
Get the element that has keyboard selection.
9Element getRowElement(int indexOnPage)
Get the Element for the specified index.
10protected boolean isKeyboardNavigationSuppressed()
Check if keyboard navigation is being suppressed, such as when the user is editing a cell.
11protected void onBlur()
Called when the widget is blurred.
12protected void onBrowserEvent2(Event event)
Called after AbstractHasData.onBrowserEvent(Event) completes.
13protected void onFocus()
Called when the widget is focused.
14protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel)
Render all row values into the specified SafeHtmlBuilder.
15protected boolean resetFocusOnCell()
Reset focus on the currently focused cell.
16void setEmptyListMessage(SafeHtml html)
Set the message to display when there is no data.
17protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus)
Update an element to reflect its keyboard selected state.
18protected void setSelected(Element elem, boolean selected)
Deprecated. this method is never called by AbstractHasData, render the selected styles in renderRowValues(SafeHtmlBuilder, List, int, SelectionModel)
19void 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:

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>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

Advertisements
Advertisements