Displaying Master-Detail Data 5-13
The DisclosureListener attribute on the tree is bound to the accessor attribute specified in the node rule defined in the page definition file. This accessor attribute is
invoked in response to the DisclosureEvent event; in other words, whenever a user expands the node the accessor attribute populates the branch nodes.
5.5 Using Tree Tables to Display Master-Detail Objects
Use the ADF Faces treeTable component to display a hierarchy of master-detail collections in a table. The advantage of using a treeTable component rather than a
tree component is that the treeTable component provides a mechanism that
enables users to focus the view on a particular node in the tree. For example, you can create a tree table that displays three levels of nodes: countries,
states or provinces, and cities. Each root node represents an individual country. The branches off the root nodes display the state or provinces in the country. Each state or
province node branches to display the cities contained in it.
As with trees, to create a tree table with multiple nodes, it is necessary to have master-detail relationships between the collections. For example, to create a tree table
with three levels of country, state, and city, it was necessary to have a master-detail relationship from the CountryCodes collection to the StatesandProvinces
collection, and a master-detail relationship from the StatesandProvinces collection to the Cities collection.
A databound ADF Faces treeTable displays one root node at a time, but provides navigation for scrolling through the different root nodes. Each root node can display
any number of branch nodes. Every node is displayed in a separate row of the table, and each row provides a focusing mechanism in the leftmost column.
You can edit the following treeTable component properties in the Property Inspector:
■
Range navigation: The user can click the Previous and Next navigation buttons to scroll through the root nodes.
■
List navigation: The list navigation, which is located between the Previous and Next
buttons, enables the user to navigate to a specific root node in the data collection using a selection list.
■
Node expanding and collapsing mechanism: The user can open or close each node individually or use the Expand All or Collapse All command links. By default,
the icon for opening and closing the individual nodes is an arrowhead with a plus or minus sign. You can also use a custom icon of your choosing.
■
Focusing mechanism: When the user clicks on the focusing icon which is displayed in the leftmost column next to a node, the page is redisplayed showing
only that node and its branches. A navigation link is provided to enable the user to return to the parent node.
5.5.1 How to Display Master-Detail Objects in Tree Tables
The steps for creating an ADF Faces databound tree table are exactly the same as those for creating an ADF Faces databound tree, except that you drop the accessor returned
collection as an ADF Tree Table instead of an ADF Tree.
5.5.2 What Happens When You Create a Databound Tree Table
When you drag and drop from the Data Controls panel, JDeveloper does many things for you.
5-14 Java EE Developers Guide for Oracle Application Development Framework
When you create a databound tree table using the Data Controls panel, JDeveloper adds binding objects to the page definition file, and it also adds the treeTable tag to
the JSF page. The resulting UI component is fully functional and does not require any further modification.
5.5.2.1 Code Generated in the JSF Page
Example 5–4 shows the code generated in a JSF page when you use the Data Controls
panel to create a tree table. This sample tree table displays two levels of nodes: products and stock levels.
By default, the treeTable tag is created inside a form. The value attribute of the tree
table tag contains an EL expression that binds the tree component to the binding object that will populate it with data. The treeModel property refers to an
ADF class that defines how the tree hierarchy is displayed, based on the underlying data model. The var attribute provides access to the current node.
Example 5–4 Code Generated in the JSF Page for a Databound ADF Faces Tree Table
af:treeTable value={bindings.orderItemFindAll.treeModel} var=node selectionListener={bindings.orderItemFindAll.treeModel.makeCurrent}
rowSelection=single id=tt1 f:facet name=nodeStamp
af:column id=c1 af:outputText value={node} id=ot1
af:column f:facet
f:facet name=pathStamp af:outputText value={node} id=ot2
f:facet af:treeTable
In the facet tag, the nodeStamp facet is used to display the data for each node. Instead of having a component for each node, the tree repeatedly renders the
nodeStamp facet, similar to the way rows are rendered for the ADF Faces table
component. The pathStamp facet renders the column and the path links above the table that enable the user to return to the parent node after focusing on a detail node.
5.5.2.2 Binding Objects Defined in the Page Definition File
The binding objects created in the page definition file for a tree table are exactly the same as those created for a tree.
5.5.3 What Happens at Runtime: Events
