2.2.4 Представление (View) средствами Facelets
JSF — полностью серверная технология, в которой за представление отвечает «механизм» Facelets.
Как было показано на рисунке 2.11 (см. стр. 70), в компоненте JSF за представления могут отвечать различные технологии:
а) XUL (XML User Interface Language) — язык разметки для создания динамических пользовательских интерфейсов на основе языка XML, разрабатываемый в рамках проекта Mozilla;
б) JSP (JavaServer Pages) — язык разметки для создания динамических пользовательских интерфейсов, разрабатываемый Eclipse Foundation по стандарту JSR 245;
в) Facelets — язык разметки для создания динамических пользовательских интерфейсов, разработанный компанией Sun Microsystems специально для проекта JSF.
Facelets передает разметку Отрисовщику, который отвечает за отображение компонента и перевод пользовательского ввода в значение компонента.
PDL (Page Description Language) технологии Facelets построен на основе языка XML и отображается в проектах в виде XHTML-файлов, используя теги из пространства имен, представленных в таблице 2.3.
Таблица 2.3 — Библиотеки тегов, используемые Facelets PDL [17]
URI |
Префикс |
Описание |
http://xmlns.jcp.org/jsf/ |
h |
Библиотека классов содержит компоненты и их |
html |
|
HTML-отрисовки — h:commandButton, h:comand Link, |
|
|
h:inputText и т. д. |
http://xmlns.jcp.org/jsf/ |
f |
Библиотека содержит пользовательские дейст-вия, |
core |
|
которые независимы от созданных ранее отрисовок — |
|
|
f:selectItem, f:validateLength, f:convert Number и т. д. |
http://xmlns.jcp.org/jsf/ |
ui |
Теги этой библиотеки добавляют поддержку |
facelets |
|
шаблонов. |
http://xmlns.jcp.org/jsf/ |
composite |
Библиотека тегов применяется для объявления и |
composite |
|
определения составных компонентов. |
http://xmlns.jcp.org/jsp/ |
c |
Facelets-страницы могут использовать некоторые |
jstl/core |
|
основные библиотеки тегов JSP — <c:if/>, <c:forEach/> |
|
|
или <c:catch/>. |
http://xmlns.jcp.org/jsp/ |
fn |
Facelets-страницы могут использовать все функции |
jstl/functions |
|
библиотек тегов JSP. |
Указанные в таблице библиотеки тегов (красным цветом выделены ис-
76
пользуемые далее) отображаются в заголовках XHTML-файлов. Например, если нам будут нужны теги с префиксами h и f, то заголовок файла будет иметь вид показанный на рисунке 2.16.
Рисунок 2.16 — Заголовок XHTML-файла, использующего теги h и f [17]
«Механизм» Facelets управляет шаблонами компоненты JSF.
Типичное современное Web-приложение имеет представление содержащее сразу несколько HTML/XHTML-страниц, часть из которых или все представляют статические (неизменяемые) страницы. Facelets учитывает их и обновляет только динамические страницы. Для примера, рассмотрим типовой набор из пяти HTML-страниц, показанный на рисунке 2.17.
Заголовочная страница в файле: /WEB-INF/templates/header.html
Подзаголовочная страница в файле: /WEB-INF/templates/subheader.html
Боковая страница в файле: Контекстная страница в файле:
/WEB-INF/templates/ /WEB-INF/templates/welcome.html menus.html
Концевая страница в файле: /WEB-INF/templates/footer.html
Рисунок 2.17 — Шаблон представления из пяти HTML-страниц
Создадим Facelets-шаблон /WEB-INF/templates/lab2Templ.xhtml, предполагая, что он включает все файлы, показанные на рисунке 2.17. Дополнительно
77
предполагается, что мы используем теги компоновки, представленные в таблице 2.4. Результат такого шаблона представлен на листинге 2.2.
Таблица 2.4 — Теги Facelets-шаблонов [17]
Тег |
Описание тега |
<ui:composition> |
Определяет композицию, которая может использовать |
|
шаблон. Несколько композиций могут применять один и тот |
|
же шаблон. |
<ui:component> |
Создает компонент. |
<ui:debug> |
Собирает информацию об отладке. |
<ui:define> |
Определяет содержимое, которое вставлено на страницу |
|
с помощью шаблона. |
<ui:decorate> |
Позволяет декорировать содержимое на странице. |
<ui:fragment> |
Добавляет фрагмент страницы. |
<ui:include> |
Инкапсулирует и повторно использует содержимое среди |
|
нескольких страниц XHTML. |
<ui:insert> |
Вставляет содержимое в шаблон. |
<ui:param> |
Передает параметры во включенный файл с использованием |
|
тега <ui:include> или шаблона. |
<ui:repeat> |
Проходит по всему списку объектов. |
<ui:remove> |
Удаляет содержимое страницы. |
Листинг 2.2 — Шаблон lab2Templ.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Проект labs</title>
</head>
<body>
<div id="header"> <ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.html"/> </ui:insert>
</div>
<div id="subheader"> <ui:insert name="subheader">
78
<ui:include src="/WEB-INF/templates/subheader.html"/> </ui:insert>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr>
<td id="menus" valign="top" style="width: 25%;">
<ui:insert name="menus">
<ui:include src="/WEB-INF/templates/menus.html"/> </ui:insert>
</td>
<td id="context" valign="top">
<ui:insert name="content">
<ui:include src="/WEB-INF/templates/welcome.html"/> </ui:insert>
</td> </tr> </table>
<div id="footer"> <ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.html"/> </ui:insert>
</div>
</body> </html>
Далее, следует создать файлы HTML-страниц, на которые ссылается бозовый шаблон lab2Templ.xhtml. Если следовать представлению рисунка 2.17, то содержимое этих файлов — достаточно примитивно, поэтому мы не будем анализировать их листинги. Но для демонстрации примера использования шаблона, создадим файл ресурса представления /index.xhtml, содержимое которого показано на листинге 2.3.
Листинг 2.3 — Содержимое файла index.xhtml проекта labs
<!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" xmlns:f="http://xmlns.jcp.org/jsf/core" xml:lang="ru">
<ui:composition template="/WEB-INF/templates/lab2Templ.xhtml"> </ui:composition>
</html>
79