有没有办法动态改变 PrimeFaces 咆哮组件的背景？ 我希望能够在错误时显示红色背景，在成功时显示绿色背景。
提前致谢。
【问题讨论】：
标签： primefaces growl
仅当您一次只向上下文添加一条消息时，上述解决方案才有效。如果您添加多条消息，则所有咆哮项目都将根据最后一条消息的严重性着色。请点击以下链接了解有关此问题的更多详细信息。
（土耳其语内容，可能需要翻译）
Change PrimeFaces growl background color dynamically
为了解决这个问题，你应该通过图标样式找到咆哮项目（PrimeFaces 只更改不同严重级别的咆哮图标）并在咆哮图标的 html 元素的祖父中添加自定义样式表类以实现不同的背景颜色。
首先定义下面的脚本（向祖父母添加自定义 css 类）：
<script>
function init () {
$(".ui-growl-image-info").parent().parent().addClass("g-info");
$(".ui-growl-image-warn").parent().parent().addClass("g-warn");
$(".ui-growl-image-error").parent().parent().addClass("g-error");
$(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}
</script>
并将以下样式定义添加到您的页面：
<style>
div[id="growlForm:growl_container"] > div[class~="g-fatal"] {
background-color: black !important;
}
div[id="growlForm:growl_container"] > div[class~="g-error"] {
background-color: red !important;
}
div[id="growlForm:growl_container"] > div[class~="g-warn"]{
background-color: orange !important;
}
div[id="growlForm:growl_container"] > div[class~="g-info"]{
background-color: green !important;
}
.ui-growl-image-info ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-error ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-warn ~ .ui-growl-message {
color:#fff;
}
.ui-growl-image-fatal ~ .ui-growl-message {
color:#fff;
}
</style>
最后，将init() 方法附加到向上下文添加消息的元素。
<p:commandButton value="Show" actionListener="#{someBean.someMethod}" oncomplete="init();"/>
结果是:)
希望这对任何人都有帮助。
【讨论】：
<style>
div[id="forma:growl-error_container"] > div {
background-color: red !important;
}
div[id="forma:growl-success_container"] > div{
background-color: green !important;
}
</style>
<h:form id="forma">
<p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/>
<p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/>
<p:panel header="Growl">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="msg" value="Message:"/>
<p:inputText id="msg" value="#{growlView.message}" required="true" />
</h:panelGrid>
<p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="@form" />
</p:panel>
</h:form>
这是一组用于演示的代码。
【讨论】：
<p:growl severity="info">... 或多个。只需查看文档
您可以通过使用咆哮的严重性属性来做到这一点
<p:growl id="myInfo" severity="info"/>
<p:growl id="myError" severity="error"/>
#myinfo {
background-color: blue;
}
#myerror {
background-color: red;
}
但是添加一个基于样式的类
但是如果你只是想给里面的文字设置样式，你可以用一个咆哮和use css sibbling selectors
【讨论】：
对于那些仍然有问题并且需要快速简单修复的人，我解决的方法是使用以下代码更改背景颜色（我使用了 angular 和 TS...）：
this.msgs.push({severity:'success', summary:'success', detail:'it worked'});
setTimeout(()=> { document.getElementById('*the ID*').children[0].children[0].setAttribute('style', 'background-color:green');
}, 10);
这不是最好的解决方案，但以上方法都不起作用，对我来说已经足够了。
【讨论】：
你应该尝试添加你想要的 CSS。
<style>
div[id="forma:growl-error_container"] > div {
background-color: red !important;
}
div[id="forma:growl-success_container"] > div{
background-color: green !important;
}
</style>
之后，使用 EL 在成功和错误之间进行交换。
<p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/>
<p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/>
希望对您有所帮助。
【讨论】：
我今天和一位同事花了三个小时试图弄清楚为什么这里的其他答案不起作用。原来我们的系统需要 HTML 文件来包含来自外部文件的 CSS 和 JS。不带标签！所以这对我们有用。对于我们的项目，我们在主目录中有一个名为“css”的文件夹和一个名为“js”的文件夹。
下面是HTML正文的相关代码：
<h:outputStylesheet name="css/styles.css" />
<h:outputScript library="js" name="growlColour.js" />
<p:growl id="growlC" autoUpdate="true" showDetail="true" sticky="true" />
<p:commandButton id="buttonC" action="#{bean.methodC}" oncomplete="growlColour();" />
支持java bean的methodC实例化一个咆哮消息：
public void methodC() {
String x = "message goes here";
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
}
显然，您可以更改严重性，这将根据以下代码更改颜色。咆哮消息由 JS 修改，将 CSS 类应用于正确的咆哮消息对象。
styles.css：
.g-info {
background-color: green;
}
.g-warn {
background-color: red;
}
.g-error {
background-color: red;
}
.g-fatal {
background-color: black;
}
growlColour.js：
function growlColour() {
$(".ui-growl-image-info").parent().parent().addClass("g-info");
$(".ui-growl-image-warn").parent().parent().addClass("g-warn");
$(".ui-growl-image-error").parent().parent().addClass("g-error");
$(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
}
我认为这是最简单、最可靠的方法。
编辑： 有时 oncomplete 不起作用，例如如果 ajax 设置为 false。对于所有情况，似乎最好的解决方案是不要通过 JSF 调用 JS。相反，在支持 bean 中创建消息后立即添加这行代码：
public void methodC() {
String x = "message goes here";
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
RequestContext.getCurrentInstance().execute("growlColour();");
}
【讨论】：