<table>要素 |
![]() |
ネームスペース: | http://xmlns.oracle.com/uix/ui |
派生元: | <ui:base>要素 |
グループ: | UIX Components |
要素の型: | UINode |
構文 |
![]() |
<table
[ allDetailsEnabled="boolean" ]
[ alternateText="string" ]
[ blockSize="unsignedInt" ]
[ destination="anyURI" ]
[ formSubmitted="boolean" ]
[ height="string" ]
[ maxValue="ui:negOneOrMoreInt" ]
[ minValue="unsignedInt" ]
[ name="string" ]
[ nameTransformed="boolean" ]
[ partialRenderMode="ui:partialRenderModeType" ]
[ partialTargets="NMTOKENS" ]
[ proxied="boolean" ]
[ showAll="ui:tableShowAllType" ]
[ summary="string" ]
[ text="string" ]
[ unvalidated="boolean" ]
[ value="unsignedInt" ]
[ width="string" ] [ data:tableFormat ="data binding to oracle.cabo.ui.data.DataObject" ] [ data:columnFormats ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:columnHeaderData ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:columnHeaderFormats ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:detailDisclosure ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:rowFormats ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:rowHeaderData ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:rowHeaderFormats ="data binding to oracle.cabo.ui.data.DataObjectList" ] [ data:tableData ="data binding to oracle.cabo.ui.data.DataObjectList" ] > <!-- The following child can be anything derived from the given element --> <tableFormat></tableFormat> <columnFooter></columnFooter> <columnFormats></columnFormats> <columnHeaderData></columnHeaderData> <columnHeaderFormats></columnHeaderFormats> <columnHeaderStamp></columnHeaderStamp> <contents><!-- indexed children --></contents> <detail></detail> <detailDisclosure></detailDisclosure> <footer></footer> <rowFormats></rowFormats> <rowHeaderData></rowHeaderData> <rowHeaderFormats></rowHeaderFormats> <rowHeaderStamp></rowHeaderStamp> <tableActions></tableActions> <tableData></tableData> <tableFilter></tableFilter> <tableSelection></tableSelection> </table>
説明 |
![]() |
<table>要素は、表データの編集および表示、およびそのデータに付随する特殊な書式をサポートします。 表のデータ領域の行数は、tableDataプロパティとして設定されるDataObjectListにより指定されます。 そのDataObjectListのサイズはデータ行数にマップされ、DataObjectList内の各DataObjectはその行のデータに対応します。 各セル内のデータのレンダリングは、TableBeanの索引付けされた子により実行されます。 一般に列には同じ型のデータが表示されるため、各索引付けされた子は表内の1列に相当します。クライアントは表に表示する列ごとに1つ、索引付けされた子を表に追加する必要があります。 表のデータ・セルがレンダリングされる際、表の行を表すDataObjectが、各索引付けされた子に順に渡され、レンダリングされます。 これは、行DataObjectをRenderingContextの現行のDataObjectにすることにより実行されます。 各索引付けされた子はスタンプの役割を果たし、その列の各行に繰り返しレンダリングされます。 索引付けされた子は、選択キーを使用して行DataObjectからデータを選択します。それによって表示される値が決まります。 たとえば、表の索引付けされた子として追加されたTextInputBeanは、行DataObjectにバインドされている値を要求し、テキスト・フィールドとしてそれをレンダリングします。 ImageBeanは、行DataObjectにイメージのソースを問い合せ、そのデータをイメージ・タグとしてレンダリングします。 クライアントは、索引付けされた子が問い合せ、使用できるDataObjectを、表データDataObjectListが返すようにする必要があります。 複数の行にわたるグループで、ラジオ・ボタンをレンダリングする必要のある場合など、まれに、クライアントがレンダリングされるデータ・フォーム・コントロールの名前変換を無効にすることが必要になる場合があります。 nameTransformedプロパティをfalseに設定すると、表全体のレンダリングされるデータ・セルの名前を、表がまったく変換できなくなります。 表のフォーム送信の一部として返されるユーザーに表示されないデータを表に格納することが、クライアントで必要になる場合があります。 これは、サーバーのメモリーではなく、クライアントで状態を保持する際に役立ちます。 これを全体的にサポートするために、UIX Componentsでは、レンダリングされたページに非表示のフィールドを挿入するFormValueBeanを提供します。 この非表示の値は、フォーム送信でサーバーに返されます。 さらにTableBeanは、1つ以上のFormValueBeanを表の子として追加することもサポートしています。 他の表の列同様、FormValueBeanは、表のDataObjectListにその列に挿入するデータを問い合せます。 ただし、TableBean内のFormValueBeanは、表示可能な表セルはまったくレンダリングしません。 これにより、行ごとのデータをクライアント上に格納し、ページの表示に影響を与えずに、サーバーに返すことが可能になります。 クライアントでは、FormValueBeanを、TableBean内の最後の索引付けされた子にすることをお薦めします。 これは、途中に非表示項目がある場合でも列ヘッダーDataObjectListがすべての列ヘッダーに対して、最後の表示可能なデータ列までDataObjectを提供する必要があるためです。 データが直接表示されなくても、データをクライアントに送信し、サーバーに戻すにはやはりコストがかかるため、この方法はなるべく使用しないようにしてください。 TextInputBeanなどの編集可能なデータ列を含む表をサポートするために、CaboShareライブラリには、ユーティリティ・クラスServletRequestDataSetが含まれています。 このクラスのインスタンスは、ServletRequestおよびTableBeanの名前を使用して、サーバー上に作成できます。 ユーティリティ・クラスは、フォーム送信の結果の値がTableBeanから容易に抽出できるよう、ServletRequestを解析し、DataSet実装を再作成します。 作成されたDataSetは、TableBeanの各行のDataObjectを返します。selectValue()と列をレンダリングするUINodeの名前を使用して、行DataObjectに問合せを行い、行および列の送信されたフォームの値が返されます。 ServletRequestDataSetに格納されるのはクライアントからのフォーム・データのみであり、ServletRequestDataSetの索引は常にゼロから始まることに注意してください。 詳細は、ServletRequestDataSetのドキュメントを参照してください。 UIXサーブレット・クライアントは、ServletRequestDataSetを使用せずに、selectValue()をPageEventに対して直接コールして、TableBeanにより送信されたフォーム・データを取得できることにも注意してください。 レンダラが、索引付けされた子として追加されるのではなく、名前の付けられた子として表で明示的に設定されている点を除き、列ヘッダーおよび行ヘッダーのレンダリングは表データの場合と同様に行われます。 この場合、表データと同様、UINodeはスタンプとして機能します。 columnHeaderStampとして指定されたノードは、列ヘッダー・セルをスタンプするために使用され、rowHeaderStampとして指定されたノードは、行ヘッダー・セルをスタンプするために使用されます。 列ヘッダーおよび行ヘッダーで使用されるデータは、DataObjectListのcolumnHeaderDataプロパティおよびrowHeaderDataプロパティを使用して設定されます。 行ヘッダーDataObjectListは表の各行にDataObjectを提供し、列ヘッダーDataObjectListは表の各列にDataObjectを提供します。 行ヘッダーおよび列ヘッダーは両方ともオプションで、相互の関連はありません。また、表データとも無関係です。 表に共通の機能は、ユーザーが1つ以上の行を選択し、それらの行に処理を実行できるようにすることです。 これを容易にするために、UIX ComponentsはSingleSelectionBeanおよびMultipleSelectionBeanを提供します。どちらもtableSelectionプロパティを使用して表に追加できます。 これらのBeanは、次の3つの有用なタスクを実行します。 TableBeanへの選択追加に関する詳細なドキュメントは、SingleSelectionBeanおよびMultipleSelectionBeanを参照してください。 表のデザインには、表内の個々の行に関する追加詳細を表示する、または非表示にする機能が必要なものがあります。 これは、表に名前の付けられた特殊な子、detailを追加することで達成できます。 この名前の付けられた子を持つ表は、「詳細」をヘッダーとし、各セル内に表示/非表示コンポーネントを持つ追加列を自動的にレンダリングします。 表示/非表示コンポーネントをクリックすると、event(hideまたはshowに設定)、source(表名)およびvalue(コンポーネントがある表の行)の3つのパラメータによりURLが生成されます。 詳細列内の各セルの表示状態(表示または非表示)は、表の新しいDataObjectList属性、detailDisclosureによって決まります。 このDataObjectListには、表内の行ごとに1つのDataObjectが含まれ、それぞれが行のレンダリング時にキーdisclosedを使用して問い合されます。 このDataObjectが問合せに対しBoolean.TRUEを返す場合、行はdisclosedとしてレンダリングされ、detailのコンテンツが通常のデータ行の下にある特別の行にスタンプされます。 Boolean.TRUEが返されない場合、その表の行の下には何もレンダリングされません。 detailがdisclosedの表の行の下にレンダリングされる場合、現行のデータ・オブジェクトが、その表の行のデータ・オブジェクトになります。 したがって、detailのコンテンツは、現行のオブジェクトにバインドすることにより、その表の行データ・オブジェクトからバインド値を取得できます。 allDetailsEnabledをtrueに設定すると、表の行の上にShow All DetailsおよびHide All Detailsのリンクが追加されます。 これらのリンクをクリックすると、hideまたはshowに設定されたevent、表名のsourceおよびUIConstants.VALUE_SHOW_ALLのvalueの3つのパラメータが生成されます。 TableBeanのフッターの役割を果たすBeanは2つあり、コンテンツ領域の下にレンダリングされます。 AddTableRowBeanは行を追加する方法を、TotalRowBeanはデータに対する合計を参照する方法をユーザーに提供し、columnFooterという名前の付けられた子として設定できます。 詳細は、それぞれのドキュメントを参照してください。 場合により、開発者は、クライアントで実行中のTableBean内の値を更新または取得するために、JavaScriptを使用することが必要になります。 proxiedプロパティがtrueに設定されている場合、クライアントが列および行の位置に基づいてフォーム要素にアクセスできるようにする一連のJavaScriptユーティリティ・メソッドがレンダリングされます。 追加メソッドにより、行数および現在選択されている索引など、その他の表プロパティにアクセスできます。 メソッドには、表名に基づいてTableProxyインスタンスを作成することにより、アクセスできます。 次に例を示します。
表の外観は、5つの書式オブジェクト、tableFormat、columnFormat、rowFormat、columnHeaderFormatおよびrowHeaderFormatを使用して調整できます。
表全体のレンダリングに適用可能な書式情報は、表の書式DataObjectに問い合せます。 現在のところ、表の書式DataObjectには、UIConstant TABLE_BANDING_KEYを使用し、表データ内にレンダリングするバンドのタイプ(色の交互入替え)を問い合せます。 表の書式DataObjectからUIConstant ROW_BANDINGが返された場合、表のデータ行の色が交互に変わります。 COLUMN_BANDINGが返された場合、表の列の色が交互に変わります。 それ以外の場合、バンドはレンダリングされません(デフォルト)。 書式にバンドが必要であることが指定されている場合、表の書式DataObjectはBANDING_INTERVAL_KEYによっても問い合されます。 このキーが1より大きい整数を返した場合、1つのバンドにまとめられる行数または列数としてその値が使用されます。 たとえば、行をバンドとして表す表にバンドの間隔として2が返された場合、表ではレンダリング時に暗い行2行と明るい行2行が交互に描かれます。 列の書式DataObjectListは、列の書式を指定するために、列ごとにDataObjectを返す必要があります。 現在のところ、列の各書式DataObjectには、COLUMN_DATA_FORMAT_KEYを使用し、列に表示されるデータの型が問い合されます。 この情報は、セルのコンテンツをデータ型ごとに位置合せするために使用されます。 列の書式DataObjectからTEXT_FORMAT(デフォルト)が返された場合、テキストは左揃えになります。 列の書式DataObjectからNUMBER_FORMATが返された場合、Oracle UIガイドラインに指定されているとおり、テキストは右揃えになり、ICON_BUTTON_FORMATが返された場合、中央揃えになります。 列の書式DataObjectは、行の折返しを使用不可にしてセルをレンダリングするかどうかを決めるためにも問い合されます。 CELL_NO_WRAP_FORMAT_KEYの問合せに対し、列の書式オブジェクトからBoolean.TRUEが返された場合、その列のセルはコンテンツの折返しなしでレンダリングされます。 列の書式DataObjectは、DISPLAY_GRID_KEYキーでも問い合されます。 この問合せに対してBoolean.TRUEを返すDataObjectごとに、列のコンテンツの前(左から右のロケールでは左側)に縦のグリッド線がレンダリングされます。 Boolean.FALSEを返すDataObjectには、グリッド線がレンダリングされません。 デフォルトでは、各列ごとにグリッド線がレンダリングされます。 列の書式は、WIDTH_KEYによる問合せに対し、デフォルトの幅を表す文字列を返すことにより、列の幅を制御することもできます。 この幅はピクセルまたはパーセントのいずれでも指定でき、その列コンテンツのデフォルトの幅として使用されます。 ただし、コンテンツが指定した幅より広い場合は、指定より多くの領域が使用されます。 表の列の書式に特に幅の指定がない場合、領域はデータ列間でできるだけ均等に分割されます。 列の書式で列の外観を制御できるもう1つの方法は、BANDING_SHADE_KEYによる問合せに対して値を返すことです。 このキーに対して列の書式から値が返された場合、表はこれらのキーの値に応じてすべての列を明示的にまとめ、クライアントが列のバンドのパターンを完全に制御できるようにします。 この問合せに対する有効な結果は、明るい網掛けの列に対するBANDING_SHADE_LIGHT、または暗い網掛けの列に対するBANDING_SHADE_DARK(デフォルト)です。 明示的な列のバンドを使用すると、表の書式DataObjectで指定したバンドの使用がオーバーライドされることに注意してください。 行の書式DataObjectListもDataObjectを提供する必要がありますが、対象は表の各行です。 これらの各DataObjectはDISPLAY_GRID_KEYにより問い合され、この問合せに対してBoolean.FALSEを返さないものは、その行の上にグリッド線がレンダリングされます。 デフォルトでは、各列の上にグリッド線がレンダリングされます。 列および行ヘッダーの書式DataObjectListもDataObjectを提供しますが、対象は各行ヘッダーまたは列ヘッダーです。 CELL_NO_WRAP_FORMAT_KEYの問合せに対し、列の書式オブジェクトからBoolean.TRUEが返された場合、その列または行ヘッダーのセルはコンテンツの折返しなしでレンダリングされます。 TableStyleクラスは、表の書式設定を容易にするDataObjectListおよびDataObjectの簡単なユーティリティ実装を提供します。 1つの列に関するすべての情報を、索引付けされた子(列スタンプ)、ヘッダー・スタンプ、ヘッダーの書式、ヘッダー・データおよび列の書式のオブジェクトに別々に設定するかわりに、1つのエンティティにカプセル化することを、クライアントが希望する場合が多くあります。 これをサポートするために、通常ならば、列にUINodeスタンプを置く表で、その表の索引付けされた子としてColumnBeanを追加できるようになりました。 ColumnBean自体は何もレンダリングしませんが、ColumnBeanの索引付けされた子がその表列の各セルに設定されます。 ColumnBeanにより、列の書式、列ヘッダーの書式、列ヘッダー・データおよび列ヘッダー・スタンプも設定できます。 指定された値で、TableBeanの属性である書式およびスタンプの値がオーバーライドされます。 指定されない場合、TableBeanの書式およびスタンプがこれまでどおり使用されます。 ColumnBeanは、TableBean内の任意の列またはすべての列に使用できます。また、まったく使用しなくてもかまいません。 renderedフラグをColumnBeanに設定して、特定のレンダリングのビューに表示しないようにすることもできます。 大規模なデータ・セットのサブセットを示す表では、表の最上部(場合によっては最下部)にナビゲーション・バーをレンダリングする必要があります。 TableBeanでは、適切なプロパティが指定されていれば、自動的にこれらのナビゲーション・バーを作成およびレンダリングします。 注意: バージョン2.1.4より前のUIXでは、ナビゲーション・バーをレンダリングするために、前述の4つの属性のいずれかが表に設定されている必要がありました。 この操作は推奨されません。 2.1.4以降、ナビゲーション・バーをレンダリングするためには、blockSizeおよびvalue属性を指定する必要があります。 これらのプロパティは、表名とともに、レンダリングのためにナビゲーション・バーに渡されます。 デフォルトでは、ナビゲーション・バーにより生成されるリンクは、TableBeanのdestinationプロパティ、およびナビゲーション・セット上の現在のビューに基づいたURLです。 ただし、formSubmittedプロパティが表で設定されている場合、ナビゲーション・バーはかわりにフォーム送信リンクを生成します。 これらのプロパティの使用およびそれによりレンダリングされるリンクの詳細は、NavigationBarBeanのドキュメントを参照してください。 1ページに多数のデータ行を表示する表の場合、表の最下部にナビゲーション・バーが繰り返し表示されます。 行数がOracle UIチームにより設定されたしきい値を超えた場合、表レンダラがデフォルトでこれを行います。 表では、データおよびナビゲーション領域の上にタイトルもレンダリングできます。 このタイトルは、表のtextプロパティを設定することにより指定できます。 alternateTextプロパティは、データが提供されていない場合、または表データに行のない場合、表内に表示するテキストを指定するために使用できます。
表データおよびそのレンダリング
クライアントでのデータの格納
送信された表データの取得
列ヘッダーおよび行ヘッダー
選択可能な表の行
表の行における非表示/表示
表のフッター
JavaScriptのプロキシ
// create the proxy object
var proxy = new TableProxy("testTable");
// get the number of rows currently displayed
var length = proxy.getLength();
// get the selected index of a single-selection table
var selectedIndex = proxy.getSelectedRow();
// display the value of the text field in row 2, column "lastName"
var row2Field = proxy.getFormElement("lastName", 2);
alert("The value of the lastName in row 2 is " + row2Field.value);
詳細および例は、oracle.cabo.ui.test.TableTestクラスおよびTableProxy.js JavaScriptライブラリ・ファイルを参照してください。
表の書式設定
カプセル化された列
ナビゲーション・バー
その他の書式
例 |
![]() |
<table>
<columnHeaderData>
<col text="Name"/>
<col text="Age"/>
</columnHeaderData>
<columnHeaderStamp>
<text text="${uix.current.text}"/>
</columnHeaderStamp>
<tableData>
<row name="Person 1" age="12"/>
<row name="Person 2" age="13"/>
<row name="Person 3" age="14"/>
</tableData>
<contents>
<text text="${uix.current.date}"/>
<text text="${uix.current.age}"/>
</contents>
</table>
属性 |
![]() |
子要素 |
![]() |
|