Primefaces Toolbar

by Online Tutorials Library July 14, 2022

PrimeFaces Toolbar

It is a horizontal grouping component which is used to form a toolbar with commands and other content. PrimeFaces provides <p:toolbar> component to create toolbar in JSF application. It is useful to create tool based web application. It also has various attributes that are tabled below.

Toolbar Attributes

Attribute	Default value	Type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It is used to specify the rendering of the component.
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
style	null	String	It is used to set inline style of the container element.
styleClass	null	String	It is used to set style class of the container. element.

Example

Here, in the following example, we are implementing <p:toolbar> component. This example contains the following files.

JSF File

// toolBar.xhtml

  <?xml version=’1.0′ encoding=’UTF-8′ ?>  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  <html xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://xmlns.jcp.org/jsf/html”  xmlns:p=”http://primefaces.org/ui”  xmlns:f=”http://xmlns.jcp.org/jsf/core”>  <h:head>  <title>ToolBar</title>  </h:head>  <h:body>  <h:form>  <p:growl id=”messages” showDetail=”true” />  <p:toolbar>  <f:facet name=”left”>  <p:commandButton type=”button” value=”New” icon=”ui-icon-document” />  <p:commandButton type=”button” value=”Open” icon=”ui-icon-folder-open” />  <span class=”ui-separator”>  <span class=”ui-icon ui-icon-grip-dotted-vertical” />  </span>  <p:commandButton type=”button” title=”Save” icon=”ui-icon-disk” />  <p:commandButton type=”button” title=”Delete” icon=”ui-icon-trash” />  <p:commandButton type=”button” title=”Print” icon=”ui-icon-print” />  </f:facet>  <f:facet name=”right”>  <p:menuButton value=”Options”>  <p:menuitem value=”Save” actionListener=”#{toolbar.save}” update=”messages” icon=”ui-icon-disk” />  <p:menuitem value=”Update” actionListener=”#{toolbar.update}” update=”messages” icon=”ui-icon-arrowrefresh-1-w” />  <p:menuitem value=”Delete” actionListener=”#{toolbar.delete}” ajax=”false” icon=”ui-icon-close” />  <p:menuitem value=”Homepage” url=”https://tutoraspire.com” icon=”ui-icon-extlink” />  </p:menuButton>  </f:facet>  </p:toolbar>  </h:form>  </h:body>  </html>  

ManagedBean

// ToolBar.java

  package com.tutoraspire;  import javax.faces.application.FacesMessage;  import javax.faces.bean.ManagedBean;  import javax.faces.context.FacesContext;  @ManagedBean  public class ToolBar {  public void save() {  addMessage(“Success”, “Data saved”);  }  public void update() {  addMessage(“Success”, “Data updated”);  }  public void delete() {  addMessage(“Success”, “Data deleted”);  }  public void addMessage(String summary, String detail) {  FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, detail);  FacesContext.getCurrentInstance().addMessage(null, message);  }  }  

Output:

PrimeFaces CommandLink 1

Next TopicPrimeFaces ConfirmDialog

Primefaces Toolbar

PrimeFaces Toolbar

Toolbar Attributes

Example

JSF File

ManagedBean

SSRS vs Power BI

Backtracking in Prolog

You may also like