JSF — пример приложения Hello World. Добавление PrimeFaces

JavaServer Faces (JSF) — веб фреймворк, включенный в спецификацию J2EE. В статье будет рассмотрено как создать простое приложение с несколькими компонентами, записать значения в управляемый бин (@ManagedBean). Так же будет подключена популярная библиотека компонентов Primefaces и приведен пример Ajax обновления страницы.

Используемые технологии:
  • JSF 2.2
  • PrimeFaces 5.2.RC1
  • Maven 3.2.5
  • IntelliJ IDEA 14.1.4
  • JDK 1.8

1. Структура проекта

JSF Hello World structure

Созданы две страницы представлений index.xhtml и secondPage.xhtml. Добавлен один управляемы бин MainBean плюс два файла конфигурации, созданные по умолчанию: faces-config.xml и web.xml.

2. Создание проекта и настройки pom.xml Maven

maven start

Создаем пустой проект maven. Далее настраиваем pom.xml:

Здесь добавлены зависимости для JSF и веб контейнера от org.glassfish. А так же зависимости для библиотеки компонентов Primefaces и различных тем для них.

3. Подключение поддержки фреймворков

В IntelliJ IDEA нажимаем на проект правой кнопкой и выбираем Add Framework Support. Выбираем только JSF (primefaces выбирать не нужно).

JSF Hello World addFramework

Если зависимости maven загрузились правильно, то будет предложен выбор именно этих библиотек.

4. Настройка web.xml – дескриптор веб-развертывания

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

Здесь указывается сервлет, который будет обрабатывать запросы, шаблон url *.xhtml (т.е. страницы оканчивающиеся на эти символы), а так же страница по умолчанию при запуске проекта — index.xhtml. Всё, больше ничего для простого приложения добавлять не нужно.

5. Настройка веб контейнера для приложения

Здесь я использовал Tomcat 8.0.15, но так же всё запустится для Glassfish. Все настройки оставлены по умолчанию.

JSF Hello World editConfig1

Чтобы добавить сервер выбираем Run-Edit Configuration, в появившимся окне нажимаем добавить локальный сервер Tomcat.

JSF Hello World editConfig2

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

JSF Hello World editConfig3

6. Настройка faces-config.xml

Для работы, навигации и прочего JSF требуются настройки, которые прописываются в faces-config.xml.

В нашем случае задана всего одна настройка, которая означает, что из любого места <from-view-id>*</from-view-id> при получении outcome=nextPage, будет переход к  <to-view-id>/views/secondPage.xhtml</to-view-id>.

7. Представления (xhtml страницы)

В проекте созданы две страницы. Первая включает форму введения текста и пару кнопок, часть на стандартном JSF, а часть с использованием компонентов Primefaces.

index.xhtml

Обратите внимание, что компоненты без элемента <h:form> корректно работать не будут.

secondPage.xhtml

Компоненты связаны с управляемым бином MainBean с помощью выражения #{mainBean.inputText}, которое означает, что значения будут записываться в управляемый бин JSF — MainBean в значение inputText. Это происходит с помощью методов setInputText() и getInputText() (запись и извлечение значение соответственно).

7. Управляемы бин JSF (@ManagedBean)

Здесь есть только одно свойство inputText, а так же добавлен метод, который при вызове добавляет в контекст JSF сообщения.

7.1. Переименование папки webapp

JSF Hello World rename webapp

Отмечу, что при создании проекта была переименована папка web, созданная Idea по умолчанию в webapp. Такой вариант более распространен по соглашению Java. Делать это не обязательно. Не забудьте поменять путь в Project Structure-Facets.

8. Запуск приложения

JSF Hello World first page

После ввода данных и клика на кнопке, будет вызван action= «nextPage», который прописан в faces-config.xml. Там указано, что при таком событии нужно перейти на другую страницу.

JSF Hello World second page

На второй страницы будут подгружены данные, записанные в #{mainBean.inputText).

На этой странице так же показано как работает JSF с AJAX запросами. Т.е. когда не происходит полное обновление страницы, как, например, при нажатии f5 или ctrl+r, а только указанных компонентов. Это указывается в атрибуте update.

Так же добавлен компонент growl, который показывает всплывашку. Данные тянутся из метода showMessage().

 

Исходные коды

JSF Hello World — исходные коды

 

Share Button
3
4057 Total Views 2 Views Today
Комментарии (4) для “JSF — пример приложения Hello World. Добавление PrimeFaces
  1. Артем:

    1. Nick V.:

      Почитайте о JSR 330, аннотациях JSF и Spring. Примеров вроде @Component vs @Named vs ManagedBean полно. Ваша фраза про «старая» не совсем корректна, хотя в предверии JEE8 большинство авторов рекомендуют переходить на CDI заранее, т.к. там обещают наиболее широкие возможности. Для чистого JSF управляемые бины родные.

  2. Антон:

    Привет.

    Бьюсь с товим примером всю ночь. Я все сделал точно также как у тебя, но — твой проект работает (я его скачал, добавил сервак и заработал) а мой — НЕТ!!!! ПОЧЕМУ?! ПОжалуйста, объясни(

    МОй томкат говорит вот таковот < *там 404*>— скришот.

    Умоляю, объясни, в чем дело? Пусть оно не работает, только станет понятно — почему?!?!

    Спасибо (

  3. Уважаемый:

    Антон:
    Нужно зайти в Project Structure(Alt+ctrl +shift + S) в раздел Artifacts. Создать папку lib в WEB-INF и туда перенести 3 файла которые у тебя, скорее всего, рядом соседствуют, справа. Посмотри как в архиве автора.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

CAPTCHA

*