### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.10.18. < rich:toolBarGroup > available since 3.0.0

expand all

#### 6.10.18.1. Description

A group of items inside a tool bar.

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

#### 6.10.18.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.286. rich : toolBarGroup attributes

Attribute Name | Description
--- | ---
binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean
id | JSF: 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" Default value is "none".
location | A location of a group on a tool bar. Possible values are "left" and "right". Default value is "left".
onitemclick | The client-side script method to be called when an item is clicked
onitemdblclick | The client-side script method to be called when an item is double-clicked
onitemkeydown | The client-side script method to be called when a key is pressed down over an item
onitemkeypress | The client-side script method to be called when a key is pressed and released over an item
onitemkeyup | The client-side script method to be called when a key is released over an item
onitemmousedown | The client-side script method to be called when a mouse button is pressed down over an item
onitemmousemove | The client-side script method to be called when a pointer is moved within an item
onitemmouseout | The client-side script method to be called when a pointer is moved away from an item
onitemmouseover | The client-side script method to be called when a pointer is moved onto an item
onitemmouseup | The client-side script method to be called when a mouse button is released over an item
rendered | JSF: If "false", this component is not rendered
separatorClass | Assigns one or more space-separated CSS class names to the tool bar group separators
style | HTML: CSS style rules to be applied to the component
styleClass | JSF: Assigns one or more CSS class names to the component. Corresponds to the HTML "class" attribute.

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

#### 6.10.18.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.10.18.5. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlToolBarGroup;

    ...

    HtmlToolBarGroup myToolBarGroup = new HtmlToolBarGroup();

    ...

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

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

#### 6.10.18.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.10.18.8. Definition of Custom Style Classes

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

Example:

    ...

    .myClass{

            font-style: italic;

    }

    ...

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

Example:

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

This is a result:

Figure 6.193. Redefinition styles with own classes and "styleClass" attributes

As it could be seen on the picture above,font style for first toolBarGroup was changed.

#### 6.10.18.9. Relevant resources links

Some additional information about usage of component can be found on the component Live Demo page.

- Prev6.10.17. < rich:toolBar > ...
- Top of page
- Front page
- Next6.10.19. < rich:toolTip > ...