What You May Need to Know About showDetailItem Disclosure Events

8-68 Web User Interface Developers Guide for Oracle Application Development Framework The decorativeBox component provides styling capabilities using themes. It has two facets, top and center. The top facet provides a non-colored area, while the center facet is the actual box. The height of the top facet depends on whether or not a component has been put into the top facet. When the facet is set, the topHeight attribute is used to specify the size the content should occupy. The color of the box for the center facet depends on the theme and skin used. Figure 8–44 shows the different themes available by default. Figure 8–44 Themes Used in a decorativeBox Component By default, the decorativeBox component stretches to fill its parent component. You can also configure the decorative Box component to inherit its dimensions from its child components. For example, Figure 8–45 shows the medium-theme decorativeBox configured to stretch to fill its parent, while the dark-theme decorativeBox is configured to only be as big as its child outputText component. Figure 8–45 decorativeBox Can Stretch or Not You can further control the style of the decorativeBox component using skins. Skinning keys can be defined for the following areas of the component: ■ top-start ■ top ■ top-end Organizing Content on Web Pages 8-69 ■ start ■ end ■ bottom-start ■ bottom ■ bottom-end For more information about skins, see Chapter 20, Customizing the Appearance Using Styles and Skins.

8.10.1 How to Use the panelHeader Component

You can use one panelHeader component to contain specific information, or you can use a series of nested panelHeader components to create a hierarchical organization of content. If you want to be able to hide and display the content, use the showDetailHeader component instead. For more information, see Section 8.8.2, How to Use the showDetailHeader Component. To create and use a panelHeader component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Header onto the page.

2. In the Property Inspector, expand the Appearance section.

3. Set Text to the label you want to display for this panel.

4. To add an icon before the label, set Icon to the URI of the image file to use.

5. If you are using the header to provide specific messaging information, set

MessageType to one of the following values: ■ confirmation : The confirmation icon represented by a note page overlaid with a green checkmark replaces any specified icon image. ■ error : The error icon represented by a red circle with an x inside replaces any specified icon image. The header label also changes to red. ■ info : The info icon represented by a blue circle with an I inside replaces any specified icon image. ■ none : Default. No icon is displayed. ■ warning : The warning icon represented by a yellow triangle with an exclamation mark inside replaces any specified icon image. Figure 8–46 shows the icons used for the different message types. 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.