Creating a Column

You can create databound tables using databound UI components provided by the Oracle Application Development Framework (Oracle ADF) bindings. When you work with the Data Control Palette to quickly assemble databound tables, ADF UIX automatically updates the model attributes for you.

For details about ADF bindings and the Data Control Palette, see:

Note: This procedure assumes inline data (as shown in the example at the end of this topic) has been inserted in the UIX file. The inline data named "demoTableData" provides the data for the rows and columns.

To create a column component:

In the Design Structure Window of the desired file, locate the table or columnGroup node in which you wish to insert a column component.
In the Component Palette, select Table Components from the dropdown list, and then drag and drop the column component to the parent node of your choice.
The column node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the column component:
- columnFormat - Enter the formatting information for the column. In the right column, click the icon to open a dialog for entering the format values. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The column format values supported are:
  - bandingShade - Select from the following:
    - dark - The column is shaded dark.
    - light - The column is shaded light.
  - cellNoWrapFormat - Select true or false to specify whether the column will be rendered by wrapping the cell contents in multiple lines.
  - columnDataFormat - Select the data formatting for column cells from the following supported values:
    - textFormat - The column cell data is left aligned. For displaying text data.
    - numberFormat - The column cell data is right aligned. For displaying numbers.
    - iconButtonFormat - The column cell data is center aligned. For displaying icons and buttons.
  - displayGrid - Select true or false to specify whether a grid line is displayed before the column's content. By default, a grid line is shown to the left of every column, in a left-to-right locale.
  - width - Enter the width of the column in pixels or as a percentage.
- columnHeaderData - Enter the data source to bind to for the columnHeader child. In the right column, click the icon to open a dialog. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- columnHeaderFormat - Enter the formatting information for the column header. In the right column, click the icon to open a dialog to enter the format values. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute. The column header format value supported is:
  - cellNoWrapFormat - Select true or false to specify whether the column header will be rendered by wrapping the cell contents in multiple lines.
- inlineStyle - Enter the inline CSS style for this component. In the right column, click the icon to open a dialog, then click New to enter the CSS property values. The property element defines a single name/value pair. The name is defined by the Name attribute, and the Value by the plain-text contents of the element. For example, you can enter 'color' for Name, and 'red' for Value. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- nameTransformed - Select true or false to specify whether this column should turn on or off name transformation when rendering data controls. By default name transformation is on, unless nameTransformed on the table has been set to false.
- useSeparateRows - Select true or false to specify whether the indexed children of this column should be rendered on separate rows.
Note: To use data binding, see Data Binding a Component Attribute.
Repeat steps 2 and 3 to add the desired number of columns.
To add the column stamp for the column contents, do the following for each column you created:

In the Design Structure Window, right-click the column node to insert the desired component.
Or,

Enter ${uix.current.colnumkey} where colnumkey is the key to the column contents, e.g., ${uix.current.firstColumntext} if the column is using inline data bound to the table as shown in the example.
Repeat step 5a to add other indexed children, if desired.

Example (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}">
    <contents>
      <!-- table's indexed children are the columns -->
      <column>
        <!-- first column stamp -->
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
      </column>

      <column>
        <!-- second column stamp -->
        <contents>
          <styledText text="${uix.current.secondColumnText}"/>
        </contents>
        <!-- second column header -->
      </column>

      <column>
        <!-- third column stamp -->
        <contents>
          <styledText text="${uix.current.thirdColumnText}"/>
        </contents>
      </column>

      <column>
        <!-- column formatting -->
        <columnFormat columnDataFormat="numberFormat" 
                      width="45%"/>
        <!-- fourth column stamp -->
        <contents>
          <styledText text="${uix.current.fourthColumnText}"/>
        </contents>
      </column>
    </contents>
    ...
  </table>
</contents>
...