データ・テーブル - 拡張 Faces

行がデータ・レコードに対応し、 列がフィールドまたはカテゴリーに対応する、データのテーブルを作成します。 ページ制御、ヘッダーおよびフッターがフィーチャーに含まれ、 行選択とアクションをサポートします。

設計時のコンポーネント

「データ・ テーブル」 コンポーネントを、ページ上にドラッグ・アンド・ドロップします。

「データ・テーブル」コンポーネントのボタン

デザイン時 の「データ・テーブル」コンポーネントは、 ページ上でこのように表示されます。

デザイン時の「データ・テーブル」

実行時のコンポーネント

実行時 の「データ・テーブル」コンポーネントは、 ページ上でこのように表示されます。

実行時の「データ・テーブル」

「プロパティー」ビューと「すべての属性」ビュー

コンポーネントの「プロパティー」ビューには、 コンポーネントに設定できる最も一般的な属性のセットが表示されます。 コンポーネントによっては、制御、アクション、 または他のコンポーネントの追加に関するオプションが 表示される場合もあります。 「プロパティー」ビューを開くには、 「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」とクリックします。

「データ・テーブル」コンポーネントの共通属性は、 「プロパティー」ビューの「h:dataTable」タブ、 「表示オプション」タブ、 および「行アクション」タブに表示されます。 属性の完全なリストについては、「データ・テーブル」のすべての属性 の 表を参照してください。 アクションを追加して、 テーブル表示とナビゲーションを変更する追加構成オプションは、 「h:dataTable>表示オプション」タブ および「h:dataTable>行アクション」タブにあります。

表 1. 「データ・テーブル」構成オプション

構成オプション

説明

行がクリックされたときに実行されるアクションの追加

行がクリックされたときに起こるランタイム・アクションを、作成することができます。

行コンテンツを同じ場所で編集するフォームを起動させる編集列の追加

実行時に行内編集を行えるようになります。

双方向ページャーの追加

矢印を使用してページ間を移動する コンポーネントを、フッター領域に追加します。

ジャンプ・ページャーの追加

ドロップダウン・リストからページを選択できるようにする コンポーネントを、フッター領域に追加します。

ページ情報の追加

ページ上に統計を表示するコンポーネントを、 フッター領域に追加します。

選択列をテーブルに追加

テーブル・コンテンツに関連する選択項目を持つ列を追加することができます。

選択を操作するアクションをヘッダーに追加

ヘッダー情報を取り扱うアクションを作成することができます。

シンプル・ページャーの追加

次のページへ移動するための単純なドロップダウン・メニューを 作成するコンポーネントを、フッターに追加します。

Web スタイル・ページャーの追加

ユーザーが必要なページをクリックできるように、 フッター領域に各ページ番号を追加します。

「カテゴリー化」>「テーブル行をカテゴリー化するための列を追加」

「カテゴリー化」>「テーブル行をカテゴリー化するための列を除去」

テーブル・ソート値を設定したり、 アイコンまたはテキストを列へ追加したりできる、 行カテゴリー化コンポーネントを持つ列を追加します。いったん追加されると、 「カテゴリー化」アイコンは「除去」アイコンに変更されます。

列コンポーネントをテーブルに追加するか、またはテーブルから削除します。 各列のラベル、幅、および ID を設定したり、テーブル内で列を移動させたりすることができます。

フッターの表示

このボックスをチェックすると、フッター領域 f:facet (footer) および h:panelBox がデータ・テーブルに挿入され、 その後、他のコンポーネントを取り込むことができるようになります。

ヘッダーの表示

このボックスをチェックすると、ヘッダー領域 f:facet (header) および h:panelBox がデータ・テーブルに挿入され、 その後、他のコンポーネントを取り込むことができるようになります。

カスタム検証コードを作成/編集するには、ここをクリック

「クイック編集」ビューに切り替えて、 さまざまなユーザー開始イベント用に、 コードのスクリプトまたはスニペットを入力できるようにします。

「すべての属性」ビューには、コンポーネントで設定できるすべての属性の表が表示されます。 この表には、「プロパティー」ビューからアクセスできる属性も含まれます。 「すべての属性」ビューに切り替えるには、 「プロパティー」ビューの右上隅にある「すべての属性」アイ コン「すべての属性」
アイコンをクリックします。

表 2. 「データ・テーブル」のすべての属性

属性名

「プロパティー」ビューでの表示

説明

bgcolor

背景色

背景色を指定します。 6 桁の 16 進数で RGB 値を入力するか (最初に # 記号を付ける)、 または色の名前を入力します (例えば、black、white、blue)。

border

境界線

表の境界線のサイズを、ピクセル単位で指定します。

binding

非表示

コンポーネントの インスタンス (通常はユーザー・インターフェース・ コンポーネント) を、Bean プロパティー (通常は バッキング・ファイル内にあります) にバインドする式です。

cellpadding

パディング

セルの境界線とセル・コンテンツの間の、スペースを指定します。 この属性の値がピクセル単位の長さである場合、4 つのすべての余白はコンテンツからこの距離になります。

cellspacing

間隔

セル間に残す間隔を、ピクセルで指定します。

columnClasses

列クラス

データ・テーブル・コンポーネントの列に、 定義済み CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

dir

非表示

実行時にレンダリングされるときのコンポーネントの方向を指定します。 次のいずれかの値にできます。
  • ltr - 左から右
  • rtl - 右から左
方向を指定しない場合は、コンポーネントのエンコード方式に適している方向が使用されます。

first

非表示

表示される最初の行の索引。

footerClass

フッター・クラス

データ・テーブル・コンポーネントの列ヘッダーに、 定義済みの CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

frame

非表示

グリッドを囲むフレームの、どちら側を可視にするかを指定します。

headerClass

ヘッダー・クラス

データ・テーブル・コンポーネントの列ヘッダーに、 定義済みの CSS スタイルシート・スタイルを割り当てます。 CSS スタイルシート・ファイルを使用するには、 あらかじめコンポーネントの JSP にリンクさせておく必要があります。 これは手動で入力するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

id

ID

コンポーネントに名前を割り当てます。JSP 内で固有の名前にする必要があります。

lang

非表示

コンポーネントの値およびテキスト・コンテンツの言語。 省略されている場合、言語は含まれているタグ (特にビュー) から継承されます。これは、ISO 規格言語省略コードで指定します。例えば、英語は「en」、米国英語は「en-US」、 フランス語は「fr」、ドイツ語は「de」を使用します。
注: これは、コンポーネント内のテキストを変換するのではなく、検索、ソート、照合などの操作が正しく実行されるようにコンポーネントの言語を識別します。

rendered

非表示

true または false に設定できます。
  • false - コンポーネントは、実行時にブラウザーにレンダリングされません。
  • true - コンポーネントがレンダリングされます。これはデフォルト値です。

rowClasses

行クラス

行が表示されるごとに循環するクラスのセット。 これは手動で定義するか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

rows

ページ当たりの行数

実行時に表示される行の数を指定します。

rules

非表示

テーブル内のセルの間で使用される規則を指定します。
  • none
  • groups
  • rows
  • cols
  • all

style

スタイル: プロパティー

コンポーネントに対して CSS スタイル情報を指定します (例えば、style="font-size : 8pt ; color : red")。 選択されたコンポーネントのプロパティー (例えば、フォントおよび色) を定義します。 これは手動で行うか、またはボタンをクリックして、 ウィンドウ内から必要なプロパティーを選択してください。

styleClass

スタイル: クラス

この要素がレンダリングされるときに適用される、 CSS スタイル・クラスのリスト (スペース区切り)。 この値は、生成されたマークアップの クラス属性として渡されなければなりません。 選択されたコンポーネントのクラス (例えば、スタイルシート) を定義します。 これは手動で行うか、またはボタンをクリックして、 ウィンドウ内から必要なクラスを選択してください。

サマリー

非表示

非ビジュアル・メディアへのレンダリングを行う ユーザー・エージェントの要約詳細ストリングを指定します。

title

非表示

実行時にツールチップとしてブラウザーに表示される、タイトル・テキストを指定します。 コンポーネントの代替テキストが指定されていない場合、 ブラウザーはこのテキストを代替テキストとして使用します。

value

実行時に表示されるコンポーネントの初期テキスト値を指定します。 表示される情報が、指定された値または動的な値のポインターのフォームで組み込まれます。

var

非表示

value 属性を使って、使用可能なデータの参照変数名を指定します。

width

コンポーネントの幅を、ピクセル単位またはパーセント単位で指定します。 パーセントを指定するには、値に % を付加します。


フィードバック