The rich:toolbar component is a horizontal panel that can be used in a number of ways, such as a top level menu, an information panel, and so on. To create a top level menu, use the rich:dropDownMenu or rich:menuItem components as child components.
Items on the toolbar can be grouped using a separator between different groups and between members of the same group. Use the location="right" to position a group to the right-side of the panel.
The example shows how a simple toolbar might be used.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.org/rich"> <h:outputStylesheet> .pic { margin-right: 2px; } .barsearch { height: 14px; width: 100px; } .barsearchbutton { border-width: 1px; background-color: #{a4jSkin.generalBackgroundColor}; } </h:outputStylesheet> <rich:toolbar height="26" itemSeparator="grid"> <rich:toolbarGroup> <h:graphicImage value="/images/icons/create_doc.gif" styleClass="pic" alt="create_doc" /> <h:graphicImage value="/images/icons/create_folder.gif" styleClass="pic" alt="create_folder" /> <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" alt="copy" /> </rich:toolbarGroup> <rich:toolbarGroup> <h:graphicImage value="/images/icons/save.gif" styleClass="pic" alt="save" /> <h:graphicImage value="/images/icons/save_as.gif" styleClass="pic" alt="save_all" /> <h:graphicImage value="/images/icons/save_all.gif" styleClass="pic" alt="save_all" /> </rich:toolbarGroup> <rich:toolbarGroup location="right"> <h:inputText styleClass="barsearch" /> <h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" /> </rich:toolbarGroup> </rich:toolbar> </ui:composition>
