Gwt-celllist-widget

提供：Dev Guides
移動先:案内、検索

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ウィジェット

「https://www.finddevguides.com/index.php?title=Gwt-celllist-widget&oldid=14798」から取得
Powered by MediaWiki