JSF h:outputStylesheet se utiliza para generar un elemento link de tipo ‘text/css‘ con la finalidad de referenciar a una hoja de estilo CSS y así poder aplicar estos estilos en las páginas de nuestra aplicación. Debe utilizarse dentro de un <h:head>:
<h:head>
<h:outputStylesheet library="css" name="styles.css" />
</h:head>
El código HTML generado es el siguiente:
<head id="j_idt2">
<link type="text/css" rel="stylesheet" href="/jsf-outputstylesheet/javax.faces.resource/styles.css.jsf?ln=css">
</head>
Librerías de recursos
En JSF 2 ubicamos los recursos web utilizados por nuestras páginas bajo la carpeta webapp/resources. A su vez, dentro de esta carpeta organizamos los recursos por tipo en subcarpetas, cada una de las cuales se considera una ‘librería’. Por lo tanto, dentro de la carpeta webapp/resources podemos tener las siguientes subcarpetas o ‘librerías’:
- /css
- /img
- /js
Y dentro de estas últimas ubicaremos las hojas de estilo, imágenes y archivos Javascript. Luego, desde la página se hará referencia a la librería correspondiente con el atributo ‘library’. Como es posible (y frecuente) tener más de un recurso dentro de la misma librería, usamos el atributo ‘name’ para especificar el nombre del archivo CSS.
En la siguiente imagen se muestra la estructura del proyecto que utilizamos para este ejemplo, y la ubicación de la hoja de estilo importada con el componente JSF outputStylesheet.
Conclusión
En este artículo estudiamos la forma de incluir hojas de estilo CSS a nuestro proyecto JavaServer Faces. También explicamos la forma de utilizar las librerías de recursos, que nos permiten organizar las hojas de estilo, imágenes y archivos de Javascript de una forma estandarizada y simplificando su acceso desde las páginas.
Los componentes h:outputScript y h:graphicImage también hacen uso de las librerías de recursos como se ha explicado en el presente artículo.
Te puede interesar
JSF outputScript
JSF outputScript se utiliza para generar un elemento script de tipo ‘text/javascript’. En este artículo se explica su utilización.
Arquitectura y Ciclo de Vida
Cómo funciona el ciclo de vida de una aplicación JSF. En el artículo relacionado se cubre el manejo de eventos.
