How to Use the panelList Component

8-76 Web User Interface Developers Guide for Oracle Application Development Framework You can use any number of group components to group related components together. For example, you might want to group some of the input fields in a form layout created by the panelFormLayout component. Example 8–15 shows sample code that groups two sets of child components inside a panelFormLayout component. Example 8–15 Grouping Child Components in panelFormLayout af:panelFormLayout af:inputDate label=Pick a date -- first group -- af:group af:selectManyCheckbox label=Select all that apply af:selectItem label=Coffee value=1 af:selectItem label=Cream value=1 af:selectItem label=Low-fat Milk value=1 af:selectItem label=Sugar value=1 af:selectItem label=Sweetener af:selectManyCheckbox af:inputText label=Special instructions rows=3 af:group -- Second group -- af:group af:inputFile label=File to upload af:inputText label=Enter passcode af:group af:inputText label=Comments rows=3 af:spacer width=10 height=15 f:facet name=footer af:panelFormLayout The panelGroupLayout component lets you arrange a series of child components vertically or horizontally without wrapping, or consecutively with wrapping, as shown in Figure 8–49 . The layout attribute value determines the arrangement of the child components. Figure 8–49 panelGroupLayout Arrangements In all arrangements, each pair of adjacent child components can be separated by a line or white space using the separator facet of the panelGroupLayout component. For more information, see Section 8.13, Separating Content Using Blank Space or Lines. When using the horizontal layout, the child components can also be vertically or horizontally aligned. For example, you could make a short component beside a tall component align at the top, as shown in Figure 8–50 . 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 .