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.

  • Facets component used for defining Toolbar’s Left/Right Side.
  • It’s applicable for your, setting whatever components you want inside these defined sections.

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

  • JSF/Primefaces components can be used in conjunction with Toolbar’s sections.
  • Toolbar-Left-Right-Sections-JSF-Primefaces-Components-1024x150
  • 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.

Toolbar-ToolbarGroup-Simple-Example-1024x93

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.

Tooltip-Ways-of-Providing-Tooltip-Username-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.

Tooltip-Global-Tooltip-Username-Tooltip-Before-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.

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.

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.

By admin

Leave a Reply

%d bloggers like this: