Sobreescribir el css de los mensajes Growl

Debido a la pila de CSS incluida en Fundeweb 2, los estilo se sobreescriben unos a otros prevaleciendo algunos estilos bootstrap sobre los estilos primefaces.

Esto causaba que el componente growl se mostrara siempre de color azul, lo que, en la plantilla Fundeweb se ajustó al rojo corporativo. No obstante para todos los tipos de mensajes el color siempre era el mismo, por lo que en determinadas aplicaciones surgió la necesidad de mostrar el color del mensaje diferente según el tipo que fuerda (info, warn, error).

Esta wiki explica los cambios que hay que realizar en nuestro proyecto para que podamos modificar los estilos de los diferentes tipos de mensajes a nuestro gusto.

En primper lugar deberemos comprobar que la versión del parent en el pom.xml principal de nuestro proyecto es la 2.0.20 o superior. Una vez comprobado, esto deberemos ir al final del fichero al apartado <properties> y añadir:

<primefaces.version>[6.0,6.1]</primefaces.version>

En caso de no existir el apartado <properties> lo creamos al final, pero dentro de la etiqueta <project>

Tras realizar este cambio hacemos Maven>Update project y se descargarán las nuevas librerías primefaces.

Una vez hecho esto, en nuestro fichero de css, normalmente theme.css salvo que hayamos añadido uno nuestro. Podemos editar los estilos que primefaces añade a cada tipo de diálogo. Para ello deberemos insertar y adaptar al estilo que queremos mostrar el siguiente código:

.ui-growl-info{
	/*Estilo visual de mensajes INFO*/
       background:green !important;
}
 
.ui-growl-warn{
	/*Estilo visual de mensajes WARING*/
	background:yellow !important;
}
 
.ui-growl-error{
	/*Estilo visual de mensajes ERROR*/
	background:red !important;
}

En el ejemplo anterior podemos observar que se hace uso de !important, eso es necesario en algunas de las propiedades para que sobrescriba el valor que pone por defecto boostrap.

Una vez hechos estos cambios nuestros mensajes growl tendrán el estilo que hayamos indicado.

Para las aplicaciones con una versión de primefaces anterior a la versión 6 debemos realizar el cambio de estilo de una manera más manual ya que primefaces no introduce una clase al componente growl según el tipo de mensaje.

En este caso, cada vez que pulsemos un botón o link que lance un mensaje de validación, deberemos asignarle manualmente el estilo que queremos al componente growl.

En primer lugar, modificaremos nuestro css para que incluya los estilos visuales según el tipo de mensaje

.g-fatal {
	background-color: black !important;
}
 
.g-error {
	background-color: red !important;
}
 
.g-warn {
	background-color: orange !important;
}
 
.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;
}

Una vez añadido nuestro css, modificamos nuestro fichero template.xhtml añadiendo el siguiente código javascript, que será el encargado de añadir el estilo correspondiente según el mensaje que se lance. Este código lo añadimos a continuación de la línea <ui:insert name=“footer-js” />

      <script>
	   function etiquetaGrowl() { 
	      $(".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>

Si miramos detenidamente el código anterior, podemos ver que lo que hacemos es buscar el tipo de imagen que muestra el componente growl y en base a ese tipo asignarle uno u otro estilo. Esta imagen, en primefaces 5 o anterior, es el único elemento que nos indica el tipo de mensaje que es.

Por último, tenemos que lanzar este código javascript cada vez que pulsemos el botón correspondiente, para ello en el método oncomplete de dichos botones haremos la llamada:

   <p:commandButton action="#{manejador.mostrarError}" oncomplete="etiquetaGrowl();">Error</p:commandButton>

En caso de que queramos mostrar un mensaje al pasar de una pantalla a otra no podremos hacer uso del oncomplete. En su lugar, debermos poner un script al inicio de la pantalla que llame al método etiquetaGrowl().

Ese script debe lanzarse en el evento jquery window.load.

$( window ).load(function() {
  etiquetaGrowl();
});