PrimeFaces消息与Growl组件详解:实用示例与最佳实践
这是文章《PrimeFaces消息、信息和增长组件示例》的第1部分(共7部分)。
消息通常用于通知、告知用户以及让用户了解他们所完成的操作。消息组件主要用于显示信息、错误、警告等内容。像PrimeFaces这样的JSF实现提供了不同类型的组件来执行此操作。Messages、Messages和Growl是专门用于此目的的组件。本教程将帮助您将这些组件集成到您的应用程序中。
PrimeFaces 消息组件基本信息
标签 | message |
---|---|
组件类 | org.primefaces.component.message.Message |
组件类型 | org.primefaces.component.Message |
组件族 | org.primefaces.component |
渲染器类型 | org.primefaces.component.MessageRenderer |
渲染器类 | org.primefaces.component.message.MessageRenderer |
PrimeFaces 消息组件属性
名称 | 默认值 | 类型 | 描述 |
---|---|---|---|
id | null | String | 组件的唯一标识符。 |
rendered | true | Boolean | 指定是否渲染组件的布尔值,设置为false时将不渲染组件。 |
binding | null | Object | 映射到支持Bean中服务器端UIComponent实例的EL表达式。 |
showSummary | false | Boolean | 指定是否显示FacesMessage的摘要。 |
showDetail | true | Boolean | 指定是否显示FacesMessage的详细信息。 |
for | null | String | 要显示其消息的组件的ID。 |
redisplay | true | Boolean | 定义是否应显示已渲染的消息。 |
display | both | String | 定义显示模式。 |
escape | true | Boolean | 定义是否转义HTML。 |
severity | null | String | 仅显示的严重性逗号分隔列表。 |
style | null | String | 组件的内联样式。 |
styleClass | null | String | 组件的样式类。 |
开始使用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.Olivia;
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生命周期的正常启动是通过激活操作完成的。
- 为确保某些输入是必需的,必须将required属性设置为true。ProcessValidation将检查您的必需组件,并在缺少某些组件时排队消息。
- Message组件主要用于将特定组件与消息关联。通常,此消息将始终用于显示伴随组件的所有消息。
- 消息与其相关组件之间的关联通过提供for属性实现。
PrimeFaces信息显示模式
这是文章《Primefaces消息、消息和增长组件示例》的第2部分(共7部分)。
内容片段: 消息组件有三种不同的显示模式。
- text:仅显示消息文本。
- icon:仅显示消息严重性图标,消息文本以工具提示形式可见。
- both(默认):同时显示图标和文本。
让我们将之前介绍的相同示例改为自行控制使用哪种显示模式。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="输入您的消息是必填项:"></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="执行JSF生命周期 - 调用操作" action="#{messageManagedBean.doSomeAction}" update="input message"></p:commandButton>
</h:form>
</html>
Primefaces 消息基本信息
Messages 是标准 JSF messages 组件的预定义扩展版本。
标签 | messages |
---|---|
组件类 | org.primefaces.component.messages.Messages |
组件类型 | org.primefaces.component.Messages |
组件族 | org.primefaces.component |
渲染器类型 | org.primefaces.component.MessagesRenderer |
渲染器类 | org.primefaces.component.messages.MessagesRenderer |
Primefaces 的消息属性
名称 | 默认值 | 类型 | 描述 |
---|---|---|---|
id | null | String | 组件的唯一标识符。 |
rendered | true | Boolean | 布尔值,用于指定组件是否渲染,设置为false时组件将不会被渲染。 |
binding | null | Object | 一个映射到支持Bean中服务器端UIComponent实例的EL表达式。 |
showSummary | true | Boolean | 指定是否显示FacesMessages的摘要信息。 |
showDetail | false | Boolean | 指定是否显示FacesMessages的详细信息。 |
globalOnly | false | String | 当为true时,仅显示没有clientIds的facesmessages。 |
redisplay | true | Boolean | 定义是否应显示已渲染的消息。 |
autoUpdate | false | Boolean | 设置为true时启用自动更新模式。 |
for | null | String | 关联键的名称,与globalOnly一起使用时优先。 |
escape | true | Boolean | 定义是否对HTML进行转义。 |
severity | null | String | 逗号分隔的严重性列表,仅显示指定严重性的消息。 |
closable | false | Boolean | 添加关闭图标以隐藏消息。 |
style | null | String | 组件的内联样式。 |
styleClass | null | String | 组件的样式类。 |
showIcon | true | Boolean | 定义是否显示严重性图标。 |
开始使用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.Olivia;
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 "";
}
}
示例解释
以下是之前示例的详细解释:
- Messages组件主要用于显示一般消息。
- 您可以通过创建FacesMessage实例来添加消息,该实例由消息严重级别、消息详细部分和消息摘要部分组成。创建消息后,需要将其添加到FacesContext中才能显示。RenderResponse阶段会将其呈现在页面上。
消息严重程度
在之前的示例中,您提供了两个具有错误严重程度的消息,这些消息会在页面上呈现出来。重要的是要知道,您可以控制p:messages组件显示哪种类型的消息。通过提供以逗号分隔的info、warn、error、fatal值的severity属性,您可以控制显示哪些消息。
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.Olivia;
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 "";
}
}
自动更新功能
这是文章《Primefaces消息、消息和增长组件示例》的第4部分(共7部分)。
内容片段: 如果您在之前探索了所有提供的示例,您一定会注意到p:commandButton已经异步更新了message/messages组件。您可以避免这样的安排,特别是对于具有分层结构的页面。让我们创建一个包含一个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.Olivia;
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属性。即使没有update属性,消息仍然能够显示,这是因为messages组件本身使用了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.Olivia;
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 "";
}
}
- 使用目标消息功能需要将您的消息组件通过for属性与特定组件关联,并为所有添加到FacesContext中的消息提供clientId。
请注意,JSF实现已经为其组件分配了唯一标识符。这些标识符采用FormId:componentId的形式。您可以通过将form组件的prependId设置为false来禁用此前缀。因此,每个组件实际上只使用其componentId来标识。对于那些未明确标识的组件,它们将使用随机标识(如j_id4)来标识。
Primefaces Growl组件基础信息界面
Growl是基于Mac的growl通知小部件开发的,用于在叠加层中显示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 Growl特性
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 GrowlGrowl组件与之前讨论的消息组件没有太大的区别,因此您可以依赖它们来提供“可定位的消息”和“严重级别”选项。以下示例向您展示了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>
消息ManagedBean.java
package com.Olivia;
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消息的寿命
PrimeFaces消息组件高级配置示例
这是文章《PrimeFaces消息、消息和Growl组件示例》的第6部分(共7部分)。
控制消息显示时间
每条消息默认将会显示6000毫秒(6秒)后自动隐藏。您可以通过设置sticky
属性为true
来控制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">
<!-- 设置sticky="true"使消息保持粘性,不会自动隐藏 -->
<p:growl id="message" sticky="true"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
除了设置粘性消息外,您还可以通过调整life
属性来精确控制Growl消息的显示时间。life
属性值以毫秒为单位,定义了消息在页面上显示的持续时间。以下是index8.xhtml的代码示例,其中消息显示时间设置为2000毫秒(2秒):
<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">
<!-- 设置life="2000"使消息显示2秒后自动隐藏 -->
<p:growl id="message" life="2000"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
PrimeFaces增强的消息定位功能
您还可以自定义控制Growl消息在页面上的显示位置。默认情况下,Growl消息会显示在页面右上角,但您可以通过修改名为ui-growl
的CSS选择器来调整其位置。以下是index9.xhtml的代码示例,展示了如何将Growl消息定位到距离左侧700px的位置:
<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>
/* 通过CSS自定义Growl消息的位置 */
.ui-growl {
left:700px;
}
</style>
</h:head>
<h:form id="form">
<p:growl id="message"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
PrimeFaces消息组件的HTML转义功能
关于PrimeFaces消息组件(包括messages、messageList和growl),默认情况下,它们会自动转义所有的HTML内容以防止XSS攻击。如果您需要在消息中显示HTML格式的内容,可以将escape
属性设置为false
。请注意,这样做可能会带来安全风险,应确保HTML内容是可信的。以下是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">
<!-- 设置escape="false"允许在消息中显示HTML内容 -->
<p:messages id="message" escape="false"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
MessageManagedBean.java
package com.Olivia;
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("")){
// 当输入为空时,添加包含HTML格式的错误消息
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, "<i>错误消息已显示</i>","<i>错误消息已显示</i>"));
}
return "";
}
}
消息详情和摘要部分
在PrimeFaces消息组件中,每条消息通常包含摘要(summary)和详情(detail)两部分。摘要通常用于显示简短的信息标题,而详情则用于提供更完整的描述。在MessageManagedBean.java中,我们创建了一个简单的示例,展示了如何在用户输入为空时显示错误消息。通过设置escape="false"
,消息中包含的HTML标签(如<i>
)会被正确渲染,而不是作为纯文本显示。
这是文章《Primefaces消息、消息和增长组件示例》的第7部分(共7部分)。
显示消息的部分可以被控制,所以你可以选择需要显示的消息部分。所有的FacesMessage包含了Summary(摘要)和Detail(详情)部分,一旦消息被添加到FacesContext中就会提供这两个部分。Primefaces的所有消息组件默认渲染Summary(摘要)部分。你可以通过提供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>
Primefaces 提示信息增长汇总消息在广泛发布的各种应用程序中被广泛使用。Primefaces为您提供了多种组件,可用于在应用程序中进行信息通知和显示信息文本。通过在下方留言并查找源代码来为我们做出贡献。
下载PrimeFaces Messages项目。
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 GrowlGrowl组件与之前讨论的消息组件没有太大的区别,因此您可以依赖它们来提供“可定位的消息”和“严重级别”选项。以下示例向您展示了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>
<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>
消息ManagedBean.java
package com.Olivia;
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消息的寿命
PrimeFaces消息组件高级配置示例
这是文章《PrimeFaces消息、消息和Growl组件示例》的第6部分(共7部分)。
控制消息显示时间
每条消息默认将会显示6000毫秒(6秒)后自动隐藏。您可以通过设置sticky
属性为true
来控制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">
<!-- 设置sticky="true"使消息保持粘性,不会自动隐藏 -->
<p:growl id="message" sticky="true"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
除了设置粘性消息外,您还可以通过调整life
属性来精确控制Growl消息的显示时间。life
属性值以毫秒为单位,定义了消息在页面上显示的持续时间。以下是index8.xhtml的代码示例,其中消息显示时间设置为2000毫秒(2秒):
<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">
<!-- 设置life="2000"使消息显示2秒后自动隐藏 -->
<p:growl id="message" life="2000"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
PrimeFaces增强的消息定位功能
您还可以自定义控制Growl消息在页面上的显示位置。默认情况下,Growl消息会显示在页面右上角,但您可以通过修改名为ui-growl
的CSS选择器来调整其位置。以下是index9.xhtml的代码示例,展示了如何将Growl消息定位到距离左侧700px的位置:
<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>
/* 通过CSS自定义Growl消息的位置 */
.ui-growl {
left:700px;
}
</style>
</h:head>
<h:form id="form">
<p:growl id="message"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
PrimeFaces消息组件的HTML转义功能
关于PrimeFaces消息组件(包括messages、messageList和growl),默认情况下,它们会自动转义所有的HTML内容以防止XSS攻击。如果您需要在消息中显示HTML格式的内容,可以将escape
属性设置为false
。请注意,这样做可能会带来安全风险,应确保HTML内容是可信的。以下是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">
<!-- 设置escape="false"允许在消息中显示HTML内容 -->
<p:messages id="message" escape="false"/>
<p:outputPanel>
<p:outputLabel value="输入您喜欢的技术网站"></p:outputLabel>
</p:outputPanel>
<h:inputText id="input" value="#{messageManagedBean.message}"/>
<p:commandButton value="执行JSF生命周期 - 调用动作一"
action="#{messageManagedBean.doSomeAction}" update="message"></p:commandButton>
</h:form>
</html>
MessageManagedBean.java
package com.Olivia;
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("")){
// 当输入为空时,添加包含HTML格式的错误消息
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, "<i>错误消息已显示</i>","<i>错误消息已显示</i>"));
}
return "";
}
}
消息详情和摘要部分
在PrimeFaces消息组件中,每条消息通常包含摘要(summary)和详情(detail)两部分。摘要通常用于显示简短的信息标题,而详情则用于提供更完整的描述。在MessageManagedBean.java中,我们创建了一个简单的示例,展示了如何在用户输入为空时显示错误消息。通过设置escape="false"
,消息中包含的HTML标签(如<i>
)会被正确渲染,而不是作为纯文本显示。
这是文章《Primefaces消息、消息和增长组件示例》的第7部分(共7部分)。
显示消息的部分可以被控制,所以你可以选择需要显示的消息部分。所有的FacesMessage包含了Summary(摘要)和Detail(详情)部分,一旦消息被添加到FacesContext中就会提供这两个部分。Primefaces的所有消息组件默认渲染Summary(摘要)部分。你可以通过提供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>
Primefaces 提示信息增长汇总消息在广泛发布的各种应用程序中被广泛使用。Primefaces为您提供了多种组件,可用于在应用程序中进行信息通知和显示信息文本。通过在下方留言并查找源代码来为我们做出贡献。
下载PrimeFaces Messages项目。