Как включить другой XHTML в XHTML, используя Facelet JSF 2.0? - PullRequest
212 голосов
/ 25 января 2011

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

Ответы [ 2 ]

408 голосов
/ 25 января 2011

<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-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 App и Исходный код сайта витрины OmniFaces .

22 голосов
/ 25 января 2011

Включенная страница:

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