データ・テーブル

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

設計時のコンポーネント

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

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

実行時のコンポーネント

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

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

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

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

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

構成オプション

説明

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

行をクリックしたときに生じるランタイム・アクションを作成できます。

行の内容をインプレース編集するためのフォームを呼び出す編集列を追加

実行時に複数列を編集できます。

双方向ページャーの追加

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

表示ページャーの追加

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

ページ情報の追加

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

選択列をテーブルに追加

テーブルの内容に関連した選択項目を指定して列を追加できます。

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

ヘッダー情報を操作するアクションを作成できます。

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

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

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

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

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

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

テーブル・ソート値を設定したり、アイコンやテキストを列に追加したりできる行カテゴリー化コンポーネントを指定して列を追加します。一度追加すると、「カテゴリー化」アイコンが「除去」アイコンに変更されます。

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

フッターの表示

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

ヘッダーの表示

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

クリックしてカスタム検証コードを作成/編集

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

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

表 2. データ・テーブルの全属性

属性名

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

説明

bgcolor

背景色

# 記号で始まる 6 桁の 16 進数 RGB 値、 または色の名前 (例えば、black、white、blue など) を入力して、背景色を指定します。

border

ボーダー

テーブルのボーダーのサイズをピクセル単位で指定します。

binding

再表示しない

通常はバッキング・ファイルの中でこのコンポーネントを表す UIComponent。

cellpadding

埋め込み

セルの境界線とセルの内容との間のスペースの量を指定します。この属性の値がピクセルの長さである場合は、4 つのマージンすべてが、その分だけその内容から離れていなければなりません。

cellspacing

余白

セルとセルの間に置くスペースの量を、ピクセル数で指定します。

columnClasses

列クラス

データ・テーブル・コンポーネントの列に定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの JSP にリンクする必要があります。これは、手動で入力することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して入力することもできます。

dir

再表示しない

実行時のコンポーネントの表示方向を指定します。指定できる値は次のいずれかです。
  • ltr - 左から右
  • rtl - 右から左

first

再表示しない

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

footerClass

フッター・クラス

データ・テーブル・コンポーネントの列ヘッダーに定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの JSP にリンクする必要があります。これは、手動で入力することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して入力することもできます。

frame

再表示しない

グリッドを囲むフレームのどちらの側を見えるようにするかを指定します。

headerClass

ヘッダー・クラス

データ・テーブル・コンポーネントの列ヘッダーに定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの 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 スタイル・クラスのスペースで区切られたリスト。この値は、生成されたマークアップ上の「class」属性としてパススルーする必要があります。選択されたコンポーネントのクラス (スタイル・シートなど) を定義します。これは、手動で行うことも、ボタンをクリックして希望するクラスをウィンドウ内で選択して行うこともできます。

summary

再表示しない

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

title

再表示しない

実行時にツールチップとしてブラウザーに表示されるタイトル・テキストを指定します。

value

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

var

再表示しない

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

width

ピクセルまたはパーセントのいずれかでコンポーネントの幅を指定します。パーセントを指定するためには、% を値に付加してください。

関連概念
JavaServer Faces を使用したデータ・アクセス Web アプリケーションの作成
関連タスク
Faces アプリケーションの作成 - 概要
関連資料
Faces コンポーネントの参照
Faces コンポーネントの属性
チェック・ボックス
フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.