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.
Message is a pre-skinned extended verison of the standard JSF message component.
Tag | message |
---|---|
Component Class | org.primefaces.component.message.Message |
Component Type | org.primefaces.component.Message |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.MessageRenderer |
Renderer Class | org.primefaces.component.message.MessageRenderer |
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 side UIComponent instance in a backing bean. |
showSummary | false | Boolean | Specifies if the summary of the FacesMessage should be displayed. |
showDetail | true | Boolean | Specifies if the detail of the FacesMessage should be displayed. |
for | null | String | Id of the component whose messages to display. |
redisplay | true | Boolean | Defines if already rendered messages should be displayed |
display | both | String | Defines the display mode. |
escape | true | Boolean | Defines whether html would be escaped or not. |
severity | null | String | Comma separated list of severities to display only. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the component. |
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
<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
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:
Message component has three different displays mode:
Let’s change the same example introduced before to control which display mode that will be used. index.xhtml
<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>
Messages is a pre-skinned extended version of the standard JSF messages component.
Tag | messages |
---|---|
Component Class | org.primefaces.component.messages.Messages |
Component Type | org.primefaces.component.Messages |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.MessagesRenderer |
Renderer Class | org.primefaces.component.messages.MessagesRenderer |
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 side UIComponent instance in a backing bean. |
showSummary | true | Boolean | Specifies if the summary of the FacesMessages should be displayed. |
showDetail | false | Boolean | Specifies if the detail of the FacesMessages should be displayed. |
globalOnly | false | String | When true, only facesmessages with no clientIds are displayed. |
redisplay | true | Boolean | Defines if already rendered messages should be displayed |
autoUpdate | false | Boolean | Enables auto update mode if set true. |
for | null | String | Name of associated key, takes precedence when used with globalOnly. |
escape | true | Boolean | Defines whether html would be escaped or not. |
severity | null | String | Comma separated list of severities to display only. |
closable | false | Boolean | Adds a close icon to hide the messages. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the component. |
showIcon | true | Boolean | Defines if severity icons would be displayed. |
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
<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
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:
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
<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
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 "";
}
}
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
<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
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 "";
}
}
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
<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
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 "";
}
}
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.
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.
Tag | Growl |
---|---|
Component Class | org.primefaces.component.growl.Growl |
Component Type | org.primefaces.component.Growl |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.GrowlRenderer |
Renderer Class | org.primefaces.component.growl.GrowlRenderer |
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 side UIComponent instance in a backing bean |
sticky | false | Boolean | Specifies if the message should stay instead of hidden automatically. |
showSummary | true | Boolean | Specifies if the summary of message should be displayed. |
showDetail | false | Boolean | Specifies if the detail of message should be displayed. |
globalOnly | false | Boolean | When true, only facesmessages without clientids are displayed. |
life | 6000 | Integer | Duration in milliseconds to display non-sticky messages. |
autoUpdate | false | Boolean | Specifies auto update mode. |
redisplay | true | Boolean | Defines if already rendered messaged should be displayed. |
for | null | String | Name of associated key, takes precedence when used with globalOnly. |
escape | true | Boolean | Defines whether html would be escaped or not. |
severity | null | String | Comma separated list of severities to display only. |
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
<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
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 "";
}
}
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
<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
<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>
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
<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>
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
<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
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 "";
}
}
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
<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>
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Hello i need a code help to display growl message on one page and after display that message on the page it redirect to some other page. Can you post this example code using primeface and growl. because when i return the required page for redirection the growl message is not display. thanks
- Kami