演習 2.4: データ・グリッド・コンポーネントの構成

この演習を始める前に、演習 2.3: クライアント・サイド・データの作成と構成を完了する必要があります。

Faces Client データ・グリッド・コンポーネントを使用すると、クライアント・サイドのデータについて、ページを更新することなくソート、フィルタリング、ページ・スルー、および一般的な操作を行うことができます。 データ・グリッドは完全にメタデータによって駆動され、そのセルのコンテンツをすべてブラウザーでレンダリングします。

データ・グリッド・コンポーネントの挿入

  1. JSP ファイルが開いていることを確認します。 プレースホルダー・テキストを削除することはできますが、点線のボックスで表示されたクライアント・データ・タグを削除しないよう注意してください。
    設計ビューのブランク JSP
  2. パレット・ビューで、Faces Client コンポーネント・ドロワーをクリックして開きます。
  3. DataGrid コンポーネントをドラッグし、設計ビューの任意の位置にドロップします。

ブランクのデータ・グリッド

プロパティーの設定

データ・グリッドにはカスタマイズできる機能が数多くありますが、このチュートリアルでは一部のみ選んで変更します。

  1. プロパティー」ビューで、odc:dataGrid タブをクリックします。
  2. 表示したい行数を構成するために、「高さ (height)」属性を変更します。 このチュートリアルでは 5 の値を入力してください。
  3. 行フィルター (row filter)」を指定しますが、これはデータ・グリッドに行を表示するかどうかを指示するブール値を戻す JavaScript の式です。 このチュートリアルでは、空白のままにしてください。
  4. テーブルの「幅 (width)」を指定します。 90% を選択してください。
  5. データ・グリッドを編集可能にするかどうかを指定し、ユーザーが行 (およびデータ構造内のそれに対応するオブジェクト) の削除や新規行の追加 (およびデータ構造への新規オブジェクトの挿入) を行えるかどうかを指定します。 このチュートリアルでは、「行の追加/削除を可能にする (Rows can be added/deleted)」をチェックしないでください。
  6. ユーザーがデータのページ・スルーを行えるようにする、ナビゲーション・バーの表示位置を構成します。 このチュートリアルでは、「フッター・バーの表示 (Show footer bar)」を選択してください。
  7. 選択の列が表示されるよう指定して行の選択を可能にし、以下の表示方法を構成します: ヘッダーのラベル (選択)、位置合わせ (中央)、幅 (30 ピクセル)、ラジオ・ボタンまたはチェック・ボックスを使用するかどうか (「複数の選択項目を可能にする (Allow multiple choices)」をチェックしてチェック・ボックスを作成)。
  8. 行番号の表示 (Show row number)」をチェックして行のインデックス列を使用可能に設定し、データ・セットに何行あるか、また任意の時点でどの行が表示されているか (例えば、行 6 から 10 まで) を、ユーザーが簡単に見られるようにします。
    データ・グリッドのプロパティー

これで、演習 2.5: データのバインドと表示のカスタマイズを開始する準備ができました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved. (C) Copyright IBM Japan 2004