⁠14.5. <rich:toolbar>

The <rich:toolbar> component is a horizontal toolbar. Any JavaServer Faces (JSF) component can be added to the toolbar.
⁠
<rich:toolbar>

Figure 14.4. <rich:toolbar>

⁠14.5.1. Basic usage

The <rich:toolbar> component does not require any attributes to be defined for basic usage. Add child components to the <rich:toolbar> component to have them appear on the toolbar when rendered.
⁠

Example 14.3. Basic usage

​<rich:toolbar>
​   <h:commandLink value="News" />
​   <h:commandLink value="Reviews" />
​   <h:commandLink value="Galleries" />
​</rich:toolbar>

⁠14.5.2. Appearance

Set the width and height of the toolbar using the common width and height attributes.
Items on the toolbar can be separated by a graphical item separator. Use the itemSeparator attribute to specify one of the standard separator styles:
  • none, the default appearance, does not show any item separators.
  • disc shows a small circular disc to separate items:
  • grid shows a grid pattern to separate items:
  • line shows a vertical line to separate items:
  • square shows a small square to separate items:
Alternatively, use the itemSeparator attribute to specify a URL to an image. The image is then used as an item separator. The appearance of the item separator can be additionally customized by using the itemSeparator facet.

⁠14.5.3. Grouping items

Group together multiple items on the toolbar by using the <rich:toolbarGroup> child component. Refer to Section 14.5.6, “<rich:toolbarGroup>” for full details on the <rich:toolbarGroup> component.

⁠14.5.4. Reference data

  • component-type: org.richfaces.Toolbar
  • component-class: org.richfaces.component.UIToolbar
  • component-family: org.richfaces.Toolbar
  • renderer-type: org.richfaces.ToolbarRenderer

⁠14.5.5. Style classes and skin parameters

⁠

Table 14.4. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-tb
This class defines styles for the toolbar itself.
panelBorderColor
border-color
headerTextColor
color
headerBackgroundColor
background-color
headerFamilyFont
font-family
headerSizeFont
font-size
headerWeightFont
font-weight
.rf-tb-itm
This class defines styles for an item in the toolbar.
No skin parameters.
.rf-tb-sep
This class defines styles for a separator in the toolbar.
No skin parameters.
.rf-tb-sep-grid, .rf-tb-sep-line, .rf-tb-sep-disc, .rf-tb-sep-square
These classes define styles for grid, line, disc, and square separators.
No skin parameters.
.rf-tb-cntr
This class defines styles for the container of the toolbar.
No skin parameters.

⁠14.5.6. <rich:toolbarGroup>

The <rich:toolbarGroup> component is a child component of the <rich:toolbar> component. The <rich:toolbarGroup> component is used to group a number of items together on a toolbar.

⁠14.5.6.1. Basic usage

Like the <rich:toolbar> parent component, the <rich:toolbarGroup> component does not require any extra attributes for basic functionality. Add child components to the <rich:toolbarGroup> component to have them appear grouped on the parent toolbar when rendered.

⁠14.5.6.2. Appearance

Similar to the <rich:toolbar> component, items within a <rich:toolbarGroup> can be separated by specifying the itemSeparator attribute. Refer to Section 14.5.2, “Appearance” for details on using the itemSeparator attribute.
Groups of toolbar items can be located on either the left-hand side or the right-hand side of the parent toolbar. By default, they appear to the left. To locate the toolbar group to the right of the parent toolbar, set location="right".
⁠

Example 14.4. <rich:toolbarGroup>

​<rich:toolBar height="26" itemSeparator="grid">
​   <rich:toolBarGroup>
​      <h:graphicImage value="/images/icons/create_doc.gif"/>
​      <h:graphicImage value="/images/icons/create_folder.gif"/>
​      <h:graphicImage value="/images/icons/copy.gif"/>
​   </rich:toolBarGroup>
​   <rich:toolBarGroup>
​      <h:graphicImage value="/images/icons/save.gif"/>
​      <h:graphicImage value="/images/icons/save_as.gif"/>
​      <h:graphicImage value="/images/icons/save_all.gif"/>
​   </rich:toolBarGroup>
​   <rich:toolBarGroup location="right">
​      <h:graphicImage value="/images/icons/find.gif"/>
​      <h:graphicImage value="/images/icons/filter.gif"/>
​   </rich:toolBarGroup>
​</rich:toolBar>
The example shows how to locate a toolbar group to the right-hand side of the parent toolbar. It also demonstrates how item separators on the parent toolbar work with toolbar groups.

⁠14.5.6.3. Reference data

  • component-type: org.richfaces.ToolbarGroup
  • component-class: org.richfaces.component.UIToolbarGroup
  • component-family: org.richfaces.Toolbar
  • renderer-type: org.richfaces.ToolbarGroupRenderer