¿Cómo hacer referencia al recurso CSS / JS / image en la plantilla Facelets?

He hecho un tutorial sobre la creación de plantillas Facelets .

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

 

Puedo usar referencias absolutas comenzando con / :

  

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

Entonces, me pregunto cuál es la mejor manera de referenciar los recursos CSS (y JS e imágenes) en Facelets.

Introducción

La forma correcta de JSF 2.x es usar , y con un name referencia a la ruta relativa a la carpeta webapp /resources . De esta manera, no necesita preocuparse por la ruta de contexto como lo haría en JSF 1.x. Consulte también ¿Cómo incluir CSS en relación con la ruta de contexto en JSF 1.x?

Estructura de la carpeta

Coloque los archivos CSS / JS / de imagen en /resources carpeta /resources del contenido web público como se muestra a continuación (solo cree uno si aún no existe en el mismo nivel que /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 el caso de Maven, debería estar en /main/webapp/resources y por lo tanto no /main/resources (esos son recursos de Java (properties / xml / text / config files) que deben terminar en classpath en tiempo de ejecución, no en contenido web) . Ver también la estructura de aplicaciones web de Maven y JSF, donde exactamente poner los recursos JSF .

Hacer referencia en Facelets

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

  ...     ...  ...  

El atributo de name debe representar la ruta completa relativa a la carpeta /resources . No necesita comenzar con / . No necesita el atributo de library siempre que no esté desarrollando una biblioteca de componentes como PrimeFaces o un archivo JAR de módulo común compartido por varias aplicaciones web.

Puede hacer referencia a cualquier lugar, también en de clientes de plantilla sin la necesidad de una adicional. A través del componente de la plantilla maestra, automáticamente terminará en generado.

   ...  

También puede hacer referencia a cualquier lugar, pero de forma predeterminada terminará en el HTML exactamente allí donde lo declaró. Si desea que termine en través de , agregue target="head" atributo target="head" .

   ...  

O bien, si desea que termine al final de (justo antes de , de modo que, por ejemplo, window.onload y $(document).ready() etc. no sean necesarios) a través de , luego agrega target="body" atributo target="body" .

   ...  

PrimeFaces HeadRenderer

En caso de que esté utilizando PrimeFaces, su HeadRenderer confundirá el orden predeterminado del script como se describe arriba. Básicamente, se ve obligado a forzar el pedido a través de específico de PrimeFaces, que puede terminar en un código desordenado e “imposible de calificar”. Es posible que desee desactivarlo como se describe en esta respuesta .

Embalaje en JAR

Incluso puede empaquetar los recursos en un archivo JAR. Consulte también Estructura para múltiples proyectos JSF con código compartido .

Hacer referencia en EL

En EL, puede usar la asignación #{resource} para permitir que JSF imprima básicamente una URL de recurso como /context/javax.faces.resource/folder/file.ext.xhtml?ln=library para que pueda usarla como, por ejemplo, fondo CSS imagen o favicon. El único requisito es que el archivo CSS también se sirva como un recurso JSF; de lo contrario, las expresiones EL no se evaluarán. Consulte también Cómo hacer referencia al recurso de imagen JSF como url de imagen de fondo de CSS .

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

Aquí está el ejemplo @import .

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

Aquí está el ejemplo de favicon. Ver también Agregar favicon al proyecto JSF y referenciarlo en .

  

Hacer referencia a archivos CSS de terceros

Los archivos CSS de terceros cargados a través de que a su vez hacen referencia a fonts y / o imágenes pueden necesitar ser alterados para usar expresiones #{resource} como se describe en la sección anterior; de lo contrario, debe instalarse UnmappedResourceHandler para poder para servir a quienes usan JSF. Consulte también la página Bootsfaces aparece en el navegador sin ningún estilo y ¿Cómo se utiliza el archivo CSS Font Awesome 4.x con JSF? El navegador no puede encontrar archivos de fonts .

Ocultar en / WEB-INF

Si tiene la intención de ocultar los recursos del acceso público moviendo la carpeta completa /resources a /WEB-INF , entonces desde JSF 2.2 puede cambiar opcionalmente la ruta relativa al contenido /WEB-INF través de un nuevo parámetro de contexto web.xml siguiente manera:

  javax.faces.WEBAPP_RESOURCES_DIRECTORY /WEB-INF/resources  

En versiones anteriores de JSF esto no es posible.

Ver también:

  • Tutorial de Java EE 6 – Facelets – Recursos (que está a solo 2 capítulos de su enlace)
  • ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar?
  • ¿Cómo anulo el PrimeFaces CSS predeterminado con estilos personalizados?

Supongamos que está ejecutando el en los subdirectorios de la aplicación web. Puede intentarlo así:

   

El enlace '${facesContext.externalContext.requestContextPath}/' te ayudará a regresar inmediatamente a la raíz del contexto.

En URL relativas, la barra diagonal / apunta a la raíz del dominio. Por lo tanto, si la página JSF se solicita, por ejemplo, en http://example.com/context/page.jsf , la URL CSS apuntará definitivamente a http://example.com/styles/decoration.css . Para conocer la URL relativa válida, necesita conocer la URL absoluta tanto de la página JSF como del archivo CSS y extraer la una de la otra.

Supongamos que su archivo CSS se encuentra realmente en http://example.com/context/styles/decoration.css , luego debe eliminar la barra diagonal para que sea relativa al contexto actual (el de la página. jsp):

  

Estas respuestas me ayudaron a solucionar el mismo problema. Aunque mi problema era más complejo ya que estaba usando SASS y GULP.

Tuve que cambiar (tenga en cuenta la “\” delante del #. Probablemente el efecto secundario de gulp:

   background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");