Разработка простого приложения Facelets: пример guessnumber-jsf

В этом разделе описываются основные этапы разработки приложения JavaServer Faces. Обычно требуются следующие задачи:

Разработка Managed-бинов
Создание страниц с использованием тегов компонентов
Определение навигации по страницам
Отображение объекта FacesServlet
Добавление объявлений Managed-бинов

Здесь рассматриваются следующие темы:

Создание приложения Facelets
Настройка приложения
Выполнение guessnumber-jsf

Создание приложения Facelets

В этом учебнике реализован пример приложения guessnumber-jsf. Приложение представляет страницу, которая предлагает угадать число от 0 до 10, проверяет ввод по случайному числу и отвечает другой страницей, которая сообщает, правильно угадано число или нет.

Исходный код этого приложения находится в каталоге tut-install/examples/web/jsf/guessnumber-jsf/.

Разработка Managed-бина

В типичном приложении JavaServer Faces каждая страница приложения подключается к вспомогательному Managed-бину. Этот бин определяет методы и свойства, связанные с компонентами. В этом примере обе страницы используют один и тот же вспомогательный компонент.

Следующий класс Managed-бинов, UserNumberBean.java, генерирует случайное число от 0 до 10 включительно:

package javaeetutorial.guessnumber;

import java.io.Serializable;
import java.util.Random;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class UserNumberBean implements Serializable {

    private static final long serialVersionUID = 5443351151396868724L;
    Integer randomInt = null;
    Integer userNumber = null;
    String response = null;
    private int maximum = 10;
    private int minimum = 0;

    public UserNumberBean() {
        Random randomGR = new Random();
        randomInt = new Integer(randomGR.nextInt(maximum + 1));
        // Вывод числа в лог сервера
        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 "Sorry, " + userNumber + " is incorrect.";
        } else {
            return "Yay! You got it!";
        }
    }

    public int getMaximum() {
        return (this.maximum);
    }

    public void setMaximum(int maximum) {
        this.maximum = maximum;
    }

    public int getMinimum() {
        return (this.minimum);
    }

    public void setMinimum(int minimum) {
        this.minimum = minimum;
    }
}

Обратите внимание на использование аннотации @Named, которая делает Managed-бин доступным через EL. Аннотация @SessionScoped регистрирует компонент в области видимости сессии, чтобы можно было сделать несколько предположений при запуске приложения.

Создание представлений Facelets

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

В этом примере пользовательский интерфейс выполнен веб-страницами XHTML. Первая страница примера приложения — это страница greeting.xhtml. Внимательный взгляд на различные разделы этой веб-страницы даёт много информации.

Первый раздел веб-страницы объявляет тип её содержимого. Это XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

В следующем разделе указывается язык страницы, а затем объявляется пространство имён XML для библиотек тегов, используемых на веб-странице:

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

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

    <h:head>
        <h:outputStylesheet library="css" name="default.css"/>
        <title>Guess Number Facelets Application</title>
    </h:head>
    <h:body>
        <h:form>
            <h:graphicImage value="#{resource['images:wave.med.gif']}"
                            alt="Duke waving his hand"/>
            <h2>
                Hi, my name is Duke. I am thinking of a number from
                #{userNumberBean.minimum} to #{userNumberBean.maximum}.
                Can you guess it?
            </h2>
            <p><h:inputText id="userNo"
                            title="Enter a number from 0 to 10:"
                            value="#{userNumberBean.userNumber}">
                   <f:validateLongRange minimum="#{userNumberBean.minimum}"
                                        maximum="#{userNumberBean.maximum}"/>
                </h:inputText>
                <h:commandButton id="submit" value="Submit"
                                 action="response"/>
            </p>
            <h:message showSummary="true" showDetail="false"
                       style="color: #d20005;
                       font-family: 'New Century Schoolbook', serif;
                       font-style: oblique;
                       text-decoration: overline"
                       id="errors1"
                       for="userNo"/>
        </h:form>
    </h:body>

Обратите внимание на использование следующих тегов:

HTML-теги Facelets (начинающиеся с h:) для добавления компонентов
Стандартный тег Facelets f:validateLongRange для валидации пользовательского ввода

Тег h:inputText принимает пользовательский ввод и устанавливает значение свойства Managed-бина userNumber через выражение EL #{userNumberBean.userNumber}. Введённое значение валидацируется на принадлежность к диапазону значений с использованием стандартного тега валидатора JavaServer Faces f:validateLongRange.

Файл изображения wave.med.gif добавляется на страницу в качестве ресурса, как и таблица стилей. Для получения дополнительной информации об объекте ресурсов см. Веб-ресурсы.

Тег h:commandButton с идентификатором submit запускает валидацию входных данных, когда пользователь кликает кнопку. Используя неявную навигацию, тег перенаправляет клиента на другую страницу, response.xhtml, которая показывает ответ ввод. На странице указан только response, что по умолчанию заставляет сервер искать 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 lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <h:outputStylesheet library="css" name="default.css"/>
        <title>Guess Number Facelets Application</title>
    </h:head>
    <h:body>
        <h:form>
            <h:graphicImage value="#{resource['images:wave.med.gif']}"
                            alt="Duke waving his hand"/>
            <h2>
                <h:outputText id="result" value="#{userNumberBean.response}"/>
            </h2>
            <h:commandButton id="back" value="Back" action="greeting"/>
        </h:form>
    </h:body>
</html>

Эта страница также использует неявную навигацию, устанавливая атрибут action для кнопки «Назад», чтобы отправлять пользователя на страницу greeting.xhtml.

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

Конфигурирование приложения JavaServer Faces включает в себя назначение шаблона URL для сервлета Faces файле дескриптора развёртывания web.xml и, возможно, добавление объявлений Managed-бинов, правил навигации и объявлений ресурсов bundle в файл конфигурации приложения faces-config.xml.

Если вы используете IDE NetBeans, файл дескриптора развёртывания создаётся автоматически. В таком созданном IDE файле web.xml измените страницу входа по умолчанию — index.xhtml — на greeting.xhtml. Вот пример файла web.xml, где это изменение показано жирным шрифтом.


<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
  http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.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>*.xhtml</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>greeting.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Обратите внимание на использование контекстного параметра PROJECT_STAGE. Этот параметр определяет статус приложения JavaServer Faces в жизненном цикле ПО.

Этап приложения может повлиять на поведение приложения. Например, если этап проекта определён как Development, для пользователя автоматически создаётся информация об отладке. Если пользователь не определил его, этап проекта по умолчанию Production.

Выполнение guessnumber-jsf

Вы можете использовать IDE NetBeans или Maven для сборки, упаковки, развёртывания и запуска примера guessnumber-jsf.

Здесь рассматриваются следующие темы:

Сборка, упаковка и развёртывание guessnumber-jsf в IDE NetBeans
Сборка, упаковка и развёртывание guessnumber-jsf с использованием Maven
Запуск guessnumber-jsf

Сборка, упаковка и развёртывание guessnumber-jsf в IDE NetBeans

Удостоверьтесь, чтобы GlassFish Server был запущен (см. Запуск и остановка сервера GlassFish).
В меню «Файл» выберите «Открыть проект».
В диалоговом окне «Открыть проект» перейдите к:
```
tut-install/examples/web/jsf
```
Выберите каталог guessnumber-jsf.
Нажмите Открыть проект.
На вкладке «Проекты» кликните правой кнопкой мыши проект guessnumber-jsf и выберите «Сборка».

Эта команда собирает приложение и развёртывает его в GlassFish Server.

Сборка, упаковка и развёртывание guessnumber-jsf с использованием Maven

Удостоверьтесь, чтобы GlassFish Server был запущен (см. Запуск и остановка сервера GlassFish).
В окне терминала перейдите в:
```
tut-install/examples/web/jsf/guessnumber-jsf/
```
Введите следующую команду:
```
mvn install
```
Эта команда собирает и упаковывает приложение в WAR-файл guessnumber-jsf.war, который находится в каталоге target. Затем он развёртывается на сервере.

Запуск guessnumber-jsf

Откройте веб-браузер.
Введите следующий URL в браузере:
```
http://localhost:8080/guessnumber-jsf
```
В поле введите число от 0 до 10 и нажмите «Отправить».

Появится другая страница, сообщающая, верно ваше предположение или нет.
Если вы угадали неправильно, нажмите Назад, чтобы вернуться на главную страницу.

Вы можете продолжать угадывать, пока не получите правильный ответ, или вы можете посмотреть в журнале сервера, где конструктор UserNumberBean отображает правильный ответ.