Как ссылаться на ресурс 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 и image) В Facelets?

45
facelets jsf jsf-2 resources templating

3 ответов

введение

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

структура папок

удалите файлы CSS / JS / image в /resources папка public webcontent, как показано ниже (просто создайте ее, если она еще не существует на том же уровне, что и /WEB-INF и /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
 :

в случае Maven, он должен быть в /main/webapp/resources и так не /main/resources (это для ресурсов Java (properties / xml/text / config files), которые должны заканчиваться в пути к классам среды выполнения, а не в webcontent). См. также структура Maven и JSF webapp, где именно поставить 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 атрибут должен представлять полный путь относительно . Не нужно начинать с /. Ты не нужны library атрибут, пока вы не разрабатываете библиотеку компонентов, такую как PrimeFaces или общий модуль Файл JAR, который совместно используется несколькими webapps.

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

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

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

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

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

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

на основе схемы PrimeFaces HeadRenderer

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

упаковка в банку

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

ссылка в EL

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

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

здесь @import пример.

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

вот пример favicon. См. также добавить favicon в проект JSF и ссылаться на него в .

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

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

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

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

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

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

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

Читайте также:

91

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

 <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, Затем вам нужно удалить начальную косую черту, чтобы она была относительно текущего контекста (одной из страниц.jsp):

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

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

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

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

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