Available Hierarchy Viewer Layout Options

29-10 Web User Interface Developers Guide for Oracle Application Development Framework ■ Inner nodes are nodes that have child nodes. ■ Leaf nodes are nodes that do not have child nodes. Figure 29–7 illustrates how a node can be a different type depending on the layout of the hierarchy viewer component. Figure 29–7 Node Types and Positions

29.3.1 How to Specify Node Content

Although a node contains controls by default that allow you to navigate to a node and show or hide nodes, nodes do not by default include content unless you used a quick start layout when creating the hierarchy viewer component. You must define what content a node renders at runtime. You can specify node content when you associate data bindings with the hierarchy viewer component as described in the Creating Databound Hierarchy Viewers section in the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. By default, a hierarchy viewer component that you create contains one node with one facet element that has a zoom level of 100: f:facet name=zoom100 You can insert three more instances of the facet element into the hierarchy viewer component with the following zoom levels: ■ 25: zoom25 ■ 50: zoom50 ■ 75: zoom75 Use these zoom level definitions to improve readability of node content when the hierarchy viewer is zoomed out to display more nodes and less display room is available in each node. You can define a subset of the available data collection within one or more of the facet elements. For example, if you have a data collection with node attributes that references data about a company department such as its name, location, and number, you can specify a facet element with a zoom level of 50 that references the node attribute for the department’s name and number. At runtime, when a user moves the mouse over a node at any zoom level, a hover window displaying node content at zoom level 100 is automatically displayed, allowing the user to see the full information regardless of zoom level. The controls on the hover window are active when the node has been selected in the hierarchy viewer. Each of the facet elements that you insert can be used to reference other components. You can use one or more of the following components when you define content for a node in a hierarchy viewer component. The node component facet’s support the following components: Using ADF Hierarchy Viewer Components 29-11 ■ af:commandButton ■ af:commandImageLink ■ af:commandLink ■ af:commandMenuItem ■ af:goButton ■ af:goLink ■ af:image For information about how to use the af:image component, see Section 29.7.2, How to Include Images in a Hierarchy Viewer. ■ af:menu ■ af:outputFormatted ■ af:outputText ■ af:panelFormLayout ■ af:panelGroupLayout For information about how to use the panelGroupLayout component, see Section 8.12.1, How to Use the panelGroupLayout Component. ■ af:panelLabelAndMessage ■ af:separator ■ af:showDetailItem ■ af:showPopupBehavior For information about how to use the af:showPopupBehavior component, see Section 29.5.3, How to Configure a Hierarchy Viewer to Invoke a Popup Window. ■ af:spacer ■ dvt:panelCard For more information about how to use the dvt:panelCard component, see Section 29.6, Using Panel Cards. The hierarchy viewer component renders in a Flash Player only. For this reason, certain properties of ADF Faces components that you specify as node content may not be supported and the component will not render as you expect. To add a node to a hierarchy viewer component: 1. In the Structure window, right-click the dvt:hierarchyViewer node and choose Insert inside dvt:hierarchyViewer Node. The following entry appears in the JSF page: dvt:node f:facet name=zoom100 dvt:node Note: Unsupported components are flagged at design time. 29-12 Web User Interface Developers Guide for Oracle Application Development Framework

2. In the Structure window, right-click the dvt:node and choose Go to Properties.

3. Configure the appropriate properties in the Property Inspector. For example, set a value for the type property to associate a node component with an accessor: dvt:node type=model.rootEmp model.HvtestView For more information, see Section 29.3.3, How to Specify a Node Definition for an Accessor.

29.3.2 How to Configure the Controls on a Node

The node component dvt:node exposes a number of properties that allow you to determine if controls such as Restore, Isolate, Show or Hide appear at runtime. It also exposes properties that determine the size and shape of the node at runtime. To configure the controls on a node: 1. In the Structure window, right-click the dvt:node component and choose Go to Properties .

2. Configure properties in the Appearance section of the Property Inspector for the

dvt:node component, as described in Table 29–2 . 3. For information about configuring the properties in the Style section of the Property Inspector for the node component, see Section 20.4, Changing the Style Properties of a Component. The hover window is automatically displayed when the user moves the mouse over the node, reflecting the shape attribute set for the node. A node with the shape attribute roundedRect, for example, will have a hover window with the same attribute, as shown in Figure 29–8 . Table 29–2 Node Configuration Properties To do this: Set the following value for this property: Configure the Hide or Show controls to appear or not on a node. Set showExpandChildren to False to hide the controls. By default the property is set to True. Configure the Restore or Isolate controls to appear or not on the node. Set the showNavigateUp and showIsolate properties to False to hide these controls on the node. By default the property is set to true. If the showNavigateUp property is set to true, you must also set a value for the hierarchy viewer component’s navigateUpListener property, as described in Section 29.4.1, How to Configure Upward Navigation in a Hierarchy Viewer. Configure the height and width of a node. Set values for the width and height properties. Select the shape of the node. Select a value from the Shape dropdown list. Available values are: ■ ellipse ■ rect ■ roundedRect default