GWT-CellTableウィジェット

前書き

*CellTable* ウィジェットは、ページングと列をサポートする表形式のビューを表します。

クラス宣言

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

public class CellTable<T>
   extends AbstractHasData<T>

クラスコンストラクター

Sr.No.	Constructor & Description
1	CellTable() デフォルトのページサイズ15でテーブルを作成します。
2	CellTable(int pageSize) 指定されたページサイズでテーブルを構築します。
3	CellTable(int pageSize, CellTable.Resources resources) 指定されたCellTable.BasicResourcesを使用して、指定されたページサイズでテーブルを構築します。
4	CellTable(int pageSize, CellTable.Resources resources, ProvidesKey<T> keyProvider) 指定されたページサイズ、指定されたCellTable.BasicResources、および指定されたキープロバイダーでテーブルを作成します。
5	CellTable(int pageSize, ProvidesKey<T> keyProvider) 指定されたページサイズと指定されたキープロバイダーでテーブルを構築します。
6	CellTable(ProvidesKey<T> keyProvider) デフォルトのページサイズ15で、指定されたキープロバイダーでテーブルを構築します。

クラスメソッド

Sr.No.	Function name & Description
1	void addColumn(Column<T,?> col) テーブルに列を追加します。
2	void addColumn(Column<T,?> col, Header<?> header) ヘッダーが関連付けられたテーブルに列を追加します。
3	void addColumn(Column<T,?> col, Header<?> header, Header<?> footer) ヘッダーとフッターが関連付けられたテーブルに列を追加します。
4	void addColumn(Column<T,?> col, SafeHtml headerHtml) SafeHtmlヘッダーが関連付けられたテーブルに列を追加します。
5	void addColumn(Column<T,?> col, SafeHtml headerHtml, SafeHtml footerHtml) SafeHtmlヘッダーとフッターが関連付けられたテーブルに列を追加します。
6	void addColumn(Column<T,?> col, java.lang.String headerString) 関連付けられたStringヘッダーを使用して、テーブルに列を追加します。
7	void add Column (Column<T,?> col, java. lang. String header String, java.lang.String footer String) 関連付けられたStringヘッダーとフッターを使用して、テーブルに列を追加します。
8	void addColumnStyleName(int index, java.lang.String styleName) 指定されたインデックスでTableColElementにスタイル名を追加し、必要に応じて作成します。
9	protected Element convertToElements(SafeHtml html) 指定されたHTMLをDOM要素に変換し、DOM要素の親を返します。
10	protected boolean dependsOnSelection() ビュー内のセルが選択状態に依存しているかどうかを確認します。
11	protected void do Selection (Event event, T value, int row, int column) 廃止予定です。 Abstract Has Data.add Cell Preview Handler（com.google.gwt.view.client。代わりにCell Preview Event.Handler）。
12	int getBodyHeight() テーブル本体の高さを返します。
13	protected Element getChildContainer() レンダリングされたセルを保持する要素を返します。
14	int getHeaderHeight() テーブルヘッダーの高さを返します。
15	protected Element getKeyboardSelectedElement() キーボードが選択されている要素を取得します。
16	TableRowElement getRowElement(int row) 指定された行のTableRowElementを取得します。
17	protected boolean isKeyboardNavigationSuppressed() ユーザーがセルを編集しているときなど、キーボードナビゲーションが抑制されているかどうかを確認します。
18	protected void onBlur() ウィジェットがぼやけているときに呼び出されます。
19	protected void onBrowserEvent2(Event event) AbstractHasData.onBrowserEvent（Event）が完了した後に呼び出されます。
20	protected void onFocus() ウィジェットにフォーカスがあるときに呼び出されます。
21	void redrawFooters() テーブルのフッターを再描画します。
22	void redrawHeaders() テーブルのヘッダーを再描画します。
23	void removeColumn(Column<T,?> col) 列を削除します。
24	void removeColumn(int index) 列を削除します。
25	void removeColumnStyleName(int index, java.lang.String styleName) 指定されたインデックスでTableColElementからスタイルを削除します。
26	protected void renderRowValues(SafeHtmlBuilder sb, java.util.List<T> values, int start, SelectionModel<? super T> selectionModel) すべての行の値を指定されたSafeHtmlBuilderにレンダリングします。
27	protected void replaceAllChildren(java.util.List<T> values, SafeHtml html) すべての子を指定されたhtmlに置き換えます。
28	protected boolean resetFocusOnCell() 現在フォーカスされているセルにフォーカスをリセットします。
29	protected void setKeyboardSelected(int index, boolean selected, boolean stealFocus) キーボードの選択状態を反映するように要素を更新します。
30	void setRowStyles(RowStyles<T> rowStyles) 行のスタイル設定方法を決定するために使用されるオブジェクトを設定します。変更は、テーブルが次にレンダリングされるときに有効になります。
31	protected void setSelected(Element elem, boolean selected) 廃止予定です。このメソッドはAbstractHasDataによって呼び出されることはなく、renderRowValues（SafeHtmlBuilder、List、int、SelectionModel）で選択されたスタイルをレンダリングします

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.cellview.client.AbstractHasData
java.lang.Object

CellTableウィジェットの例

この例では、GWTでCellTableウィジェットの使用方法を示す簡単な手順を紹介します。次の手順に従って、_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>CellTable Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.finddevguides.client;

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

import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.cellview.client.CellTable;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client
.HasKeyboardSelectionPolicy.KeyboardSelectionPolicy;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.view.client.SelectionChangeEvent;
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 final String address;
      private final Date birthday;
      private final String name;

      public Contact(String name, Date birthday, String address) {
         this.name = name;
         this.birthday = birthday;
         this.address = address;
      }
   }

  /**
 *The list of data to display.
   */

   private static final List<Contact> CONTACTS = Arrays.asList(
      new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue"),
      new Contact("Joe", new Date(85, 2, 22), "22 Lance Ln"),
      new Contact("George",new Date(46, 6, 6),"1600 Pennsylvania Avenue"));

   public void onModuleLoad() {
     //Create a CellTable.
      CellTable<Contact> table = new CellTable<Contact>();
      table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

     //Add a text column to show the name.
      TextColumn<Contact> nameColumn =
      new TextColumn<Contact>() {
         @Override
         public String getValue(Contact object) {
            return object.name;
         }
      };
      table.addColumn(nameColumn, "Name");

     //Add a date column to show the birthday.
      DateCell dateCell = new DateCell();
      Column<Contact, Date> dateColumn
      = new Column<Contact, Date>(dateCell) {
         @Override
         public Date getValue(Contact object) {
            return object.birthday;
         }
      };
      table.addColumn(dateColumn, "Birthday");

     //Add a text column to show the address.
      TextColumn<Contact> addressColumn
      = new TextColumn<Contact>() {
         @Override
         public String getValue(Contact object) {
            return object.address;
         }
      };
      table.addColumn(addressColumn, "Address");

     //Add a selection model to handle user selection.
      final SingleSelectionModel<Contact> selectionModel
      = new SingleSelectionModel<Contact>();
      table.setSelectionModel(selectionModel);
      selectionModel.addSelectionChangeHandler(
      new SelectionChangeEvent.Handler() {
         public void onSelectionChange(SelectionChangeEvent event) {
            Contact selected = selectionModel.getSelectedObject();
            if (selected != null) {
               Window.alert("You selected: " + selected.name);
            }
         }
      });

     //Set the total row count. This isn't strictly necessary,
     //but it affects paging calculations, so its good habit to
     //keep the row count up to date.
      table.setRowCount(CONTACTS.size(), true);

     //Push the data into the widget.
      table.setRowData(0, CONTACTS);

      VerticalPanel panel = new VerticalPanel();
      panel.setBorderWidth(1);
      panel.setWidth("400");
      panel.add(table);

     //Add the widgets to the root panel.
      RootPanel.get().add(panel);
   }
}

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

GWT CellTableウィジェット

Gwt-celltable-widget