columnHeaderについて

注意: columnコンポーネントは、tableコンポーネントの索引付けされた子として使用されます。

columnHeader要素は、columnおよびcolumnGroupという2つのコンポーネントの名前付きの子です。columnHeaderは、列ヘッダーのテキストを指定する場合に使用されます。columnHeaderに挿入する子として推奨されるのは、styledTextです。styledTextのtext属性により、列ヘッダーのテキストが定義されます。styledText要素にはinlineStyleを指定できます。

Table with 2 column headers, 3 row headers


...
<provider>
  <!-- all the data used by our table demo -->
  <data name="demoTableData">
    <inline>
      <!-- DataObjectList to provide information to the data rows -->
	  <demoRowData firstColumnText="First row"
		           secondColumnText="First Button"/>
	  <demoRowData firstColumnText="Second row"
	               secondColumnText="Second Button"/>
	  <demoRowData firstColumnText="Third row"
	               secondColumnText="Third Button"/>
      <!-- DataObjectList to provide information to the row header stamps -->
	  <demoRowHeaderData headerText="1"/>
	  <demoRowHeaderData headerText="2"/>
	  <demoRowHeaderData headerText="3"/>
    </inline>
  </data>
</provider>
...
...
<table tableData="${uix.data.demoTableData.demoRowData}"
       rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}"
       width="48%">
  <contents>
    <column>
      <columnHeader>
        <styledText text="Header 1"/>
      </columnHeader>
      <contents>
        <!-- first column stamp -->
        <text text="${uix.current.firstColumnText}"/>
      </contents>
    </column>
    <column>
      <columnHeader>
        <styledText text="Second Header">
          <inlineStyle>
            <property name="color">red</property>
          </inlineStyle>
        </styledText>
      </columnHeader>
      <contents>
        <!-- second column stamp -->
        <button text="${uix.current.secondColumnText}"/>
      </contents>
    </column>
  </contents>
  <rowHeaderStamp>
    <text text="${uix.current.headerText}"/>
</rowHeaderStamp> </table> ...

列ヘッダーでデータ・バインディングを使用するには、tableコンポーネントのcolumnHeaderData属性をデータソースに設定し、columnHeaderの子と列ヘッダー・データのキーとをデータ・バインドします。


...
<provider>
  <!-- all the data used by our table demo -->
  <data name="demoTableData">
    <inline>
      <!-- DataObjectList to provide information to the data rows -->
	  <demoRowData firstColumnText="First row"
		           secondColumnText="First Button"/>
	  <demoRowData firstColumnText="Second row"
	               secondColumnText="Second Button"/>
	  <demoRowData firstColumnText="Third row"
	               secondColumnText="Third Button"/>
      <!-- DataObjectList to provide information to the row header stamps -->
	  <demoRowHeaderData headerText="1"/>
	  <demoRowHeaderData headerText="2"/>
	  <demoRowHeaderData headerText="3"/>
      <!-- DataObjectList to provide information for the column headers -->
	  <demoColHeaderData textKey="H1"/>
	  <demoColHeaderData textKey="H2"/>
    </inline>
  </data>
</provider>
...
...
<table tableData="${uix.data.demoTableData.demoRowData}"
       rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}"
       columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
       width="48%">
  <contents>
    <column>
      <columnHeader>
        <text text="${uix.current.textKey}"/>
      </columnHeader>
      <contents>
        <!-- first column stamp -->
        <text text="${uix.current.firstColumnText}"/>
      </contents>
    </column>
    <column>
      <columnHeader>
        <text text="${uix.current.textKey}"/>
      </columnHeader>
      <contents>
        <!-- second column stamp -->
        <button text="${uix.current.secondColumnText}"/>
      </contents>
    </column>
  </contents>
  <rowHeaderStamp>
      <text text="${uix.current.headerText}"/>
</rowHeaderStamp> </table> ...

ソート可能な列ヘッダーでは、sortableHeader要素をcolumnHeaderに挿入してください。詳細は、「sortableHeaderについて」を参照してください。


columnGroupについて

columnHeaderについて
tableコンポーネントの使用

 

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