Primefaces Toolbar, ToolbarGroup & Tooltip

Filed Under: PrimeFaces

Primefaces Toolbar is a horizontal grouping for commands and other contents.

Primefaces Toolbar Basic Info

Tag Toolbar
Component Class org.primefaces.component.toolbar.Toolbar
Component Type org.primefaces.component.Toolbar
Component Family org.primefaces.component
Renderer Type org.primefaces.component.ToolbarRenderer
Renderer Class org.primefaces.component.toolbar.ToolbarRenderer

Primefaces Toolbar Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
style null String Inline style of the container element.
binding null Object An el expression that maps to a server sideUIComponent instance in a backing bean
styleClass null String Style class of the container element.

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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.

Primefaces Toolbar - Left & Right Sections
Now, let’s see how can we use the same Toolbar component for enclosing different types of JSF/Primefaces components.


<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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="#" />
				<p:menuitem value="Logout" url="#" />
			</p:menuButton>
		</f:facet>
	</p:toolbar>
</h:form>
</html>

Primefaces Toolbar - Left & Right Sections - JSF & Primefaces Components

  • 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.

Tag ToolbarGroup
Tag org.primefaces.component.toolbar.ToolbarGroup
Component Type org.primefaces.component.ToolbarGroup
Component Family org.primefaces.component

Primefaces ToolbarGroup Attributes

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
align null String Defines the alignment within toolbar, valid valuesare left and right.
style null String Inline style of the container element.
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
styleClass null String Style class of the container element.

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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="#" />
				<p:menuitem value="Logout" url="#" />
			</p:menuButton>
		</p:toolbarGroup>
	</p:toolbar>
</h:form>
</html>

Primefaces Toolbar - ToolbarGroup - Simple Example

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.

Name Default Type Description
id null String Unique identifier of the component
rendered true Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding null Object An el expression that maps to a server sideUIComponent instance in a backing bean
value null Object Value of the component than can be either an ELexpression of a literal text
converter null Converter/String An el expression or a literal text that defines aconverter for the component. When it’s an ELexpression, it’s resolved to a converter instance. Incase it’s a static text, it must refer to a converter id
widgetVar null String Name of the client side widget.
showEvent mouseover String Event displaying the tooltip.
showEffect fade String Effect to be used for displaying.
hideEvent mouseout String Event hiding the tooltip.
hideEffect fade String Effect to be used for hiding.
showDelay 150 Integer Delay time to show tooltip in milliseconds.

Primefaces Tooltip Attributes

Tag Tooltip
Tag org.primefaces.component.tooltip.Tooltip
Component Type org.primefaces.component.Tooltip
Component Family org.primefaces.component
Renderer Type org.primefaces.component.TooltipRenderer
Renderer Class org.primefaces.component.tooltip.TooltipRenderer

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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>

Primefaces Tooltip - Ways of Providing Tooltip - Username Component Primefaces Tooltip - Ways of Providing Tooltip - Password Component

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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>

Primefaces Tooltip - Global Tooltip - Username Tooltip - Before Ajax Action

Primefaces Tooltip - Global Tooltip - Username Tooltip - After Ajax Action

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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>

Primefaces Tooltip-Controlling Event And Effect

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="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://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>

Primefaces Tooltip - Custom Content

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.

Comments

  1. Jeff Herbert says:

    Is there a way to pin the toolbar to the top? Say we have a long list of fields to enter for a query. When the user scrolls down the toolbar disappears and the user must scroll up to use it. Thanks for any help.

    1. Pankaj says:

      You can add custom CSS to achieve this.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages