演習 2.4: データ・グリッド・コンポーネントの構成
この演習を始める前に、演習 2.3: クライアント・サイド・データの作成と構成を完了する必要があります。
Faces Client データ・グリッド・コンポーネントを使用すると、クライアント・サイドのデータについて、ページを更新することなくソート、フィルタリング、ページ・スルー、および一般的な操作を行うことができます。
データ・グリッドは完全にメタデータによって駆動され、そのセルのコンテンツをすべてブラウザーでレンダリングします。
データ・グリッド・コンポーネントの挿入
- JSP ファイルが開いていることを確認します。
プレースホルダー・テキストを削除することはできますが、点線のボックスで表示されたクライアント・データ・タグを削除しないよう注意してください。

- パレット・ビューで、Faces Client コンポーネント・ドロワーをクリックして開きます。
- DataGrid コンポーネントをドラッグし、設計ビューの任意の位置にドロップします。

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

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