How to Use the panelAccordion Component

8-60 Web User Interface Developers Guide for Oracle Application Development Framework ■ parent: the size of the panelTabbed component will be determined in the following order: – From the inlineStyle attribute. – 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 PanelTabbed component allows stretching of its child, then the panelTabbed component will stretch to fill the parent. If the parent does not stretch its children then the size of the panelTabbed component will be based on the size of its child component. 6. By default, one tabbed panel is created for you using a showDetailItem component as a child to the panelTabbed component. To add more panes, insert the showDetailItem component inside the panelTabbed component. You can add as many tabbed panes as you wish. To add contents for display in a panel, insert the desired child components into each showDetailItem component. For information about using showDetailItem, see Section 8.9.3, How to Use the showDetailItem Component to Display Content in panelAccordion or panelTabbed Components. 8.9.3 How to Use the showDetailItem Component to Display Content in panelAccordion or panelTabbed Components Insert showDetailItem components into a panelAccordion or panelTabbed component only. Each showDetailItem component corresponds to one accordion panel or tabbed panel. Typically, you insert two or more showDetailItem components into the parent component. Insert the child components for display into the showDetailItem components. The disclosed attribute on a showDetailItem component specifies whether to show disclose or hide undisclose the corresponding accordion panel or tab contents. By default, the disclosed attribute is false, that is, the contents are hidden undisclosed. When the attribute is set to true, the contents are shown disclosed. You do not have to write any code to enable the toggling of contents from disclosed to undisclosed, and vice versa. ADF Faces handles the toggling automatically. The following procedure assumes you have already added a panelAccordion or panelTabbed component to the JSF page, as described in Section 8.9.1, How to Use Note: If you use this setting, you cannot set the height of the panelTabbed component for example through the inlineStyle or styleClass attributes. Doing so would cause conflict between the panelTabbed height and the child component height. Tip: The panelTabbed component 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 panelTabbed component. Organizing Content on Web Pages 8-61 the panelAccordion Component, and Section 8.9.2, How to Use the panelTabbed Component, respectively. To add accordion panel or tabbed panel contents using a showDetailItem component: 1. Insert one or more showDetailItem components inside the parent component, such as panelAccordion or panelTabbed, by dragging and dropping a Show Detail Item component from Common Components panel of the Component Palette.

2. In the Property Inspector, expand the Appearance section.

3. Set Text to the label you want to display for this panel or tab.

4. To add an icon before the label, set Icon to the URI of the image file to use.

5. If the showDetailItem component is being used inside a panelAccordion component configured to stretch, you can configure the showDetailItem to stretch and in turn stretch its contents, however, the showDetailItem component must contain only one child component. You need to set Flex and the StretchChildren for each showDetailItem component. Use the following attributes on each showDetailItem component to control the flexibility of panel contents: ■ Flex : Specifies a nonnegative integer that determines how much space is distributed among the showDetailItem components of one panelAccordion component. By default, the value of the flex attribute is 0 zero, that is, the panel contents of each showDetailItem component are inflexible. To enable flexible contents in a panel, specify a flex number larger than 0, for example, 1 or 2. A larger flex value means that the contents will be made larger than components with lower flex values. For two flexible components, their height sizes are exactly proportionate to the flex values assigned. If component A has flex set to 2 and component B has flex set to 1, then the height of component A is two times the height of component B. ■ InflexibleHeight : Specifies the number of pixels a panel will use. The default is 100 pixels. This means if a panel has a flex value of 0 zero, ADF Faces will use 100 pixels for that panel, and then distribute the remaining space among the nonzero panes. If the contents of a panel cannot fit within the panelAccordion container given the specified inflexibleHeight value, ADF Faces automatically moves nearby contents into overflow menus as shown in Figure 8–36 . Also, if a panel has a nonzero flex value, this will be the minimum height that the panel will shrink to before causing other panes to be moved into the overflow menus. Note: Because alternative text cannot be provided for this icon, in order to create an accessible product, use this icon only when it is purely decorative. You must provide the meaning of this icon in some accessible manner. Note: If you have set the panelAccordion to not stretch that is, you’ve set dimensionsFrom to children, then you cannot set values for the flex and stretchChildren attributes, as it will result in a circular reference back to the panelAccordion for size. 8-62 Web User Interface Developers Guide for Oracle Application Development Framework ■ StretchChildren : When set to first, stretches a single child component. However, the child component must allow stretching. For more information, see Section 8.9.4, What You May Need to Know About Geometry Management and the showDetailItem Component. For example, the File Explorer application uses showDetailItem components to display contents in the navigator panel. Because the Search Navigator requires more space when both navigators are expanded, its flex attribute is set to 2 and the showDetailItem component for the Folders Navigator uses the default flex value of 1. This setting causes the Search Navigator to be larger than the Folders Navigator when it is expanded. The user can change the panel heights at runtime, thereby changing the value of the flex and inflexibleHeight attributes. Those values can be persisted so that they remain for the duration of the user’s session. For information, see Chapter 31, Allowing User Customization on JSF Pages. Note the following additional information about flexible accordion panel contents: ■ There must be two or more panes showDetailItem components with flex values larger than 0 before ADF Faces can enable flexible contents. This is because ADF Faces uses the flex ratio between two components to determine how much space to allocate among the panel contents. At runtime, two or more panes must be expanded before the effect of flexible contents can be seen. ■ If the showDetailItem component has only one child component and the flex value is nonzero, and the stretchChildren attribute is set to first, ADF Faces will stretch that child component regardless of the discloseMany attribute value on the panelAccordion component. ■ When all showDetailItem components have flex values of 0 zero and their panel contents are disclosed, even though the disclosed contents are set to be inflexible, ADF Faces will stretch the contents of the last disclosed showDetailItem component as if the component had a flex value of 1, but only when that showDetailItem component has one child only, and the stretchChildren attribute is set to first. If the last disclosed panel has more than one child component or the stretchChildren attribute is set to none, the contents will not be stretched. Even with the flex attribute set, there are some limitations regarding geometry management. For more information, see Section 8.9.4, What You May Need to Know About Geometry Management and the showDetailItem Component.

6. Expand the Behavior section. Set DisclosureListener to the

disclosureListener method in a backing bean you want to execute when this panel or tab is selected by the user. For information about server disclosure events and event listeners, see Section 8.8.4, What You May Need to Know About Disclosure Events. Note: Instead of directly setting the value for the flex attribute, the File Explorer application uses an EL expression that resolves to a method used to determine the value. Using an EL expression allows you to programmatically change the value if you decide at a later point to use metadata to provide model information.