How to Use the decorativeBox Component

8-74 Web User Interface Developers Guide for Oracle Application Development Framework ■ list-style-type: decimal ■ list-style-type: lower-alpha ■ list-style-type: upper-alpha For example, the list-style-type: disc attribute value corresponds to a disc bullet, and the list-style-type: circle value corresponds to a circle bullet. For a complete list of the valid style values to use, refer to the CSS 2.1 Specification for generated lists at http:www.w3.orgTRCSS21generate.html Example 8–13 shows the code for setting the list style to a circle. Example 8–13 PanelList Component with ListStyle Attribute Set af:panelList listStyle=list-style-type: circle ... -- child components here -- af:panelList 3. Insert the desired number of child components to display as bulleted items into the panelList component. For example, you could insert a series of commandLink components or outputFormatted components.

8.11.2 What You May Need to Know About Creating a List Hierarchy

You can nest panelList components to create a list hierarchy. A list hierarchy, as shown in Figure 8–48 , has outer items and inner items, where the inner items belonging to an outer item are indented under the outer item. Each group of inner items is created by one nested panelList component. Tip: Panel lists also allow 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 panel list. Note: By default, ADF Faces displays all rendered child components of a panelList component in a single column. For details on how to split the list into two or more columns and for information about using the rows and maxColumns attributes, see Section 8.6, Arranging Content in Forms. The concept of using the rows and maxColumns attributes for columnar display in the panelList and panelFormLayout components are the same. 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.