Primefaces Toolbar is a horizontal grouping for commands and other contents.
Primefaces Toolbar Basic Info
Primefaces Toolbar Attributes
Getting Started With Toolbar
Toolbar component has two placeholders (left & right) that are defined with facets. Following the most simple example help you understanding Toolbar component and its Left/Right sections.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<f:facet name="left">
Left Side
</f:facet>
<f:facet name="right">
Right Side
</f:facet>
</p:toolbar>
</h:form>
</html>
- Facets component used for defining Toolbar’s Left/Right Side.
- It’s applicable for your, setting whatever components you want inside these defined sections.
Now, let’s see how can we use the same Toolbar component for enclosing different types of JSF/Primefaces components.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<f:facet name="left">
<p:commandButton type="push" value="New" image="ui-icon-document" />
<p:commandButton type="push" value="Open" image="ui-icon-folder-open" />
<h:outputText value="<h2>Just HTML Separator</h2>" escape="false"></h:outputText>
</f:facet>
<f:facet name="right">
<p:menuButton value="Navigate">
<p:menuitem value="Home" url="https://www.journaldev.com/3540/#" />
<p:menuitem value="Logout" url="https://www.journaldev.com/3540/#" />
</p:menuButton>
</f:facet>
</p:toolbar>
</h:form>
</html>
- JSF/Primefaces components can be used in conjunction with Toolbar’s sections.
- It’s also applicable for using rendered HTML using <h:outputText/>.
Primefaces ToolbarGroup Basic Info
ToolbarGroup is a helper component for Toolbar component to define Placeholders.
Primefaces ToolbarGroup Attributes
Getting Started With ToolbarGroup
ToolbarGroup component is working in conjunction with Toolbar component, rather using of facets component for determining Right/Left place. Primefaces 5 has supported it as it’s might be not supported in the next coming version. Following simple example shows you how can we use ToolbarGroup for positioning the Toolbar’s content.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
<p:toolbar>
<p:toolbarGroup align="right">
<p:commandButton type="push" value="New" image="ui-icon-document" />
<p:commandButton type="push" value="Open" image="ui-icon-folder-open" />
</p:toolbarGroup>
<p:toolbarGroup align="left">
<p:menuButton value="Navigate">
<p:menuitem value="Home" url="https://www.journaldev.com/3540/#" />
<p:menuitem value="Logout" url="https://www.journaldev.com/3540/#" />
</p:menuButton>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</html>
Primefaces Tooltip Basic Info
Similar to html, Tooltip component has the same functionality with more advantage by providing custom effects, events, html content and advance theme support.
Primefaces Tooltip Attributes
Getting Started With Tooltip
Tooltip component is working in conjunction with any of Primefaces components. For providing a Tooltip, two options can be used:
- Provide a value and a for Tooltip’s attributes for determining the value of the Tooltip and the component that is the Tooltip is for, respectively.
- Just provide a for Tooltip’s attribute, in such cases, be careful that the component the Tooltip is for has specified the title attribute.
Following sample, shows you the most simple example that help you define a Toolbar using mentioned both of ways.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
Enter Username : <p:inputText id="username"></p:inputText>
<p:separator/>
Enter Password : <p:inputText id="password" title="Enter Password"></p:inputText>
<p:tooltip for="username" value="Enter Username"></p:tooltip>
<p:tooltip for="password"></p:tooltip>
</h:form>
</html>
Global Tooltip
Primefaces has also provided a global Tooltip component. Global Tooltip binds to elements with title attributes. Global Tooltip is more efficient than using of individual instances. It’s suggested to be used instead of using individual Tooltip components unless a custom case would be implemented. Global Tooltip also has supported Ajax updates, in case your Targeted components are updating asynchronously, Global Tooltip component can still bind.
Following a simple example that depicts you how can you use the Global Tooltip for achieving both of Global Tooltip and Asynchronously Global Tooltip.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
<p:tooltip id="tooltip"/>
Enter Username : <p:inputText id="username" title="Enter Username"></p:inputText>
<p:separator/>
Enter Password : <p:inputText id="password" title="Enter Password"></p:inputText>
<p:separator/>
<p:commandButton value="Change Tooltip Asynchrounsly"
action="#{tooltipManagedBean.changeTooltipValues}"
title="Asynchrouns Action"
update="username password tooltip"></p:commandButton>
</h:form>
</html>
Tooltip Focus, Events & Effects
A Tooltip is shown on mouseover event and hidden when mouse is out by default. If you need to change this behavior you should use showEvent and hideEvent feature. Also, you can control the effect to be used for controlling the form that the Tooltip will use while showing.
Following example shows you how can you use these events and effects for controlling the Tooltip behavior.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form style="width:50%">
Enter Username : <p:inputText id="username"></p:inputText>
<p:tooltip for="username" value="Enter Username" showEvent="focus" hideEvent="blur" showEffect="bounce" hideEffect="explode" trackMouse="true"></p:tooltip>
</h:form>
</html>
Tooltip HTML Content
It’s also applicable for you to display custom content as a tooltip rather using of just text value. Just inject whatever content you want inside Tooltip component. Following example shows you a Tooltip component that contains a text value in addition to image content.
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<p:tooltip/>
<h:form style="width:50%">
Enter Username : <p:inputText id="username" title="Enter Username"></p:inputText>
<p:tooltip for="username" showEvent="focus"
hideEvent="blur" showEffect="bounce"
hideEffect="explode">
<h:graphicImage value="/resources/images/journaldev.jpg"></h:graphicImage>
</p:tooltip>
</h:form>
</html>
Summary
This tutorial intended to cover Toolbar, ToolbarGroup and Tooltip that’s used intensively inside any Primefaces application. Contribute us by commenting below and download the given source code.