Как включить другой XHTML в XHTML, используя Facelet JSF 2.0?
Как наиболее правильно включить другую страницу XHTML в страницу XHTML? Я пробовал разные способы, ни один из них не работает.
2 ответа
<ui:include>
Самый простой способ <ui:include>, Содержимое должно быть размещено внутри <ui:composition>,
Kickoff пример главной страницы /page.xhtml:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Include demo</title>
</h:head>
<h:body>
<h1>Master page</h1>
<p>Master page blah blah lorem ipsum</p>
<ui:include src="/WEB-INF/include.xhtml" />
</h:body>
</html>
Страница включения /WEB-INF/include.xhtml (да, это файл целиком, любые теги вне <ui:composition> не нужны, так как они все равно игнорируются Facelets):
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h2>Include page</h2>
<p>Include page blah blah lorem ipsum</p>
</ui:composition>
Это должно быть открыто /page.xhtml, Обратите внимание, что вам не нужно повторять <html>, <h:head> а также <h:body> внутри включаемого файла, так как в противном случае это приведет к некорректному HTML.
Вы можете использовать динамическое выражение EL в <ui:include src>, См. Также Как ajax-refresh динамически включать контент с помощью меню навигации? (JSF SPA).
<ui:define> / <ui:insert>
Более продвинутый способ включения - шаблонизация. Это включает в основном наоборот. Мастер шаблона страницы должен использовать <ui:insert> объявлять места для вставки определенного содержимого шаблона. Страница шаблона клиента, использующая главную страницу шаблона, должна использовать <ui:define> определить содержание шаблона, который должен быть вставлен.
Главная страница шаблона /WEB-INF/template.xhtml (как подсказка для дизайна: верхний, нижний и нижний колонтитулы, в свою очередь, могут быть <ui:include> файлы):
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
Шаблон клиентской страницы /page.xhtml (Обратите внимание template атрибутов; также здесь, это файл в полном объеме):
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
Это должно быть открыто /page.xhtml, Если нет <ui:define> тогда содержимое по умолчанию внутри <ui:insert> будет отображаться вместо, если таковые имеются.
<ui:param>
Вы можете передать параметры <ui:include> или же <ui:composition template> от <ui:param>,
<ui:include ...>
<ui:param name="foo" value="#{bean.foo}" />
</ui:include>
<ui:composition template="...">
<ui:param name="foo" value="#{bean.foo}" />
...
</ui:composition >
Внутри файла include / template он будет доступен как #{foo}, Если вам нужно передать "много" параметров <ui:include> тогда вам лучше зарегистрировать включаемый файл как файл тегов, чтобы в конечном итоге вы могли использовать его следующим образом: <my:tagname foo="#{bean.foo}">, См. Также Когда использовать
Вы даже можете передать целые бины, методы и параметры через <ui:param>, См. Также JSF 2: как передать действие, включающее в себя аргумент, который будет вызван, к вложенному представлению Facelets (используя ui:include и ui:param)?
Советы по дизайну
Файлы, которые не должны быть общедоступными путем простого ввода / угадывания его URL, должны быть помещены в /WEB-INF Папка, как в качестве включаемого файла и файла шаблона в примере выше. Смотрите также Какие файлы XHTML мне нужно поместить в /WEB-INF, а какие нет?
Там не должно быть никакой разметки (HTML-код) за пределами <ui:composition> а также <ui:define>, Вы можете поставить любой, но они будут игнорироваться Facelets. Размещение разметки полезно только для веб-дизайнеров. См. Также Есть ли способ запустить страницу JSF без создания всего проекта?
В настоящее время тип документа HTML5 является рекомендуемым типом документа, несмотря на то, что это файл XHTML. Вы должны увидеть XHTML как язык, который позволяет вам выводить HTML, используя инструмент на основе XML. См. Также Можно ли использовать JSF+Facelets с HTML 4/5? и JavaServer Faces 2.2 и поддержка HTML5, почему XHTML все еще используется.
Файлы CSS/JS/ изображения могут быть включены в качестве динамически перемещаемых / локализованных / версионных ресурсов. См. Также Как ссылаться на ресурс CSS/JS/image в шаблоне Facelets?
Вы можете поместить файлы Facelets в повторно используемый файл JAR. См. Также Структура для нескольких проектов JSF с общим кодом.
Для примеров из реальной жизни передовых шаблонов Facelets, проверьте src/main/webapp папка с исходным кодом приложения Java EE Kickoff и демонстрационным исходным кодом сайта OmniFaces.
Включенная страница:
<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>
Включая страницу:
<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
- Вы запускаете включенный файл xhtml с
ui:compositionкак показано выше. - Вы включаете этот файл с
ui:includeво включающем файле xhtml, как показано выше.