corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

Введение в инфраструктуру JSF

Этот документ является первым в серии документов, в которых представлены основы использования инфраструктуры JavaServer Faces (JSF) для написания исходного кода веб-приложения в среде IDE NetBeans. В серии руководств описывается создание веб-приложения jAstrologer, принимающего имя пользователя и день рождения и возвращающего информацию о знаке Зодиака пользователя, камне, соответствующем знаку Зодиака, и гороскопе.

Инфраструктура JavaServer Faces является стандартным интерфейсом API Java для создания элементов пользовательского интерфейса в веб-приложениях. Инфраструктуру JSF можно считать комплектом средств, полным готовых к использованию элементов, которые можно быстро, просто и многократно использовать в веб-приложении. Эти элементы могут быть простыми, как текстовые поля ввода, получающие и хранящие пользовательские данные, либо более сложными, такими как поля отформатированной даты с календарем. Элементы встраиваются в страницы JSP и используют инфраструктуру для обработки переходов между различными страницами JSP.

Содержание

Содержимое на этой странице относится к среде IDE NetBeans 6.0/6.1

Для работы с этим руководством требуется программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или ресурс Требуемая версия
Среда IDE NetBeans Установка Web and Java EE
версия 6.1 или версия 6.0
Комплект для разработчика на языке Java (JDK) версия 6 или версия 5
GlassFish V2

Примечание: Сервер приложений GlassFish версии V2 Update Release 1 дополнительно входит в вариант установки "Web and Java EE" среды IDE NetBeans.

Создание веб-приложения с инфраструктурой JSF

Среда IDE NetBeans позволяет добавлять поддержку JSF к веб-приложению при создании нового проекта, а также к любому существующему проекту веб-приложения, открытому в среде IDE. Сервер GlassFish уже включает в себя библиотеки JSF; таким образом, отсутствует необходимость загружать или устанавливать их в сервере приложений. В этом примере поддержка JSF добавляется в ходе создания нового проекта веб-приложения.

  1. Выберите "File > New Project" (Ctrl-Shift-N) для открытия мастера создания проекта. В "Categories" выберите "Web"; в "Projects" выберите "Web Application". Нажмите кнопку "Next".
  2. Укажите имя проекта jAstrologer и определите его местоположение в системе, а затем нажмите кнопку "Next".
  3. На третьем экране мастера ("Server and Settings") выберите сервер GlassFish V2, установите версию Java EE как "Java EE 5", а затем нажмите кнопку "Next".
  4. Выберите пункт "JavaServer Faces" и нажмите кнопку "Finish".

Среда IDE создает шаблон проекта для всего приложения и открывает пустую страницу JSP (welcomeJSF.jsp) в редакторе исходного кода. Логическую структуру нового проекта можно просмотреть в окне "Projects" (Ctrl-1). Разверните узел проекта "Libraries > GlassFish V2". Следует отметить, что библиотеки JSF, например jsf-impl.jar, добавляются к пути к классам. Разверните "Configuration Files" и обратите внимание, что средой IDE был создан файл faces-config.xml, управляющий поведением элементов JSF в веб-приложении. Среда IDE также зарегистрировала сервлет "Faces" в дескрипторе развертывания web.xml. Сервлет "Faces" обрабатывает переходы между страницами JSP, управляемыми инфраструктурой JSF.

Новый проект "jAstrologer" в окне "Projects Window"

Создание страниц JSP

Создайте страницу JSP с именем greeting.jsp, на которой будет размещено приветствие и средства сбора информации о пользователе. Затем создайте страницу success.jsp, поздравляющую пользователя в ответ на получение данных из формы.

Создание страницы приветствия

  1. В окне "Projects" щелкните правой кнопкой мыши узел проекта и выберите "New > JSP". Присвойте файлу имя greeting. Убедитесь, что выбран пункт "JSP File (Standard Syntax)", и нажмите кнопку "Finish". В результате создается новый файл JSP, который открывается в редакторе исходного кода. Кроме того, следует отметить, что файл добавляется к узлу "Web Pages" в окне "Projects".
  2. В редакторе исходного кода объявите библиотеки тегов JSF в greeting.jsp. Для этого добавьте следующий код в начало файла: 
    <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
    Следует отметить, что можно использовать встроенную в среду IDE функцию автозавершения кода. Во время ввода нажмите комбинацию клавиш Ctrl-Space для отображения списка предложений по автозавершению, основанных на контексте. Таким образом, автозавершение кода может упростить добавление имен тегов и атрибутов, таких как, например, идентификаторы URI библиотек вкладок.
  3. Измените содержимое тегов title и h2 на Welcome to jAstrologer.
  4. Теперь добавьте форму JSF к файлу. В окне "Palette" (Ctrl-Shift-8) разверните категорию JSF. Имеется возможность перетаскивания элементов из палитры непосредственно в редактор исходного кода. Нажмите кнопку "JSF Form", перетащите элемент непосредственно под тег h2 и отпустите кнопку мыши. В появившемся диалоговом окне оставьте пункт "Empty Form" выбранным и нажмите кнопку "OK". Средой IDE добавляется следующий код (выделенный полужирным шрифтом): 
    <h2>Welcome to jAstrologer</h2>

<f:view>
    <h:form>
    </h:form>
</f:view>
  5. Для получения вводимой пользователем информации можно использовать элементы inputText и элемент commandButton для передачи формы. В редакторе исходного кода измените содержимое тегов <h:form> на следующее (изменения выделены полужирным шрифтом): 
    <f:view>
    <h:form>
        <p>Enter your name: <h:inputText value="name" /></p>
        <p>Enter your birthday: <h:inputText value="birthday" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
    Для форматирования кода щелкните правой кнопкой мыши в редакторе исходного кода и выберите "Format" (Alt-Shift-F).

Создание страницы "Success"

Теперь создайте страницу JSP, на которой будет размещено поздравление.

  1. Создайте новый файл JSP, как было описано выше. Присвойте файлу имя success.
  2. Замените содержимое файла следующим кодом: 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Congratulations</title>
</head>
<body>
    <h2>Congratulations</h2>

    <p>You've successfully registered with jAstrologer. </p>
</body>
    Следует отметить, что файл до сих пор содержал только простой HTML, так что пока что отсутствует необходимость в объявлении библиотеки тегов JSF.

Настройка переходов по страницам

Управление переходами на странице в инфраструктуре JSF осуществляется при помощи faces-config.xml. Для каждой страницы JSP в проекте в faces-config.xml устанавливается правило перехода, содержащее один или более вариант перехода. Здесь можно просто отобразить действие передачи из commandButton в success.jsp; таким образом, что пользователь будет видеть сообщение об успешности операции независимо от того, что было введено в поля.

  1. В окне "Projects" дважды щелкните faces-config.xml для открытия файла в редакторе исходного кода. На панели инструментов над файлом нажмите кнопку "XML" для отображения файла в виде простого XML.
  2. Щелкните правой кнопкой мыши любое место в файле и выберите "Java ServerFaces > Add Navigation Rule". Введите /greeting.jsp в "Rule" из поля "View" и при необходимости введите описание правила.

    Диалоговое окно "Add Navigation Rule" с данными для примера


    Нажмите кнопку "Add". В faces-config.xml вводится следующий код: 
    <navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
</navigation-rule>
  3. Снова щелкните правой кнопкой мыши внутри faces-config.xml и выберите "Java ServerFaces > Add Navigation Case". В появившемся диалоговом окне установите следующие значения:
    • From View: /greeting.jsp
    • From Outcome: submit
    • To View: /success.jsp

    Диалоговое окно "Add Navigation Case" с данными для примера


    Нажмите кнопку "Add". В faces-config.xml автоматически добавляется следующий код (изменения выделены полужирным шрифтом): 
    <navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
    <navigation-case>
        <from-outcome>submit</from-outcome>
        <to-view-id>/success.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

Настройка и запуск приложения

Настройте среду IDE для вывода на экран greeting.jsp при запуске приложения, после чего протестируйте приложение.

  1. В окне "Projects" щелкните правой кнопкой мыши узел проекта и выберите "Properties".
  2. Щелкните узел "Run" и введите /faces/greeting.jsp в поле "Relative URL". Это позволяет указать точку входа для приложения в среде IDE. Нажмите кнопку "OK".
  3. Щелкните правой кнопкой мыши узел проекта и выберите "Run" (F6). В среде IDE осуществляется сборка проекта, запуск сервера приложений и развертывание приложения, после чего во внешнем обозревателе по умолчанию открывается следующая страница:

    Вывод greeting.jsp в обозревателе


    После нажатия кнопки "Submit" отображается следующее:


    Вывод success.jsp в обозревателе

Подключение базового компонента

В предыдущем разделе мы создали простое веб-приложение с элементами JSF. Однако веб-приложение пока что не делает ничего интересного. Для добавления к веб-приложениям JSF расширенных функциональных возможностей можно связать элементы UI с базовыми компонентами. Базовый компонент, также называемый управляемым компонентом JSF, является стандартным элементом JavaBeans, свойства и методы компонента которого доступны элементам JSF.

В этом разделе описано создание управляемого компонента UserBean, предоставляющего два свойства компонента: name и birthday.

  1. В окне "Projects" щелкните правой кнопкой мыши узел проекта и выберите "New > Other" (Ctrl-N). В категории "JavaServer Faces" выберите "JSF Managed Bean" и нажмите кнопку "Next".
  2. Назовите компонент UserBean и создайте новый пакет с именем astrologer.user для вставки в него компонента. Оставьте для всех остальных параметров значения по умолчанию и нажмите кнопку "Finish".

    Мастер "New JSF Managed Bean" с данными для примера

    Среда IDE открывает UserBean.java в редакторе исходного кода и добавляет к faces-config.xml следующее объявление компонента: 
    <managed-bean>
    <managed-bean-name>UserBean</managed-bean-name>
    <managed-bean-class>astrologer.user.UserBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>
  3. Добавьте к UserBean.java следующие объявления полей (выделенные полужирным шрифтом): 
    public class UserBean {

    String name;
    String birthday;
  4. Создайте методы получения и установки для полей: щелкните правой кнопкой мыши в любом месте в файле и выберите "Refactor > Encapsulate Fields". В появившемся диалоговом окне выберите параметры методов получения и установки для name и birthday, а затем нажмите кнопку "Refactor".

    Диалоговое окно "Encapsulate Fields" с данными для примера


    Уровень доступа для полей изменяется на private; в самом файле создаются методы получения и установки.
  5. Внесите следующие изменения в greeting.jsp (выделенные полужирным шрифтом). 
    <f:view>
    <h:form>
        <p>Enter your name: <h:inputText value="#{UserBean.name}" /></p>
        <p>Enter your birthday: <h:inputText value="#{UserBean.birthday}" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
    При вводе изменений используйте средства автозавершения кода IDE для UserBeans.java и его свойств путем нажатия комбинации клавиш Ctrl-Space и выбора доступных параметров.
  6. Добавьте объявления JSF taglib к success.jsp. Их можно скопировать и вставить из greeting.jsp.
  7. Добавьте пустую форму JSF к success.jsp путем нажатия кнопки "JSF Form" в окне "Palette" (Ctrl-Shift-8) и ее перетаскивания непосредственно под теги <h2> в редакторе исходного кода.
  8. Внесите следующие изменения в success.jsp (изменения выделены полужирным шрифтом): 
    <h2>Congratulations</h2>

    <f:view>
        <h:form>
            <p>You've successfully registered with jAstrologer. </p>
            <p>Your name is <h:outputText value="#{UserBean.name}" /></p>
            <p>Your birthday is <h:outputText value="#{UserBean.birthday}" /></p>
        </h:form>
    </f:view>
  9. В окне "Projects" щелкните правой кнопкой мыши узел проекта и выберите "Run". Та же самая страница greeting.jsp отображается в обозревателе при повторном развертывании и запуске приложения. Теперь при вводе значений и нажатии "Submit" success.jsp выводит на экран введенные значения, как показано ниже:

    "success.jsp" с введенной пользователем информацией


Дополнительная информация

В этом документе описано создание веб-приложения в среде IDE NetBeans с помощью инфраструктуры JSF. Продемонстрировано создание простой страницы JSP, использующей элементы JSF для получения вводимой пользователем информации, а также описана настройка переходов на странице. Показано создание управляемого компонента JSF, чтение и запись вводимой пользователем информации в свойства элемента.

Для получения дополнительных сведений об использовании других веб-инфраструктур в среде IDE NetBeans см. следующие материалы:
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems