How to Use the showDetail Component

8-50 Web User Interface Developers Guide for Oracle Application Development Framework

6. Expand the Behavior section and set DisclosureListener to a

disclosureListener method in a backing bean that you want to execute when the user displays 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. 7. If you want to control how the showDetailHeader component handles geometry management, expand the Other section and set Type. Set it to flow if you do not want the component to stretch or to stretch its children. The height of the showDetailHeader component will be determined solely by its children. Set it to stretch if you want it to stretch and stretch its child will only stretch a single child component. Leave it set to the default if you want the parent component of the showDetailHeader component to determine geometry management. For more information about geometry management, see Section 8.2.1, Geometry Management and Component Stretching. 8. To add buttons or icons to the header, in the Component Palette, from the Common Components panel, drag and drop the toolbar component into the toolbar facet. Then add any number of commandToolbarButton or commandButton components into the newly inserted toolbar component. For more information about using the toolbar component, see Section 14.3, Using Toolbars. 9. To add menus to the header, insert menu components into the menuBar facet. For more information about creating menus, see Section 14.2, Using Menus in a Menu Bar. 10. To create a subsection header, insert another showDetailHeader component inside an existing showDetailHeader component. The size attribute specifies the number to use for the header level. The largest number is 0, and it corresponds to an H1 header level; the smallest is 5, and it corresponds to an H6 header. By default, the size attribute is -1. This means ADF Faces automatically calculates the header number and thus the header level style to use from the topmost, parent component. When you use nested components, you do not have to set the size attribute explicitly to get the proper header style to be displayed. In the default skin used by ADF Faces, the style used for sizes above 2 will be displayed the same as size 2. That is, there is no difference in styles for sizes 3, 4, or 5–they all show the same style as size 2. You can change this by creating a custom Note: Toolbar overflow is not supported in panelHeader components. Tip: You can place menus in the toolbar facet and toolbars and toolboxes in the menu facet. The main difference between these facets is location. The toolbar facet is before the menu facet. Note: While you can force the style of the text using the size attribute, where 0 is the largest text, the value of the size attribute will not affect the hierarchy. It only affects the style of the text. 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.