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>

