PrimeFaces NotificationBar

It is a multipurpose fixed positioned panel. It is used to display notification bar. By default, it displays at the top. We can set it's position by specifying position attribute. We can also set the effect of notification bar like: fade or slide. Apart from all these, it includes various other attributes that are tabled below.

NotificationBar Attributes

Attribute	Default value	Type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It sets boolean value to specify the rendering of the component.
binding	null	Object	It is an expression that maps to a server side UIComponent instance in a backing bean.
style	null	String	It is used to set style of the container element.
styleClass	null	String	It is used to set styleClass of the container element.
position	top	String	It is used to set position of the bar.
effect	fade	String	It is used to set name of the effect.
effectSpeed	normal	String	It is used to set speed of the effect.
autoDisplay	false	Boolean	It is used to set panel is displayed on page load.
widgetVar	null	String	It is a name of the client side widget.

Example

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

JSF File

// notificationBar.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">
<h:head>
<title>Notification Bar</title>
</h:head>
<h:body>
<p:notificationBar position="top" effect="fade" styleClass="top" widgetVar="notify">
<h:outputText value="This is a Primefaces notification." style="font-size:36px;" />
</p:notificationBar>
<p:graphicImage name="images/primefaces-logo.jpeg" /><br/><br/>
<p:commandButton value="Click for notification" onclick="PF('notify').show()" type="button" icon="ui-icon-arrow-1-s"/>
</h:body>
</html>

Output: