Primefaces消息,消息和低吼组件示例
消息通常用于通知,通知用户并使他们知道所实现的操作。
通常,用于显示信息,错误,警告等的消息。
像所有jsf实现一样,Primefaces提供了用于执行此操作的不同类型的组件。
消息,消息和咆哮是用于此目的的唯一组件。
本教程将帮助您将精选的这些组件添加到您的应用程序中。
Primefaces消息基本信息
消息是标准JSF消息组件的预先皮肤扩展的版本。
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 |
Primefaces消息属性
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. |
Primefaces消息入门
通常,要将消息添加到应用程序中,您需要将FacesMessage实例添加到您自己的FacesContext实例中,然后在RenderResponse阶段进行渲染。
其中许多消息是手动添加的,而其他消息是通过jsf实现添加的。
当您进行验证和转换时,会显示很多实际上不属于您代码的消息。
以下示例显示了一个简单的验证过程示例,该示例会生成错误消息,该错误消息在提交表单时会显示出来,而无需填写所需的输入。
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.theitroad; 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 ""; } }
以下是上述代码的详细说明:
呈现的消息不是您的代码的一部分,而是由jsf实现通过执行ProcessValidation阶段排队的。
RenderResponse阶段负责获取显示的消息。
排队消息需要通过jsf生命周期。
正常启动jsf生命周期可通过激活操作来完成。为了确保需要某些输入,必须将必填属性设置为true。
如果缺少某些组件,ProcessValidation将查看您所需的组件和排队消息。消息组件,主要用于将特定组件与消息相关联。
通常,此消息将始终用于显示伴随组件的所有消息。消息及其相关组件之间的关联通过提供属性来实现。
Primefaces消息显示模式
消息组件具有三种不同的显示模式:
文本:仅显示消息文本。
图标:仅显示消息严重性,并且显示消息文本作为工具提示。
两者(默认):同时显示图标和文本。
让我们更改前面介绍的相同示例,以控制将使用的显示模式。
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>
Primefaces消息基本信息
消息是标准JSF消息组件的预先皮肤扩展版本。
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 |
Primefaces消息属性
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. |
Primefaces消息入门
在使用p:messages时,一定要知道该组件用于显示页面中特定控件不属于的常规消息。
以下示例显示了如何使用p:messages显示常规消息。
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.theitroad; 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 ""; } }
以下是以前发生的情况的详细说明:
消息组件主要用于常规消息覆盖。
您可以通过创建FacesMessage实例来添加消息,该实例由消息的严重性,消息详细信息部分和消息摘要部分组成。
创建完消息后,需要进行显示才能将其添加到FacesContext中。
RenderResponse会将其显示在您的页面中。
严重等级
在上一个示例中,您提供了两条错误严重性消息,这些消息在页面之后而不是页面之后呈现。
重要的是要知道,您可以控制p: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.theitroad; 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 ""; } }
自动更新
如果您浏览了之前提供的所有示例,则必须注意p:commandButton已异步更新了message/messages组件。
您可以避免这种安排,尤其是对于具有分层结构的页面。
让我们有一个包含消息组件的模板页面,该组件将用于处理应用程序抛出的所有常规消息。
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.theitroad; 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 ""; } }
- 开发的命令操作尚未提供更新属性。
即使没有update属性,消息仍会显示,原因是消息组件本身使用了autoUpdate。
定向消息
可以控制显示的消息以使用特定的消息组件进行查看。
我们使用两个不同的消息组件{A和B}和两个不同的输入组件{1和2}。
对于输入数字1,将相对于消息A显示消息,对于2,将使用消息B。
以下示例向您展示了类似用法的影响。
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.theitroad; 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 ""; } }
- 具有目标消息功能要求将消息组件与组件关联以使用属性,并为所有添加到FacesContext中的消息提供clientId。
请注意,jsf实现已为其组件分配了唯一的标识符。
这些标识符采用FormId:componentId的形式。
您可以通过为表单组件提供false的prependId来禁用此标识。
因此,每个组件将仅通过使用其componentId进行实际标识,对于未标识的组件,将使用诸如j_id4之类的随机标识进行标识。
Primefaces Growl基本信息
Growl基于Mac的咆哮通知窗口小部件,用于以重叠显示方式显示FacesMessages,就像消息和消息组件一样。
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 |
Primefaces低吼属性
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. |
Primefaces Growl入门
Growl与之前讨论的消息组件没有什么不同,因此您可以依靠它们来提供可定位的消息和严重性级别选项。
以下示例向您展示了Growl组件的最简单示例。
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.theitroad; 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 ""; } }
Primefaces消息的生命周期
由于每条消息将显示6000毫秒然后隐藏,因此您可以控制Growl消息具有粘性,这意味着它永远不会被自动隐藏。
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>
如果您不想让Growl消息以粘性方式起作用,您还可以通过调整生活属性来控制显示消息的持续时间。
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>
Primefaces咆哮消息定位
您还可以控制Growl消息进入的位置。
默认情况下,Growl位于右上角,可以使用名为ui-growlCSS选择器控制位置。
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>
转义
对于所有Primefaces消息组件(消息,消息和咆哮声),默认情况下它们将转义所有html内容。
如果您需要通过Primefaces消息显示html组件,请将转义设置为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.theitroad; 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","Error Message Displayed")); } return ""; } }
详细和摘要消息部分
邮件部分的显示可以控制,因此您可以选择需要显示的邮件部分。
一旦将消息添加到FacesContext中,所有FacesMessage都包含"摘要"和"细节"部分。
默认情况下,所有Primefaces的消息组件都将呈现摘要部分。
您可以提供showSummary和showDetail来显示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>