Working with Tree Controls in ADF-Enabled Web Pages

If the data objects of your business services contains a hierarchical list of attributes derived from master-detail relationships, you can create a tree control binding to display those attributes. You use the tree binding editor to define two rules (root node rule and branch nodes rule) that determine how the tree binding should traverse the relationships of the business service data collections you select.

Currently, the tree control is not available from the Data Control Palette. You can use the following procedure to create the tree binding and access the binding in your web page.

To create a tree control binding and root node rule:

Create your web page and open the file in the Visual Editor.
Choose View | Structure to display the Structure window for the open file.
Click (UI Model) in the Structure window toolbar to display the current binding definitions.
If no binding definition exist for the open file, right-click the node in the Structure window and choose Create UI Model.

JDeveloper creates the <pageName> UIModel node in the Structure window and adds the <pageName>UIModel.xml binding definition file to the project package in the Application Sources folder.
Create an iterator binding to manage the currency of the master collection that your tree control will iterate over: right-click the new binding definition and choose Creating B inding | Data | Iterator.
In the iterator binding editor, select the data collection that represents the master collection for the tree control.
To create the tree binding, right-click the binding definition and choose Creating Binding | Input | Tree.
In the tree binding editor, use the Edit Rule tab to define the parent node rule to display from the master data collection. For example, a master collection of "customers" has a detail collection of "orders".
In the Data Collection Definition list, select the data collection that you want to use to populate the tree root node. This is the master collection that defines the root node. For example, a customer's master collection that has an orders detail collection.
In the Display Attribute list, select a single attribute to display as the parent nodes for the tree. For example, the last name of each customer. Currently, the tree control is limited to displaying a single root attribute for each branch.
In the Branch Rule Accessor list, select the accessor that specifies the link between the master collection and the first branch in the tree. For example, a Business Components accessor for the customers and orders collections, might appear as OrdersView in the list.

Warning: If your data model does not contain master-detail accessors for the data collections you select, the Branch Rule Accessor list will appear empty. You must define an accessor for your business service in your Model project for all branches of the tree except the leaf (terminal) nodes.
Click the Add New Rule button to complete the rule definition for the root node.
Click the Show Rules tab to view the root node rule. For example, in the customers and orders example, it might appear as:

Viewobject rule: myPackage.CustomersView, CustLastName, OrdersView

This rule, based on ADF Business Components, defines: display the CustLastName attribute as the nodes for the root branch of the tree and use the OrdersView view link accessor to drilldown and display customer orders as the second branch in the tree. You must now add a rule to define the attributes to display from the orders view object.

To define the branch display rule of the tree:

Click the Edit Rule tab to define the child-branch attributes rule to display from the first detail collection.
In the Data Collection Definition list, select the data collection you want to use to populate the tree's branch nodes. This is the detail collection that defines the nodes for the tree. For example, an orders detail collection from which you will display order id information in the tree.
In the Display Attribute list, select a single attribute to display as the branch nodes in the tree. For example, the last name of each customer.
In the Branch Rule Accessor list, select the accessor that specifies the link between the first branch data collection and the next branch in the tree. For example, a Business Components accessor for the orders and orderitems collections, might appear as OrderItemsView in the list.

Note: If the branch data collection you select has no further accessor defined for it in the business service Model project, the word <none> will appear in the list. This means no accessor is required because the selected collection's attribute will appear as leaf nodes in the tree.
Click Add New Rule to complete the rule definition for the child branch node.
Click Show Rules to view the root node rule. For example, in the customers and orders example, it might appear as:

Viewobject rule: myPackage.OrdersItemsView, OrderId, OrderStatus, <none>

This rule, based on ADF Business Components, defines: display the OrderId and OrderStatus attributes as the nodes for the second branch of the tree. The word none means there is no accessor because this branch consists of leaf nodes.
You may repeat these steps in the Edit Rule tab to define new branches in the tree as long as your business services support accessors to traverse the branches.
Click OK to save the binding settings.

The binding editor performs error checking for the rules you defined. It displays the following error messages:
- "Invalid definition, either no root or no rules defined." Either you did not define a rule or you did not define a rule for the root node.
- "Defined root not found in this Application Module." The view object usage name defining the root node cannot be found in the application module defined in the form binding.
- "No rule found for accessor... ." There is no rule definition for every accessor in the rules table. Error checking does not verify that the number of polymorphic rules for a particular accessor; only that each accessor in the rules table has a rule definition.

After you have successfully created the rules for a tree binding, you can access the bindings in your JSP page using the EL expression syntax like this:

To access an attribute value of the root collection to display as a header:

<c:out value="${bindings.DCTree.labels.CustLastName}"/>

To access the root nodes, you need to write a forEach loop that operates on the root nodes:

<c:forEach var="Row" items="${bindings.DCTree.rootNodeBinding.children}">

To access the children nodes, you need to write a forEach loop that operates on the child nodes:

<c:forEach var="childNode" items="${Row.children}">

For example, as used in the following script:




<table border="1" width="100%">

     <tr>

        <th>

           <c:out value="${bindings.DCTree.labels.CustLastName}"/>

        </th>

        <th>

           Details

        </th>

     </tr>

     <c:forEach var="Row" items="${bindings.DCTree.rootNodeBinding.children}">

       <tr>

          <td>

             <c:out value="${Row.Dname}"/> 

          </td>

          <td>

             <table border="1" width="100%">

                <c:forEach var="childNode" items="${Row.children}">

                   <tr>

                      <td><c:out value="${childNode.OrderId}" /> </td>

                      <td><c:out value="${childNode.OrderStatus}" /> </td>

                      <td><c:out value="${childNode.OrderTotal}" /> </td>

                   </tr>

                </c:forEach>

             </table>

          </td>

       </tr>

     </c:forEach>

   </table>