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


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

2 205

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. Обратите внимание, что вам не нужно повторите <html>,<h:head> и <h:body> внутри файла включения, поскольку в противном случае это приведет к неверный 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 and интерфейс:парам)?


советы по дизайну

файлы, которые не должны быть общедоступными, просто введя / угадав его 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 с общим кодом.

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

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

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