4. Введение в компоненты Facelets

Термин Facelets используется для ссылки на JavaServerTM Faces View Definition

Framework («Среда определения вида») и является языком декларации страниц, который был разработан для использования с технологией JavaServer Faces. Согласно

JavaServer Faces 2.0, Facelets — часть спецификации JavaServer Faces и предпочти-

тельная технология представления для построения приложения на основе JavaServer

Faces.

Прежде используемая технология JavaServer PagesTM (JSPTM) не поддерживает новые возможности, доступные для JavaServer Faces 2.0. JSP считается устаревшей

технологией представления для JavaServer Faces 2.0.

Преимущества Facelets заключаются в многократном использовании кода и

удобстве разработки, что позволяет использовать JavaServer Faces как платформу

для крупномасштабных проектов. Поддерживая это, Facelets сокращает время и уси-

лия при разработке и развертывании приложений.

Преимущества Facelets заключаются в следующем:

• поддержка многократного использования кода с участием шаблонов (templating) и составных компонентов;

•функциональная расширяемость компонентов и других объектов на стороне сервера через настройку;

•более быстрое время компиляции;

•проверка выражений EL во время компиляции;

•высокое качество исполнения образов страниц.

Facelets — мощный, но лёгкий язык декларации страниц, который используется для формирования вида страниц JavaServer Faces с использованием шаблонов

HTML и для формирования деревьев компонент. Характеристики Facelets включают следующее:

•использование формата XHTML для создания веб-страниц;

•поддержка библиотек Facelets Tag дополнительно к JavaServer Faces и би-

блиотеки тегов JSTL;

•поддержка унифицированного языка выражения;

•шаблоны компонентов и страниц.

4.1. Веб-страницы

Виды Facelets обычно создаются как страницы XHTML. JavaServer Faces реа-

лизует поддержку страниц XHTML в соответствии с XHTML Transitional DTD, как указа-

но в документе http://www.w3.org/TR/xhtml1/#a_dtd_XHTML-1.0-Transitional.

По соглашению, веб-страницы имеют расширение .xhtml.

4.1.1. Поддержка библиотеки тегов

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

44

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

Facelets также поддерживает теги составных компонентов, для которых вы можете объявить собственные префиксы.

4.1.2. Поддержка языка унифицированных выражений

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

4.2.Разработка простого приложения Facelets

Ниже описаны общие шаги разработки приложения JavaServer Faces.

Разработка простого приложения Faces JavaServer, использующего технологию

Facelets, обычно требует решения следующих задач:

•разработка внешних бинов;

•создание страниц с использованием тегов компонент;

•определение страничной навигации;

•разработка отображения экземпляров FacesServlet;

•добавление деклараций управления бинами.

Примером будет приложение guessnumber. Приложение показывает вам страницу с вопросом, чтобы вы угадали число между 0 и 10, проверяет ваш ввод на пра-

45

вильность задания числа и показывают другую страницу, которая сообщает вам ре-

зультат: угадали вы число или нет.

Разработка внешнего бина

В типичном приложении JavaServer Faces каждая страница в приложении под-

ключается к внешнему бину (тип ManagedBean). Внешний бин определяет методы и свойства, которые связаны с компонентами.

Следующий класс бина, UserNumberBean.java, генерирует произвольное число

между 0 и 10.

package guessNumber; import java.util.Random;

import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean

@SessionScoped

public class UserNumberBean { Integer randomInt = null; Integer userNumber = null; String response = null; private long maximum=10; private long minimum=0;

public UserNumberBean() { // Конструктор класса Random randomGR = new Random();

randomInt = new Integer(randomGR.nextInt(10)); //Запись в журнале на сервере для отладки приложения

System.out.println("Duke’s number: " + randomInt);

}

public void setUserNumber(Integer user_number) { userNumber = user_number;

}

public Integer getUserNumber() { return userNumber;

}

public String getResponse() {

if ((userNumber != null) && (userNumber.compareTo(randomInt)

== 0))

{

return "Yay! You got it!";

}

else

{

return «Sorry, " + userNumber + " is incorrect.";

}

}

public long getMaximum() { return (this.maximum);

}

public void setMaximum(long maximum) { this.maximum = maximum;

}

public long getMinimum() {

46

return (this.minimum);

}

public void setMinimum(long minimum) { this.minimum = minimum;

}

}

Обратите внимание на использование аннотации @ManagedBean, которая

регистрирует внешний бин как ресурс в контейнере JavaServer Faces. Аннотация

@SessionScoped задаёт область видимости бина (на протяжении всего сеанса работы

клиента с приложением).

Создание FaceletsViews

Создание страницы или вида — задача для автора приложения. Она включа-

ет размещение компонентов на странице, связывание значений свойств бина с воз-

вращаемыми компонентами данными, регистрацию преобразователей, проверки пра-

вильности ввода или слушателей для компонентов.

ДлярассматриваемогопримераприложениястраницыXHTML служатвкачестве конечного продукта. Первая страница примера является страницей с именем greeting. xhtml. Последующий, более полный обзор различных частей этой веб-страницы пополнит сведения о соглашениях и использовании бинов.

Первая часть веб-страницы объявляет тип 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">

Вторая часть объявляет пространство имен (XML namespace) для библиотек

тегов, которые использованы на странице:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">

Третья часть включает компоненты в страницу с использованием разных тегов:

<!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:f="http://java.sun.com/jsf/core">

<h:head>

<title>Facelets Guess Number Application</title> </h:head>

<h:body>

<h:form>

<h:graphicImage

value="#{resource[’images:wave.med.gif’]}"/>

<h2> Hi,

<p>My name is Duke. I am thinking of a number between <b> #{userNumberBean.minimum} and #{userNumberBean.maximum}.

</b> Can you guess it ?</p> <h:inputText

47

id="userNo"

value="#{userNumberBean.userNumber}">

<f:validateLongRange

minimum="#{userNumberBean.minimum}"

maximum="#{userNumberBean.maximum}"/>

</h:inputText>

<h:commandButton id="submit" value="Submit" action="response.xhtml"/>

<h:message showSummary="true" showDetail="false" style="color: red;

font-family: ’New Century Schoolbook’, serif; font-style: oblique;

text-decoration: overline" id="errors1" for="userNo"/>

</h2>

</h:form>

</h:body>

</html>

Обратите внимание на использование префикса «h:» для тега добавления ком-

понентов и префикса «f:» для тега validateLongRange, контролирующего введённые

данные пользователя. Компонент inputText принимает данные от пользователя и пере-

дает их свойству userNumber внешнего бина userNumberBean через EL-выражение #{userNumberBean.userNumber}. Входное данное проверяется на нахождение в задан-

ном диапазоне стандартной проверкой JavaServer Faces <f:validateLongRange ... />.

Файл рисунка images:wave.med.gif добавлен на страницу как ресурс.

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

правила навигации, она перенаправляет клиента на другую страницу response.xhtml, которая показывает ответ на введённые данные.

Вторая страница response.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:h="http://java.sun.com/jsf/html">

<h:head>

<title>Guess Number Facelets Application</title> </h:head>

<h:body>

<h:form>

<h:graphicImage

value="#{resource[’images:wave.med.gif’]}"/>

<h2>

<h:outputText id="result" value="#{userNumberBean.response}"/>

</h2>

<h:commandButton id="back" value="Back" action="greeting.xhtml"/>

</h:form>

</h:body>

</html>

48

Конфигурирование приложения

Конфигурирование приложения включает несколько задач: декларации управ-

ления бинами, правила навигации и связывание ресурсов. Эта информация разме-

щается в дополнительном файле faces-config.xml, а отображение Faces Servlet — в дескрипторе развёртывания web.xml.

Если используется NetBeans IDE, дескриптор развёртывания создаётся авто-

матически. В созданном IDE файле web.xml измените по умолчанию страницу привет-

ствия index.xhtml на greeting.xhtml. Файл web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

<context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value>

</context-param> <servlet>

<servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-

class>

<load-on-startup>1</load-on-startup> </servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern>

</servlet-mapping> <session-config>

<session-timeout> 30

</session-timeout> </session-config>

<welcome-file-list> <welcome-file>faces/greeting.xhtml</welcome-file>

</welcome-file-list> </web-app>

ОбратитевниманиенаиспользованиепараметраPROJECT_STAGE.ProjectStage —

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

приложения. Например, если статус проекта определён как Development, то автоматически

генерируется отладочная информация для разработчика. Если он не определён разработ-

чиком, то по умолчанию статус проекта считается Production.

Сборка, архивирование, развертывание и исполнение приложения

Описанное здесь приложение Facelets можно создать, упаковать и развер-

нуть, используя Java EE 6 SDK NetBeans IDE. Чтобы создать приложение Facelets в NetBeans IDE, можно использовать следующую процедуру.

1.В NetBeans IDE в меню «Файл» выбрать «Новый проект». Открывается по-

мощник New Project .

49

2.В помощнике выбрать Java Web как категорию приложения и Web как тип

проекта и щелкнуть по кнопке «Далее». Открывается помощник New Web

Application.

3.В поле «Имя» проекта набрать guessNumber и щелкнуть по кнопке

«Далее».

4.На странице Server and Settings выбрать из меню Server as GlassFish v3,

версию Java EE 6 Web, затем щелкнуть по кнопке «Далее».

5.На странице Frameworks установить переключатель JavaServer Faces и щёлкнуть по кнопке «Конец». Новый проект создаётся и становится доступным

в окне проектов. По умолчанию создается файл index.xhtml и открывается в

редакторе.

Шаги создания приложения

1.Щелчок правой клавишей мыши на узле проекта.

Выбрать New→Java package.

2.В поле имени пакета набрать guessNumber и щелкнуть по кнопке «Конец».

Создаётся новый пакет, который устанавливается в узел исходников проекта.

3.Щелчок правой клавишей мыши на узле исходников пакетов. Выбрать новый

класс Java.

4.Набрать имя файла класса UserNumberBean, выбрать имя пакета как guessNumber и щёлкнуть по кнопке «Конец». Новый файл класса Java создан и открыт в IDE.

5.Заменить содержимое файла класса Java кодом примера UserNumberBean. java, указанным выше, и сохранить файл.

6.Создать две новых страницы XHTML с именами greeting.xhtml и response. xhtml соответственно:

•сделать щелчок правой клавишей мыши по узлу проекта. Выбрать «Новый-> Другой». Откроется помощник создания нового файла;

•выбрать категорию Web, затем тип файла XHTML и щёлкнуть по кнопке

«Далее»;

•ввести greeting.xhtml в поле имени файла XHTML и щёлкнуть по кнопке «Конец». Новая веб-страница XHTML создана и установлена в узел веб-

страниц;

•повторить вышеуказанные шаги для файла response.xhtml, чтобы создать вторую страницу.

7.Отредактировать файлы XHTML и добавить нужное содержимое:

•заменить содержимое файла greeting.xhtml кодом примера, указанным

выше, и сохранить файл;

•аналогично заменить содержимое response.xhtml кодом примера и сохра-

нить файл.

8.Добавить рисунок Duke как часть приложения, копируя файл wave.med.gif из

демонстрационного примера и сохранить его как ресурс:

•создать папку с именем resources в Web;

•создать подкаталог images в папке resources;

•сохранить wave.med.gif в папке resources/images.

50