Использование шаблонов Facelets

JavaServer Faces предоставляет инструменты для реализации пользовательских интерфейсов, которые легко расширять и повторно использовать. Шаблонизация — это полезная функция Facelets, позволяющая вам создать страницу, которая будет выступать в качестве базовой страницы, или шаблона, для других страниц приложения. Используя шаблоны, вы можете повторно использовать код и избегать создания похожих страниц. Шаблонизация также помогает поддерживать стандартный внешний вид в приложении с большим количеством страниц.

Таблица 8-2 перечисляет теги Facelets, которые используются для шаблонов, и их функциональные возможности.

Таблица 8-2 Теги шаблонов Facelets

Тег

Функция

ui:component

Определяет компонент, который создаётся и добавляется в дерево компонентов.

ui:composition

Определяет композицию страницы, которая, возможно, использует шаблон. Содержимое вне этого тега игнорируется.

ui:debug

Определяет компонент отладки, который создаётся и добавляется в дерево компонентов.

ui:decorate

Аналогичен тегу композицции, но не игнорирует содержимое вне этого тега.

ui:define

Определяет содержимое, которое вставляется на страницу с помощью шаблона.

ui:fragment

Аналогично тегу компонента, но не игнорирует содержимое вне этого тега.

ui:include

Инкапсулирует и повторно использует контент для нескольких страниц.

ui:insert

Вставляет содержимое в шаблон.

ui:param

Используется для передачи параметров во включаемый файл.

ui:repeat

Используется в качестве альтернативы для тегов цикла, таких как c:forEach или h:dataTable.

ui:remove

Удаляет контент со страницы.

Для получения дополнительной информации о тегах шаблонов Facelets см. документацию библиотеки тегов Facelets JavaServer Faces.

Библиотека тегов Facelets включает основной шаблонный тег ui:insert. Страница шаблона, созданная с помощью этого тега, позволяет определить структуру страницы по умолчанию. Страница шаблона используется в качестве шаблона для других страниц, обычно называемых страницами клиента.

Вот пример шаблона, сохранённого как template.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type"
              content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css"/>
        <h:outputStylesheet library="css" name="cssLayout.css"/>
        <title>Facelets Template</title>
    </h:head>

    <h:body>
        <div id="top" class="top">
            <ui:insert name="top">Top Section</ui:insert>
        </div>
        <div>
        <div id="left">
             <ui:insert name="left">Left Section</ui:insert>
        </div>
        <div id="content" class="left_content">
             <ui:insert name="content">Main Content</ui:insert>
        </div>
        </div>
    </h:body>
</html>

Страница примера определяет страницу XHTML, которая разделена на три раздела: верхний раздел, левый раздел и основной раздел. С разделами связаны таблицы стилей. Такая же структура может быть повторно использована для других страниц приложения.

Страница клиента вызывает шаблон с помощью тега ui:composition. В следующем примере клиентская страница templateclient.xhtml вызывает страницу шаблона с именем template.xhtml из предыдущего примера. Страница клиента позволяет вставлять содержимое с помощью тега ui:define.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:body>
        <ui:composition template="./template.xhtml">
            <ui:define name="top">
                Welcome to Template Client Page
            </ui:define>

            <ui:define name="left">
                <h:outputLabel value="You are in the Left Section"/>
            </ui:define>

            <ui:define name="content">
                <h:graphicImage value="#{resource['images:wave.med.gif']}"/>
                <h:outputText value="You are in the Main Content Section"/>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

Вы можете использовать IDE NetBeans для создания шаблона Facelets и страниц клиента. Для получения дополнительной информации о создании этих страниц см. https://netbeans.org/kb/docs/web/jsf20-intro.html.