Использование мастера создания управляемого компонента

1. В окне "Проекты" щелкните правой кнопкой мыши узел проекта jsfDemo и выберите команду "Создать > Управляемый компонент JSF". (Если "Управляемый компонент" отсутствует, выберите "Другие". Затем выберите параметр "Управляемый компонент JSF" в категории "JavaServer Faces". Нажмите кнопку "Далее".
2. В мастере введите следующее:
   • Имя класса: UserNumberBean;
   • Пакет: guessNumber;
   • Имя: UserNumberBean
   • Контекст: сеанс
   
3. Нажмите кнопку "Готово". Класс UserNumberBean будет создан и открыт в редакторе. Обратите внимание на следующие аннотации (выделено полужирным шрифтом):

   package guessNumber;
   
   import javax.faces.bean.ManagedBean;
   import javax.faces.bean.SessionScoped;
   
   /**
    *
    * @author nbuser
    */
   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean {
   
       /** Создает новый экземпляр UserNumberBean */
       public UserNumberBean() {
       }
   
   }

   Поскольку используется JSF 2.0, можно объявить все специфические для JSF компоненты с помощью аннотаций. В предыдущих версиях их необходимо было объявлять в файле настройки Faces (faces-config.xml).

   Для просмотра документации Javadoc по всем аннотациям JSF 2.0 обратитесь к Спецификации аннотации управляемого компонента Faces.

Создание конструктора

Конструктор UserNumberBean должен создавать случайное число от 0 до 10 и сохранять его в переменной экземпляра. Таким образом частично формируется бизнес-логика для приложения.

1. Определите конструктор для класса UserNumberBean. Введите следующий код (изменения выделены полужирным шрифтом).

   public class UserNumberBean {
   
       Integer randomInt;
   
       /** Создает новый экземпляр UserNumberBean */
       public UserNumberBean() {
           Random randomGR = new Random();
           randomInt = new Integer(randomGR.nextInt(10));
           System.out.println("Номер Дюка: " + randomInt);
       }
   
   }

   Вышеуказанный код создает случайное число от 0 до 10 и выводит число в протоколе сервера.
2. Исправьте операторы импорта. Для этого щелкните значок подсказки (), отображаемый в левом поле редактора, затем выберите параметр для импорта java.util.Random в класс.
3. Выполните проект еще раз (нажмите кнопку "Выполнить проект" () или нажмите F6; fn-F6 на компьютере Mac). При выполнении проекта файл протокола сервера автоматически открывается в окне вывода.
   
4. Обратите внимание на то, что в окне вывода не отображается "Номер Дюка: " (как указывалось в конструкторе). Объект UserNumberBean не создан, так как по умолчанию в JSF используется "ленивое" создание экземпляра. Таким образом, компоненты в определенных контекстах создаются и инициализируются, только если они необходимы в приложении.

   Состояния Документации Javadoc по аннотации @ManagedBean:

   Если атрибут eager() имеет значение true, а значением managed-bean-scope является "application", то в среде выполнения при запуске приложения должен быть создан экземпляр этого класса. Создание и сохранение экземпляра должно осуществляться до обслуживания запросов. Если атрибут eager не указан либо имеет значение false или элементу managed-bean-scope не присвоено значение "приложение", по умолчанию происходит "ленивое" создание экземпляра и контекстное сохранение управляемого компонента.
5. Поскольку класс UserNumberBean входит в контекст сеанса, реализуется интерфейс Serializable.

   @ManagedBean(name = "UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {

   Используйте значок подсказки () для импорта java.io.Serializable в класс.

Добавление свойств

Страницы Facelets, создаваемые в следующем разделе, должны иметь доступ к числу, вводимому пользователем, и к сгенерированному ответу. Для упрощения этого добавьте свойства userNumber и response к классу.

1. Начните с объявления Integer с именем userNumber.

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;

2. Щелкните правой кнопкой мыши в редакторе и выберите команду "Вставить код" (ALT+INS; CTRL+I на компьютере Mac). Выберите методы получения и установки.
   
3. Выберите параметр userNumber: Integer.
   
   Нажмите кнопку "Создать". Обратите внимание на то, что методы getUserNumber() и setUserNumber(Integer userNumber) добавлены в класс.
4. Создайте свойство response. Объявите String с именем response.

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;
       String response;

5. Создайте метод получения для response. (Для этого приложения не требуется метод установки.) Для создания кода шаблона в среде IDE можно использовать всплывающее окно "Создание кода", упомянутое выше в действии 2. Однако в целях изучения данного руководства просто вставьте нижеуказанный метод в класс.

   public String getResponse() {
       if ((userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {
   
           //invalidate user session
           FacesContext context = FacesContext.getCurrentInstance();
           HttpSession session = (HttpSession) context.getExternalContext().getSession(false);
           session.invalidate();
   
           return "Ура! Получилось!";
       } else {
   
           return "<p>Извините, " + userNumber + " isn't it.</p>"
                   + "<p>Попробуйте еще раз...</p>";
       }
   }

   Вышеуказанный метод выполняет две функции.
   1. Тестирует введенное пользователем число (userNumber) на равенство случайному числу, сгенерированному для сеанса (randomInt), и возвращает соответствующий ответ String.
   2. Определяет пользовательский сеанс как недействительный, если пользователь ввел правильное число (т.е., если userNumber равно randomInt). Это необходимо для того, чтобы новое сгенерированное число побудило пользователя сыграть еще раз.
6. Щелкните правой кнопкой мыши в области редактора и выберите команду "Исправить операторы импорта" (ALT+SHIFT+I; &#8984+SHIFT+I на компьютере Mac). Параметры импорта автоматически создаются для:
   • javax.servlet.http.HttpSession
   • javax.faces.context.FacesContext

   Можно нажать сочетание клавиш CTRL+ПРОБЕЛ на элементах в редакторе для вызова предложений автозавершения кода и поддержки документации. Нажмите сочетание клавиш CTRL+ПРОБЕЛ, установив курсор на FacesContext, для просмотра описания класса из документации Javadoc.

   
   
   Щелкните значок веб-обозревателя () в окне документации для открытия документации Javadoc во внешнем веб-обозревателе.

index.xhtml

1. Откройте страницу index.xhtml в редакторе. Дважды щелкните узел index.xhtml в окне "Проекты" или нажмите сочетание клавиш ALT+SHIFT+O для открытия диалогового окна "Переход к файлу".
   
   Как индекс, так и страницы ответов уже содержат компоненты пользовательского интерфейса JSF, необходимые для этого упражнения. Просто раскомментируйте их и закомментируйте элементы HTML, используемые в настоящий момент.
2. Закомментируйте элемент формы HTML. Для этого выделите элемент формы HTML, как показано на изображении ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
   
   Примечание. Для того чтобы выделить элемент, щелкните левой кнопкой мыши и, не отпуская ее, перетащите указатель мыши в редакторе, или на клавиатуре нажмите клавишу SHIFT и, не отпуская ее, нажмите клавиши со стрелками.
   

   Для переключения комментариев нажмите сочетание клавиш CTRL+/ (&#8984+/ на компьютере Mac). Эту комбинацию клавиш также можно использовать для других типов файлов, например, Java и CSS.

3. Раскомментируйте компонент формы HTML для JSF. Выделите этот компонент, как показано на рисунке ниже, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).
   
   После того как компонент формы HTML для JSF раскомментирован, в редакторе будет указано, что теги <h:form>, <h:inputText> и <h:commandButton> не объявлены.
   
4. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег <html> страницы. Установите курсор на один из необъявленных тегов и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Предложения автозавершения кода и отображения поддержки документации.
   
   Нажмите клавишу ВВОД. (При наличии нескольких параметров перед нажатием клавиши ВВОД убедитесь, что выбран тег, отображаемый в редакторе.) Пространство имен библиотеки тегов HTML для JSF добавляется к тегу <html> (выделено ниже полужирным шрифтом), и указания на ошибки исчезают.

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

5. Используйте язык выражения JSF для привязки свойства userNumber для UserNumberBean к компоненту inputText. Атрибут value используется для указания текущего значения визуализируемого компонента. Введите в код, отображаемый ниже полужирным шрифтом.

   <h:form>
       <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />

   В языке выражения JSF используется синтаксис #{}. Внутри этих парных символов указывается имя требуемого управляемого компонента и его свойство, разделенные точкой (.). Теперь при отправке данных формы на сервер значение автоматически сохраняется в свойстве userNumber с помощью метода установки свойств (setUserNumber()). Кроме того, если страница запрошена и значение для userNumber уже установлено, значение автоматически отображается в визуализированном компоненте inputText. Дополнительные сведения приведены в руководстве по Java EE 6. Использование унифицированного языка выражения для ссылочных базовых компонентов.
6. Укажите адресата для запроса, который вызывается при нажатии кнопки формы. В HTML-версии формы это возможно выполнить с помощью атрибута action тега <form>. С помощью JSF можно использовать атрибут action для commandButton. Кроме того, благодаря функции неявных переходов JSF 2.0 необходимо только указать имя файла адресата без расширения файла.

   Введите в код, отображаемый ниже полужирным шрифтом.

   <h:form>
       <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
       <h:commandButton id="submit" value="submit" action="response" />
   </h:form>

   В среде выполнения JSF осуществляется поиск файла с именем response. Предполагается, что расширение файла такое же, как у файла, из которого произошел запрос (index.xhtml), и поиск файла response.xhtml выполняется в папке исходного файла (т.е. в корневом веб-узле).

   Примечание. Целью JSF 2.0 является значительное упрощение задач для разработчиков. При использовании JSF 1.2 для этого проекта необходимо объявить правило перехода в файле настройки Faces. Объявление правила может выглядеть следующим образом:

   <navigation-rule>
       <from-view-id>/index.xhtml</from-view-id>
   
       <navigation-case>
           <from-outcome>response</from-outcome>
           <to-view-id>/response.xhtml</to-view-id>
       </navigation-case>
   </navigation-rule>

   Нижеприведенные действия с 7 по 12 являются дополнительными. Если необходимо выполнить быструю сборку проекта, сразу перейдите к response.xhtml.

7. Протестируйте, выполняется ли вызов метода setUserNumber() вышеуказанным выражением на языке выражения при обработке запроса. Для выполнения этого используйте отладчик Java среды IDE.

   Переключите на класс UserNumberBean (нажмите сочетание клавиш CTRL+TAB и выберите из списка файл). Установите точку останова в сигнатуре метода setUserNumber(). Это можно сделать, щелкнув мышкой в области левого поля. Появится красный значок, указывающий, что точка останова метода установлена.

   
8. Нажмите кнопку "Отладка проекта" () на главной панели инструментов среды IDE. Начинается сеанс отладки, и в обозревателе открывается страница приветствия.

   Примечание. При появлении диалогового окна "Отладка проекта" выберите параметр по умолчанию "Java на стороне сервера" и нажмите кнопку "Отладка".

9. В обозревателе введите номер в форму и нажмите кнопку "Отправить".
10. Вернитесь в среду IDE и проверьте класс UserNumberBean. Отладчик приостановлен в методе setUserNumber().
    
11. Откройте окно "Переменные отладчика" (выберите "Окно" > "Отладка > "Переменные" или нажмите сочетание клавиш CTRL+SHIFT+1). На экран будут выведены значения переменных для точки, в которой приостановлен отладчик.
    

    На приведенном выше изображении значение "4" предоставлено для переменной userNumber в сигнатуре setUserNumber(). (Число 4 введено в форму.) "this" относится к объекту UserNumberBean, созданному для пользовательского сеанса. Далее можно отметить, что значение свойства userNumber в настоящий момент равно null.

12. На панели инструментов отладчика нажмите кнопку "Вход" (). Отладчик выполняет обработку строки, на которой он в настоящий момент приостановлен. Происходит обновление окна "Переменные" с указанием выполненных изменений.
    
    

    Теперь свойству userNumber присвоено значение, введенное в форме.

response.xhtml

1. Откройте страницу response.xhtml в редакторе. В окне "Проекты" дважды щелкните узел response.xhtml или нажмите сочетание клавиш ALT+SHIFT+O для открытия диалогового окна "Переход к файлу".
2. Закомментируйте элемент формы HTML. Выделите открывающий и закрывающий теги HTML <form> и код между ними, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).

   Примечание. Для того чтобы выделить элемент, щелкните левой кнопкой мыши и не отпуская перетащите указатель мыши в редакторе, или на клавиатуре нажмите клавишу SHIFT и не отпуская нажмите клавиши со стрелками.

3. Раскомментируйте компонент формы HTML для JSF. Выделите открывающий и закрывающий теги <h:form> и код между ними, затем нажмите CTRL+/ (&#8984+/ на компьютере Mac).

   На данном этапе, код между тегами <body> выглядит следующим образом:

   <body>
       <div id="mainContainer">
   
           <div id="left" class="subContainer greyBox">
   
               <h4>[ response here ]</h4>
   
               <!--<form action="index.xhtml">
   
                   <input type="submit" id="backButton" value="Back"/>
   
               </form>-->
   
               <h:form>
   
                   <h:commandButton id="backButton" value="Back" />
   
               </h:form>
   
           </div>
   
           <div id="right" class="subContainer">
   
               <img src="duke.png" alt="Duke waving" />
                <!--<h:graphicImage url="/duke.png" alt="Duke waving" />-->
   
           </div>
       </div>
   </body>

   После того как компонент формы HTML для JSF раскомментирован, в редакторе будет указано, что теги <h:form> и <h:commandButton> не объявлены.

4. Для объявления этих компонентов используйте автозавершение кода IDE, чтобы добавить пространство имен библиотеки тегов в тег <html> страницы.

   Используйте поддержку автозавершения кода в редакторе для добавления необходимых пространств имен JSF к файлу. При выборе тега JSF или Facelets через автозавершение кода происходит автоматическое добавление требуемого пространства имен к корневому элементу документа. Подробные сведения приведены в документе Поддержка JSF 2.0 в среде IDE NetBeans.

   Установите курсор на один из необъявленных тегов и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Предложения автозавершения кода и отображения поддержки документации.

   

   Нажмите клавишу ВВОД. (При наличии нескольких параметров перед нажатием клавиши ВВОД убедитесь, что выбран тег, отображаемый в редакторе.) Пространство имен библиотеки тегов HTML для JSF добавляется к тегу <html> (выделено ниже полужирным шрифтом), и указания на ошибки исчезают.

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

5. Укажите адресата для запроса, который вызывается при нажатии пользователем кнопки формы. Кнопку необходимо установить так, чтобы при ее нажатии пользователь возвращался на страницу-указатель. Для этого следует использовать атрибут action для commandButton. Введите в код, отображаемый полужирным шрифтом.

   <h:form>
   
       <h:commandButton id="backButton" value="Back" action="index" />
   
   </h:form>

   Примечание. При вводе action="index" пользователь полагается на функцию неявных переходов JSF. При нажатии кнопки формы в среде выполнения JSF осуществляется поиск файла с именем index. Предполагается, что расширение файла такое же, как у файла, от которого был направлен запрос (response.xhtml), и поиск файла index.xhtml выполняется в папке исходного файла (т.е. в корневом веб-узле).

6. Замените статический текст "[здесь ответ]" значением свойства response для UserNumberBean. Для этого используйте язык выражения JSF. Введите следующее (выделено полужирным шрифтом).

   <div id="left" class="subContainer greyBox">
   
       <h4><h:outputText value="#{UserNumberBean.response}"/></h4>

7. Выполните проект (нажмите кнопку "Выполнить проект" () или нажмите F6; fn-F6 на компьютере Mac). При появлении в обозревателе страницы приветствия введите номер и нажмите submit. Страница ответа будет отображаться следующим образом (выводится на экран, если введен неправильный номер).
   

   Две ошибки в текущем состоянии страницы ответа:

   1. Теги HTML <p> отображаются в ответном сообщении.
   2. Кнопка "Назад" не отображается в правильном местоположении. (Сравните с исходной версией.)

   При выполнении следующих двух шагов эти ошибки устраняются.

8. Установите атрибут escape тега <h:outputText> на false. Установите курсор между outputText и value, вставьте пробел и нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута escape и проверки документации.
   

   Как указано в документации, значение escape установлено по умолчанию на true. Это означает, что символы, которые стандартно анализируются как html, включены в строку, как указано выше. Установка значения на false означает, что символы, анализируемые как HTML, можно визуализировать как HTML.

   Нажмите клавишу ВВОД, затем в качестве значения введите false.

   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>

9. Установите атрибут prependId тега <h:form> на false. Установите курсор сразу после "m" в <h:form> и вставьте пробел, затем нажмите сочетание клавиш CTRL+ПРОБЕЛ для вызова автозавершения кода. Прокрутите вниз для выбора атрибута prependId и проверки документации. Затем нажмите клавишу ВВОД и в качестве значения введите false.

   <h:form prependId="false">

   В JSF применяются внутренние идентификаторы для отслеживания компонентов пользовательского интерфейса. В текущем примере при проверке исходного кода визуализируемой страницы отображается следующее:

   <form id="j_idt5" name="j_idt5" method="post" action="/jsfDemo/faces/response.xhtml" enctype="application/x-www-form-urlencoded">
   <input type="hidden" name="j_idt5" value="j_idt5" />
       <input id="j_idt5:backButton" type="submit" name="j_idt5:backButton" value="Back" />
       <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7464469350430442643:-8628336969383888926" autocomplete="off" />
   </form>

   Идентификатором элемента формы является j_idt5, и этот идентификатор предшествует идентификатору кнопки "Назад", включенной в форму (выделено полужирным шрифтом в приведенном выше примере). Поскольку кнопка "Назад" зависит от правила стиля #backButton (определенного в stylesheet.css), это правило становится блокированным, если идентификатор JSF предшествует идентификатору кнопки. Этого можно избежать, если для prependId установить значение false.

10. Выполните проект еще раз (нажмите кнопку "Выполнить проект" () или нажмите F6; fn-F6 на компьютере Mac). Введите число на странице приветствия, затем нажмите кнопку "Отправить". Теперь на странице ответа отображается ответное сообщение без тегов <p>, и кнопка "Назад" размещена правильно.
    
11. Нажмите кнопку "Назад". Поскольку текущее значение свойства userNumber для UserNumberBean привязано к компоненту inputText JSF, ранее введенное число теперь отображается в текстовом поле.
12. Проверьте протокол сервера в окне вывода среды IDE (CTRL+4; &#8984+4 на компьютере Mac) для определения правильного загаданного числа.

    Если по каким-то причинам просмотреть протокол сервера невозможно, откройте его посредством переключения на окно "Службы" (CTRL+5; &#8984+5 на компьютере Mac) и развертывания узла "Серверы". Затем правой кнопкой мыши щелкните сервер GlassFish, на котором развернут проект, и выберите "Просмотр протокола сервера". Если в журнале сервера не видно число, попробуйте пересобрать приложение, щелкнув правой кнопкой мыши узел проекта и выбрав "Очистка и сборка".

13. Введите правильное число и нажмите кнопку "Отправить". В приложении происходит сравнение введенного числа с текущим сохраненным числом и выводится соответствующее сообщение.
    
14. Нажмите еще раз кнопку "Назад". Обратите внимание на то, что ранее введенное число более не отображается в текстовом поле. Следует помнить о том, что метод getResponse() для UserNumberBean определяет текущий пользовательский сеанс как недействительный при угадывании правильного числа.

Создание файла шаблона Facelets

1. Создайте файл шаблона Facelets. Нажмите сочетание клавиш CTRL+N (&#8984+N на компьютере Mac) для открытия мастера создания файлов. Выберите категорию "JavaServer Faces", затем "Шаблон Facelets". Нажмите кнопку "Далее".
2. В поле "Имя файла" введите template.
3. Выберите один из восьми стилей размещения и нажмите кнопку "Готово". (Используется существующая таблица стилей, поэтому не имеет значения, какой стиль размещения будет выбран.)
   
   Мастером будут созданы файл template.xhtml и сопутствующие таблицы стилей на основе выбора, которые будут помещены в папку resources > css в корневом веб-узле проекта.

   После завершения выполнения мастера в редакторе открывается файл шаблона. Для просмотра шаблона в обозревателе щелкните правой кнопкой мыши в области редактора и выберите команду "Просмотреть".

4. Проверьте разметку файла шаблона. Обратите внимание на следующие моменты.
   • Библиотека тегов facelets объявлена в теге <html> страницы. Библиотека тегов имеет префикс ui.

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

   • На странице Facelets используются теги <h:head> и <h:body> вместо тегов HTML <head> и <body>. При использовании этих тегов у Facelets появляется возможность создания дерева компонентов, которое включает в себя всю страницу.
   • Страница ссылается на таблицы стилей, которые также создаются при завершении выполнения мастера.

     <h:head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
         <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
         <title>Facelets Template</title>
     </h:head>

   • Теги <ui:insert> используются в теле страницы для каждого раздела, связанного с выбранным стилем размещения. Каждый тег <ui:insert> имеет атрибут name, определяющий раздел. Например:

     <div id="top">
         <ui:insert name="top">Top</ui:insert>
     </div>

5. Повторно проверьте страницу приветствия и страницу ответа. Содержимым, которое изменяется на этих страницах, является только заголовок и текст в сером квадрате. Следовательно, шаблон может включать в себя все остальное содержимое.
6. Замените все содержимое файла шаблона содержимым, приведенным ниже.

   <?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"
         xmlns:h="http://java.sun.com/jsf/html">
   
       <h:head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
   
           <title><ui:insert name="title">Facelets Template</ui:insert></title>
       </h:head>
   
       <h:body>
   
           <div id="left">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
   
       </h:body>
   
   </html>

   Приведенный выше код реализует следующие изменения.
   • Файл stylesheet.css проекта заменяет ссылки на таблицу стилей шаблона, созданные в мастере.
   • Все теги <ui:insert> (вместе с тегами <div>) удаляются за исключением одного с именем box.
   • В теги <ui:insert> вставляется заголовок страницы с именем title.
7. Скопируйте в шаблон соответствующий код из файла index.xhtml или файла response.xhtml. Добавьте содержимое, отображаемое ниже полужирным шрифтом, в теги <h:body> файла шаблона.

   <h:body>
       <div id="mainContainer">
           <div id="left" class="subContainer greyBox">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
           <div id="right" class="subContainer">
               <img src="duke.png" alt="Duke waving" />
           </div>
       </div>
   </h:body>

8. Выполните проект. При открытии страницы приветствия в обозревателе измените URL-адрес на следующий:

   http://localhost:8080/jsfDemo/faces/template.xhtml

   Файл шаблона отображается следующим образом:
   

Теперь проект включает в себя файл шаблона, предоставляющий внешний вид и структуру всех представлений. Теперь можно создавать файлы клиента для вызова шаблона.

Создание файлов клиента шаблона

Создайте файлы клиента шаблона для страниц приветствия и ответа. Укажите имя файла клиента шаблона для страницы приветствия greeting.xhtml. Для страницы ответа – файл response.xhtml.

greeting.xhtml

1. Нажмите сочетание клавиш CTRL+N (⌘+N на компьютере Mac) для открытия мастера создания файлов. Выберите категорию "JavaServer Faces", затем "Клиент шаблона Facelets". Нажмите кнопку "Далее".
2. В поле "Имя файла" введите greeting.
3. Нажмите кнопку "Обзор" рядом с полем "Шаблон", затем в открывшемся диалоговом окне перейдите к файлу template.xhtml, созданному в предыдущем разделе.
   
4. Нажмите кнопку "Готово". Будет создан новый файл клиента шаблона greeting.xhtml, который откроется в редакторе.
5. Проверьте разметку. Обратите внимание на содержимое, выделенное полужирным шрифтом.

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://java.sun.com/jsf/facelets">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   title
               </ui:define>
   
               <ui:define name="box">
                   box
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   Файл клиента шаблона ссылается на шаблон с помощью атрибута template тега <ui:composition>. Поскольку шаблон содержит теги <ui:insert> для title и box, клиент шаблона содержит теги <ui:define> для этих двух имен. Содержимое, указываемое в тегах <ui:define>, - это содержимое, вставляемое в шаблон в тегах <ui:insert> соответствующего имени.
6. Укажите greeting в качестве заголовка файла. Внесите следующее изменение, выделенное полужирным шрифтом.

   <ui:define name="title">
       Greeting
   </ui:define>

7. Перейдите к файлу index.xhtml (нажмите CTRL+TAB) и скопируйте содержимое, которое обычно появляется в сером квадрате, выведенном на визуализируемой странице. Затем обратно переключитесь на файл greeting.xhtml и вставьте его в файл клиента шаблона. (Изменения выделены полужирным шрифтом.)

   <ui:define name="box">
       <h4>Привет, меня зовут Дюк!</h4>
   
       <h5>I'm thinking of a number
   
           <br/>
           between
           <span class="highlight">0</span> and
           <span class="highlight">10</span>.</h5>
   
       <h5>Угадаете?</h5>
   
       <h:form>
           <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
           <h:commandButton id="submit" value="submit" action="response" />
       </h:form>
   </ui:define>

8. Объявите библиотеку тегов HTML JSF для файла. Установите курсор на один из тегов, помеченных флагом ошибки (любой тег с префиксом "h"), и нажмите сочетание клавиш CTRL+ПРОБЕЛ. Затем выберите тег из списка предложений автозавершения кодов. Пространство имен библиотеки тегов добавляется к тегу <html> файла (выделено ниже полужирным шрифтом), и указания на ошибки исчезают.

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

   При установке курсора после "m" в <h:form> и нажатии сочетания клавиш CTRL+ПРОБЕЛ к файлу автоматически добавляется пространство имен. Если при нажатии сочетания клавиш CTRL+ПРОБЕЛ доступен только один логический параметр, он немедленно применяется к файлу. Библиотека тегов JSF автоматически объявляется при вызове автозавершения кода в тегах.

response.xhtml

Поскольку проект уже содержит файл с именем response.xhtml и известно, как теперь должен выглядеть файл клиента шаблона, измените существующий файл response.xhtml, чтобы получить соответствующий файл клиента шаблона. (В целях данного руководства просто скопируйте и вставьте предоставленный код.)

1. Откройте файл response.xhtml в редакторе. (Если он уже открыт, нажмите CTRL+TAB и выберите его). Замените содержимое всего файла нижеприведенным кодом.

   <?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"
         xmlns:h="http://java.sun.com/jsf/html">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   Response
               </ui:define>
   
               <ui:define name="box">
                   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
   
                   <h:form prependId="false">
   
                       <h:commandButton id="backButton" value="Back" action="greeting" />
   
                   </h:form>
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   Обратите внимание на то, что файл идентичен файлу greeting.xhtml, за исключением содержимого, указанного в тегах <ui:define> для title и box.
2. В дескрипторе развертывания web.xml проекта измените запись файла приветствия таким образом, чтобы при запуске приложения открывалась страница, представленная файлом greeting.xhtml.
   
   Для его открытия в редакторе в окне "Проекты" дважды щелкните "Файлы настройки" > web.xml. На вкладке "Страницы" измените поле "Файлы приветствия" на faces/greeting.xhtml.
   
3. Выполните проект и посмотрите, как он выглядит в обозревателе. Нажмите F6 (fn-F6 на компьютере Mac) или на главной панели инструментов нажмите кнопку "Выполнить проект" (). Проект будет развернут на сервере GlassFish и открыт в обозревателе.

При использовании шаблона Facelets и файлов клиента шаблона поведение приложения не меняется. Выделив повторяющийся код на страницах приветствия и ответа приложения, можно уменьшить размер приложения и устранить возможность написания повторяющегося кода, если впоследствии будут добавляться другие страницы. Это позволяет сделать разработку более эффективной и упростить управление при работе с большими проектами.

Статьи и учебные курсы по NetBeans

• Поддержка JSF 2.0 в среде IDE NetBeans
• Создание приложения CRUD JavaServer Faces 2.0 из базы данных
• Scrum Toys — полный пример приложения JSF 2.0
• Начало работы с приложениями для Java EE
• Учебная карта по Java EE и Java Web

Внешние ресурсы

• Технология JavaServer Faces (официальная домашняя страница)
• Спецификация JSR 314 для JavaServer Faces 2.0
• Руководство по Java EE 6. Глава 5. Технология JavaServer Faces
• GlassFish Project Mojarra (официальный пример реализации JSF 2.0)
• Форумы обсуждения OTN : JavaServer Faces
• JSF Central

Блоги

• Эд Бернс (Ed Burns)
• Райан Лубке (Ryan Lubke)
• Джим Дрисколл (Jim Driscoll)