JBoss.org Community Documentation

- Prev
- Next

## 6.87. < rich:toolBar >

### 6.87.1. Description

A horizontal bar with Action items on it that accepts any JSF components as children.

Figure 6.279. <rich:toolBar> with action items

### 6.87.2. Key Features

- Skinnable menu panel and child items

- Standard top menu bar that can be used in accordance with a menu component

- Grouping bar content

- Easily place content on any side of a menu bar using predefined group layout

- Predefined separators for menu items and groups

- Any content inside

Table 6.475. rich : toolBar attributes

Attribute Name | Description
--- | ---
binding | The attribute takes a value-binding expression for a component property of a backing bean
contentClass | A CSS style is to be applied to each element of tool bar content. Use this style, for example, to setup parameters of the font.
contentStyle | A CSS style is to be applied to each element of tool bar content.
height | A height of a bar in pixels. If a height is not defined, a bar height depends of the "headerFontSize" skin parameter.
id | Every component may have a unique id that is automatically created if omitted
itemSeparator | A separator between items on a bar. Possible values are "none", "line", "square", "disc" and "grid". Default value is "none".
onclick | HTML: a script expression; a pointer button is clicked
ondblclick | HTML: a script expression; a pointer button is double-clicked
onitemclick | HTML: a script expression; a pointer button is clicked on an item
onitemdblclick | HTML: a script expression; a pointer button is double-clicked on an item
onitemkeydown | HTML: a script expression; a key is pressed down on an item
onitemkeypress | HTML: a script expression; a key is pressed and released on an item
onitemkeyup | HTML: a script expression; a key is released on an item
onitemmousedown | HTML: script expression; a pointer button is pressed down on an item
onitemmousemove | HTML: a script expression; a pointer is moved on an item
onitemmouseout | HTML: a script expression; a pointer is moved away from an item
onitemmouseover | HTML: a script expression; a pointer is moved onto an item
onitemmouseup | HTML: script expression; a pointer button is released on an item
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 separators.
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
width | A width of a bar that can be defined in pixels or as percentage. Default value is "100%".

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

### 6.87.3. Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...

        <rich:toolBar>

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

        </rich:toolBar>

    ...

### 6.87.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlToolBar;

    ...

    HtmlToolBar myToolBar = new HtmlToolBar();

    ...

### 6.87.5. 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:

Figure 6.280. <rich:toolBar> with a "disc" separator

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

A custom separator can be added with the help of "itemSeparator" facet.

Example:

    ...

    <f:facet name="itemSeparator">

        <rich:separator width="2" height="14" />

    </f:facet>

    ...

Custom separator can be also specified by URL to the separator image in the attribute "itemSeparator" of the <rich:toolBar> .

Example:

    ...

    <rich:toolBar id="toolBar" width="#{bean.width}" height="#{bean.height}" itemSeparator="/images/separator_img.jpg"/>

    ...

This is a result:

Figure 6.281. <rich:toolBar> with "itemSeparator" attribute.

As it could be seen in the picture above, the image for itemSeparator was changed.

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

### 6.87.7. Skin Parameters Redefinition

Table 6.477. Skin parameters redefinition for a component exterior

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

Table 6.478. Skin parameters redefinition for a component item

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

### 6.87.8. Definition of Custom Style Classes

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

Figure 6.282. Classes names

In order to redefine styles for all <rich:toolBar> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...

    .rich-toolbar-item{

        font-weight:bold;

    }

    ...

This is a result:

Figure 6.283. Redefinition styles with predefined classes

In the example font weight for items was changed.

Also it's possible to change styles of particular <rich:toolBar> component. In this case you should create own style classes and use them in corresponding <rich:toolBar> styleClass attributes. An example is placed below:

Example:

    ...

    .myClass{

        font-style:italic;

        font-weight:bold;

    }

    ...

The "styleClass" attribute for <rich:toolBar> is defined as it's shown in the example below:

Example:

    <rich:toolBar ... styleClass="myClass"/>

This is a result:

Figure 6.284. Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above,the font style and the font weight for items was changed.

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

### 6.87.9. Relevant Resources Links

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

- Prev6.86. < rich:toggleControl >
- Top of page
- Front page
- Next6.88. < rich:toolBarGroup >