Grouping of buttons and more with toolbar

toolbar is a horizontal grouping component that can be used for grouping commands and other components. By default, toolbar has two placeholders, left and right, which can be defined with the toolbarGroup component. There is no limit on the number of components that can be put inside the toolbarGroup component.

How to do it...

A definition for 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">
   ...