showcase - Gruñido de PrimeFaces cambia de color dinámicamente

primefaces validation

Question

¿Hay alguna manera de cambiar dinámicamente el fondo del componente gruñido PrimeFaces? Quiero poder mostrar un fondo rojo cuando es un error y un fondo verde cuando es un éxito.

Gracias por adelantado.

Answer 1

Debería intentar agregar CSS que desee.

<style>
        div[id="forma:growl-error_container"] > div {
            background-color: red !important;
        }
        div[id="forma:growl-success_container"] > div{
            background-color: green !important;
        }
</style>

Después de eso, usar EL para intercambiar entre el éxito y el error.

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

Espero que esto ayude.

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> 

Este es un grupo de código que se usa para demostrar.

Answer 3

Puedes hacer esto usando el atributo de severidad en el gruñido

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

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

Pero agregando un styleClass basado en

Pero si solo quieres darle un estilo al texto, puedes usar un gruñido y usar los selectores de sss css

Answer 4

La solución anterior solo funciona si agrega solo un mensaje a la vez al contexto. Si agrega más de un mensaje, todos los elementos gruñidos estarán coloreados por la gravedad del último mensaje. Siga el enlace a continuación para obtener más detalles sobre el problema.

(Contenido turco, puede necesitar traducirlo)
Cambiar el color de fondo del gruñido de PrimeFaces dinámicamente

Para resolver este problema, debe encontrar elementos gruñidos por estilo de icono (PrimeFaces cambia solo los iconos gruñidos para diferentes niveles de gravedad) y agregar una clase de hoja de estilo personalizada al abuelo principal del elemento html del icono gruñido para lograr diferentes colores de fondo .

Primero defina el script a continuación (que agrega clases CSS personalizadas a los abuelos):

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

y agrega la siguiente definición de estilo a tu página:

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

Y finalmente, conecte el método init() al elemento que agrega mensajes al contexto.

<p:commandButton value="Show" actionListener="#{someBean.someMethod}" oncomplete="init();"/>

Y el resultado es :)

Código fuente del proyecto

Espero que esto ayude a cualquiera.

Answer 5

Pasé tres horas hoy con un colega tratando de descubrir por qué las otras respuestas aquí no estaban funcionando. Resulta que nuestro sistema necesitaba el archivo HTML para incluir CSS y JS desde un archivo externo. ¡No con etiquetas! Así que esto es lo que funcionó para nosotros. Para nuestro proyecto, tenemos una carpeta llamada "css" y una carpeta llamada "js" en el directorio principal.

A continuación se muestra el código relevante para el cuerpo 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 en el bean Java de respaldo crea un mensaje gruñido:

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

Obviamente, puede cambiar la gravedad que cambiará el color dado el siguiente código. El mensaje growl es modificado por el JS aplicando una clase CSS al objeto de mensaje gruñido correcto.

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

Esa es la forma más simple y robusta de hacerlo, creo.

EDITAR: Algunas veces, completar incompleto no funciona, por ejemplo, si ajax se establece en falso. Lo que parece ser la mejor solución para todos los casos NO es llamar a JS a través de JSF. En su lugar, agregue esta línea de código inmediatamente después de crear el mensaje en el bean de respaldo:

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

Para aquellos que todavía tienen el problema, y ​​necesitan una solución rápida y fácil, la forma en que lo resolví fue cambiando el color de fondo usando el siguiente código (utilicé angular y 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);

No es la mejor solución, pero ninguno de los anteriores funcionó, y es lo suficientemente bueno para mí.