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!

Comentarios

  1. ¡Grandioso apunte vaya que era justo lo que necesitaba!

    ResponderBorrar
    Respuestas
    1. Qué buen que te haya servido!, a pesar que lo escribí hace años 🎉👍Cualquier cosa, estamos en contacto

      Borrar

Publicar un comentario

Si quieres hacer una pregunta más específica, hazla en los foros que tenemos habilitados en Google Groups


Ah! solo se permiten comentarios de usuarios registrados. Si tienes OpenID, bienvenido! Puedes obtener su OpenID, aquí: http://openid.net/

Entradas más populares de este blog

Groovy: Un lenguaje dinámico y ágil para la Plataforma Java

Cambiar ícono a un JFrame

UML en NetBeans