How to Use the showDetailHeader Component

Organizing Content on Web Pages 8-51 skin. For more information, see Chapter 20, Customizing the Appearance Using Styles and Skins. 11. To add content to a section or subsection, insert the desired child components inside the showDetailHeader component.

8.8.3 How to Use the panelBox Component

You can insert any number of panelBox components on a page. To create and use a panelBox component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Box to the JSF page.

2. In the Property Inspector, expand the Appearance section, and for Ramp, select

the ramp you wish to use. The core ramp uses variations of blue, while the highlight ramp uses variations of yellow. You can change the colors used by creating a custom skin. For details, see Chapter 20, Customizing the Appearance Using Styles and Skins.

3. Set Background to one of the following values: light, medium, dark, or

default. The default background color is transparent.

4. Set Text to the text string you want to display as the title in the header portion of

the container.

5. Set Icon to the URI of the icon image you want to display before the header text.

6. Set TitleHalign to one of the following values: center, start, end, left, or

right. The value determines the horizontal alignment of the title including any icon image in the header portion of the container.

7. Expand the Behavior section and set DisclosureListener to a

disclosureListener method in a backing bean that you want to execute when the user shows or hides the component’s contents. For information about disclosure events and listeners, see Section 8.8.4, What You May Need to Know About Disclosure Events. 8. To add toolbar buttons, in the Component Palette, from the Common Components Panel, drag and drop a Toolbar into the toolbar facet. Then insert the desired number of commandToolbarButton components into the toolbar component. For information about using toolbar and commandToolbarButton components, see Section 14.3, Using Toolbars. Note: If both the text and icon attributes are not set, ADF Faces does not display the header portion of the panelBox component. Note: Because alternative text cannot be provided for this icon, in order to create an accessible product, use this icon only when it is purely decorative. You must provide the meaning of this icon in some accessible manner. 8-52 Web User Interface Developers Guide for Oracle Application Development Framework 9. To add contents to the container for display, insert the desired components as child components to the panelBox component. Typically, you would insert one child component into the panelBox component, and then insert the contents for display into the child component. The child component controls how the contents will be displayed, not the parent panelBox component. 10. To change the width of the panelBox component, set the inlineStyle attribute to the exact pixel size you want. Alternatively, you can set the inlineStyle attribute to a percentage of the outer element that contains the panelBox component. Example 8–11 shows the code you might use for changing the width. Example 8–11 panelBox Component with inlineStyle Attribute Set af:panelBox inlineStyle=width:50; ... -- child contents here -- af:panelBox

8.8.4 What You May Need to Know About Disclosure Events

Any ADF Faces component that has built-in event functionality, as the showDetail, showDetailHeader, and panelBox components do, must be enclosed in the form component. The disclosed attribute on these components specifies whether to show disclose or hide undisclose the contents under its header. By default, the disclosed attribute is true, that is, the contents are shown. When the attribute is set to false, the contents are hidden. You do not have to write any code to enable the toggling of contents from disclosed to undisclosed, and vice versa. ADF Faces handles the toggling automatically. The value of the disclosed attribute can be persisted at runtime, that is, when the user shows or hides contents, ADF Faces can change and then persist the attribute value so that it remains in that state for the length of the user’s session. For more information, see Chapter 31, Allowing User Customization on JSF Pages. When the user clicks the toggle icon to show or hide contents, the components deliver a org.apache.myfaces.trinidad.event.DisclosureEvent event to the server. The DisclosureEvent event contains information about the source component and its state: whether it is disclosed expanded or undisclosed collapsed. The isExpanded method returns a boolean value that determines whether to expand disclose or collapse undisclose the node. If you only want the component to disclose and undisclose its contents, then you do not need to write any code. However, if you want to perform special handling of a DisclosureEvent event, you can bind the component’s disclosureListener attribute to a disclosureListener method in a backing bean. The disclosureListener method will then be invoked in response to a DisclosureEvent event, that is, whenever the user clicks the disclosed or undisclosed icon. The disclosureListener method must be a public method with a single disclosureEvent event object and a void return type, shown in Example 8–12 . Tip: If any facet is not visible in the visual editor: 1. Right-click the panelBox component in the Structure window. 2. From the context menu, choose Facets - Panel Box Toolbar. Facets in use on the page are indicated by a checkmark in front of the facet name. Organizing Content on Web Pages 8-53 Example 8–12 disclosureListener Method public void some_disclosureListenerDisclosureEvent disclosureEvent { Add event handling code here } By default, DisclosureEvent events are usually delivered in the Invoke Application phase, unless the component’s immediate attribute is set to true. When the immediate attribute is set to true, the event is delivered in the earliest possible phase, usually the Apply Request Values phase. On the client-side component, the AdfDisclosureEvent event is fired. The event root for the client AdfDisclosureEvent event is set to the event source component: only the event for the panel whose disclosed attribute is true gets sent to the server. For more information about client-side events and event roots, see Chapter 5, Handling Events.

8.9 Displaying or Hiding Contents in Accordion Panels and Tabbed Panels

When you need to display multiple areas of content that can be hidden and displayed, you can use the panelAccordion or the panelTabbed components. Both of these components use the showDetailItem component to display the actual contents. The panelAccordion component creates a series of expandable panes. You can allow users to expand more than one panel at any time, or to expand only one panel at a time. When more than one panel is expanded, the user can adjust the height of the panel by dragging the header of the showDetailItem component. When a panel is collapsed, only the panel header is displayed; when a panel is expanded, the panel contents are displayed beneath the panel header users can expand the panes by clicking either the panelAccordion component’s header or the expand icon. The File Explorer application uses the panelAccordion component to display the Folders and Search panes, as shown in Figure 8–34 . Figure 8–34 panelAccordion Panes At runtime, when available browser space is less than the space needed to display expanded panel contents, ADF Faces automatically displays overflow icons that 8-54 Web User Interface Developers Guide for Oracle Application Development Framework enable users to select and navigate to those panes that are out of view. Figure 8–35 shows the overflow icon circled in the lower right-hand corner displayed in the Folders panel of the File Explorer application when there is not enough room to display the Search panel. Figure 8–35 Overflow Icon In panelAccordion When the user clicks the overflow icon, ADF Faces displays the overflow popup menu as shown in Figure 8–36 for the user to select and navigate to. Figure 8–36 Overflow Popup Menu in panelAccordion You can also configure the panelAccordion so that the panes can be rearranged by dragging and dropping, as shown in Figure 8–37 .