A horizontal grouping component, toolbar
can be used to group commands and other components. In this recipe, we will create a toolbar with two groups that bundle buttons and menu items.
A definition of a toolbar with multiple groups would be as follows:
<p:toolbar> <p:toolbarGroup align="left"> <p:commandButton type="push" value="New" icon="ui-icon-document" /> <p:commandButton type="push" value="Open" icon="ui-icon-folder-open"/> <p:separator /> <p:commandButton type="push" title="Save" icon="ui-icon-disk"/> <p:commandButton type="push" title="Delete" icon="ui-icon-trash"/> <p:commandButton type="push" title="Print" icon="ui-icon-print"/> </p:toolbarGroup> <p:toolbarGroup align="right"> <p:menuButton value="Navigate"> <p:menuitem value="Home" url="#" /> <p:menuitem value="Logout" url="#" /> </p:menuButton> </p:toolbarGroup> </p:toolbar>
This definition will be visualized as shown in the following image:
By default, toolbar
has two placeholders, left
and right
, which can be defined with the toolbarGroup
component or facet
. There is no limit on the number of components that can be put inside toolbarGroup
or facet
. The <p:toolbarGroup align="left">
component definition can also be defined as a facet, such as <f:facet name="left">
. The separator
component can be used to visually separate the components from each other, such as between the components inside the toolbarGroup
component, as given in the example.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter4/toolbar.jsf
.