Cómo hacer referencia a CSS / JS / recurso de imagen en Facelets plantilla?

He hecho tutorial acerca de Facelets de plantillas.

Ahora he tratado de crear una página que no está en el mismo directorio de la plantilla. Tengo problemas con el estilo de la página, porque de estilos se hace referencia con la ruta relativa como:

<link rel="stylesheet" href="style_resource_path.css" />

Puedo usar absoluta que hace referencia al empezar con /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

Pero esto me traerá problemas cuando me voy a mover la aplicación a un contexto diferente.

Entonces, me pregunto ¿cuál es la mejor manera de referencia de CSS y JS y de la imagen) de los recursos en Facelets?

OriginalEl autor kravemir | 2011-12-03

3 Kommentare

  1. 98

    Introducción

    La correcta JSF 2.x forma es utilizando <h:outputStylesheet>, <h:outputScript> y <h:graphicImage> con un name referencia la ruta de acceso relativa a la webapp del /resources carpeta. De esta manera usted no necesita preocuparse por el contexto camino, como haría en JSF 1.x. Véase también Cómo incluir CSS en relación a un contexto ruta en JSF 1.x?

    Estructura de carpetas

    Colocar el CSS/JS/archivos de imagen en /resources carpeta del público de contenidos web (crear uno si no que ya existen en el mismo nivel como /WEB-INF y /META-INF).

    WebContent
     |-- META-INF
     |-- WEB-INF
     |-- resources
     |    |-- css
     |    |    |-- other.css
     |    |    `-- style.css
     |    |-- js
     |    |    `-- script.js
     |    `-- images
     |         |-- background.png
     |         |-- favicon.ico
     |         `-- logo.png
     |-- page.xhtml
     :

    En caso de Maven, debe ser en /main/webapp/resources y por lo tanto no /main/resources (los que son para Java recursos (propiedades/xml/texto/archivos de configuración), que debe terminar en la ruta de clases en tiempo de ejecución, no en contenido web). Véase también Maven y JSF webapp estructura, donde exactamente a poner JSF recursos.

    Referencia en Facelets

    En última instancia, los recursos están disponibles a continuación en todas partes sin la necesidad de jugar con las rutas relativas:

    <h:head>
        ...
        <h:outputStylesheet name="css/style.css" />
        <h:outputScript name="js/script.js" />
    </h:head>
    <h:body>
        ...
        <h:graphicImage name="images/logo.png" />
        ...
    </h:body>

    La name atributo debe representar a toda la ruta de acceso relativa a la /resources carpeta. No es necesario empezar con /. Usted no necesidad de la library atributo como el tiempo que no están desarrollando un componente de la biblioteca como PrimeFaces o un módulo común de los archivos JAR que es compartida por varios webapps.

    Puede hacer referencia a la <h:outputStylesheet> en cualquier lugar, también en <ui:define> de la plantilla de los clientes sin la necesidad de un adicional de <h:head>. Es a través de la <h:head> componente de la plantilla maestra automáticamente terminan en genera <head>.

    <ui:define name="...">
        <h:outputStylesheet name="css/style.css" />
        ...
    </ui:define>

    Puede hacer referencia a <h:outputScript> también en cualquier lugar, pero por defecto terminan en el HTML exactamente ahí donde se declaró. Si quieres que terminan en <head> a través de <h:head>, a continuación, añadir target="head" atributo.

    <ui:define name="...">
        <h:outputScript name="js/script.js" target="head" />
        ...
    </ui:define>

    O, si queremos que al final de <body> (justo antes de </body>, de modo que, por ejemplo, window.onload y $(document).ready() etc no es necesario) a través de <h:body>, a continuación, añadir target="body" atributo.

    <ui:define name="...">
        <h:outputScript name="js/script.js" target="body" />
        ...
    </ui:define>

    PrimeFaces HeadRenderer

    En caso de que usted está utilizando PrimeFaces, su HeadRenderer se messup el valor predeterminado <h:head> secuencia de comandos de pedido como se describió anteriormente. Básicamente, esta obligado a la fuerza el orden a través de PrimeFaces específicos <f:facet name="first|middle|last">, que puede terminar en la desordenado y «untemplateable» de código. Puede que desee desactivar como se describe en esta respuesta.

    Envasado en FRASCO de

    Usted puede incluso paquete de los recursos en un archivo JAR. Véase también La estructura de múltiples JSF proyectos con código compartido.

    A que hace referencia en EL

    Puede en EL uso de la #{resource} asignación de dejar JSF básicamente imprimir una dirección URL del recurso como /context/javax.faces.resource/folder/file.ext.xhtml?ln=library de modo que usted podría utilizar como por ejemplo CSS imagen de fondo o favicon. El único requisito es que el archivo CSS en sí debe ser servido como JSF recurso, de lo contrario expresiones EL no evaluar. Véase también Cómo hacer referencia a JSF recurso de imagen como fondo CSS url de la imagen.

    .some {
        background-image: url("#{resource['images/background.png']}");
    }

    Aquí está el @import ejemplo.

    @import url("#{resource['css/other.css']}");

    Aquí está el favicon ejemplo. Véase también Añadir un favicon para JSF proyecto y hacer referencia a él en <link>.

    <link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />

    De referencia de terceros archivos CSS

    Tercera parte de los archivos CSS se carga a través de <h:outputStylesheet> que a su vez fuentes de referencia y/o imágenes deben ser modificados para uso #{resource} expresiones como se describe en la sección anterior, de lo contrario un UnmappedResourceHandler necesita ser instalado con el fin de ser capaz de servir a los que el uso de JSF. Ver también.o. Bootsfaces página se muestre en el navegador sin ningún estilo y Cómo usar Font Awesome 4.x archivo CSS con JSF? El navegador no puede encontrar los archivos de fuente.

    Escondido en /WEB-INF

    Si usted tiene la intención de ocultar los recursos de acceso público por el desplazamiento de todo el /resources carpeta en /WEB-INF, entonces usted puede desde JSF 2.2 se puede modificar el contenido web-ruta de acceso relativa a través de un nuevo web.xml contexto parámetro como sigue:

    <context-param>
        <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
        <param-value>/WEB-INF/resources</param-value>
    </context-param>

    Mayores JSF versiones esto no es posible.

    Véase también:

    Tengo que trabajar en CSS, pero si quería hacer referencia a un archivo en JavaScript, ¿entonces cómo? La notación url("#{resource['otbofaces:date-entry/calendar.gif']}") funciona muy bien en un archivo CSS, pero aún tengo que encontrar algo que puedo usar dentro de un archivo javascript con el fin de obtener la correcta localización de recursos.
    stackoverflow.com/q/30130657
    Gracias @BalusC. Yo he optado por ir a una ruta totalmente diferente y se han utilizado Font Awesome en su lugar. 🙂
    Lo que me falta es que me esperaba que una » plantilla.xhtml » también es un recurso. Así que yo estaba esperando para hacer algo como <ui:composition template="/templates/report.xhtml"> con mi plantilla que residen en web/resources/templates/report.xhtml, incluso haciendo uso de la manera en que los recursos se estructuran en las bibliotecas. No funciona de esa manera.
    Gracias documentación útil

    OriginalEl autor BalusC

  2. 7

    Suponga que se están ejecutando en el sub directorios de la aplicación web. Usted puede tratar como este :

     <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

    La '${facesContext.externalContext.requestContextPath}/' enlace le ayudará a regresar de inmediato a la raíz del contexto.

    En la dirección URL relativa, slash /puntos a la raíz del dominio. Así que si la página JSF es, por ejemplo, solicitado por http://example.com/context/page.jsf, el CSS URL absolutamente punto a http://example.com/styles/decoration.css. Para conocer la validez de la dirección URL relativa, usted necesita saber la URL absoluta tanto de la página JSF y el archivo CSS y el extracto de la una de la otra.

    Vamos a suponer que su archivo CSS se encuentra realmente en http://example.com/context/styles/decoration.css, entonces usted necesita para eliminar slash de lo que es relativo al contexto actual (el de la página.jsp):

    <link rel="stylesheet" type="text/css" href="styles/decoration.css" />
    Gracias. Es lo que estoy buscando.
    Este no es el adecuado Facelets manera sin embargo. Esto es más de la JSP.

    OriginalEl autor Abimaran Kugathasan

  3. 2

    Estas respuestas me ayudaron a solucionar el mismo problema. A pesar de que mi problema era más complejo, ya que yo estaba usando SASS y TRAGO.

    He tenido que cambiar (por favor, tenga en cuenta la «\» en la parte frontal de la #. Probablemente efectos secundarios de gulp:

     <h:outputStylesheet library="my_theme" name="css/default.css"/>  
    
     background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");

    OriginalEl autor Mircea Stanciu

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea