GWT - CellList 元件

簡介

CellList 元件表示單元格的單列列表。

類宣告

以下是 com.google.gwt.user.cellview.client.CellList<T> 類的宣告：

public class CellList<T>
   extends AbstractHasData<T>

類建構函式

序號	建構函式 & 描述
1	CellList(Cell<T> cell) 構造一個新的 CellList。
2	CellList(Cell<T> cell, CellList.Resources resources) 使用指定的 CellList.Resources 構造一個新的 CellList。
3	CellList(Cell<T> cell, CellList.Resources resources, ProvidesKey<T> keyProvider) 使用指定的 CellList.Resources 和鍵提供程式構造一個新的 CellList。
4	CellList(Cell<T> cell, ProvidesKey<T> keyProvider) 使用指定的鍵提供程式構造一個新的 CellList。

類方法

序號	函式名稱 & 描述
1	protected boolean dependsOnSelection() 檢查檢視中的單元格是否依賴於選擇狀態。
2	protected void doSelection(Event event, T value, int indexOnPage) 已棄用。請改用 Abstract HasData.add Cell Preview Handler(com.google.gwt.view.client.Cell Preview Event.Handler)。
3	protected void fireEventToCell(Cell.Context context, Event event, Element parent, T value) 向單元格觸發一個事件。
4	protected Cell<T> getCell() 返回用於渲染每個專案的單元格。
5	protected Element getCellParent(Element item) 從列表項中獲取包裝單元格的父元素。
6	protected Element getChildContainer() 返回儲存已渲染單元格的元素。
7	SafeHtml getEmptyListMessage() 獲取在沒有資料時顯示的訊息。
8	protected Element getKeyboardSelectedElement() 獲取具有鍵盤選擇的元素。
9	Element getRowElement(int indexOnPage) 獲取指定索引的元素。
10	protected boolean isKeyboardNavigationSuppressed() 檢查鍵盤導航是否被抑制，例如當用戶正在編輯單元格時。
11	protected void onBlur() 當小部件失去焦點時呼叫。
12	protected void onBrowserEvent2(Event event) 在 AbstractHasData.onBrowserEvent(Event) 完成後呼叫。
13	protected void onFocus() 當小部件獲得焦點時呼叫。
14	protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel) 將所有行值渲染到指定的 SafeHtmlBuilder 中。
15	protected boolean resetFocusOnCell() 重置當前聚焦單元格的焦點。
16	void setEmptyListMessage(SafeHtml html) 設定在沒有資料時顯示的訊息。
17	protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus) 更新元素以反映其鍵盤選擇狀態。
18	protected void setSelected(Element elem, boolean selected) 已棄用。此方法從未被 AbstractHasData 呼叫，在 renderRowValues(SafeHtmlBuilder, List, int, SelectionModel) 中渲染選定的樣式。
19	void setValueUpdater(ValueUpdater<T> valueUpdater) 設定在單元格修改專案時使用的值更新程式。

繼承的方法

此類繼承以下類的方法：

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 元件示例

此示例將引導您完成簡單的步驟，以展示如何在 GWT 中使用 CellList 元件。按照以下步驟更新我們在 GWT - 建立應用 章節中建立的 GWT 應用：

步驟	描述
1	在 com.tutorialspoint 包下建立一個名為 HelloWorld 的專案，如 GWT - 建立應用章節中所述。
2	修改 HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html 和 HelloWorld.java，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符 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>

以下是修改後的樣式表文件 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;
}

以下是修改後的 HTML 主機檔案 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>

讓我們在 Java 檔案 src/com.tutorialspoint/HelloWorld.java 中包含以下內容，它將演示 CellList 元件的使用。

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);
   }
}

準備好所有更改後，讓我們像在 GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果：

gwt_complex_widgets.htm

列印頁面