Відповіді:
<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>непотрібні, оскільки Facelet так і ігнорується):
<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>. Дивіться також Як аякс-оновлення динамічного включення вмісту за допомогою навігаційного меню? (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 >Всередині файлу включення / шаблону він буде доступний як #{foo}. У випадку, якщо вам потрібно передати "багато" параметрів <ui:include>, тоді вам краще розглянути можливість реєстрації включати файл у вигляді файлу тегів, щоб ви могли в кінцевому підсумку використовувати його так <my:tagname foo="#{bean.foo}">. Дивіться також Коли використовувати <ui: include>, файли тегів, складові компоненти та / або користувацькі компоненти?
Ви навіть можете передавати цілі боби, методи та параметри через <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 / зображення у шаблоні Facelets?
Ви можете розмістити файли Facelets у файлі JAR для багаторазового використання. Див. Також Структура для декількох проектів JSF зі спільним кодом .
Для справжніх прикладів вдосконалених шаблонів Facelets, перевірте src/main/webappпапку вихідного коду програми Java EE Kickoff App та OmniFaces, що демонструє вихідний код сайту .
<ui:composition ...>всередині фейлетону, ви повинні також оголосити доктрип <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, інакше ви отримаєте entity referenced but not declaredпомилку при використанні HTML-об'єктів.
Сторінка, що включена:
<!-- 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"/>ui:compositionяк показано вище.ui:includeщо включає xhtml, як також показано вище.<ui:include src="/yourFile.xhtml"/>або<ui:include src="/WEB-INF/yourFile.xhtml"/>