Как ссылаться на ресурс CSS/JS/image в шаблоне Facelets?

Я сделал учебник по шаблонам Facelets.

Теперь я попытался создать страницу, которая не находится в том же каталоге, что и шаблон. У меня проблемы со стилем страницы, потому что стили ссылаются на относительный путь следующим образом:

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

Я могу использовать абсолютную ссылку, начиная с /:

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

Но это вызовет у меня проблемы, когда я буду перемещать приложение в другой контекст.

Итак, мне интересно, как лучше всего ссылаться на ресурсы CSS (и JS и изображения) в Facelets?

Ответ 1

Вступление

Правильный способ JSF 2.x - использование <h:outputStylesheet>, <h:outputScript> и <h:graphicImage> с name указывающим путь относительно папки webapp /resources. Таким образом, вам не нужно беспокоиться о пути к контексту, как в JSF 1.x. Смотрите также Как включить CSS относительно контекстного пути в JSF 1.x?

Структура папок

Удалите файлы CSS/JS/image в папку /resources общедоступного веб-контента, как показано ниже (просто создайте его, если он еще не существует на том же уровне, что и /WEB-INF и /META-INF).

WebContent
 |-- resources
 |    |-- css
 |    |    |-- other.css
 |    |    '-- style.css
 |    |-- js
 |    |    '-- script.js
 |    '-- images
 |         |-- background.png
 |         |-- favicon.ico
 |         '-- logo.png
 |-- META-INF
 |    '-- MANIFEST.MF
 |-- WEB-INF
 |    |-- faces-config.xml
 |    '-- web.xml
 |-- page.xhtml
 :

В случае Maven это должно быть в /main/webapp/resources и, следовательно, не в /main/resources (это для ресурсов Java (файлы свойств /xml/text/config), которые должны заканчиваться в пути к классам времени выполнения, а не в веб-контенте), См. Также структуру веб-приложения Maven и JSF, где именно размещать ресурсы JSF.

Ссылки в Facelets

В конечном счете, эти ресурсы доступны, как показано ниже, везде без необходимости использовать относительные пути:

<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>

Атрибут name должен представлять полный путь относительно папки /resources. Не нужно начинать с /. Вам не нужен атрибут library если вы не разрабатываете библиотеку компонентов, такую как PrimeFaces, или файл JAR общего модуля, который используется несколькими веб-приложениями.

Вы можете ссылаться на <h:outputStylesheet> где угодно, также в <ui:define> клиентов шаблонов, без необходимости дополнительного <h:head>. Он будет через компонент <h:head> главного шаблона автоматически попадать в сгенерированный <head>.

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

Вы также можете ссылаться на <h:outputScript> любом месте, но по умолчанию он окажется в HTML именно там, где вы его объявили. Если вы хотите, чтобы он попал в <head> через <h:head>, добавьте атрибут target="head".

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

Или, если вы хотите, чтобы он заканчивался в конце <body> (прямо перед </body>, так что, например, не нужно window.onload, например, window.onload и $(document).ready() т.д.) Через <h:body>, затем добавьте атрибут target="body".

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

PrimeFaces `HeadRenderer`

В случае, если вы используете PrimeFaces, его HeadRenderer порядок HeadRenderer скриптов <h:head> по умолчанию, как описано выше. В основном вы вынуждены форсировать порядок с помощью специфичного для PrimeFaces <f:facet name="first|middle|last">, что может привести к получению грязного и "беспорядочного" кода. Вы можете отключить его, как описано в этом ответе.

Упаковка в банке

Вы даже можете упаковать ресурсы в файл JAR. См. Также Структура для нескольких проектов JSF с общим кодом.

Ссылка в EL

В EL вы можете использовать сопоставление #{resource} чтобы позволить JSF в основном напечатать URL ресурса, например /context/javax.faces.resource/folder/file.ext.xhtml?ln=library чтобы вы могли использовать его, например, как фон CSS изображение или значок. Единственное требование заключается в том, что сам CSS файл также должен служить ресурсом JSF, иначе выражения EL не будут оцениваться. См. Также Как ссылаться на ресурс изображения JSF как URL фонового изображения CSS.

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

Вот пример @import.

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

Вот пример иконки. См. Также Добавить значок в проект JSF и сослаться на него в <link>.

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

Ссылки на сторонние CSS файлы

Сторонние CSS файлы, загруженные с помощью <h:outputStylesheet> которые, в свою очередь, могут нуждаться в изменении шрифтов и/или изображений для использования выражений #{resource} как описано в предыдущем разделе, в противном случае необходимо установить UnmappedResourceHandler, чтобы иметь возможность обслуживать тех, кто использует JSF. См. Также Страница Bootsfaces отображается в браузере без каких-либо стилей и Как использовать Font Awesome 4.x CSS файл с JSF? Браузер не может найти файлы шрифтов.

Скрытие в /WEB-INF

Если вы намереваетесь скрыть ресурсы от общего доступа, переместив всю папку /resources в /WEB-INF, тогда вы можете, начиная с JSF 2.2, по желанию изменить путь, относящийся к веб-контенту, с помощью нового параметра контекста web.xml следующим образом:

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

В старых версиях JSF это невозможно.

Смотрите также:

Учебник по Java EE 6 - Facelets - Ресурсы (всего в 2 главах от вашей ссылки)
Для чего нужна библиотека ресурсов JSF и как ее использовать?
Как переопределить стандартный PrimeFaces CSS с помощью пользовательских стилей?

Ответ 2

Предположим, что вы работаете в подкаталогах веб-приложения. Вы можете попробовать следующее:

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

Ссылка '${facesContext.externalContext.requestContextPath}/' поможет вам немедленно вернуться в корень контекста.

В относительном URL-адресе ведущая косая черта/указывает на корень домена. Например, если на странице JSF запрашивается http://example.com/context/page.jsf, URL-адрес CSS будет абсолютно указывать на http://example.com/styles/decoration.css. Чтобы узнать действительный относительный URL-адрес, вам необходимо знать абсолютный URL-адрес страницы JSF и файла CSS и извлечь ее из другого.

Предположим, что ваш файл CSS на самом деле находится в http://example.com/context/styles/decoration.css, тогда вам нужно удалить ведущую косую черту, чтобы она была относительной в текущий контекст (один из page.jsp):

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

Ответ 3

Эти ответы помогли мне решить ту же проблему. Хотя моя проблема была более сложной, так как я использовал SASS и GULP.

Мне пришлось изменить (обратите внимание на "\" перед #. Вероятно, побочный эффект от gulp:

 <h:outputStylesheet library="my_theme" name="css/default.css"/>  

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

Ответ 4

Resourcehandlers.UnmappedResourceHandler помогает сопоставлять ресурсы JSF по шаблону URL-адреса /javax.faces.resource/*.

Для меня эти 2 xml конфига в face-config.xml: org.omnifaces.resourcehandler.UnmappedResourceHandler

и в web.xml:

<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

помог с CSS и изображениями.