How to Use the panelHeader Component

8-72 Web User Interface Developers Guide for Oracle Application Development Framework – If no value exists for inlineStyle, then the size is determined by the parent container. – If the parent container is not configured or not able to stretch its children, the size will be determined by the skin. ■ auto: If the parent component to the decorativeBox component allows stretching of its child, then the decorativeBox component will stretch to fill the parent. If the parent does not stretch its children then the size of the decorativeBox component will be based on the size of its child component. For more information, see Section 8.10.3, What You May Need to Know About Geometry Management and the decorativeBox Component.

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

The decorativeBox component can stretch child components in its center facet and it can also be stretched. The following components can be stretched inside the center facet of the decorativeBox component: ■ inputText when configured to stretch ■ decorativeBox when configured to stretch ■ panelAccordion when configured to stretch ■ panelBox ■ panelCollection ■ panelDashboard ■ panelGroupLayout only with the layout attribute set to scroll or vertical ■ panelSplitter when configured to stretch ■ panelStretchLayout when configured to stretch ■ panelTabbed when configured to stretch ■ region ■ table when configured to stretch ■ tree when configured to stretch ■ treeTable when configured to stretch The following components cannot be stretched when placed inside a facet of the decorativeBox component: ■ panelBorderLayout ■ panelFormLayout ■ panelGroupLayout only with the layout attribute set to default or horizontal ■ panelHeader ■ panelLabelAndMessage ■ panelList ■ showDetail Organizing Content on Web Pages 8-73 ■ showDetailHeader ■ tableLayout MyFaces Trinidad component You cannot place components that cannot stretch into facets of a component that stretches its child components. Therefore, if you need to place one of the components that cannot be stretched into a facet of the decorativeBox component, wrap that component in a transition component that does not stretch its child components. For example, if you want to place content in a panelBox component and have it flow within a facet of the decorativeBox component, you could place a panelGroupLayout component with its layout attribute set to scroll in the facet of the decorativeBox component, and then place the panelBox component in that panelGroupLayout component. For more information, see Section 8.2.2, Nesting Components Inside Components That Allow Stretching.

8.11 Displaying a Bulleted List in One or More Columns

The panelList component is a layout element for displaying a vertical list of child components with a bullet next to each child, as shown in Figure 8–47 . Only child components whose rendered attribute is set to true and whose visible attribute is set to true are considered for display by in the list. Figure 8–47 PanelList Component with Default Disc Bullet By default, the disc bullet is used to style the child components. There are other styles you can use, such as square bullets and white circles. You can also split the list into columns when you have a very long list of items to display.

8.11.1 How to Use the panelList Component

Use one panelList component to create each list of items. To create and use the panelList component: 1. In the Component Palette, from the Layout panel, drag and drop a Panel List to the JSF page.

2. In the Property Inspector, expand the Common section, and set the listStyle

attribute to a valid CSS 2.1 list style value, such as one of the following: ■ list-style-type: disc ■ list-style-type: square ■ list-style-type: circle Note: To display dynamic data for example, a list of data determined at runtime by JSF bindings, use the selection components, as documented in Section 9.6, Using Selection Components. If you need to create lists that change the model layer, see Chapter 11, Using List-of-Values Components. 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.