<table>要素
ネームスペース:  http://xmlns.oracle.com/uix/ui
派生元:  <ui:base>要素
グループ:  UIX Components
要素の型:  UINode

<table>要素は、表データの表示に使用されます。選択(単一および複数)、ソート、レコード・ナビゲーション、合計および詳細表示もサポートします。

構文
<table
      name="string"
    [ alternateText="string" ]
    [ blockSize="unsignedInt" ]
    [ destination="anyURI" ]
    [ formSubmitted="boolean" ]
    [ height="string" ]
    [ maxValue="ui:negOneOrMoreInt" ]
    [ minValue="unsignedInt" ]
    [ nameTransformed="boolean" ]
    [ partialRenderMode="ui:partialRenderModeType" ]
    [ proxied="boolean" ]
    [ 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>
   <rowFormats> </rowFormats>
   <rowHeaderData> </rowHeaderData>
   <rowHeaderFormats> </rowHeaderFormats>
   <rowHeaderStamp> </rowHeaderStamp>
   <tableData> </tableData>
   <tableFilter> </tableFilter>
   <tableSelection> </tableSelection>
</table>

注意: 
  • この要素は派生元要素のすべての属性と子要素を持つことができます。
  • data:で始まる属性は、実際には要素となります。data:は、その属性構文がデータ・バインドせずに使用されることがないことを示しています。

  • 説明

    <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 Controllerクライアントは、ServletRequestDataSetを使用せずに、selectValue()をPageEventに対して直接コールして、TableBeanにより送信されたフォーム・データを取得できることにも注意してください。

    列ヘッダーおよび行ヘッダー

    レンダラが、索引付けされた子として追加されるのではなく、名前の付けられた子として表で明示的に設定されている点を除き、列ヘッダーおよび行ヘッダーのレンダリングは表データの場合と同様に行われます。この場合、表データと同様、UINodeはスタンプとして機能します。

    columnHeaderStampとして指定されたノードは、列ヘッダー・セルをスタンプするために使用され、rowHeaderStampとして指定されたノードは、行ヘッダー・セルをスタンプするために使用されます。列ヘッダーおよび行ヘッダーで使用されるデータは、DataObjectListのcolumnHeaderDataプロパティおよびrowHeaderDataプロパティを使用して設定されます。行ヘッダーDataObjectListは表の各行にDataObjectを提供し、列ヘッダーDataObjectListは表の各列にDataObjectを提供します。

    行ヘッダーおよび列ヘッダーは両方ともオプションで、相互の関連はありません。また、表データとも無関係です。

    選択可能な表の行

    表に共通の機能は、ユーザーが1つ以上の行を選択し、それらの行に処理を実行できるようにすることです。これを容易にするために、UIX ComponentsはSingleSelectionBeanおよびMultipleSelectionBeanを提供します。どちらもtableSelectionプロパティを使用して表に追加できます。これらのBeanは、次の3つの有用なタスクを実行します。

    1. 行を選択するために、表内に列をレンダリングする。
    2. 選択した行に対する処理を持つコントロール・バーを、表の周りにレンダリングする。
    3. ServletRequestDataSetとともに、フォーム送信時にクライアントの選択を容易に取得できるようにする。

    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のコンテンツは、現行のオブジェクトにバインドすることにより、その表の行データ・オブジェクトからバインド値を取得できます。

    表のフッター

    TableBeanのフッターの役割を果たすBeanは2つあり、コンテンツ領域の下にレンダリングされます。AddTableRowBeanは行を追加する方法を、TotalRowBeanはデータに対する合計を参照する方法をユーザーに提供し、columnFooterという名前の付けられた子として設定できます。詳細は、それぞれのドキュメントを参照してください。

    JavaScriptのプロキシ

    場合により、開発者は、クライアントで実行中のTableBean内の値を更新または取得するために、JavaScriptを使用することが必要になります。proxiedプロパティがtrueに設定されている場合、クライアントが列および行の位置に基づいてフォーム要素にアクセスできるようにする一連のJavaScriptユーティリティ・メソッドがレンダリングされます。追加メソッドにより、行数および現在選択されている索引など、その他の表プロパティにアクセスできます。

    メソッドには、表名に基づいてTableProxyインスタンスを作成することにより、アクセスできます。次に例を示します。

                  // 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ライブラリ・ファイルを参照してください。

    表の書式設定

    表の外観は、5つの書式オブジェクト、tableFormatcolumnFormatrowFormatcolumnHeaderFormatおよび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では、適切なプロパティが指定されていれば、自動的にこれらのナビゲーション・バーを作成およびレンダリングします。

    • minValue: 表により表示されるデータの範囲内の最初の値。デフォルトは1です。
    • maxValue: 表により表示されるデータの範囲内の最後の値。デフォルトはMAX_VALUE_UNKNOWNです。
    • value: 表で現在表示されている最初の索引。
    • blockSize: 表データの通常のサブセットで表示される行数。通常、これは表で表示される行数と同じです。ただし、端数になる場合は異なります。たとえば、一度に10行を表示するmaxValueが103の表では、101行目から103行目を表示する場合、3行だけを表示しますが、ブロック・サイズが10行であることには変わりありません。

    注意: バージョン2.1.4より前のUIXでは、ナビゲーション・バーをレンダリングするために、前述の4つの属性のいずれかが表に設定されている必要がありました。この操作は推奨されません。2.1.4以降、ナビゲーション・バーをレンダリングするためには、blockSizeおよびvalue属性を指定する必要があります。

    これらのプロパティは、表名とともに、レンダリングのためにナビゲーション・バーに渡されます。デフォルトでは、ナビゲーション・バーにより生成されるリンクは、TableBeanのdestinationプロパティ、およびナビゲーション・セット上の現在のビューに基づいたURLです。ただし、formSubmittedプロパティが表で設定されている場合、ナビゲーション・バーはかわりにフォーム送信リンクを生成します。これらのプロパティの使用およびそれによりレンダリングされるリンクの詳細は、NavigationBarBeanのドキュメントを参照してください。

    1ページに多数のデータ行を表示する表の場合、表の最下部にナビゲーション・バーが繰り返し表示されます。行数がOracle UIチームにより設定されたしきい値を超えた場合、表レンダラがデフォルトでこれを行います。

    その他の書式

    表では、データおよびナビゲーション領域の上にタイトルもレンダリングできます。このタイトルは、表のtextプロパティを設定することにより指定できます。

    alternateTextプロパティは、データが提供されていない場合、または表データに行のない場合、表内に表示するテキストを指定するために使用できます。


    <table>
     <columnHeaderData>
      <col text="Name"/>
      <col text="Age"/>
     </columnHeaderData>
     <columnHeaderStamp>
      <text data:text="text"/>
     </columnHeaderStamp>
     <tableData>
      <row name="Person 1" age="12"/>
      <row name="Person 2" age="13"/>
      <row name="Person 3" age="14"/>
     </tableData>
     <contents>
      <text data:text="name"/>
      <text data:text="age"/>
     </contents>
    </table>

    属性

    説明
    alternateText 空の表内で表示するテキスト。
    string
    blockSize 表内に表示される標準の行数。前述の「ナビゲーション・バー」の記述を参照してください。表でナビゲーション・バーのレンダリングが必要な場合、この属性は必須です。
    unsignedInt
    destination 表によって生成されるすべてのリンクのベース・リンク先。
    URI
    formSubmitted 表のナビゲーション・バーにより生成されるリンクでフォーム送信を使用するかどうか。
    boolean
    height 表の高さ。
    string
    maxValue 表により表示されるデータ・セット内の最後の値。この値が不明の場合は、デフォルト値でもあるMAX_VALUE_UNKNOWNに設定します。
    ui:negOneOrMoreInt
    minValue 表により表示されるデータ・セット内の最初の値。デフォルトは1です。
    unsignedInt
    name クライアント対クライアントまたはクライアント対サーバーのイベントで、表の指定に使用される名前。 必須。
    string
    nameTransformed データ・コントロールのレンダリング時に、TableBeanで名前の変換をするかどうかを指定するブール値。デフォルトでは、名前は変換されます。
    boolean
    partialRenderMode partialRenderMode属性は、tableのページの部分レンダリング動作を制御するために使用します。partialRenderModeのデフォルトはnoneで、tableのすべての処理でページの全体レンダリングが使用されます。partialRenderModeがselfに設定されている場合、次のようなtableの処理の最適化には、可能なかぎりページの部分レンダリングが使用されます。
    • 表のナビゲーション(goto)
    • 列のソート(sort)
    • 表の行の追加(addRows)
    • 合計行の更新(update)
    • 詳細表示の切替え(hide、show)
    ページの部分レンダリングを有効にするには、tableのid属性が設定されていること、tableがUIXの<body>要素とともに使用されていること、Configuration.ACCESSIBILITY_MODEがAccessibilityMode.INACCESSIBLE_MODEに設定されていることが必要です。これらの要件が満たされ、partialRenderModeがselfに設定されている場合に、tableでは、アプリケーションへのイベント送信時にページの部分レンダリング・アーキテクチャが使用されます。これらの要件のいずれかが満たされていない場合、あるいはブラウザでページの部分レンダリングをサポートしていない場合には、ページの全体レンダリングが実行されます。
    ui:partialRenderModeType
    proxied クライアントでのレンダリング時に、表にJavaScriptのプロキシ・コードを含めるかどうか。
    boolean
    summary ビジュアルでないメディアにレンダリングするユーザー・エージェント用の、表の用途および構造の要約。この属性を指定しない場合、text属性の値が使用されます。
    string
    text 表の上に表示されるタイトル。
    string
    unvalidated この表により生成されるフォーム送信の前に検証を行うかどうか。この属性は、formSubmittedモードでのみ使用可能です。
    boolean
    value 表に表示されるデータ・セット内で現在最初に見える行。表でナビゲーション・バーのレンダリングが必要な場合、この属性は必須です。
    unsignedInt
    width 表の幅。
    string

    子要素

    説明 必須 組込み可能な数
    <tableFormat> 表全体の書式情報。
    いいえ 1
    <columnFooter> 表のフッターのレンダリングに使用されるノード。
    いいえ 1
    <columnFormats> 各列の書式情報。
    いいえ 1
    <columnHeaderData> 列ヘッダーのデータ。
    いいえ 1
    <columnHeaderFormats> 各列の書式情報。
    いいえ 1
    <columnHeaderStamp> 各列ヘッダーのレンダリングに使用されるノード。
    いいえ 1
    <contents> Beanの索引付けされた子。 いいえ 1
    <detail> 表示される各行の下にスタンプするノード。
    いいえ 1
    <detailDisclosure> 現在表示されている詳細行を示すリスト。
    いいえ 1
    <rowFormats> 各行の書式情報。
    いいえ 1
    <rowHeaderData> 行ヘッダーのデータ。
    いいえ 1
    <rowHeaderFormats> 各行の書式情報。
    いいえ 1
    <rowHeaderStamp> 各行ヘッダーのレンダリングに使用されるノード。
    いいえ 1
    <tableData> 表のデータ。
    いいえ 1
    <tableFilter> 表のフィルタ領域に表示されるノード。
    いいえ 1
    <tableSelection> 表での選択を有効にする機能のためのノード。
    いいえ 1