columnGroupの使用

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

columnGroupコンポーネントを作成するには、次のようにします。

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

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

  3. columnGroupヘッダーの書式設定情報を指定するには、プロパティ・インスペクタで次の属性を設定します。
  4. columnGroupのヘッダー・テキストを設定するには、次のようにします。
    1. 「columnGroup」ノードを展開して、名前付きの子「columnHeader」ノードを探します。次に、名前付きの子「columnHeader」を右クリックし、「columnHeaderの中に挿入」->「styledText」を選択します。
    2. プロパティ・インスペクタで、styledTextのtext属性の値を、グループの列ヘッダーのテキストに変更します。
  5. グループの列ヘッダーのインライン・スタイルを追加するには、次のようにします。
    1. UIXビジュアル・エディタで、ステップ4で作成したグループの列ヘッダーのstyledTextコンポーネントを選択します。
    2. プロパティ・インスペクタで、inlineStyle属性を変更します。右の列でEllipsis buttonアイコンをクリックしてダイアログを開き、「新規」をクリックしてCSSプロパティの値を入力します。このproperty要素から、名前と値のペアが1つ定義されます。名前はname属性、値はその要素のテキスト・コンテンツにより定義されます。たとえば、名前にはcolor、値にはredと入力します。「詳細」タブを使用してEL構文データ・バインディングの式を入力するか、「データにバインド」ダイアログを使用してこの複合属性に対するデータソースを選択します。
  6. 新しい列をcolumnGroupに追加するには、次のようにします。
    1. 設計構造ウィンドウで、「columnGroup」ノードを右クリックし、「columnGroupの中に挿入」->「column」を選択します。
    2. ステップ6aを繰り返し、このcolumnGroupに対して任意の数の列を追加します。
    3. 列のスタンプの作成および列の属性の指定の詳細は、「列の作成」を参照してください。
  7. ステップ1から6までを繰り返し、任意の数のcolumnGroupコンポーネントを作成します。

ヒント: 既存の列をcolumnGroupに移動するには、設計構造ウィンドウで、既存の列を「columnGroup」ノードにドラッグ・アンド・ドロップします。

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

例(UIX XML)


...
<provider>
  <data name="demoTableData">
    <inline>
      <!-- data for 4 rows -->
      <demoRowData firstColumnText="First row"
                   secondColumnText="First Button"
                   thirdColumnText="First col"
                   fourthColumnText="111"
                   isSelected="false"
                   isDisabled="true" />
      <demoRowData firstColumnText="Second row"
                   secondColumnText="Second Button"
                   thirdColumnText="Second col"
                   fourthColumnText="222"
                   isSelected="true" />
      <demoRowData firstColumnText="Third row"
                   secondColumnText="Third Button"
                   thirdColumnText="Third col"
                   fourthColumnText="333"
                   isSelected="false" />
      <demoRowData firstColumnText="4th row"
                   secondColumnText="4th Button"
                   thirdColumnText="4th row col"
                   fourthColumnText="444"
                   isSelected="false" />
      <!-- data for the row headers -->
      <demoRowHeaderData headerText="1"/>
      <demoRowHeaderData headerText="2"/>
      <demoRowHeaderData headerText="3"/>
      <demoRowHeaderData headerText="4"/>
      <!-- data for the 4 column headers -->
      <demoColHeaderData textKey="H1"/>
      <demoColHeaderData textKey="H2"/>
      <demoColHeaderData textKey="H3"/>
      <demoColHeaderData textKey="H4"/>
      <!-- formatting information for the rows -->
      <demoRowFormats/>
      <demoRowFormats displayGrid="false"/>
      <demoRowFormats/>
      <demoRowFormats/>
    </inline>
  </data>
</provider>
...
<contents>
  ...
  <table alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}"
         width=55%">
    <contents>

      <!-- first group -->

      <columnGroup>

        <!-- group column header -->
        <columnHeader>
          <styledText text="Group Col 1">
            <inlineStyle>
              <property name="color">red</property>
            </inlineStyle>
          </styledText>
        </columnHeader>

        <columnHeaderFormat cellNoWrapFormat="true"/>

        <!-- columns under first group -->

        <contents>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <styledText text="${uix.current.firstColumnText}"/>
            </contents>
          </column>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <button text="${uix.current.secondColumnText}"/>
            </contents>
            <columnFormat columnDataFormat="iconButtonFormat"/>
          </column>
        </contents>
      </columnGroup>

      <!-- second group -->

      <columnGroup>

        <!-- group column header -->
        <columnHeader>
          styledText text="Group Col 2"/>
        </columnHeader>

        <!-- columns under second group -->

        <contents>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <styledText text="${uix.current.thirdColumnText}"/>
            </contents>
          </column>
         <column>
           <columnHeader>
             <styledText text="${uix.current.textKey}"/>
           </columnHeader>
           <contents>
             <styledText text="${uix.current.fourthColumnText}"/>
           </contents>
           <columnFormat columnDataFormat="numberFormat"/>
         </column>
       </contents>

     </columnGroup>
    ...
  </table>
</contents>
...    

columnGroupについて

列の作成
tableコンポーネントの使用

 

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