Фреймворк Facelets

Facelets — открытый веб-фреймворк, который распространяется под лицензией Apache license и является альтернативной технологией управления представлением для JSF (Java Server Faces). Технология Facelets была изначально разработана как альтернатива обработчику представлений на основе JSP, применявшемуся в ранних версиях JSF. В версии JSF 2.0 Facelets заменила JSP в качестве применявшейся по умолчанию.

Фреймворк Facelets требует для функционирования валидные XML документы. Поэтому веб-страницы создаются с использованием языка разметки XHTML. Facelets поддерживает все компоненты JSF и создаёт собственное дерево компонентов. В Facelets полностью устранена широко известная проблема смешанного контента, присущая Java Server Pages. Платформа Facelets не только является лучшим обработчиком представлений, но и поддерживает целый ряд тегов, предназначенных для использования шаблонов при построении пользовательского интерфейса и других целей.

Полную документацию Facelets можно найти здесь.

Библиотеки тегов Facelets

Для размещения компонентов на странице Facelets поддерживают большое число разнообразных библиотек тегов. Для этого Facelets использует XML-декларации пространства имён (namespace). Facelets также поддерживает теги составных компонентов, для которых можно объявить собственные префиксы.

В таблицу включены библиотеки поддерживаемые Facelets тегов.

БиблиотекаURIПрефиксПримерСодержимое
Теги Facelets http://java.sun.com/jsf/facelets ui: ui:component
ui:insert
Теги для шаблонов страниц
Библиотека HTML тегов http://java.sun.com/jsf/html h: h:head
h:body
h:outputText
h:inputText
Теги для всех компонентов UIComponents
Библиотека ядра JSF http://java.sun.com/jsf/core f: f:actionListener
f:attribute
Базовые компоненты JSF, не связанные с рендерингом.
Теги ядра библиотеки JSTL http://java.sun.com/jsp/jstl/core c: c:forEach
c:catch
Ядро библиотеки JSTL
Теги функций библиотеки JSTL http://java.sun.com/jsp/jstl/functions fn: fn:toUpperCase
fn:toLowerCase
Функции библиотеки JSTL

Facelets и выражения EL

Основанная на Java Server Faces поддержка синтаксиса унифицированного языка выражений (EL) (Expression Language) позволяет ссылаться на свойства и методы внешних бинов. Выражения могут быть использованы для связывания компонентных объектов или значений методов или свойств бинов.

Пример EL для вывода на страницу текста приветствия пользователя.

Добрый день, <h:outputText value="#{sessionBean.userName}"/>

Согласно данному коду информация о пользователе хранится в JavaBean компоненте. По соглашению, наименование компонента начинается с символа в нижнем регистре.

Теги Facelets

Теги Facelets могут быть сгруппированы по нескольким категориям:

  • Включение содержимого из других страниц XHTML — ui:include;
  • Формирование страниц из шаблонов — ui:composition, ui:decorate, ui:insert, ui:define, ui:param;
  • Создание пользовательских компонентов без написания кода Java — ui:component, ui:fragment;
  • Различные утилиты — ui:debug, ui:remove, ui:repeat.

Чтобы иметь возможность использовать теги Facelets, необходимо добавить следующее объявление пространства имен к конкретным страницам JSF.

xmlns:ui="http://java.sun.com/jsf/facelets"

В таблице приведены краткие сведения о тегах Facelets.

Наименование тегаОписание
ui:include Включает содержимое из другого файла XML
ui:composition Будучи использованным без атрибута template, этот тег определяет последовательность элементов, которая может быть вставлена в другом месте. Композиция может иметь переменные части указанные с помощью дочерних тегов ui:insert.
При использовании с атрибутом template, загружается шаблон. Дочерние теги этого тега определяют переменные части шаблона. Содержимое шаблона заменяет этот тег.
ui:decorate Будучи использованным без атрибута template этот тег определяет страницу, в которую могут быть вставлены части. Переменные части задаются с помощью дочерних тегов ui:insert.
При использовании с атрибутом template, загружается шаблон. Дочерние теги этого тега определяют переменные части шаблона.
ui:define Определяет содержимое, которое вставляется в шаблон с помощью соответствующих тегов ui:insert.
ui:insert Вставляет содержимое в шаблон. Это содержимое определяется в теге, который загружает шаблон.
ui:param Задает параметр, передаваемый во включенный файл или шаблон.
ui:component Этот тег идентичен ui:composition, за исключением того, что создает компонент добавляемый к дереву компонентов.
ui:fragment Этот тег идентичен ui:decorate, за исключением того, что создает компонент добавляемый к дереву компонентов.
ui:debug Этот тег позволяет пользователю с помощью определенной комбинации клавиш вывести на экран окно отладки, в котором показаны иерархия компонентов для текущей страницы и переменные с областью действия приложения.
ui:remove Реализация JSF удаляет все, что находится в этом теге
ui:repeat Выполняет итерации по списку, массиву, результирующему набору или отдельному объекту.

Пример Facelets, шаблон страниц

Согласно принципа «Don't repeat yourself (DRY)», который переводится как «Не повторяйся» целесообразно строить интерфейс приложения многостраничного WEB приложения на основе шаблонов страниц. JSF с использованием фреймворка Facelets предоставляет для этого наиболее благоприятные условия.

В примере использования Facelets создается шаблон commonLayout.xhtml. Страница шаблона условно разбита на три части: header, content и footer. В каждой части есть tag ui:insert с атрибутом name. Это означает, что сюда, можно вставить данные. В эти части шаблона по умолчанию вставляются файлы commonHeader.xhtml, commonContent.xhtml, commonFooter.xhtml.

На основе шаблона commonLayout.xhtml создаются две страницы. Одна страница остается без измений, т.е. отображает содержимое шаблона, т.е. содержимое вставляемых в шаблон файлов. Вторая страница содержит изменения в двух частях шаблона.

Листинг шаблона commonLayout.xhtml

<?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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">

  <h:head>
    <h:outputStylesheet name="style.css" library="css" />
  </h:head>
    
  <h:body>
    <div id="page">
       <div id="header">
          <ui:insert name="header" >
              <ui:include src="commonHeader.xhtml" />
          </ui:insert>
       </div>
      
       <div id="content">
          <ui:insert name="content" >
             <ui:include src="commonContent.xhtml" />
          </ui:insert>
       </div>
        
       <div id="footer">
          <ui:insert name="footer" >
             <ui:include src="commonFooter.xhtml" />
          </ui:insert>
       </div>
    </div>
  </h:body>
</html>

В данном шаблоне HTML-страница условно разбита на три части: header, content и footer.

Листинг шаблона commonHeader.xhtml

<?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">
    <body>
      <ui:composition>
          <h1>Часть шаблона страницы Header по умолчанию.</h1>
      </ui:composition>
    </body>
</html>

Листинг шаблона commonContent.xhtml

<pre class="prettyprint" id="java">
<?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">
    <body>
      <ui:composition>  
          <h1>Часть шаблона страницы  Content по умолчанию.</h1>        
      </ui:composition>
    </body>
</html>

Листинг шаблона commonFooter.xhtml

<?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">
    <body>
      <ui:composition>
          <h1>Часть шаблона страницы Footer по умолчанию.</h1>
      </ui:composition>
    </body>
</html>

На основе шаблонов создадим две страницы. Страница demoTempate.xhtml не вносит никаких изменений в шаблон, т.е. отображает содержимое шаблонов. На страница Page1.xhtml внесены изменения в разделы content и footer.

Листинг страницы demoTempate.xhtml

<?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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
      <ui:composition template="templates/commonLayout.xhtml">
      </ui:composition>
    </h:body>
</html>

Листинг страницы Page1.xhtml

<?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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
       <ui:composition template="templates/commonLayout.xhtml">
          <ui:define name="content">
             <h2>Текст страницы 1</h2>
          </ui:define>
        
          <ui:define name="footer">
             <h2>Footer страницы 1</h2>
          </ui:define>
       </ui:composition>
    </h:body>
</html>
  Рейтинг@Mail.ru