Incluir una hoja de estilos CSS en JSF, propiedad background

 Antecedente

Es de conocimiento para los desarrolladores que trabajan bajo el ambiente Web, que como buena práctica se debe incluir una hoja de estilos CSS en el proyecto en lugar de especificar los estilos en cada página html, Este archivo CSS contendrá todos los estilos que deseamos dar a nuestras páginas. Esto debido a que el mantenimiento, con esta práctica, se vuelve una tarea más fácil, sino imagínense que tengamos cien páginas html, y al título de estas le damos un estilo en común (Tipo de letra negrita y tamaño 15px), Con el pasar del tiempo, el cliente desea cambiar este estilo (Tipo de letra negrita y Arial y tamaño 20px), entonces bajo es nuevo requerimiento lo tendríamos que hacer en los cien archivos html; Si trabajamos con la practica mencionada anteriormente, este estilo lo definimos en una hoja de estilos CSS y lo referenciamos a cada una de las cien página html; con el nuevo requerimiento del cliente, el estilo se modificava unicamente en la hoja de estilos CSS, y con la referencia que tiene cada página html a este estilo, el cambio sería inmediato en las cien páginas html, ahorrándonos así un valioso tiempo que lo pudiéramos ocupar en otra tarea.

Problema

Alguna vez les ha ocurrido que si en una hoja de estilos CSS, se define un estilo que en la propiedad background tiene la referencia a una imagen que está incluida en nuestro proyecto JSF; y que al momento de desplegar nuestro proyecto, las páginas que tienen  la referencia a este estilo no muestran la imagen; entonces revisamos nuestra hoja de estilos CSS y verificamos si realizamos correctamente la referencia a la imagen en la propiedad background, una vez revisada la línea, vemos que la referencia a la imagen es correcta. Ahí es cuando nos preguntamos: ¿Qué pasa? ¿Por qué no se muestra la imagen?, y por más que le damos vueltas no encontramos la solución, y pasamos mucho tiempo con este problema...

Solución

Primeramente voy hacer referencia a la propiedad background de un estilo CSS y como se debe escribir la sentencia dentro de la hoja de estilos CSS.

La propiedad background establece algunas o todas las propiedades del color y/o imagen de fondo de un elemento.

La sentencia para especificar que la propiedad background haga referencia a una imagen que esta dentro de nuestro proyecto JSF es:
background: url("Ruta/imagen.extención");

Es decir, si en nuestro proyecto JSF tenemos una estructura así:

 La sentencia del estilo sería:
background: url("../images/banner.jpg");

Ahora bien, es hora de hacer referencia, en nuestra página JSF (index.xhtml), a la hoja de estilos CSS que está en nuestro proyecto; para esto, en html existe la sentencia:

<link href="Ruta/Archivo.css" rel="stylesheet" type="text/css" />

Y bajo la estructura que tiene nuestro proyecto JSF, la línea sería:

<link href="/resources/css/default.css" rel="stylesheet" type="text/css" />

Pero con esto no es suficiente, ya que al desplegar nuestro proyecto no se mostraría la imagen. Comparto la imagen de este caso en particular.

Pero, ¿porqué se da esto?, es algo que todos se preguntarán!
Esto se debe a que cuando se despliega la aplicación JSF, las referencias a los archivos (imágenes, .css, js) no se hacen en referencia a la estructura de archivos que tenemos en nuestro proyecto, si no se resuelven en función de las direcciones web reales que se publican; es decir, el archivo WAR (archivo que contiene todo nuestros archivos del proyecto) es nombrado de diferente manera al ser desplegado en el servidor, y nosotros no tenemos porqué saber  cuál es exactamente el nombre que se extraerá del servidor web.

Para solventar este inconveniente, JSF proporciona la siguiente sentencia que proporciona la ruta real de nuestro proyecto en el servidor web.

#{facesContext.externalContext.requestContextPath}

Y bajo este concepto la referencia a nuestra hoja de estilos CSS en una página JSF sería:

<link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" 
rel="stylesheet" type="text/css" /> 

Al hacer este cambio nuestra página JSF y volver a desplegar nuestra aplicación el resultado sería:

Espero haya sido de utilidad y no olviden dejar sus comentarios, hasta la próxima.