What Happens at Runtime: Tree Component Events

10-40 Web User Interface Developers Guide for Oracle Application Development Framework

10.5.5 What You May Need to Know About Programmatically Selecting Nodes

The tree and tree table components allow nodes to be selected, either a single node only, or multiple nodes. If the component allows multiple selections, users can select multiple nodes using Control+click and Shift+click operations. When a user selects or deselects a node, the tree component fires a selectionEvent event. This event has two RowKeySet objects: the RemovedSet object for all the deselected nodes and the AddedSet object for all the selected nodes. Tree and tree table components keep track of which nodes are selected using an instance of the class oracle.adf.view.rich.model.RowKeySet. This instance is stored as the selectedRowKeys attribute on the component. You can use this instance to control the selection state of a node in the hierarchy programatically. Any node contained by the RowKeySet instance is deemed selected, and all other nodes are not selected. The addAll method adds all nodes to the set, and the and removeAll method removes all the nodes from the set. Tree and tree table node selection works in the same way as table row selection. You can refer to sample code for table row selection in Section 10.2.8, What You May Need to Know About Performing an Action on Selected Rows in Tables.

10.6 Displaying Data in Tree Tables

The ADF Faces tree table component displays hierarchical data in the form of a table. The display is more elaborate than the display of a tree component, because the tree table component can display columns of data for each tree node in the hierarchy. The component includes mechanisms for focusing on subtrees within the main tree, as well as expanding and collapsing nodes in the hierarchy. Figure 10–21 shows the tree table used in the File Explorer application. Like the tree component, the tree table can display the hierarchical relationship between the files in the collection. And like the table component, it can also display attribute values for each file. Figure 10–21 Tree Table in the File Explorer Application The immediate children of a tree table component must be column components, in the same way as for table components. Unlike the table, the tree table component has a nodeStamp facet which holds the column that contains the primary identifier of an node in the hierarchy. The treeTable component supports the same stamping behavior as the Tree component for details, see Section 10.5, Displaying Data in Trees . For example, in the File Explorer application as shown in Figure 10–21 , the primary identifier is the file name. This column is what is contained in the nodeStamp facet. The other columns, such as Type and Size, display attribute values on the primary identifier, and these columns are the direct children of the tree table component. This tree table uses node as the value of the variable that will be used to stamp out the data for each node in the nodeStamp facet column and each component in the child columns. Example 10–17 shows abbreviated code for the tree table in the File Explorer application. Using Tables and Trees 10-41 Example 10–17 Stamping Rows in a TreeTable af:treeTable id=folderTreeTable var=file value={explorer.contentViewManager.treeTableContentView. contentModel} binding={explorer.contentViewManager.treeTableContentView. contentTreeTable} emptyText={explorerBundle[global.no_row]} columnStretching=last rowSelection=single selectionListener={explorer.contentViewManager. treeTableContentView.treeTableSelectFileItem} summary=treeTable data f:facet name=nodeStamp af:column headerText={explorerBundle[contents.name]} width=200 sortable=true sortProperty=name af:panelGroupLayout af:image source={file.icon} shortDesc={file.name} inlineStyle=margin-right:3px; vertical-align:middle; af:outputText id=nameStamp value={file.name} af:panelGroupLayout af:column f:facet f:facet name=pathStamp af:panelGroupLayout af:image source={file.icon} shortDesc={file.name} inlineStyle=margin-right:3px; vertical-align:middle; af:outputText value={file.name} af:panelGroupLayout f:facet af:column headerText={explorerBundle[contents.type]} af:outputText id=typeStamp value={file.type} af:column af:column headerText={explorerBundle[contents.size]} af:outputText id=sizeStamp value={file.property.size} af:column af:column headerText={explorerBundle[contents.lastmodified]} width=140 af:outputText id=modifiedStamp value={file.property.lastModified} af:column af:treeTable The tree table component supports many of the same attributes as both tables and trees. For more information about these attributes see Section 10.2, Displaying Data in Tables and Section 10.5, Displaying Data in Trees.

10.6.1 How to Display Data in a Tree Table

You use the Insert Tree Table wizard to create a tree table. Once the wizard is complete, you can use the Property Inspector to configure additional attributes on the tree table. To add a tree table to a page: 1. In the Component Palette, from the Common Components panel, drag and drop a Tree Table onto the page to open the Insert Tree Table wizard. Configure the table by completing the wizard. If you need help, press F1 or click Help. 2. Use the Property Inspector to configure any other attributes.