Using Detail in Detail-Disclosure

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 "tableData" provides the data for the rows.

To use detail in a table component:

In the Design Structure Window of the desired file, select the table node in which you wish to show and hide additional detail for individual rows.
In the Property Inspector, set the following detail-disclosure attributes:
- 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.
- detailDisclosure - Enter the data source to bind to for the list of detail rows currently disclosed. Click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The disclosure state of each show/hide arrow is controlled by this attribute. This must be a DataObjectList with a DataObject for each row of the table. Each DataObject is queried with the key UIConstants.DISCLOSED_KEY (or disclosed in UIX XML). If the result of this query is Boolean.TRUE, then the detailed information for that row will be disclosed.
- formSubmitted - Select true to specify that form submission should be used.
Note: To use data binding, see Data Binding a Component Attribute.
In the Design Structure Window, expand the table node to locate the detail named child node. Right-click detail to insert the detail child for display in the detail area. The detail child is rendered with the current table row DataObject as the current DataObject; so you can use data binding in the same way as for a regular column stamp. To preserve the current disclosed state of the table, add a hidden form parameter named "disclosed" to the detail section.

Note: This procedure does not produce an interactive detail table. You must handle the event for getting the index of the row that the user has chosen to show/hide, and then determine whether to show or hide the detail area depending on the event name. This event handler should create a data set that contains the current disclosure state of the table. See "Creating Tables in ADF UIX" in the ADF UIX Developer's Guide for details about implementing the event handler and a class that uses the data set to create a DataObjectList that determines the previous disclosure state of the table and the new state.

Example (UIX XML)


...
<provider>
  <data name="tableData">
    <inline>
      <row name="Person 1" age="11" blood="B" phone="555-1111"/>
      <row name="Person 2" age="12" blood="AB" phone="555-2222"/>
      <row name="Person 3" age="13" blood="O" phone="555-3333"/>
      <row name="Person 4" age="14" blood="B" phone="555-4444"/>
      <row name="Person 5" age="14" blood="O" phone="555-5555"/>
      <row name="Person 6" age="16" blood="AB" phone="555-6666"/>
    </inline>
  </data>
</provider>
...
<contents>
  ...
  <table alternateText="No Items Found."
         tableData="${uix.data.tableData.row}"
         allDetailsEnabled="true"
         formSubmitted="true"
         width="55%">

    <contents>
      <!-- regular column stamp -->
      <column>
        <columnHeader>
          <styledText text="Name"/>
        </columnHeader>
        <contents>
          <styledText text="${uix.current.name}"/>
        </contents>
      </column>
      <column>
        <columnHeader>
          <styledText text="Age"/>
        </columnHeader>
        <contents>
          <styledText text="${uix.current.age}"/>
        </contents>
      </column>
    </contents>

    <!-- list indicating which detail rows are currently disclosed -->
    <detailDisclosure>
      <row disclosed="false"/>
      <row disclosed="false"/>
      <row disclosed="true"/>
      <row disclosed="false"/>
      <row disclosed="false"/>
      <row disclosed="true"/>
    </detailDisclosure>

    <detail>
      <!-- this is the details stamp -->
      <labeledFieldLayout>
        <contents>
          Name
          <styledText text="${uix.current.name}" styleClass="OraDataText"/>
          Age
          <styledText text="${uix.current.age}" styleClass="OraDataText"/>
          Blood Group
          <styledText text="${uix.current.blood}" styleClass="OraDataText"/>
          Phone Number
          <styledText text="${uix.current.phone}" styleClass="OraDataText"/>
        </contents>
      </labeledFieldLayout>
    </detail>
  </table>
</contents>
...