A partir de la versión JSF 2.0, los recursos pueden ubicarse en un subdirectorio bajo una carpeta llamada
resources (así, tal cual el nombre) que debería estar dentro de la raíz del módulo web (donde están todos los archivos web) o bajo META-INF. Por convención, los componentes de JSF reconoce uno de estas dos ubicaciones.Los nombres de los directorios de los recursos serán los mismos que se declaren en el atributo
library de los componentes JSF.Por ejemplo, para nuestros archivos .css lo guardaremos dentro de la carpeta
/resources/css/, lo invocaremos con el tag<h:outputStylesheet library="css" name="style.css"/>
Para los javascript que están dentro de la carpeta
js, lo invocamos así:<h:outputScript library="js" name="jquery-2.1.1.min.js"/>
Las imágenes, si están dentro de la carpeta
images se invocaría así:<h:graphicImage library="images" name="la_tierra.jpg"/>
Finalmente, tendríamos la siguiente estructura
y el código completo sería este:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Recursos en JSF</title>
<h:outputStylesheet library="css" name="style.css"/>
<h:outputScript library="js" name="jquery-2.1.1.min.js"/>
</h:head>
<h:body>
<h:outputText id="info" styleClass="info" value="Esto es un mensaje de información" />
<h:graphicImage library="images" name="la_tierra.jpg"/>
<script>
$("#info").hover(function(){
$(this).fadeOut("slow");
$(this).fadeIn("slow");
})
</script>
</h:body>
</html>
Código fuente
El código para explorar lo pueden encontrar aquí:https://bitbucket.org/apuntesdejava/tutorial-jsf/src/tip/jsf-06-recursos/
Y para descargar, aqui:
https://java.net/projects/apuntes/downloads/download/web/Tutorial%20JSF%202.2/jsf-06-recursos.tar.gz
¡Bendiciones a todos!