A group of items inside a tool bar.
Fully skinnable with its child items
Grouping bar content
Easily place content on either side of tool bar using a predefined group layout
Predefined separators for menu items and groups
Any content inside
Table 6.457. rich : toolBarGroup attributes
Attribute Name | Description |
---|---|
binding | The attribute takes a value-binding expression for a component property of a backing bean |
id | Every component may have a unique id that is automatically created if omitted |
itemSeparator | "A separator for the items in a group. Possible values are "none", "line", "square", "disc" and "grid"." |
location | "A location of a group on a tool bar. Possible values are "left" and "right"." |
onclick | HTML: a script expression; a pointer button is clicked |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer button is released |
rendered | If "false", this component is not rendered |
separatorClass | "A CSS class to be applied to tool bar group separators." |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
Table 6.458. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.ToolBarGroup |
component-class | org.richfaces.component.html.HtmlToolBarGroup |
component-family | org.richfaces.ToolBarGroup |
renderer-type | org.richfaces.ToolBarGroupRenderer |
tag-class | org.richfaces.taglib.ToolBarGroupTag |
To create the simplest variant on a page use the following syntax:
Example:
...
<rich:toolBar>
...
<rich:toolBarGroup>
<!--...Set of action or other JSF components-->
</rich:toolBarGroup>
<rich:toolBarGroup>
<!--...Set of action or other JSF components-->
</rich:toolBarGroup>
...
</rich:toolBar>
...
Example:
import org.richfaces.component.html.HtmlToolBarGroup;
...
HtmlToolBarGroup myToolBarGroup = new HtmlToolBarGroup();
...
A toolBarGroup is a wrapper component that groups toolBar content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.
Separators are located between components with the help of the "itemSeparator" attribute with four predefined values:
none
line
square
disc
To control the group location inside, use the "location" attribute with left (DEFAULT) and right values.
Example:
...
<rich:toolBar itemSeparator="disc" width="500">
<rich:toolBarGroup itemSeparator="line">
<h:commandLink value="Command 1.1"/>
<h:commandLink value="Command 2.1"/>
</rich:toolBarGroup>
<rich:toolBarGroup itemSeparator="line" location="right">
<h:commandLink value="Command 1.2"/>
<h:commandLink value="Command 2.2"/>
</rich:toolBarGroup>
</rich:toolBar>
...
The code result is the following:
For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
There are two ways to redefine the appearance of all <rich:toolBarGroup> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:toolBarGroup> component