Messages are normally used for notifying, informing and keep the users aware of the actions that they are achieved. Typically, messages used for displaying information, errors, warnings and so on. Primefaces like all of jsf implementations, provides a different types of components that are used for doing so. Messages, message and growl are the only components get used for this purpose. This tutorial will help you getting featured these components into your application.
Primefaces Message Basic Info
Message is a pre-skinned extended verison of the standard JSF message component.
Primefaces Message Attributes
Id of the component whose messages to display.
Getting Started With Primefaces Message
In general, for adding messages into your application you need to add FacesMessage instances into your own FacesContext instance to be rendered at the RenderResponse phase after then. Many of these messages are added manually and at the same time others are added by jsf implementation. When you deal with validation and conversion, a lot of messages are displayed that actually aren’t part of your code. Following example shows you a simple example of validation process that generates an error message that get displayed when submitting a form without filling required input.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 id="form"> <p:outputPanel> <p:outputLabel value="Typing of your message is mandatory:"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}" required="true"/> <p:message id="message" for="input"></p:message> <p:commandButton value="Execute JSF Lifecycle - Invoke Action" action="#{messageManagedBean.doSomeAction}" update="input message"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
package com.journaldev; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class MessageManagedBean { private String message; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ return ""; } } |
Here’s detailed explanation for the above code:
- The rendered message isn’t part of your code, it’s queued by the jsf implementation through executing of ProcessValidation phase.
- RenderResponse phase is responsible of getting messages displayed.
- Queuing messages require to pass through jsf lifecycle. Normal starting of jsf lifecycle get done by activating an action.
- To ensure that certain input is required, required attribute must be set to true. ProcessValidation will look at your required components and queuing messages in case some of them are missed up.
- Message component used mainly for associating specific component with a message. Typically, this message will always be used for displaying all messages for accompanying component.
- The association between the message and it’s relevant component get achieved by providing for attribute.
Primefaces Message Display Mode
Message component has three different displays mode:
- text: Only message text is displayed.
- icon: Only message severity is displayed and message text is visible as a tooltip.
- both (default): Both icon and text are displayed.
Let’s change the same example introduced before to control which display mode that will be used.
index.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 id="form"> <p:outputPanel> <p:outputLabel value="Typing of your message is mandatory:"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}" required="true"/> <p:message id="message" for="input" display="icon"></p:message> <p:commandButton value="Execute JSF Lifecycle - Invoke Action" action="#{messageManagedBean.doSomeAction}" update="input message"></p:commandButton> </h:form> </html> |
Primefaces Messages Basic Info
Messages is a pre-skinned extended version of the standard JSF messages component.
Primefaces Messages Attributes
Getting Started With Primefaces Messages
When it comes to use p:messages, it’s important to know that this component is used for displaying general messages that are not belong for specific controls in the page. Following sample shows you how can use p:messages for displaying general message.
index2.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:messages id="messages"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action" action="#{messageManagedBean.doSomeAction}" update="messages"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Empty value isn't accepted","Empty value isn't accepted")); } else if(this.message.equals("") == false){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "You entered value","You entered value")); } return ""; } } |
Here’s detailed clarifications for what’s happened previously:
- Messages component used mainly for general message coverage.
- You can add a message by creating an instance of FacesMessage that’s comprised from message’s severity, message detail section and message summary section. After finish the creation of message, it’s required for displaying adding it into your FacesContext. RenderResponse will display it into your page.
Severity Level
In the previous explored example, you’ve provided two messages with error severity that are rendered after than into your page. It’s important to know that you can control which type of these messages your p:messages component would display. By providing severity attribute with comma separated info, warn, error, fatal values, you are getting controlled those displayed messages.
index3.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:messages id="messages" severity="fatal,info,warn"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action" action="#{messageManagedBean.doSomeAction}" update="messages"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error Message","Error Message")); FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_FATAL, "Fatal Message","Fatal Message")); FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "WARN Message","WARN Message")); FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "INFO Message","INFO Message")); } return ""; } } |
AutoUpdate
If you’ve explored the all examples provided before, you must notice that the p:commandButton has updated the message/messages component asynchronously. You can avoid like that arrangement and especially for those pages that have a hierarchical establishment. Let we have a template page that contains a messages component that would be used for dispalying all general messages your application has thrown.
index4.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:messages id="messages" autoUpdate="true"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action" action="#{messageManagedBean.doSomeAction}"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error Message","Error Message")); } return ""; } } |
- Developed command action hasn’t provided update attribute. Even though update attribute isn’t there, yet the message has been displayed cause the autoUpdate is used by the messages component itself.
Targetable Messages
Displaying messages can be controlled to be viewed using specific messages component. Let’s use two different messages components {A and B} and two different inputs components {1 and 2}. For input number 1 the messages would be displayed against messages A and for 2 messages B will be used. Following example shows you the impact of like that usage.
index5.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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 id="form"> <p:messages for="input1" id="messagesA"/> <p:messages for="input2" id="messagesB"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input1" value="#{messageManagedBean.message}"/> <h:inputText id="input2" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeActionOne}" update="messagesA messagesB"></p:commandButton> <p:commandButton value="Execute JSF Lifecycle - Invoke Action Two" action="#{messageManagedBean.doSomeActionTwo}" update="messagesA messagesB"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeActionOne(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage("form:input1", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error Message For Input1","Error Message For Input1")); } return ""; } public String doSomeActionTwo(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage("form:input2", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error Message For Input2","Error Message For Input2")); } return ""; } } |
- Featuring Target Messages requires associate your messages component with a component using for attribute and providing clientId for all of those messages that are added into FacesContext.
Note that the jsf implementation has assigned its components a unique identifiers. Those identifiers take the form of FormId:componentId. You can disable this identification by providing prependId to false against form component. So every component will be actually identified by using only its componentId and for those that are not identified, they will be identified using random identification like j_id4.
Primefaces Growl Basic Info
Growl is based on the Mac’s growl notification widget and used for displaying FacesMessages in an overlay and just like message and messages components.
Primefaces Growl Attributes
Getting Started With Primefaces Growl
Growl hasn’t vary differ from these discussed messages components earlier, so you can rely on them for providing Targetable Messages & Severity Levels options. Following example shows you the most simple example that you may get for Growl component.
index6.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:growl id="message"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error Message Displayed Growl","Error Message Displayed Growl")); } return ""; } } |
Lifetime of Primefaces messages
As each message will be displayed for 6000 ms and then hidden, you can control Growl message to be sticky, that’s meaning it’ll never be hidden automatically.
index7.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:growl id="message" sticky="true"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
If you wouldn’t your Growl message to be work in a sticky manner, you can also control the duration of displaying messages by tuning of life attribute.
index8.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:growl id="message" life="2000"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
Primefaces growl messages Positioning
You can also control the position that Growl message has seen into. By default Growl is positioned at the top right corner, position can be controlled with CSS selector called ui-growl.
index9.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> <style> .ui-growl { left:700px; } </style> </h:head> <h:form id="form"> <p:growl id="message"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
Escaping
For all of Primefaces messages components (message, messages and growl), they are defaulted to escape all of the html content. In case you need to display html via Primefaces messages components set escape to false.
index10.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:messages id="message" escape="false"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
MessageManagedBean.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.journaldev; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class MessageManagedBean { private String message =""; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public String doSomeAction(){ if(this.message.equals("")){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "<i>Error Message Displayed</i>","<i>Error Message Displayed</i>")); } return ""; } } |
Detail & Summary Message Parts
Displaying of messages’ parts can be controlled, so you can choose which part of message you need to display. All of FacesMessage contains for Summary and Detail parts that are provided once the message has been added into your FacesContext.
All of Primefaces’ messages components are defaulted to render the summary part. As you can provide showSummary and showDetail for displaying both parts of FacesMessage.
index11.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 id="form"> <p:messages id="message" showDetail="true" showSummary="true" escape="false"/> <p:outputPanel> <p:outputLabel value="Typing of your preferred technical site"></p:outputLabel> </p:outputPanel> <h:inputText id="input" value="#{messageManagedBean.message}"/> <p:commandButton value="Execute JSF Lifecycle - Invoke Action One" action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton> </h:form> </html> |
Primefaces Messages Growl Summary
Messages are heavily used inside wide range of applications that get published. Primefaces provides you a large scale of these components that can be used for informing, notifying and displaying informative text within your application. Contribute us by commenting below and find the source code.