In the previous section, we modified /view/layout/menu.xhtml in order to add i18n support to our menu buttons. Now we are going to see in depth how the rich:toolBar component works and how we can use it.

This component is very important for a web site application and can be customized in different ways. Also, it can be used in different ways it can be used as a tool bar, a menu bar, or both.

Inside the bar, you can put any content (such as a link, menu, image, h:inputText for searching, login form, and so on.). You can also make groups and align them to the righthand or lefthand side, dividing them with built-in or customized separators.

Here is an example including all those things we've talked about:

This is the code we used to make the example, as shown in the previous screenshot:

<rich:toolBar itemSeparator="square">
<rich:toolBarGroup>
<s:link view="/home.xhtml"
value="#{messages['home']}" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<s:link view="/core/users/profile.xhtml"
value="#{messages['profile']}">
</s:link>
<h:form>
<rich:dropDownMenu value="#{messages['Inbox']}">
<rich:menuItem submitMode="none">
<s:link value="#{messages['messageInbox']}" />
</rich:menuItem>
<rich:menuSeparator/>
<rich:menuItem submitMode="none">
<s:link value="#{messages['newMessage']}" />
</rich:menuItem>
</rich:dropDownMenu>
</h:form>
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
<h:form id="loginTopForm"> <h:outputLabel value="#{messages['username']} " for="plUsername" />
<h:inputText id="plUsername" value="#{identity.username}" />
<h:outputLabel value="#{messages['password']} " for="plPassword" />
<h:inputSecret id="plPassword" value="#{identity.password}" />
<h:commandButton value="#{messages['login']}" action="#{identity.login}" />
<s:button value="#{messages['forgotPwdQuestion']}"
view="/resetPassword.xhtml" />
</h:form>
<s:button view="/core/login/register.xhtml" value="#{messages['signUp']}" />
<s:link view="/contact.xhtml" value="#{messages['contact']}" />
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
<h:form>
<h:inputText value="#{searchHelper.query}"/>
<h:commandButton action="#{searchHelper.search}" value="#{messages['search']}"/>
</h:form>
</rich:toolBarGroup>
</rich:toolBar>

The components that are of interest to us have been highlighted rich:toolbar and rich:toolbarGroup.

Using the first one, you can declare a tool bar and sets of attributes such as itemSeparator (In this case it is square, but you can set it as none, line, disc, and grid the default value is none) and separatorClass in order to customize it. Also, you can set the height and width, style and styleClass attributes; you can set the contentClass and contentStyle attributes for the item inside it.

In order to add a custom separator, you can set the separator image in the itemSeparator attribute as itemSeparator="/mySeparatorImage.png", or use a facet like this:

<f:facet name="itemSeparator">
<!-- my separator -->
</f:facet>

Remember that you can place any content inside the facet, but only one child. If you have more than one component to insert, you have to enclose it in h:panelGroup.

The other component is rich:toolBarGroup it is very useful to group any content and style it. Also, you can decide whether to put that group on the lefthand side or the righthand side of the tool bar in a very simple and effective way.