PrimeFaces growl 动态改变颜色

Question

有没有办法动态更改 PrimeFaces growl 组件的背景颜色？当是错误提示时，我想显示红色背景；当是成功提示时，我想显示绿色背景。

提前感谢。

- Daniel Rojas

---

根据FacesMessage.SEVERITY，我认为它已经执行了。 - Leo

严重程度只会改变图标。 - Daniel Rojas

你是对的。我在想p:messages，而不是p:growl。 - Leo

Answer 1

上述解决方案仅适用于每次向上下文添加一个消息的情况。如果添加多个消息，则所有 growl 项将由最后一个消息的严重性着色。有关此问题的更多详细信息，请单击下面的链接。

（土耳其内容，您可能需要翻译）
动态更改 PrimeFaces growl 背景颜色 为了解决这个问题，您应该通过图标样式找到 growl 项（PrimeFaces 只为不同的严重级别更改 growl 图标），并添加自定义样式表类到 growl 图标 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();"/>

结果是:)

项目源代码

希望这能帮到任何人。

- ngc4151

Answer 2

<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> 

这是一组代码，用于演示。

- wittakarn

---

非常感谢！功能非常棒！！！ 如果这能够原生地从primefaces运行，那就太棒了，但是这个解决方案也很好。 - Daniel Rojas

可以通过在Growl上使用severity属性来本地支持它。 <p:growl severity="info">... 或者多个。只需查看文档即可。 - Kukeltje

如果您向上下文中添加多个消息，比如2个（第一个的严重程度为信息，第二个的严重程度为危险），所有的growl元素都将相同（由最后一个消息的严重程度着色-以我们的例子来说是危险）。因此，上述解决方案是不正确的！请查看我的答案... - ngc4151

Answer 3

您可以通过在growl上使用severity属性来实现此操作。

<p:growl id="myInfo" severity="info"/>
<p:growl id="myError" severity="error"/>

#myinfo {
    background-color: blue;
}
#myerror {
    background-color: red;
}

但是如果你只想为其中的文本添加样式，可以使用一个growl和css兄弟选择器来实现。

但是基于styleClass添加样式，则需要进行其他操作。

- Kukeltje

Answer 4

对于那些仍然遇到问题，需要快速简单的解决方法，我通过使用以下代码更改背景颜色来解决了它（我使用的是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);

这不是最好的解决方案，但以上所有方案都无法解决问题，对我来说这已经足够好了。

- Jacques-A Portal

---

如果其他方法都不起作用，那么你可能有一些额外的代码搞砸了事情，需要进行修正...非常奇怪。 - Kukeltje

Answer 5

你应该尝试添加你想要的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}"/>

希望这可以帮到你。

- wittakarn

---

非常感谢您的回答。我不理解的部分是： div[id="forma:growl-success_container"] 。这个 forma 到底是什么？我应该写什么代替它？ - Daniel Rojas

表单（The forma）是一个包含p:growl的表单。因此，forma:growl-success_container是growl组件的ID，您可以使用查看页面源代码来获取正确的ID。 - wittakarn

非常感谢您的帮助。我认为我的 growl id 是动态生成的。我认为它是这个：j_idt80:messages_container。但我担心 j_idt80 是动态生成的。 - Daniel Rojas

如果您指定了覆盖p:growl的组件(h:form) id，则不会生成j_idt80。 - wittakarn

Answer 6

今天我和同事花了三个小时试图弄清楚为什么其他答案在这里不起作用。结果我们的系统需要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实例化了一个growl消息：

public void methodC() {
    String x = "message goes here";
    FacesContext context = FacesContext.getCurrentInstance();
    context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Success", x));
}

显然，你可以通过修改以下代码中的严重程度来改变颜色。 JS通过将CSS类应用于正确的growl消息对象来修改growl消息。

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();");
}

- inappropriateCode