PrimeFaces growl динамически меняет цвет

Question

Есть ли способ динамически менять фон элементарного компонента PrimeFaces? Я хочу, чтобы показать красный фон, когда это ошибка, и зеленый фон, когда это успех.

Заранее спасибо.

Answer 1

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

Вы должны попытаться добавить 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 3

Вы можете сделать это с помощью серьезности атрибута на рычание

<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

Вышеупомянутое решение работает только в том случае, если вы добавляете только одно сообщение в контекст. Если вы добавите несколько сообщений, все элементы рычания будут окрашены по серьезности последнего сообщения. Следуйте приведенной ниже ссылке для получения более подробной информации о проблеме.

(Турецкое содержанию, возможно, потребуется, чтобы перевести его)
Change PrimeFaces growl background color dynamically

Для того, чтобы решить эту проблему, вы должны найти элементы Рыка стиля иконок (PrimeFaces изменение только Growl иконку для различных уровней серьезности) и добавить пользовательский класс стилей для grand-parent элемента 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();"/> 

И результат :)

Source Code of the Project

Надеется, что это помогает никому.

Answer 5

Я провел три часа сегодня с коллегой, пытающимся выяснить, почему другие ответы здесь не работают. Оказывается, нашей системе нужен 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();" /> 

methodC на подложку Java Bean конкретизирует сообщение рычание:

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

Это самый простой и надежный способ сделать это, я думаю.

EDIT: Иногда oncomplete не работает, например, если для ajax установлено значение false. То, что кажется лучшим решением для всех случаев, НЕ является вызовом JS через JSF. Вместо этого добавьте следующую строку кода сразу после создания сообщения в бэк-боба:

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

Answer 6

Для тех, кто все еще есть проблемы, и нужно быстро легко исправить, как я решил, что это за счет изменения фона цвет используя следующий код (я использовал угловой и 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); 

это не лучшее решение, но ни один из них не выше работали, и это достаточно хорошо для меня.