miércoles, 25 de junio de 2014

Tutorial JSF 2.2 - Sesión 6: Recursos

Tutorial JSF 2.2 - Sesión 6: Recursos
En JSF se pueden incluir recursos tales como hojas de estilos (CSS), javascript e imágenes que queramos usar en nuestra web, pero de una manera ordenada. En este post veremos cómo lo hace.

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!