tableFooter、addTableRowおよびtotalRowの使用

注意: この手順では、このトピックの最後に記述されているインライン・データがUIXファイルに挿入されているものとして説明しています。demoTableDataというインライン・データでは、行と列のデータが提供されます。

addTableRowおよびtotalRowをtableFooterに挿入するには、次のようにします。

  1. 設計構造ウィンドウで、「table」ノードを展開して、名前付きの子「footer」ノードを探します。
  2. コンポーネント・パレットのドロップダウン・リストから「Table Components」を選択し、tableFooterコンポーネントを、選択した親ノードにドラッグ・アンド・ドロップします。

    「tableFooter」ノードが、展開された親ノードに挿入され、強調表示されます。

  3. addTableRowコンポーネントを挿入するには、次のようにします。
    1. addTableRowコンポーネントを「tableFooter」ノードにドロップ・アンド・ドラッグします。
    2. プロパティ・インスペクタで、addTableRowに次の属性を設定します。
      • rows: 挿入する行数を入力します。デフォルトは1です。入力した行数が2以上になると、「addTableRow」ボタンに表示するテキストが「Add X Rows」に変わります(Xは入力した行数です)。
      • text: 「addTableRow」ボタンに表示するテキストを入力します。デフォルトでは、「Add Another Row」および「Add X Rows」のいずれかの文字列になります(Xは「rows」で入力した行数です)。
      • destination: 「addTableRow」ボタンが参照するURIを入力します。
  4. totalRowコンポーネントを挿入するには、次のようにします。
    1. 設計構造ウィンドウで、「tableFooter」ノードを展開して、名前付きの子「total」ノードを探します。
    2. totalRowコンポーネントを、「tableFooter」の下の「total」ノードにドロップ・アンド・ドラッグします。
    3. プロパティ・インスペクタで、totalRowに次の属性を設定します。
      • readOnly: 「再計算」ボタンをレンダリングするかどうかを、trueまたはfalseを選択して指定します。
      • text: 「再計算」ボタンに表示するテキストを入力します。
      • destination: 「再計算」ボタンが参照するURIを入力します。
    4. 更新した合計に合せて、「textInput」フィールドのあるcolumnコンポーネントのfooterの子を設定します。totalRowコンポーネントでは計算は実行されません。自分で合計を計算し、「textInput」フィールドに表示する必要があります。

注意: データ・バインディングを使用する場合には、「コンポーネントの属性のデータ・バインディング」を参照してください。

例(UIX XML)


...
  <table ...>

    <contents>
      <column>
        <columnHeader>Item</columnHeader>
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
      </column>

      <column>
        <columnHeader>Amount</columnHeader>
        <columnFormat columnDataFormat="numberFormat"/>
        <contents>
          <text text="${uix.current.secondColumnText}"/>
        </contents>
        <footer>
          <textInput columns="2"/>
        </footer>
      </column>
    </contents>

    <footer>
      <tableFooter>
        <contents>
          <messageChoice prompt="Row Type">
            <contents>
              <option text="option 1"/>
              <option text="option 2"/>
            </contents>
            <end>
              <addTableRow/>
            </end>
          </messageChoice>
        </contents>
        <total>
          <totalRow readOnly="false"/>
        </total>
      </tableFooter>
    </footer>
    ...
  </table>
...    

tableFooterおよびtotalについて
addTableRowについて
totalRowについて

columnへの子footerの挿入
tableコンポーネントの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.