bar rich:toolBar HtmlToolBar

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.ToolBar
component-class | org.richfaces.component.html.HtmlToolBar
component-family | org.richfaces.ToolBar
renderer-type | org.richfaces.ToolBarRenderer
tag-class | org.richfaces.taglib.ToolBarTag

## Creating the Component with a Page Tag

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

Example:

    ...
        <rich:toolBar>
            <!--//...Set of action or other JSF components-->
        </rich:toolBar>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlToolBar;
    ...
    HtmlToolBar myToolBar = new HtmlToolBar();
    ...

## Details of Usage

A toolBar is a wrapper component that facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with possibility to group, arrange on the both bar sides, and place predefined separators between them.

Grouping and an input side definition is described for toolBarGroup that defines this functionality.

Separators are located between components with the help of the "itemSeparator" attribute with four predefined values:

- none
- line
- square
- disc

For example, when setting a separator of a disc type, the following result is produced:

Toolbar with a "disc" separator

Moreover, for toolBar style "width" and "height" attributes are placed above all.

## 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:toolBar> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:toolBar> component

## Skin Parameters Redefinition

Skin parameters redefinition for a component exterior

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-color
headerBackgroundColor | background-color

Skin parameters redefinition for a component item

Skin parameters | CSS properties
--- | ---
headerSizeFont | font-size
headerTextColor | color
headerWeightFont | font-weight
headerFamilyFont | font-family

## Definition of Custom Style Classes

Classes names that define a component appearance

Class name | Description
--- | ---
rich-toolbar | Defines styles for a toolbar element
rich-toolbar-item | Defines styles for a toolbar item

In order to redefine styles for all <rich:toolBar> components on a page using CSS, it's enough to create class with the same names and define necessary properties in them.

To change styles of particular <rich:toolBar> components define your own style classes in the corresponding <rich:toolBar> attributes.

The component also has the standard attributes "style" and "styleClass" that could redefine an appearance of a particular component variants.

## Relevant Resources Links

Here you can see the example of <rich:toolBar> usage and sources for the given example.