items rich:toolBarGroup HtmlToolBarGroup

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

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

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

## Creating the Component Dynamically Using Java

Example:

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

## 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 toolBarGroup

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

## Skin Parameters Redefinition

Skin parameters redefinition

Skin parameters | CSS properties
--- | ---
headerSizeFont | font-size
headTextColor | color
headerFamilyFont | font-family