How to Configure 3D Tilt Panning

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. Using ADF Hierarchy Viewer Components 29-21 Figure 29–13 Runtime View of a Node with a Panel Card

29.7 Customizing the Appearance of a Hierarchy Viewer

You can customize the hierarchy viewer component size and appearance including adding images, configuring the display of the control panel, and customizing links and labels. You can change the appearance of your hierarchy viewer component by changing skins and component style attributes, as described in Chapter 20, Customizing the Appearance Using Styles and Skins.

29.7.1 How to Adjust the Size of a Hierarchy Viewer

You can adjust the size of the hierarchy viewer component by setting values for a number of the hierarchy viewer component’s attributes using the Property Inspector. To adjust the size of a hierarchy viewer: 1. In the Structure window for the JSF page that contains the hierarchy viewer component, select the dvt:hierarchyViewer node. 2. In the Property Inspector, write the following values for the InlineStyle property: ■ width Write a value in percent or pixels px. The default value for width is 100. ■ height Write a value in percent or pixels px. The default value for height is 600px. The final value that you enter for the InlineStyle property must use this syntax: width:100;height:600px; 3. Save changes to the JSF page.

29.7.2 How to Include Images in a Hierarchy Viewer

You can configure a hierarchy viewer component to display images in the nodes of a hierarchy viewer component at runtime. This can be useful where, for example, you want pictures to appear in an organization chart. Insert an af:image component with