Question

有没有办法动态更改PrimeFaces咆哮组件的背景？我希望能够在出现错误时显示红色背景，并在成功时显示绿色背景。

提前致谢。

Answer 1

上述解决方案仅在您一次只向上下文添加一条消息时才有效。如果您添加多条消息，则所有咆哮项目将按照上一条消息的严重性进行着色。请点击以下链接，了解有关该问题的详细信息。

（土耳其语内容，您可能需要翻译）
Change PrimeFaces growl background color dynamically

为了解决这个问题，您应该按图标样式找到growl项目（PrimeFaces仅更改不同严重性级别的growl图标），并将自定义样式表类添加到growl图标的html元素的grand-parent为了达到不同的背景色。

首先定义下面的脚本（将自定义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();"/>

结果是：）

Source Code of the Project

希望这有助于任何人。

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>

这是用于演示的代码组。

Answer 3

您可以使用growl

上的severity属性来执行此操作

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

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

但是添加了基于

的styleClass

但是，如果您只想在其中设置文字样式，则可以使用一个咆哮和use css sibbling selectors

Answer 4

For those who still have the problem, and need a quick easy fix, the way I solved it was by changing the background color using the following code (I used angular and 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);

It is not the best solution, but none of the above ones worked, and it is good enough for me.

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}"/>

希望得到这个帮助。

Answer 6

今天我和一位同事一起花了三个小时试图弄清楚为什么其他答案不起作用。结果我们的系统需要HTML文件来包含来自外部文件的CSS和JS。没有标签！所以这对我们有用。对于我们的项目，我们有一个名为＆＃34; css＆＃34;的文件夹。和一个名为＆＃34; js＆＃34;的文件夹在主目录中。

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

PrimeFaces咆哮动态变色

6 个答案: