tableLayoutとrowLayoutを使用した表と行の挿入

このトピックでは、行を含む表を作成するステップについて説明します。表にない行を作成するときは、「rowLayoutを使用した行の作成」を参照してください。

tableLayoutとrowLayoutを使用して表と行を挿入するには、次のようにします。

  1. 目的のファイルの設計構造ウィンドウで、表を挿入する親ノードを探します。
  2. コンポーネント・パレットのドロップダウン・リストから「Layout Components」を選択し、tableLayoutコンポーネントを親ノードにドラッグ・アンド・ドロップします。

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

  3. 設計構造ウィンドウで、「tableLayout」ノードを右クリックし、「tableLayoutの中に挿入」->「rowLayout」を選択します。

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

  4. ステップ3を繰り返し、任意の数の行を追加します。
  5. 行の属性を設定するには、次のようにします。
    1. 設計構造ウィンドウで、「rowLayout」ノードを選択します。
    2. プロパティ・インスペクタで、行に対して次の属性を設定します。
      • hAlign: この行に置かれるセルのデフォルトの横の位置揃えを入力します。オプションはcenter、left、right、startおよびendです。
      • vAlign: この行に置かれるセルのデフォルトの縦の位置揃えを入力します。オプションはmiddle、topおよびbottomです。
  6. 表の属性を設定するには、次のようにします。
    1. 設計構造ウィンドウで、「tableLayout」ノードを選択します。
    2. プロパティ・インスペクタで、表に対して次の属性を設定します。
      • borderWidth: 各セルの周りの境界線の幅を入力します。
      • cellPadding: セル内の間隔調整を入力します。
      • cellSpacing: セル間の間隔調整を入力します。
      • hAlign:: 表の横の位置揃えを入力します。オプションはcenter、left、right、startおよびendです。
      • summary: 音声読上げブラウザなどのビジュアルでないメディアに対して提供される表の用途および構造の要約の情報を入力します。この属性は、(レイアウト表のかわりに)データ表を実装するためにこの表が使用されている場合に、設定する必要があります。
      • width: 表レイアウトの合計幅を入力します。

例(UIX XML)


...
<pageLayout>

  <!-- Insert tableLayout and rowLayout -->

  <contents>
    <header text="Here is a table with two rows">
      <tableLayout width="75%"
                   borderWidth="3"
                   cellSpacing="10"
                   hAlign="center">
        <contents>
          <rowLayout hAlign="right">
            <contents>
              First Column
              <cellFormat vAlign="bottom">
                <contents>
                  Second Column
                </contents>
              </cellFormat>
              <flowLayout>
                <contents>
                  Third Column
                  <spacer height="100" width="1"/>
                </contents>
              </flowLayout>
            </contents>
          </rowLayout>
          <rowLayout>
            <contents>
              <header text="First Column Second Row"/>
              <cellFormat columnSpan="2">
                <contents>
                  <header text="Column Span Two"/>
                </contents>
              </cellFormat>
            </contents>
          </rowLayout>
        </contents>
      </tableLayout>
    </header>
  </contents>

  <!-- REST OF PAGE LAYOUT -->

</pageLayout>
...    

tableLayoutについて
rowLayoutについて
cellFormatについて

rowLayoutへの子コンポーネントの挿入
rowLayoutの子コンポーネントの周囲でのcellFormatの使用
レイアウト・コンポーネントの使用

 

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