Creating a Table

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 table component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a table component.
In the Component Palette, select Table Components from the dropdown list, and then drag and drop the table component to the parent node of your choice.
The table node is inserted and highlighted under the expanded parent node. By default 'No items are found' is displayed in the empty table in the UIX Visual Editor.
In the Property Inspector, set the following attributes for the table component:
- alternateText - Change the default text for an empty table, if desired.
- allDetailsEnabled - Select true or false to specify whether to provide Show All Details and Hide All Details links above the table rows. These links allow the user to show/hide all detail areas.
- blockSize - Change the default number of rows to display in the table at each time, if desired.
- columnFormats - Enter the data source to bind to for the formatting information of each column. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- columnHeaderData - Enter the data source to bind to for the columnHeaderStamp child. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.data.demoTableData.demoColHeaderData}) or use the Bind to Data dialog to select the data source.
- columnHeaderFormats - Enter the data source to bind to for the formatting information of each column header. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- destination - Enter the base destination for all links generated by this table.
- detailDisclosure - Enter the data source to bind to for the list of detail rows currently disclosed. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- formSubmitted - Select true or false to specify whether form submission should be used in the links generated by the table proxy. Form submission is desirable when form input elements are used as column stamps of a table.
- 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.
- maxValue - Enter the last possible row in the data set to be displayed.
- minValue - Enter the first possible row in the data set to be displayed.
- nameTransformed - Select true or false to specify whether name transformation should be turned on or off when rendering data form controls.
- partialRenderMode - Select a partial page rendering (PPR) behavior mode. The values allowed are:
  - multiple - This enables PPR using multiple partial target nodes. You must also set the partialTargets attribute.
  - none - Default. Full page rendering will be used.
  - self - This enables PPR using only one target node, the ID of the table component.
- partialTargets - Enter the IDs of the partial target nodes to render. Do not list the ID of the table component because it is automatically included in the partial targets list.
- proxied - Select true or false to specify whether table operations can be performed using JavaScript on the client-side. If set to true, JavaScript proxy code (TableProxy JavaScript object) is included in the table when rendering on the client.
- rowFormats - Enter the data source to bind to for the formatting information of each row in the table. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- rowHeaderData - Enter the data source to bind to for the labels of each data row. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.data.demoTableData.demoRowHeaderData}) or use the Bind to Data dialog to select the data source.
- rowHeaderFormats - Enter the data source to bind to for the formatting information of each data row header. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- showAll - Select yes or no to specify whether a "Show All" option is to be displayed in the record navigation bar. This is only used if maxValue is set. If the number of row blocks is too large, this is automatically disabled.
- summary - Enter a brief description of the table for non-visual user clients.
- tableData - Enter the data for the table. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.data.demoTableData.demoRowData}) or use the Bind to Data dialog to select the data source.
- tableFormat - Enter the formatting information of the entire table. In the right column, click the icon to enter the table format property 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 table format values supported are:
  - bandingInterval - Enter the number of rows or columns in each banding group.
  - tableBanding - Select the banding strategy used for the table from these supported values:
    - noBanding - No banding is used in the table.
    - columnBanding - The columns are alternately banded.
    - rowBanding - The rows are alternately banded.
- unvalidated - Select true or false to specify whether or not to validate before any form submits generated by the table proxy. The default is to perform no validation. This attribute is only applicable when the table is used in formSubmitted mode.
- value - Enter the first currently visible row in the data set that is displayed by the table. This attribute is required if the table has navigation bars.
- width - Enter the width of the table in pixels or as a percentage of the parent component.
Note: To use data binding, see Data Binding a Component Attribute.

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}">
  ...
  </table>
</contents>
...