6.83.  < rich:toolBarGroup >

6.83.1. Description

A group of items inside a tool bar.

<rich:toolbarGroup> with items on it

Figure 6.241.  <rich:toolbarGroup> with items on it


6.83.2. Key Features

  • 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 NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
idEvery 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"."
onclickHTML: a script expression; a pointer button is clicked
ondblclickHTML: a script expression; a pointer button is double-clicked
onkeydownHTML: a script expression; a key is pressed down
onkeypressHTML: a script expression; a key is pressed and released
onkeyupHTML: a script expression; a key is released
onmousedownHTML: script expression; a pointer button is pressed down
onmousemoveHTML: a script expression; a pointer is moved within
onmouseoutHTML: a script expression; a pointer is moved away
onmouseoverHTML: a script expression; a pointer is moved onto
onmouseupHTML: script expression; a pointer button is released
renderedIf "false", this component is not rendered
separatorClass"A CSS class to be applied to tool bar group separators."
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute

Table 6.458. Component identification parameters

NameValue
component-typeorg.richfaces.ToolBarGroup
component-classorg.richfaces.component.html.HtmlToolBarGroup
component-familyorg.richfaces.ToolBarGroup
renderer-typeorg.richfaces.ToolBarGroupRenderer
tag-classorg.richfaces.taglib.ToolBarGroupTag

6.83.4. Creating the Component with a Page Tag

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>
...

6.83.5. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlToolBarGroup;
...
HtmlToolBarGroup myToolBarGroup = new HtmlToolBarGroup();
...

6.83.6. Details of Usage

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:

Stylized <rich:toolbarGroup> with "location" , "itemSeparator" attributes

Figure 6.242. Stylized <rich:toolbarGroup> with "location" , "itemSeparator" attributes


6.83.7. Look-and-Feel Customization

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

6.83.8. Skin Parameters Redefinition

Table 6.459. Skin parameters redefinition

Skin parametersCSS properties
headerSizeFontfont-size
headTextColorcolor
headerFamilyFontfont-family