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

Organizing Content on Web Pages 8-75 Figure 8–48 Hierarchical List Created Using Nested panelList Components To achieve the list hierarchy as shown in Figure 8–48 , use a group component to wrap the components that make up each group of outer items and their respective inner items. Example 8–14 shows the code for how to create a list hierarchy that has one outer item with four inner items, and another outer item with two inner items. Example 8–14 Nested PanelList Components af:panelList -- First outer item and its four inner items -- af:group af:commandLink text=item 1 af:panelList af:commandLink text=item 1.1 af:commandLink text=item 1.2 af:commandLink text=item 1.3 af:commandLink text=item 1.4 af:panelList af:group -- Second outer item and its two inner items -- af:group af:commandLink text=item 2 af:panelList af:commandLink text=item 2.1 af:commandLink text=item 2.2 af:panelList af:group af:panelList By default, the outer list items for example, item 1 and item 2 are displayed with the disc bullet, while the inner list items for example, item 1.1 and item 2.1 have the white circle bullet. For more information about the panelGroupLayout component, see Section 8.12, Grouping Related Items.

8.12 Grouping Related Items

To keep like items together within a parent component, use either the group or panelGroupLayout component. The group component aggregates or groups together child components that are related semantically. Unlike the panelGroupLayout component, the group component does not provide any layout for its child components. Used on its own, the group component does not render anything; only the child components inside of a group component render at runtime. 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 .