Ответ 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 это невозможно.