GWT-CellListウィジェット

前書き

*CellList* ウィジェットは、セルの単一の列リストを表します。

クラス宣言

以下は、 com.google.gwt.user.cellview.client.CellList <T> クラスの宣言です-

public class CellList<T>
   extends AbstractHasData<T>

クラスコンストラクター

Sr.No.	Constructor & Description
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を構築します。

クラスメソッド

Sr.No.	Function name & Description
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アプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl 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.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.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/HelloWorldl の内容です。

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

CellListウィジェットの使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.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);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT CellListウィジェット

Gwt-celllist-widget