Перейти к основному содержимому

Первая программа на JavaServer Faces

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

Play ITЗагрузка интерактивного демо…

Первая программа на JavaServer Faces​

Где применяют JSF​

JavaServer Faces — серверный MVC для Java EE — XHTML-страницы, managed beans, валидация на сервере. Подходит для корпоративных порталов и legacy-проектов на Tomcat; альтернатива "голым" JSP и предшественник SPA в экосистеме Java.

Если упростить до одного предложения — JSF удобен там, где бизнес-форма важнее "богатой" клиентской анимации, а серверная предсказуемость важнее фронтенд-гибкости.

Первая программа — Maven WebApp, faces-config, счётчик на bean.

JavaServer Faces (JSF) представляет собой стандартный фреймворк для создания веб-приложений на платформе Java Enterprise Edition. Фреймворк реализует паттерн Model-View-Controller (MVC), обеспечивая разделение логики приложения, пользовательского интерфейса и управления состоянием. Взаимодействие с JSF происходит через сервлеты, которые обрабатывают входящие HTTP-запросы и передают управление компонентам интерфейса. Создание первой программы позволяет познакомиться с жизненным циклом запроса, работой управляемых bean, валидацией данных и навигацией между страницами.

Создание проекта​

Для начала работы требуется среда выполнения Java (JDK) версии 8 или выше и сервер приложений, поддерживающий спецификацию Servlet и JSP, например Apache Tomcat. Также необходим инструмент сборки проектов, такой как Maven или Gradle.

Перед созданием проекта полезно сразу определить версию Jakarta/JSF и контейнер. Это снижает риск несовместимости зависимостей на старте.

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

# Установка Maven (если не установлен)
mvn -version

# Создание проекта Maven с архетипом JSF
mvn archetype:generate \
    -DgroupId=com.example \
    -DartifactId=my-first-jsf-app \
    -DarchetypeArtifactId=maven-archetype-webapp \
    -DinteractiveMode=false

cd my-first-jsf-app

Разбор:

  • mvn -version проверяет, что Maven установлен и доступен в PATH, иначе дальнейшие шаги сборки не сработают.
  • Команда mvn archetype:generate создаёт каркас web-проекта по шаблону и сразу заполняет базовые параметры через -D....
  • groupId и artifactId формируют координаты проекта и структуру итогового артефакта в экосистеме Maven.
  • Переход cd my-first-jsf-app фиксирует рабочую директорию, где находятся pom.xml, web-ресурсы и будущий код приложения.

После создания структуры необходимо добавить зависимости в файл pom.xml. Основные библиотеки включают сам фреймворк JSF (например, Mojarra или MyFaces), библиотеку для стилей (например, PrimeFaces или OmniFaces) и API сервлетов.

Код ITЗагрузка примера кода…

Файл web.xml содержит конфигурацию фронтенда-сервлета (FacesServlet), который перехватывает все запросы к ресурсам с расширением .xhtml.

Код ITЗагрузка примера кода…

Запуск (при настроенном плагине Tomcat в pom.xml):

mvn tomcat7:run

Либо скопируйте WAR в webapps Tomcat. Приложение: http://localhost:8080/my-first-jsf-app/.

Управляемый Bean (Managed Bean)​

Управляемые bean представляют собой классы Java, которые инкапсулируют состояние и логику представления. Они становятся доступны в контексте страницы и могут быть использованы для хранения данных формы, обработки событий и навигации.

Создадим класс CounterBean, который будет управлять счетчиком и текстом ввода. Класс помечается аннотацией @Named, чтобы его можно было найти по имени в Expression Language (EL). Аннотация @RequestScoped указывает, что экземпляр класса создается при каждом запросе и уничтожается после его завершения.

Код ITЗагрузка примера кода…

Разбор:

  • Аннотация @Named("counterBean") публикует бин в EL-контекст, поэтому страница может обращаться к нему через #{counterBean...}.
  • @RequestScoped создаёт новый экземпляр на каждый HTTP-запрос, что упрощает модель состояния для первого учебного примера.
  • @PostConstruct инициализирует поля после создания объекта, чтобы у представления были корректные стартовые значения.
  • Методы increment/decrement/reset инкапсулируют изменение состояния счётчика, а validateName добавляет сообщения в FacesContext.

Метод @PostConstruct вызывается сразу после создания экземпляра бина для инициализации значений. Методы increment, decrement и reset изменяют состояние объекта. Метод validateName демонстрирует работу с объектом FacesContext для добавления сообщений об ошибках или успехах. Тип Serializable обязателен для сохранения состояния между запросами при использовании определенных режимов скроллинга.

Страница представления (XHTML)​

Страница представления пишется на языке XML с использованием тегов из пространства имен JSF. Расширение файлов должно быть .xhtml. Фреймворк парсит этот файл и преобразует его в HTML, который отправляется браузеру.

Создадим файл index.xhtml в директории src/main/webapp.

Код ITЗагрузка примера кода…

Разбор:

  • Пространства имён xmlns:h, xmlns:f, xmlns:p подключают библиотеки тегов JSF и PrimeFaces для компонентной разметки.
  • h:form создаёт границу формы: только компоненты внутри неё участвуют в postback и серверной обработке.
  • Привязки value="#{counterBean.name}" и action="#{counterBean.increment}" связывают UI с методами/свойствами bean.
  • f:ajax event="blur" запускает частичный серверный цикл при потере фокуса и позволяет валидировать ввод без полной перезагрузки страницы.

Теги <h:> принадлежат пространству имен HTML JSF. Тег <h:form> оборачивает компоненты, требующие отправки данных на сервер. Атрибут value связывает компонент ввода с свойством бина (counterBean.name). Атрибут action вызывает метод бина при клике на кнопку. Директива rendered управляет видимостью блока в зависимости от условия. Тег <f:ajax> обеспечивает частичную перезагрузку страницы при событии blur (потеря фокуса), вызывая метод валидации без полной перерисовки.

Стили оформления​

Внешний вид приложения задается файлом CSS. Файлы стилей размещаются в директории src/main/webapp/css и подключаются через тег <h:outputStylesheet>.

Код ITЗагрузка примера кода…

CSS правила определяют расположение элементов, цвета и поведение при взаимодействии. Классы .ui-button применяются к кнопкам, генерируемым библиотекой PrimeFaces. Атрибут transform: scale(1.05) создает эффект увеличения кнопки при наведении курсора.

Жизненный цикл запроса JSF​

Приложение демонстрирует фундаментальные принципы работы фреймворка. Запрос проходит несколько этапов — восстановление состояния (Restore View), обработка входных данных (Process Validations), обновление модели (Update Model Values), вызов слушателей (Invoke Application) и рендеринг ответа (Render Response).

Восстановление состояния — это этап, на котором фреймворк восстанавливает дерево компонентов из предыдущего запроса или создает новое дерево. Данные из формы сохраняются во временном хранилище.

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

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

Рендеринг ответа формирует итоговый HTML-документ, который отправляется клиентскому браузеру. При использовании AJAX часть страницы обновляется динамически без перезагрузки всей страницы.

Навигация​

Навигация в JSF определяет переход пользователя между страницами после выполнения действий. Конфигурация может осуществляться через файл faces-config.xml или аннотации в коде.

Пример использования аннотации @NavigationCase в методе бина:

public String navigateToResult() {
    // Логика обработки
    return "result"; // Возвращаем логическое имя страницы
}

В файле faces-config.xml:

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

Альтернативный подход — использование выражений в return внутри метода, которые указывают путь к странице напрямую, если используется конфигурация по умолчанию.

Расширение функционала​

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

Добавление таблицы со списком задач предполагает использование компонента <p:dataTable> из библиотеки PrimeFaces. Данные передаются через список объектов, хранящихся в бине.

Реализация календаря требует подключения компонента <p:calendar> и настройки формата даты. Значение даты сохраняется в свойстве типа Date или LocalDate.

Интеграция с базой данных осуществляется через внедрение сущностей JPA или использование сервисного слоя для доступа к данным. Бин получает данные из сервиса и передает их в представление.

Пошаговый запуск​

Для успешного запуска приложения необходимо выполнить последовательность действий.

  1. Установите JDK 8+ (oracle.com или adoptium.net) и Maven (mvn --version).
mvn --version
  1. Настройте проект, pom.xml, бин, index.xhtml, style.css и web.xml в коде (см. разделы выше).
  2. Создание скелета и запуск:
mvn archetype:generate
mvn tomcat7:run

Откройте http://localhost:8080/my-first-jsf-app/.

Браузер автоматически откроет страницу приложения. Любые изменения в коде сохраняются и мгновенно отображаются на странице после перезапуска сервера.

Частые ошибки​

СимптомПричина
404 на .xhtmlНеверный faces-config / URL без .jsf mapping
Bean не найденНет @ManagedBean / CDI @Named
Пустая страницаОшибка в XHTML — смотрите лог Tomcat
View expiredСессия истекла — настройка state saving

Что попробовать​

  1. PrimeFaces p:commandButton — AJAX без полной перезагрузки.
  2. Валидация поля: required="true" + f:validateLength.
  3. Современная альтернатива: REST + SPA (Spring).

Частые ошибки​

СимптомПричина
404 на .xhtmlНеверный faces-config / URL без .jsf mapping
Bean не найденНет @ManagedBean / CDI @Named
Пустая страницаОшибка в XHTML — смотрите лог Tomcat
View expiredСессия истекла — настройка state saving

Что попробовать​

  1. PrimeFaces p:commandButton — AJAX без полной перезагрузки.
  2. Валидация поля: required="true" + f:validateLength.
  3. Современная альтернатива: REST + SPA (Spring).

Рекомендации по развитию​

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

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

Экспериментируйте с кодом, меняйте стили, добавляйте новые состояния и функции. Практика является лучшим способом усвоения материала.

Мини-план расширения проекта​

После первой версии полезно развивать проект итерациями:

  1. Вынести логику из bean в сервисный слой.
  2. Добавить сущность и сохранение в БД через JPA.
  3. Подключить валидацию полей через Bean Validation.
  4. Ввести страницы списка и карточки сущности.
  5. Добавить тесты на сервис и базовую навигацию.

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

Связанные статьи​

Основа по протоколу

Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.

В подборках​

Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:

Первые шаги (маршрут подборки) — Первая программа на FastAPI, Первая программа на JavaBean, Первая программа на Flask, Первая программа на Spring Framework, Первая программа на PyQt6, Первая программа на JavaFX.

Содержание