What You May Need to Know About Programmatically Expanding and Collapsing Nodes

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. 10-42 Web User Interface Developers Guide for Oracle Application Development Framework

10.7 Passing a Row as a Value

There may be a case where you need to pass an entire row from a collection as a value. To do this, you pass the variable used in the table to represent the row, or used in the tree to represent a node, and pass it as a value to a property in the pageFlow scope. Another page can then access that value from the scope. The setPropertyListener tag allows you to do this for more information about the setPropertyListener tag, including procedures for using it, see Section 4.7, Passing Values Between Pages . For example, suppose you have a master page with a single-selection table showing employees, and you want users to be able to select a row and then click a command button to navigate to a new page to edit the data for that row, as shown in Example 10–18 . The EL variable name emp is used to represent one row employee in the table. The action attribute value of the commandButton component is a static string outcome showEmpDetail, which allows the user to navigate to the Employee Detail page. The setPropertyListener tag takes the from value the variable emp, and stores it with the to value. Example 10–18 Using SetPropertyListener and PageFlowScope af:table value={myManagedBean.allEmployees} var=emp rowSelection=single af:column headerText=Name af:outputText value={emp.name} af:column af:column headerText=Department Number af:outputText value={emp.deptno} af:column af:column headertext=Select af:commandButton text=Show more details action=showEmpDetail af:setPropertyListener from={emp} to={pageFlowScope.empDetail} type=action af:commandButton af:column af:table When the user clicks the command button on an employee row, the listener executes, and the value of {emp} is retrieved, which corresponds to the current row employee in the table. The retrieved row object is stored as the empDetail property of pageFlowScope with the {pageFlowScope.empDetail} EL expression. Then the action event executes with the static outcome, and the user is navigated to a detail page. On the detail page, the outputText components get their value from pageFlowScope.empDetail objects, as shown in Example 10–19 . Example 10–19 Retrieving PageFlowScope Objects h:panelGrid columns=2 af:outputText value=Firstname: af:inputText value={pageFlowScope.empDetail.name} af:outputText value=Email: af:inputText value={pageFlowScope.empDetail.email} Tip: The attributes of the tree table are the same as those on the table and tree components. Refer to Section 10.2.4, How to Display a Table on a Page, and Section 10.5.1, How to Display Data in Trees for help in configuring the attributes. Using Tables and Trees 10-43 af:outputText value=Hiredate: af:inputText value={pageFlowScope.empDetail.hiredate} af:outputText value=Salary: af:inputText value={pageFlowScope.empDetail.salary} h:panelGrid

10.8 Displaying Table Menus, Toolbars, and Status Bars

You can use the panelCollection component to add menus, toolbars, and status bars to tables, trees, and tree tables. To use the panelCollection component, you add the table, tree, or tree table component as a direct child of the panelCollection component. The panelCollection component provides default menus and toolbar buttons. Figure 10–22 shows the panelCollection component with the tree table component in the File Explorer application. The toolbar contains a menu that provides actions that can be performed on the tree table such as expanding and collapsing nodes, a button that allows users to detach the tree table, and buttons that allow users to change the rows displayed in the tree table. You can configure the toolbar to not display certain toolbar items. For example, you can turn off the buttons that allow the user to detach the tree or table. For more information about menus, toolbars, and toolbar buttons, see Chapter 14, Using Menus, Toolbars, and Toolboxes. Figure 10–22 Panel Collection for Tree Table with Menus and Toolbar Among other facets, the panelCollection component contains a menu facet to hold menu components, a toolbar facet for toolbar components, a secondaryToolbar facet for another set of toolbar components, and a statusbar facet for status items. The default top-level menu and toolbar items vary depending on the component used as the child of the panelCollection component: ■ Table and tree: Default top-level menu is View. ■ Table and tree table with selectable columns: Default top-level menu items are View and Format. ■ Table and tree table: Default toolbar menu is Detach. ■ Table and tree table with selectable columns: Default top-level toolbar items are Freeze , Detach, and Wrap