What You May Need to Know About Creating a List Hierarchy

Organizing Content on Web Pages 8-77 Figure 8–50 Top-Aligned Horizontal Layout with panelGroupLayout Unlike the panelSplitter or panelStretchLayout components, the panelGroupLayout component does not stretch its child components. Suppose you are already using a panelSplitter or panelStretchLayout component as the root component for the page, and you have a large number of child components to flow, but are not to be stretched. To provide scrollbars when flowing the child components, wrap the child components in the panelGroupLayout component with its layout attribute set to scroll, and then place the panelGroupLayout component inside a facet of the panelSplitter or panelStretchLayout component. When the layout attribute is set to scroll on a panelGroupLayout component, ADF Faces automatically provides a scrollbar at runtime when the contents contained by the panelGroupLayout component are larger than the panelGroupLayout component itself. You do not have to write any code to enable the scrollbars, or set any inline styles to control the overflow. For example, when you use layout components such as the panelSplitter component that let users display and hide child components contents, you do not have to write code to show the scrollbars when the contents are displayed, and to hide the scrollbars when the contents are hidden. Simply wrap the contents the be displayed inside a panelGroupLayout component, and set the layout attribute to scroll. In the File Explorer application, the Search Navigator contains a panelSplitter component used to hide and show the search criteria. When the search criteria are hidden, and the search results content does not fit into the area, a scrollbar is rendered, as shown in Figure 8–51 . 8-78 Web User Interface Developers Guide for Oracle Application Development Framework Figure 8–51 Scrollbars Rendered Using panelGroupLayout

8.12.1 How to Use the panelGroupLayout Component

Any number of panelGroupLayout components can be nested to achieve the desired layout. To create and use the panelGroupLayout component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel Group Layout to the JSF page.

2. Insert the desired child components into the panelGroupLayout component.

3. To add spacing or separator lines between adjacent child components, insert the spacer or separator component into the separator facet.

4. In the Property Inspector, expand the Appearance section. To arrange the child

components in the desired layout, set Layout to one of the following values: ■ default : Provides consecutive layout with wrapping. At runtime, when the contents exceed the browser space available that is, when the child components are larger than the width of the parent container panelGrouplayout, the browser flows the contents onto the next line so that all child components are displayed. Tip: The panelGroupLayout component also allows you to use the iterator, switcher, and group components as direct child components, providing these components wrap child components that would typically be direct child components of the panelGroupLayout component.