How to Configure Same-Level Navigation in a Hierarchy Viewer What Happens When You Configure Same-Level Navigation in a Hierarchy Viewer

Using ADF Hierarchy Viewer Components 29-19 dvt:panelCard f:facet For more information about using the af:showPopupBehavior tag, see Section 13.4, Invoking Popup Elements.

29.5.4 How to Configure a Hierarchy View Node to Invoke a Menu

You can configure a node component dvt:node within a hierarchy viewer to invoke a menu by using the af:menu component. You can configure one or more af:commandMenuItem elements for the af:menu component. Nodes within a hierarchy viewer component do not support the nesting of af:menu components. Figure 29–12 shows a context menu associated with a node. Figure 29–12 Hierarchy Viewer Node Context Menu Example 29–4 shows sample code for creating the context menu Example 29–4 Context Menu Sample Code af:popup id=popupDialog contentDelivery=lazyUncached af:menu af:commandMenuItem text=Send an IM af:commandMenuItem text=Look at details af:menu af:popup For more information about using the af:menu component, see Chapter 13, Using Popup Dialogs, Menus, and Windows.

29.6 Using Panel Cards

You can use the panel card component in conjunction with the hierarchy viewer component to hold different sets of information for the nodes that the hierarchy viewer component references. The panel card component is an area inside the node element that can include one or more af:showDetailItem elements. Each of the af:showDetailItem elements references a set of content. For example, a hierarchy viewer component that renders an organization chart would include a node for employees in the organization. This node could include a panel card component that references contact information using an af:showDetailItem element and another af:showDetailItem element that references salary information. 29-20 Web User Interface Developers Guide for Oracle Application Development Framework A panel card component displays the content referenced by one af:showDetailItem element at runtime. The panel card component renders navigation buttons and other controls that allow the user to switch between the sets of data referenced by af:showDetailItem elements. The controls that allow users to switch between different sets of data can be configured with optional transitional effects. For example, you can configure a panel card to horizontally slide between one set of data referenced by an af:showDetailItem element to another set of data referenced by another af:showDetailItem element.

29.6.1 How to Create a Panel Card

You can insert a panel card component into the JSF page that renders the hierarchy viewer component by using the context menu that appears when you select the Facet zoom element in the Structure window for the JSF page. To create a panel card: 1. In the Structure window, right-click the zoom level within the node where you want to create a panel card. For example, select f:facet - zoom100. 2. Select Insert inside f:facet -zoom100 Panel Card. 3. Use the Property Inspector to configure the properties of the panel card component. For example, set a value for the Effect property in the Advanced properties for the panel card component. Valid values are: ■ Horizontal Slide default ■ Panel Flip ■ Node Flip ■ No Animation

4. In the Structure window, right-click dvt:panelCard and choose Insert inside

dvt:panelCard Show Detail Item. 5. Repeat Step 4 as necessary. 6. Use the Property Inspector to configure the properties of the af:showDetailItem elements that you insert.

29.6.2 What Happens at Runtime When a Panel Card Component Is Rendered

At runtime, a node appears and displays one panel card component. Users can click the navigation buttons at the bottom of the panel card to navigate to the next set of content referenced by one of the panel card’s af:showDetailItem child elements. Figure 29–13 shows a node with a panel card component where two different af:showDetailItem child elements reference different sets of information Contact and Address. The controls in the example include arrows to slide through the panel cards as well as buttons to directly select the panel card to display. Tooltips display for both control options.