Общие сведения о приложении JavaServer Faces

5 мин

Проходя этот урок, мы будем использовать JavaServer Faces (JSF) в качестве технологии "просмотра", чтобы изучить основы JSF.

Что такое JavaServer Faces?

Технология JavaServer Faces была принята в качестве спецификации на платформе Java Enterprise Edition (Java EE) в составе Java EE 5 (2006). Изначально JSF использовал Java Server Pages (JSP) для отрисовки HTML-страниц. Начиная с версии 2.0 использовался Facelets, который ближе к обычному HTML.

JSF — это исполняющая среда на основе компонентов. Состояние каждого компонента сохраняется в зависимости от взаимодействия с клиентом. Состояние сохраняется при запросе новой страницы и восстанавливается при возвращении.

Базовые функции JSF

Приложения JSF делятся на две категории:

Facelets: обработчик шаблонов на основе XHTML, описывающий макеты экрана
BackingBean: класс Java, который привязывается к Facelets и задает и обрабатывает значения

Facelets — это механизм шаблонов на основе XHTML, который описывает макеты экрана, написанные на XHTML. XHTML соответствует правилам определения типа документа (DTD), определенным в консорциуме W3C, и описывается как файл с расширением xhtml.

BackingBean — это класс Java, связанный со страницей JSF. Он содержит методы действий, прослушиватели действий и прослушиватели изменения значений. В Java EE 6 классы backing bean реализованы с помощью управляемых bean-компонентов JSF. Начиная с версии Java EE 7, в качестве реализации используются bean-компоненты контекстов и внедрения зависимостей (CDI).

Создание страницы JSF с помощью PrimeFaces

PrimeFaces — это сторонняя реализация JSF, которая упрощает создание веб-компонентов JSF. PrimeFaces — это упрощенная библиотека с одним JAR, нулевой конфигурацией и без зависимостей. Вам нужно просто загрузить PrimeFaces, добавить primefaces-{version}.jar в путь классов и импортировать пространство имен, чтобы приступить к работе, как показано в xmlns:p="http://primefaces.org/ui".

Давайте рассмотрим пример. На следующей странице PrimeFaces теги p:outputLabel, p:inputText и p:commandButton используются для отображения меток, полей ввода и кнопок.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Input Value Counter Sample</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Basic"/><br/>
            <p:inputText value="#{indexcontroller.inputValue}"/><br/>
            <p:commandButton value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

При написании предыдущего кода XHTML появится следующий экран:

Screenshot that shows a JSF Facelets sample.

Поддержка PrimeFaces Ajax

JSF поддерживает приложения Ajax по умолчанию. Вы можете динамически обновлять часть экрана без обновления всего экрана.

PrimeFaces использует атрибут update, чтобы упростить реализацию поддержки Ajax, предоставляемой JSF. Укажите, какой компонент следует обновить, с помощью его идентификатора. В следующем примере атрибут update ="ajaxUpdateText" добавляется в p:commandButton, поэтому часть <div id ="ajaxUpdateText"> обновляется при выборе кнопки. Здесь можно указать любой id HTML-компонент.

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

JSF backing bean

Backing bean — это классы Java, которые реализуют серверную обработку, связанную с представлением JSF. В следующем примере мы будем ссылаться на класс backing bean, IndexController, связанный с приведенным ранее XHTML. Мы будем использовать заметки @Named для настройки приложения JSF, чтобы на него можно было ссылаться из JSF Facelets.

При записи <p: inputText value ="#{indexcontroller.inputValue}"/> в Facelets на экране будет отображаться поле Ввод текста. Введенное значение привязано к inputValue, определенному в классе IndexController.

Кроме того, при написании <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>появится кнопка HTML. При нажатии на кнопку вызывается метод submitButtonAction(), определенный в классе IndexController.

import java.io.Serializable;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable {

    private static final long serialVersionUID = 8485377386286855408L;

    @Setter @Getter
    private String inputValue;

    private int counter;

    public void submitButtonAction(){
        inputValue = inputValue + " : " + counter;
        counter++;
    }
}

Таким образом JSF позволяет реализовать представление (Facelets) и контроллер (класс backing bean) для отдельной реализации экрана.