«Введение в Primefaces» - Spring на русском

«1. Введение

Primefaces — это набор компонентов пользовательского интерфейса с открытым исходным кодом для приложений Java Server Faces (JSF).

В этом уроке мы познакомимся с Primefaces и покажем, как его настроить и использовать некоторые из его основных функций.

2. Обзор

2.1. Java Server Faces

Java Server Faces — это компонентно-ориентированная платформа для создания пользовательских интерфейсов для веб-приложений Java. Спецификация JSF формализована через процесс сообщества Java и представляет собой стандартизированную технологию отображения.

Подробнее о JSF в среде Spring можно узнать здесь.

2.2. Primefaces

Построенный на основе JSF, Primefaces поддерживает быструю разработку приложений, предоставляя готовые компоненты пользовательского интерфейса, которые можно добавить в любой проект.

Помимо Primefaces, есть еще проект Primefaces Extensions. Этот проект с открытым исходным кодом, основанный на сообществе, предоставляет дополнительные компоненты помимо стандартных.

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

Для демонстрации некоторых компонентов Primefaces давайте создадим простое веб-приложение с использованием Maven.

3.1. Конфигурация Maven

Primefaces имеет облегченную конфигурацию только с одним jar-файлом, поэтому для начала давайте добавим зависимость в наш pom.xml:

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.2</version>
</dependency>

Последнюю версию можно найти здесь.

3.2. Контроллер — управляемый компонент

Далее давайте создадим класс компонента для нашего компонента:

@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}

Нам нужно предоставить аннотацию @ManagedBean для привязки нашего контроллера к компоненту представления.

3.3. Просмотр

Наконец, давайте объявим пространство имен Primefaces в нашем файле .xhtml:

<html xmlns:p="http://primefaces.org/ui">

4. Примеры компонентов

Чтобы отобразить страницу, запустите сервер и перейдите к:

http://localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Давайте используем PanelGrid как расширение стандартного JSF panelGrid:

<p:panelGrid columns="2">
    <h:outputText value="#{helloPFBean.firstName}"/>
    <h:outputText value="#{helloPFBean.lastName}" />
</p:panelGrid>

Здесь мы определили panelGrid с двумя столбцами и установили outputText из фаслетов JSF для отображения данных из управляемого компонента.

Значения, объявленные в каждом outputText, соответствуют свойствам firstName и lastName, объявленным в нашем @ManagedBean:

private String firstName;
private String lastName;

Давайте взглянем на наш первый простой компонент:

<img class=" wp-image-32802 alignnone" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; white-space: normal;" src="https://www.baeldung.com/wp-content/uploads/2018/04/panelGridPF-300x68.png" alt="" width="256" height="58" />

4.2. SelectOneRadio

Мы можем использовать компонент selectOneRadio для обеспечения функциональности радиокнопки:

<h:panelGrid columns="2">
    <p:outputLabel for="jsfCompSuite" value="Component Suite" />
    <p:selectOneRadio id="jsfCompSuite" value="#{helloPFBean.componentSuite}">
        <f:selectItem itemLabel="ICEfaces" itemValue="ICEfaces" />
        <f:selectItem itemLabel="RichFaces" itemValue="Richfaces" />
    </p:selectOneRadio>
</h:panelGrid>

Нам нужно объявить переменную value в компоненте поддержки для хранения значения радиокнопки:

private String componentSuite;

Эта установка приведет к в переключателе с двумя вариантами, который привязан к базовому свойству String componentSuite:

4.3. Таблица данных

Далее воспользуемся компонентом dataTable для отображения данных в виде таблицы:

<p:dataTable var="technology" value="#{helloPFBean.technologies}">
    <p:column headerText="Name">
        <h:outputText value="#{technology.name}" />
    </p:column>

    <p:column headerText="Version">
        <h:outputText value="#{technology.currentVersion}" />
    </p:column>
</p:dataTable>

Точно так же нам нужно предоставить свойство Bean для хранения данных для нашей таблицы:

private List<Technology> technologies;

Здесь , у нас есть список различных технологий и номера их версий:

4.4. Ajax с InputText

Мы также можем использовать p:ajax для предоставления функций Ajax нашим компонентам.

Например, давайте воспользуемся этим компонентом для применения события размытия:

<h:panelGrid columns="3">
    <h:outputText value="Blur event " />
    <p:inputText id="inputTextId" value="#{helloPFBean.inputText}}">
        <p:ajax event="blur" update="outputTextId"
	  listener="#{helloPFBean.onBlurEvent}" />
    </p:inputText>
    <h:outputText id="outputTextId" 
      value="#{helloPFBean.outputText}" />
</h:panelGrid>

Соответственно, нам нужно будет предоставить свойства в bean-компоненте:

private String inputText;
private String outputText;

Кроме того, нам также нужно предоставить прослушиватель в нашем bean-компоненте для события размытия AJAX:

public void onBlurEvent() {
    outputText = inputText.toUpperCase();
}

Здесь мы просто преобразовали текст в верхний регистр, чтобы продемонстрировать механизм:

4.5. Button

Кроме того, мы также можем использовать p:commandButton как расширение стандартного компонента h:commandButton.

Например:

<p:commandButton value="Open Dialog" 
  icon="ui-icon-note" 
  onclick="PF('exDialog').show();">
</p:commandButton>

В результате, с этой конфигурацией у нас есть кнопка, которую мы будем использовать для открытия диалога (используя атрибут onclick):

4.6. Диалог

Кроме того, для обеспечения функциональности диалога мы можем использовать компонент p:dialog.

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

<p:dialog header="Example dialog" widgetVar="exDialog" minHeight="40">
    <h:outputText value="Hello Baeldung!" />
</p:dialog>

В этом случае у нас есть диалоговое окно с базовой конфигурацией, которое можно вызвать с помощью команды commandButton, описанной в предыдущем разделе: ~ ~~ 5. Primefaces Mobile

Primefaces Mobile (PFM) предоставляет набор пользовательского интерфейса для создания приложений Primefaces для мобильных устройств.

По этой причине PFM поддерживает адаптивный дизайн, адаптированный для мобильных устройств.

5.1. Конфигурация

«Для начала нам нужно включить поддержку мобильной навигации в файлеfaces-config.xml:

5.2. Пространство имен

<navigation-handler>
    org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>

Затем, чтобы использовать компоненты PFM, нам нужно включить пространство имен PFM в наш файл .xhtml:

Помимо стандартного jar Primefaces, в нашей конфигурации нет необходимости в какой-либо дополнительной библиотеке.

xmlns:pm="http://primefaces.org/mobile"

5.3. RenderKit

Наконец, нам нужно предоставить RenderKit, который используется для рендеринга компонентов в мобильной среде.

В случае одной страницы PFM в приложении мы можем определить RenderKit внутри нашей страницы:

В случае полного приложения PFM мы можем определить наш RenderKit в области приложения внутри Faces-config.xml :

<f:view renderKitId="PRIMEFACES_MOBILE" />

5.4. Пример страницы

<default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>

Теперь давайте создадим пример страницы PFM:

Как видно, мы использовали компонент страницы, заголовка и контента из PFM для создания простой формы с заголовком:

<pm:page id="enter">
    <pm:header>
        <p:outputLabel value="Introduction to PFM"></p:outputLabel>
    </pm:header>
    <pm:content>
        <h:form id="enterForm">
            <pm:field>
	        <p:outputLabel 
                  value="Enter Magic Word">
                </p:outputLabel>
	        <p:inputText id="magicWord" 
                  value="#{helloPFMBean.magicWord}">
                </p:inputText>
	    </pm:field>
            <p:commandButton 
              value="Go!" action="#{helloPFMBean.go}">
            </p:commandButton>
	</h:form>
     </pm:content>
</pm:page>

Кроме того, мы использовали наш вспомогательный компонент для проверки пользовательского ввода и навигации:

В случае правильного слова мы переходим на следующую страницу:

public String go() {
    if(this.magicWord != null 
      && this.magicWord.toUpperCase().equals("BAELDUNG")) {
	return "pm:success";
     }
    
    return "pm:failure";
}

Эта конфигурация приводит к следующему макету:

<pm:page id="success">
    <pm:content>
        <p:outputLabel value="Correct!">
        </p:outputLabel>			
	<p:button value="Back" 
          outcome="pm:enter?transition=flow">
        </p:button>
    </pm:content>
</pm:page>

В случае неправильного слова, мы переходим на следующую страницу:

Эта конфигурация приведет к следующему макету:

Обратите внимание, что PFM устарел в версии 6.2 и будет удален в версии 6.3 в пользу адаптивного стандартного комплекта .

<pm:page id="failure">
    <pm:content>
        <p:outputLabel value="That is not the magic word">
        </p:outputLabel>
	<p:button value="Back" outcome="pm:enter?transition=flow">
        </p:button>
    </pm:content>
</pm:page>

6. Заключение

В этом руководстве мы объяснили преимущества использования набора компонентов Primefaces JSF и продемонстрировали, как настраивать и использовать Primefaces в проекте на основе Maven.

Кроме того, мы представили Primefaces Mobile, набор пользовательского интерфейса, предназначенный для мобильных устройств.

Как всегда, примеры кода из этого руководства доступны на GitHub.

As always, the code samples from this tutorial are provided over on GitHub.

«Введение в Primefaces»