What You May Need to Know About Geometry Management and the showDetailItem Component

Organizing Content on Web Pages 8-67 Figure 8–40 shows the different facets in the panelHeader component. Figure 8–40 panelHeader and Its Facets When there is not enough space to display everything in all the facets of the title line, the panelHeader text is truncated and displays an ellipsis. When the user hovers over the truncated text, the full text is displayed in a tooltip, as shown in Figure 8–41 . Figure 8–41 Text for the panelHeader Is Truncated When there is more than enough room to display the contents, the extra space is placed between the context facet and the toolbar, as shown in Figure 8–42 . Figure 8–42 Extra Space Is Added Before the Toolbar You can configure panelHeader components so that they represent a hierarchy of sections. For example, as shown in Figure 8–43 , you can have a main header with a subheader and then a heading level 1 also with a subheader. Figure 8–43 Creating Subsections with the panelHeader Component Create subsections by nesting panelHeader components within each other. When you nest panelHeader components, the heading text is automatically sized according to the hierarchy, with the outermost panelHeader component having the largest text. For information about using the panelHeader component, see Section 8.10.1, How to Use the panelHeader Component. 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. 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