注意: columnコンポーネントは、tableコンポーネントの索引付けされた子として使用されます。
columnHeader要素は、columnおよびcolumnGroupという2つのコンポーネントの名前付きの子です。columnHeaderは、列ヘッダーのテキストを指定する場合に使用されます。columnHeaderに挿入する子として推奨されるのは、styledTextです。styledTextのtext属性により、列ヘッダーのテキストが定義されます。styledText要素にはinlineStyleを指定できます。
...
<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について」を参照してください。
columnHeaderについて
tableコンポーネントの使用
Copyright © 1997, 2004, Oracle. All rights reserved.