Как включить другой XHTML в XHTML с помощью JSF 2.0 Facelets?

каков наиболее правильный способ включить другую страницу XHTML в страницу XHTML? Я пробовал разные способы, ни один из них не работает.

205
facelets include jsf jsf-2 xhtml

2 ответов

<ui:include>

самый простой способ-это <ui:include>. Включенный контент должен быть помещен внутрь <ui:composition>.

стартовый пример главной страницы /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. Обратите внимание, что вам не нужно повторяю!--13-->, <h:head> и <h:body> внутри файла include, поскольку в противном случае это приведет к неверный HTML.

вы можете использовать динамическое выражение EL в <ui:include src>. См. также как ajax-обновить динамический включить содержимое меню навигации? (JSF SPA).

<ui:define>/<ui:insert>

более продвинутый способ, в том числе templating. Это включает в себя в основном наоборот. Христос шаблон страницы должен использовать <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 (обратите внимание на ; также вот, это файл в полном объеме):

<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> by <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>, тогда вам лучше рассмотреть возможность регистрации файла include в качестве tagfile, чтобы вы могли в конечном итоге использовать его так <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>. Вы можете поставить любой, но они будут будь игнорировать по Фейслетов. Размещение разметки там полезно только для веб-дизайнеров. См. также есть ли способ запустить страницу JSF без создания всего проекта?

HTML5 doctype является рекомендуемым doctype в эти дни, "несмотря на", что это файл XHTML. Вы должны увидеть XHTML как язык, который позволяет создавать вывод HTML с помощью инструмента на основе XML. См. также можно ли использовать JSF+Facelets с HTML 4/5? и JavaServer сталкивается с поддержкой 2.2 и HTML5, почему XHTML все еще используется.

файлы CSS/JS/image могут быть включены как динамически перемещаемые/локализованные/версионные ресурсы. См. также как ссылаться на ресурс CSS / JS / image в шаблоне Facelets?

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

для реальных примеров расширенные Шаблоны Facelets, проверьте на исходный код приложения Java EE Kickoff и исходный код сайта OmniFaces showcase.

390

включены страницы:

<!-- 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 файл, как показано выше.
22