Фреймворк 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 предоставляет для этого наиболее благоприятные условия.

Рассмотрим пример построения XHTML страниц на основе шаблона с использованием Facelets. Структура примера в среде Eclipse, представленная на следующем скриншоте, включает стили style.css, набор шаблонов в директории template для построения XHTML страниц, и две страницы index.xhtml и news.xhtml.

В примере XHTML страницы создаются на основе шаблона templLayout.xhtml, который условно делит страницу на три части: header, content и footer. В каждой части есть tag ui:insert с атрибутом name. Это означает, что в это место можно вставить данные/файл. По умолчанию в шаблоне для соответствующих частей страницы используются файлы templHeader.xhtml, templContent.xhtml, templFooter.xhtml.

На основе шаблона templLayout.xhtml создаются две страницы. На странице index.xhtml изменяется только content. На странице news.xhtml - content и footer.

Стиль страницы, style.css

В style.css определяем размеры и отступы страницы, стиль разделов. Используем весь экран и каждый раздел выделяем рамкой; разделы header и footer подкрашиваем в бледно-серый цвет.

#page{
	width: calc(100% - 40px);
	margin-top:10px;
	margin-right:0px;
	margin-bottom:10px;
	margin-left:20px;
}

#header{
	width: 100%;
	height:60px;
	background-color: #eee;
	border: 1px solid #ddd;
	margin-bottom:10px;
}

#content{
	width: 100%;
	height:200px;
	margin-bottom:10px;
	border: 1px solid #ddd;
}

#footer{
	width: 100%;
	height:60px;
	background-color: #eee;
	border: 1px solid #ddd;
}

h1 { 
    font-size: 12pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #336;
}

Листинг шаблона templLayout.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="/template/templHeader.xhtml" />
          </ui:insert>
       </div>
      
       <div id="content">
          <ui:insert name="content" >
             <ui:include src="/template/templContent.xhtml" />
          </ui:insert>
       </div>
        
       <div id="footer">
          <ui:insert name="footer" >
             <ui:include src="/template/templFooter.xhtml" />
          </ui:insert>
       </div>
    </div>
  </h:body>
</html>

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

Листинг шаблона templHeader.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>
          <h4>Раздел шаблона страницы 'header'</h4>
      </ui:composition>
    </body>
</html>

Листинг шаблона templContent.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>  
          <h2>Раздел шаблона страницы 'content'</h2>        
      </ui:composition>
    </body>
</html>

Листинг шаблона templFooter.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>
          <h4>Раздел шаблона страницы 'footer'</h4>
      </ui:composition>
    </body>
</html>

На основе шаблона templLayout.xhtml создадим две страницы. На странице index.xhtml переопределяем раздел content. На странице news.xhtml внесены изменения в разделы content и footer.

Листинг страницы index.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="/template/templLayout.xhtml">
          <ui:define name="content">
             <h1>Стартовая страница JSF</h1>
             Перейти на страницу <a href="news.xhtml">новосей</a>
          </ui:define>
      </ui:composition>
  </h:body>
</html>

Интерфейс страницы index.xhtml, представленный на скриншоте, показывает, что части header и footer не изменены.

По нажатию на ссылку выполняется переход на страницу news.xhtml.

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

На странице news.xhtml вносим изменения в разделы content и footer.

<?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="/template/templLayout.xhtml">
          <ui:define name="content">
             <h1>Текущие новости</h1>
          </ui:define>
          <ui:define name="footer">
             Переопределенный footer
          </ui:define>
      </ui:composition>
  </h:body>
</html>

Интерфейс страницы news.xhtml представлен на следующем скриншоте.

Скачать пример

Исходный код примера построения XHTML страниц в JSF проекте с использованием Facelets можно скачать здесь (5.15 Мб).

  Рейтинг@Mail.ru