Учебники по WTP - Учебник по инструментам JavaServer Faces
Резюме
В данном учебнике мы скомпонуем и выполним приложение JavaServer Faces
и уделим особое внимание функциям, которые предоставлены проектом инструментов JSF.
Рагу Шринивасан, Oracle Corporation.
15 июня 2009 г.
Введение
В этом учебнике мы создадим и выполним web-приложение
с использованием возможностей JavaServer Faces. В проекте инструментов WTP JSF реализованы
возможности, которые упрощают процессы построения, настройки и выполнения приложения. К их числу принадлежат Редактор веб-страниц для визуального
редактирования веб-страниц JSF-JSP, синтаксической и семантической проверки
страницы JSF-JSP и Редактор конфигурации Faces для редактирования файла
ресурсов конфигурации приложения.
Перед работой с этим учебником
вам может понадобиться ознакомиться с учебникомКомпоновка и выполнение веб-приложения. В нем
описана настройка экземпляра сервера, которая не
освещена в данном учебнике.
Настройка
Установите Редактор веб-страниц как редактор по умолчанию для страниц JSP
Редактор веб-страниц (WPE) проекта JSF Tools НЕ зарегистрирован как редактор
по умолчанию для файлов JSP. Сделать WPE редактором по умолчанию для файлов JSP
можно с помощью следующих действий:
- Откройте "Окно" -> "Параметры..." -> "Общие" ->
"Редакторы" -> "Ассоциации файлов"
- В разделе "Типы файлов" выберите "*.jsp"
- В разделе "Связанные редакторы" выберите "Редактор веб-страниц"
- Нажмите кнопку "По умолчанию"
Создайте проект JavaServer Faces
Создайте новое динамическое веб-приложение с именем JSFTutorial.
Укажите Apache Tomcat 6.0 в качестве целевой среды выполнения
В разделе конфигурация выберите JavaServer Faces
Project v1.2. Пропустите следующие две панели и перейдите к странице Возможности
JSF.

На странице Возможности JSF из выпадающего списка Тип библиотеки JSF выберите
Пользовательская библиотека.

Щелкните на значке Загрузить библиотеку.
Появится окно диалога Загрузка библиотеки со списком провайдеров
файлов JAR реализации JSF. Выберите библиотеку от Sun
Microsystem. Нажмите Далее. Включите переключатель согласия с условиями лицензии и нажмите кнопку Готово

Этот инструмент загружает файлы JAR, создает пользовательскую библиотеку JDT и добавляет ее в текущий проект. Включите переключатель этой новой библиотеки, если он не включен. Теперь щелкните на значке Управлять библиотеками.
Создание пользовательской библиотеки JDT для файла JSTL jar. Нажмите кнопку OK.
В окне диалога Возможности JSF присутствует библиотека JSTL. Выберите библиотеку и нажмите кнопку Готово
Приложение JSF создано. Обратите внимание на то, что в файл web.xml
добавлены сервлет Faces и элементы servlet-mapping, создан пример файла
конфигурации приложения JSF (faces-config.xml), а в путь для компоновки
добавлены jar-файлы реализации.

Если вы создали
Динамическое веб-приложение ранее, то в него можно добавить возможности
JSF с помощью команды меню:
Свойства проекта > Фасеты проекта > Добавить/удалить фасеты
проекта…
Создайте страницу JSF JSP
С помощью мастера страниц JSP создайте страницу с именем login.jsp
в папке нового приложения Содержимое Web. На странице мастера Выберите
Шаблоны выберите шаблон Новый JSP(html).
Нажмите кнопку Готово. Страница откроется в Редакторе веб-страниц, как показано ниже

Откройте панель Свойства. Правой кнопкой мыши щелкните на холсте проектировщика и в контекстном меню выберите пункт Показать->Свойства. Дождитесь закрытия окна "Чтение свойств".
Добавьте на холст компонент CommandButton.
- На Панели палитры щелкните на разделе JSF HTML, чтобы просмотреть список компонентов.
- Перенесите и положите компонент CommandButton на холст. Обратите внимание на то, что редактор окружает компонент CommandButton тегами <f:view> и <h:form>.
- На панели Свойства щелкните на закладке Быстрое редактирование.
- Установите для атрибута Значение значение Вход в систему.
- Установите для атрибута Действие значение login.
Добавьте компонент PanelGrid
- Перенесите компонент PanelGrid с Панели палитры на холст. Обратите внимание на ответную реакцию принимающего компонента.
- Положите компонент Panel Grid перед Command Button, но внутри тега Form. Компонент Panel Grid создается с предварительным набором компонентов OutputText.
Измените компоненты, расположенные внутри Panel Grid
- Щелкните на элементе элемент-2 компонента OutputText и нажмите Удалить
- Добавьте тег InputText (поле текста в Панели палитры) после элемента элемент-1 и перед элементом элемент-3
- Удалите из компонента OutputText элемент-4
- Добавьте тег InputSecret (поле пароля в Панели палитры) после элемента элемент-3
- Щелкните на элементе элемент-1 компонента OutputText. В панели исходного текста измените его значение на Имя
- Щелкните на элементе элемент-3 компонента OutputText. В панели исходного текста измените его значение на Пароль
- Щелкните на закладке Предварительный просмотр, чтобы увидеть, как страница выглядит в обозревателе.
- Щелкните на теге InputText, расположенном после поля Имя. На панели Свойства задайте для атрибута value значение #{loginBean.name}.
- Сохраните страницу. В редакторе появится предупреждение о том, что невозможно распознать переменную loginBean.
В Структуре проектов разверните узел JSFTutorial->WebContent.
Дважды щелкните на
faces-config.xml
. Эта команда запустит редактор конфигурации Faces. Выберите
вкладку
Управляемый объект.
Нажмите
кнопку
Добавить. В результате откроется Мастер создания Управляемых объектов. Выберите опцию
Создать класс Java. На следующей панели мастера укажитеcom.tutorial в качестве пакета и LoginBean в качестве имени класса. Нажмите кнопку Готово.
В результате
будет создан класс Java, зарегистрированный как управляемый объект. Сохраните изменения в Редакторе конфигурации Faces. Для редактирования класса Java щелкните на гиперссылке Класс управляемого объекта на странице Управляемый объект, как показано на рисунке ниже. Эта команда запустит редактор Java.
Измените класс Java
com.tutorial.LoginBean. Добавьте следующий код и сохраните изменения.
В Структуре проектов щелкните правой кнопкой мыши на
странице JSP login.jsp и в контекстном меню выберите
опцию
Проверить. Обратите внимание на то, что теперь страница не должна содержать ошибок.
На странице исходного текста Редактора веб-страниц добавьте тег JSF <h:inputSecret value="#{}"></h:inputSecret>
. Оставляя курсор расположенным внутри скобок нажмите Ctrl+пробел
. Вы увидите всплывающий список с перечислением всех явно указанных объектов, а также
с указанием управляемого объекта, который был определен выше. Выберите управляемый объект
loginBean
Введите имя свойства, например x, которое не определено в управляемом объекте,
и сохраните изменения. Редактор покажет предупреждение о том, что невозможно
распознать свойство.
Удалите недействительное свойство. Нажмите
Ctrl+пробел
после
'.'
в имени объекта. Вы увидите всплывающий список с перечислением свойств, определенных
в управляемом объекте. Выберите
из меню пункт
password.
Создайте класс Java
com.tutorial.validatePassword,
который реализует интерфейс
Агент проверки,
и сохраните его.
В Структуре проектов разверните узел JSFTutorial->WebContent.
Дважды щелкните на
faces-config.xml
. Эта команда запустит редактор файла faces-config. Перейдите
к вкладке
Компонент. Разверните
раздел
Агенты проверки.
Нажмите
кнопку
Добавить. Нажмите
кнопку Обзор,
связанную с полем
Класс агента проверки,
и выберите класс
com.tutorial.ValidatePassword. Сохраните изменения.
Добавьте тег JSF
<f:validator id=""></f:validator >
. Оставляя курсор расположенным внутри двойных кавычек нажмите
Ctrl+пробел
. Вы увидите всплывающий список с перечислением всех стандартных и
зарегистрированных в файле faces-config агентов проверки. Выберите
Проверить пароль
.
Теперь мы переместим статические строки, использованные на странице,
в комплект ресурсов. Для этого добавьте файл с именем
messages.properties
в папку
com.tutorial
. Определите свойства, как показано ниже, и сохраните файл.
Добавьте тег JSF
loadBundle,
как показано ниже. Тег можно перенести из раздела Ядро JSF Панели палитры.
Удалите строку
Name
в атрибуте value тега
outputLabel. Расположите курсор в скобках и нажмите
Ctrl+пробел
. Вы увидите всплывающий список, в который включена переменная
msg,
определенная нами
в теге
loadBundle. Выберите ее.
Введите точку после
msg
и нажмите
Ctrl+пробел
. Вы увидите всплывающий список с перечислением свойств, указанных
в файле
messages.properties. Выберите свойство
name
.
Заполните страницу идентификации, как показано ниже.
Создайте страницу JSF
welcome.jsp,
как показано ниже.
Редактор ресурсов конфигурации
Faces
В проекте инструментов JSF предусмотрен специальный редактор для файлов
ресурсов конфигурации faces. В следующем разделе приведено краткое
введение в Редактор. Скоро будет выпущен учебник с исчерпывающей
информацией по всем функциям редактора.
Дважды щелкните на файле
faces-config.xml
для запуска Редактора конфигурации Faces. Перейдите
на вкладку Навигация.
- Добавьте во вкладку Навигация login.jsp и
welcome.jsp. Выберите на Палитре элемент управления Страница
и перенесите его на вкладку Навигация. В открывшемся окне Выберите
файл JSP выберите страницу.
- Соедините страницы. Щелкните на элементе управления Ссылка
на Палитре, выберите страницу login и проведите линию к странице
welcome. На вкладке Навигация выберите линию и на панели свойств
установите для from-outcome значение login .
Тестирование страницы JSF JSP
1) Теперь мы запустим страницу с помощью сервера Apache Tomcat.
Выделите в навигаторе страницу login.jsp и в контекстном меню
выберите Запустить на сервере.

2) Выберите ваш сервер Apache Tomcat и настройте его требуемым образом,
если вы не сделали этого ранее.
3) Нажмите кнопку Закончить. В панели Консоли вы увидите, что сервер Tomcat
запускается, а затем в веб-обозревателе будет показана запущенная страница
идентификации, как показано ниже.

Нажмите
кнопку
login. Вы перейдете на
страницу
welcome.
Поздравляем! Вы создали и выполнили свое первое приложение
JavaServer Faces с помощью новых инструментов Eclipse WTP JSF.