Введение в Primefaces
1. Вступление
Primefaces - это приложениеopen source UI component suite for Java Server Faces(JSF).
В этом руководстве мы познакомим вас с Primefaces и продемонстрируем, как его настроить и использовать некоторые из его основных функций.
2. обзор
2.1. Java Server Faces
Java Server Faces - этоcomponent-oriented framework for building user interfaces for Java web applications. Спецификация JSF формализована с помощью процесса сообщества Java и представляет собой стандартизированную технологию отображения.
Подробнее о JSF в среде Spring можно найтиhere.
2.2. Primefaces
Построенный на основе JSF,Primefaces supports rapid application development by providing pre-built UI components может быть добавлен в любой проект.
Помимо Primefaces есть еще проектPrimefaces Extensions. Этот основанный на сообществе проект с открытым исходным кодом предоставляет дополнительные компоненты помимо стандартных.
3. Настройка приложения
Чтобы продемонстрировать некоторые компоненты Primefaces, давайте создадим простое веб-приложение с помощью Maven.
3.1. Конфигурация Maven
Primefaces имеет легкую конфигурацию только с одним jar, поэтому для начала давайте добавим зависимость к нашемуpom.xml:
org.primefaces
primefaces
6.2
Последнюю версию можно найтиhere.
3.2. Контроллер - Управляемый компонент
Затем давайте создадим класс bean для нашего компонента:
@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}Нам нужно предоставить саннотацию@ManagedBean , чтобы привязать наш контроллер к компоненту представления.
3.3. View
Наконец, давайте объявим пространство имен Primefaces в нашем файле.xhtml:
4. Примеры компонентов
Чтобы отобразить страницу, запустите сервер и перейдите к:
http://localhost:8080/jsf/pf_intro.xhtml4.1. PanelGridс
Давайте использоватьPanelGrid какextension to standard JSF panelGrid:
Здесь мы определилиpanelGrid с двумя столбцами и установили фаслетыoutputText from JSF для отображения данных из управляемого bean-компонента.
Значения, заявленные в каждомoutputText cor, соответствуют свойствамfirstName andlastName , заявленным в нашем@ManagedBean:
private String firstName;
private String lastName;Давайте посмотрим на наш первый простой компонент:
4.2. SelectOneRadioс
Мы можемuse selectOneRadio component to provide a radio button functionality:
Нам нужно объявить переменную value в компоненте поддержки для хранения значения переключателя:
private String componentSuite;Эта настройка приведет к переключению с двумя вариантами, привязанными к базовому свойствуStringcomponentSuite:
4.3. Таблица данных
Теперь давайтеuse the dataTable component to display data in a table layout:
Точно так же нам нужно предоставить свойство Bean для хранения данных для нашей таблицы:
private List technologies; Здесь у нас есть список различных технологий и номера их версий:
4.4. Ajax сInputText
Мы также можемuse p:ajax to provide Ajax features to our components.
Например, давайте воспользуемся этим компонентом для применения события размытия:
Соответственно, нам нужно будет указать свойства в bean-компоненте:
private String inputText;
private String outputText;Кроме того, нам также необходимо предоставить метод слушателя в нашем компоненте для нашего события размытия AJAX:
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}Здесь мы просто преобразовали текст в верхний регистр, чтобы продемонстрировать механизм:
4.5. кнопка
Кроме того, мы также можем использоватьp:commandButton asan extension to the standard h:commandButton component.
Например:
В результате с этой конфигурацией у нас есть кнопка, которую мы будем использовать для открытия диалога (используя атрибутonclick):
4.6. диалог
Кроме того,to provide the functionality of the dialog, we can use p:dialog component.
Давайте также воспользуемся кнопкой из последнего примера, чтобы открыть диалоговое окно при нажатии:
В этом случае у нас есть диалог с базовой конфигурацией, который может быть запущен с помощьюcommandButton, описанного в предыдущем разделе:
5. Primefaces Mobile
Primefaces Mobile (PFM)provides a UI kit to create Primefaces applications for mobile devices.
По этой причине PFM поддерживает адаптивный дизайн, адаптированный для мобильных устройств.
5.1. конфигурация
Для начала нам нужно включить поддержку мобильной навигации внутри нашегоfaces-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler
5.2. Пространство имен
Затем, чтобы использовать компоненты PFM, нам нужно включить пространство имен PFM в наш файл.xhtml:
xmlns:pm="http://primefaces.org/mobile"Помимо стандартного jar Primefaces, в нашей конфигурации нет необходимости в дополнительной библиотеке.
5.3. RenderKitс
Наконец, нам нужно предоставитьRenderKit, which is used to render the components in the mobile environment.
В случае одной страницы PFM в приложении мы можем определитьRenderKit внутри нашей страницы:
С полным приложением PFM мы можем определить нашRenderKit в области приложения внутриfaces-config.xml:
PRIMEFACES_MOBILE 5.4. Пример страницы
Теперь давайте сделаем пример страницы PFM:
Как видно, мы использовали компонентыpage, header иcontent из PFM, чтобы построить простую форму с заголовком:
Кроме того, мы использовали наш компонент поддержки для проверки пользовательского ввода и навигации:
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("example")) {
return "pm:success";
}
return "pm:failure";
}В случае правильного слова, мы переходим на следующую страницу:
Эта конфигурация приводит к следующему макету:
В случае неправильного слова, мы переходим на следующую страницу:
Эта конфигурация приведет к следующему макету:
Обратите внимание, чтоPFM is deprecated в версии 6.2 и будет удален в версии 6.3 в пользу адаптивного стандартного комплекта.
6. Заключение
В этом руководстве мы объяснили преимущества использования набора компонентов Primefaces JSF и продемонстрировали, как настраивать и использовать Primefaces в проекте на основе Maven.
Кроме того, мы представили Primefaces Mobile, набор пользовательского интерфейса, предназначенный для мобильных устройств.
Как всегда, образцы кода из этого руководства предоставляютсяover on GitHub.