FoldingPanel |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Developer’s Guide Home
Installation and Configuration Common Concepts Components Index Border Layout Panel Calendar Chart Command Button Command Link Confirmation Data Table Date Chooser Day Table Drop Down Field Dynamic Image Folding Panel For Each Graphic Text Hint Label Input Text Input Textarea Layered Pane Popup Layer Popup Menu Select Boolean Checkbox Select Many Checkbox Select One Radio Spinner Suggestion Field Tabbed Pane Tab Set Tree Table Two List Selection Window Focus Load Bundle Scroll Position Ajax Framework Validation Framework Tag Reference API Reference |
Key Features
Defining the ContentTo add the FoldingPanel component to a page, use the <o:foldingPanel> tag. You can add any child components inside the FoldingPanel component to display them in the container. To specify the caption for the FoldingPanel component, use either the caption attribute to set caption text or the "caption" facet if you'd like to create a more complex caption content specified with components. In the example below, the FoldingPanel component has a caption and the DropDownField component as its child component. <o:foldingPanel caption="A panel for color selection"> <h:outputText value="Select color:"/> <o:dropDownField> <o:dropDownItems value="#{ColorBean.items}"/> </o:dropDownField> </o:foldingPanel> The state of the FoldingPanel component is specified by the boolean expanded attribute. By default, its value is set to "true", which displays the FoldingPanel component in the expanded state, where all its child components are visible. In the collapsed state, only the caption of the FoldingPanel component is visible. By default, the FoldingPanel component expands downwards. However, you can specify different folding directions by using the foldingDirection attribute. It can take one of the following values: "up", "down", "left" or "right". Currently, in case of left-hand and right-hand folding directions, the component displays only the toggle button to expand the container. Customizing Caption ButtonsBy default FoldingPanel component displays the toggle button on the right side of its caption, though a flexible way of customizing caption buttons is provided. Here are some of the scenarios that can be addressed:
The basis for these customizations is the <o:captionArea> tag, which can be placed into the <o:foldingPanel> tag to customize the set of buttons displayed in the caption. This tag has an alignment attribute, which defines the caption side where the area should be placed. It can take two values: "right" (the default value), and "left". Adding the <o:captionArea> tag removes the default toggle button and allows you to customize the set of buttons by placing components inside of this tag. It is possible to place the following components into caption area tags:
Both <o:expansionToggleButton/> and <o:captionButton/> components support the following common attributes:
In addition they have the following attributes of their own. For <o:expansionToggleButton/>:
For <o:captionButton/> tag:
Here's an example of moving the customized expansion toggle button to the left caption side and placing an additional caption button besides: <o:foldingPanel caption="Caption"> <o:captionArea alignment="left"> <o:expansionToggleButton collapsedImageUrl="/custom_collapsed.png" collapsedPressedImageUrl="/custom_collapsed_pressed.png" collapsedRolloverImageUrl="/custom_collapsed_rollover.png" expandedImageUrl="/custom_expanded.png" expandedPressedImageUrl="/custom_expanded_pressed.png" expandedRolloverImageUrl="/custom_expanded_rollover.png" hint="Click here to fold/unfold the panel"> /> <o:captionButton action="#{BackingBean.customAction}" imageUrl="customAction.gif"/> </o:captionArea> ... </o:foldingPanel> You can also place more than one <o:captionArea> tags, which allows specifying custom areas on both caption sides. Using Dynamic LoadingIt is possible to control how the FoldingPanel component loads its child components from the server when it needs to be expanded. If the FoldingPanel component is loaded in the expanded state for the first time, it can be collapsed and expanded again on the client side without making any requests to the server. However, if it is initially loaded in the collapsed state, then a request to the server occurs when the user expands the FoldingPanel component. The loadingMode attribute specifies the way that FoldingPanel's content is loaded in this case. This attribute can take the following values:
Customizing StylesYou can customize a style for the entire FoldingPanel component, its caption and/or container by using the following attributes:
To set an explicit height to the FoldingPanel component, split it into two parts and set the one part to the captionStyle attribute and the other to the contentStyle attribute or declare these parts in the captionClass and contentClass classes. Setting the height to the FoldingPanel's style or styleClass attributes may have an unpleasant effect. The same rule is true for the width when the FoldingPanel component has the "left" or "right" folding direction. In this case, set the width only for the contentStyle or contentClass attributes. To set the text-align property for the caption of the FoldingPanel component, you should specify it in the captionStyle attribute. If you specify it in the style attribute, it will affect only the container. But if the container consists of another HTML <table> element, you should set text alignment in the contentStyle attribute instead. Text alignment will not work properly if it is declared in classes (styleClass, captionClass, contentClass). Keyboard SupportThe expansion state of the FoldingPanel component can be controlled with keyboard when it has a keyboard focus with the +/- keys (to expand and collapse the FoldingPanel respectively), and the spacebar key (to toggle the expansion state). The FoldingPanel can be made non-focusable and thus not having keyboard control by assigning false to its focusable attribute. Note that disabling focusability affects only the FoldingPanel itself, but not its children, which retain their usual keyboard support in any case. The FoldingPanel has the following attributes that allow customizing its look in the focused state:
Specifying User EventsThe FoldingPanel component supports the following standard client-side events: onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onfocus, onblur, onkeydown, onkeyup, onkeypress. In addition, the FoldingPanel provides one component-specific event called onstatechange. This event occurs when the FoldingPanel's state is changed, i.e. when it is collapsed or expanded by the user. Client-Side APIAll client-side API methods are listed in the following table:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
© 2009 TeamDev Ltd. | ![]() |