Java Platform, Enterprise Edition (Java EE) 8
Учебник по Java EE
Назад Вперёд Содержание

HTML5-совместимая разметка

Если вы хотите создать пользовательский интерфейс и вам не хватает тегов HTML, вы можете создать кастомный компонент JavaServer Faces и вставить его на страницу Facelets. Этот механизм может заставить простой элемент создавать сложный код. Однако создание такого компонента — важная задача (см. главу 15 «Создание кастомных компонентов пользовательского интерфейса и других кастомных объектов»).

HTML5 предлагает новые элементы и атрибуты, которые могут сделать ненужным написание собственных компонентов. Он также предоставляет множество новых возможностей для существующих компонентов. JavaServer Faces поддерживает HTML5 не за счёт введения новых компонентов пользовательского интерфейса, имитирующих HTML5, а за счёт возможности непосредственного использования разметки HTML5. Это также позволяет вам использовать атрибуты JavaServer Faces в элементах HTML5. Поддержка HTML5 в JavaServer Faces делится на две категории:

  • Сквозные (pass-through) элементы

  • Сквозные (pass-through) атрибуты

Эффект HTML5-совместимой разметки состоит в том, чтобы предоставить разработчику страницы Facelets практически полный контроль над отрисовкой страницы, вместо того, чтобы передавать этот элемент управления разработчикам компонентов. Вы можете сочетать JavaServer Faces и элементы HTML5 по своему усмотрению.

Использование сквозных (pass-through) элементов

Сквозные (pass-through) элементы позволяют использовать теги и атрибуты HTML5, но рассматривать их как эквивалент компонентов JavaServer Faces, связанных с серверным объектом UIComponent.

Чтобы сделать элемент, который не является элементом JavaServer Faces, а будет сквозным элементом, укажите хотя бы один из его атрибутов, используя пространство имён http://xmlns.jcp.org/jsf. Например, следующий код объявляет пространство имён с коротким именем jsf:

<html ... xmlns:jsf="http://xmlns.jcp.org/jsf"
...
    <input type="email" jsf:id="email" name="email"
           value="#{reservationBean.email}" required="required"/>

Здесь префикс jsf размещается у атрибута id, поэтому атрибуты тега HTML5 обрабатываются как часть страницы Facelets. Это означает, что, например, вы можете использовать выражения EL для получения свойств Managed-бина.

Таблица 8-4 показывает, как сквозные (pass-through) элементы отрисовываются как теги Facelets. Реализация JSF использует имя элемента и атрибут идентификации для определения соответствующего тега Facelets, который будет использоваться при обработке сервером. Браузер, однако, интерпретирует разметку, написанную автором страницы.

Таблица 8-4. Как Facelets отображает элементы HTML5

Имя элемента HTML5

Идентифицирующий атрибут

Тег Facelets

a

jsf:action

h:commandLink

a

jsf:actionListener

h:commandLink

a

jsf:value

h:outputLink

a

jsf:outcome

h:link

body

+

h:body

button

+

h:commandButton

button

jsf:outcome

h:button

form

+

h:form

head

+

h:head

img

+

h:graphicImage

input

type="button"

h:commandButton

input

type="checkbox"

h:selectBooleanCheckbox

input

type="color"

h:inputText

input

type="date"

h:inputText

input

type="datetime"

h:inputText

input

type="datetime-local"

h:inputText

input

type="email"

h:inputText

input

type="month"

h:inputText

input

type="number"

h:inputText

input

type="range"

h:inputText

input

type="search"

h:inputText

input

type="time"

h:inputText

input

type="url"

h:inputText

input

type="week"

h:inputText

input

type="file"

h:inputFile

input

type="hidden"

h:inputHidden

input

type="password"

h:inputSecret

input

type="reset"

h:commandButton

input

type="submit"

h:commandButton

input

type="*"

h:inputText

label

+

h:outputLabel

link

+

h:outputStylesheet

script

+

h:outputScript

select

multiple="*"

h:selectManyListbox

select

+

h:selectOneListbox

textarea

+

h:inputTextArea

Использование сквозных атрибутов

Сквозные (pass-through) атрибуты — противоположность сквозных элементов. Они позволяют передавать атрибуты, которые не являются атрибутами JavaServer Faces, в браузер без интерпретации. Если вы укажете сквозной (pass-through) атрибут в JavaServer Faces UIComponent, имя и значение атрибута будут напрямую переданы в браузер без интерпретации компонентами или средствами отрисовки JavaServer Faces. Есть несколько способов указать сквозные (pass-through) атрибуты.

  • Используйте пространство имён JavaServer Faces для сквозных (pass-through) атрибутов, чтобы добавлять префикс к именам атрибутов в компоненте JavaServer Faces. Например, следующий код объявляет пространство имён с коротким именем p, а затем передаёт атрибуты type, min, max, required и title в компонент HTML5 input:

    <html ... xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
...

<h:form prependId="false">
<h:inputText id="nights" p:type="number" value="#{bean.nights}"
             p:min="1" p:max="30" p:required="required"
             p:title="Enter a number between 1 and 30 inclusive.">
        ...

    Это приведёт к отрисовке следующей разметки (при условии, что bean.nights имеет значение по умолчанию, равное 1):

    <input id="nights" type="number" value="1" min="1" max="30"
       required="required"
       title="Enter a number between 1 and 30 inclusive.">

  • Чтобы передать одиночный атрибут, вложите тег f:passThroughAttribute в тег компонента. Например:

    <h:inputText value="#{user.email}">
    <f:passThroughAttribute name="type" value="email" />
</h:inputText>

    Этот код будет отрисован аналогично следующему:

    <input value="me@me.com" type="email" />

  • Чтобы передать группу атрибутов, вложите тег f:passThroughAttributes в тег компонента, указав значение EL, которое должно быть приводимо к Map<String, Object>. Например:

    <h:inputText value="#{bean.nights">
    <f:passThroughAttributes value="#{bean.nameValuePairs}" />
</h:inputText>

    Если бин использовал отображение Map и инициализирует его в конструкторе следующим образом, разметка будет аналогична выводу кода, который использует пространство имён сквозного атрибута:

    private Map<String, Object> nameValuePairs;
...
public Bean() {
    this.nameValuePairs = new HashMap<>();
    this.nameValuePairs.put("type", "number");
    this.nameValuePairs.put("min", "1");
    this.nameValuePairs.put("max", "30");
    this.nameValuePairs.put("required", "required");
    this.nameValuePairs.put("title",
            "Enter a number between 1 and 4 inclusive.");
}

Пример reservation

Приложение reservation предоставляет собой набор различных типов HTML5-тегов input для покупки билетов в театр. Оно состоит из двух страниц Facelets, reservation.xhtml и confirmation.xhtml, и вспомогательного бина ReservationBean.java. На страницах используются как сквозные (pass-through) атрибуты, так и сквозные элементы.

Исходный код этого приложения находится в каталоге tut-install/examples/web/jsf/reservation/.

Здесь рассматриваются следующие темы:

Страницы Facelets для reservation

Первой важной особенностью страниц Facelets для приложения reservation является заголовок DOCTYPE. Большинство страниц Facelets в приложениях JavaServer Faces ссылаются на XHTML DTD. Страницы Facelets для этого приложения начинаются со следующего заголовка DOCTYPE, который обозначает страницу HTML5:

<!DOCTYPE html>

В объявлении пространства имён, в элементе html страницы reservation.xhtml указываются оба пространства имён: jsf и passthrough:

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:jsf="http://xmlns.jcp.org/jsf">

Затем пустой тег h:head, за которым следует тег h:outputStylesheet внутри тега h:body, иллюстрирует использование перемещаемого ресурса (как описано в Перемещаемые ресурсы):

<h:head>
</h:head>
<h:body>
    <h:outputStylesheet name="css/stylesheet.css" target="head"/>

На странице reservation.xhtml используются сквозные (pass-through) элементы для большинства полей формы на странице. Это позволяет ему использовать некоторые специфичные для HTML5 типы элементов input, такие как date и email. Например, следующий элемент отображает как формат даты, так и календарь, из которого вы можете выбрать дату. Префикс jsf у атрибута id делает элемент сквозным:

    <input type="date" jsf:id="date" name="date"
           value="#{reservationBean.date}" required="required"
           title="Enter or choose a date."/>

Однако в поле для количества билетов используется тег h:passThroughAttributes для передачи Map, определённой в Managed-бине. Он также пересчитывает сумму в ответ на изменение в поле:

    <h:inputText id="tickets" value="#{reservationBean.tickets}">
        <f:passThroughAttributes value="#{reservationBean.ticketAttrs}"/>
        <f:ajax event="change" render="total"
                listener="#{reservationBean.calculateTotal}"/>
    </h:inputText>

В поле для цены указывается тип number в качестве сквозного (pass-through) атрибута элемента h:inputText, предлагающего диапазон из четырёх цен на билеты. Здесь префикс p в атрибутах HTML5 передаёт их браузеру без интерпретации JavaServer Faces:

    <h:inputText id="price" p:type="number"
                 value="#{reservationBean.price}"
                 p:min="80" p:max="120"
                 p:step="20" p:required="required"
                 p:title="Enter a price: 80, 100, 120, or 140.">
        <f:ajax event="change" render="total"
                listener="#{reservationBean.calculateTotal}"/>
    </h:inputText>

Выходные данные метода calculateTotal, указанного в качестве слушателя для события Ajax, отрисовываются в элементе вывода, значение которого id и name равно total. См. главу 13 «Использование Ajax с JavaServer Faces» для получения дополнительной информации.

Вторая страница Facelets, confirmation.xhtml, использует сквозной (pass-through) элемент output для отображения значений, введённых пользователем, и предоставляет тег Facelets h:commandButton, позволяющий пользователю вернуться на страницу reservation.xhtml.

Managed-бин для reservation

ReservationBean.java, сессионный Managed-бин для reservation, содержит свойства для всех элементов на страницах Facelets. Он также содержит два метода: calculateTotal и clear, которые действуют как слушатели событий Ajax на странице reservation.xhtml.

Сборка, упаковка и развёртывание reservation в IDE NetBeans

  1. Удостоверьтесь, чтобы GlassFish Server был запущен (см. Запуск и остановка сервера GlassFish).

  2. В меню «Файл» выберите «Открыть проект».

  3. В диалоговом окне «Открыть проект» перейдите к:

    tut-install/examples/web/jsf

  4. Выберите каталог reservation.

  5. Нажмите Открыть проект.

  6. На вкладке «Проекты» кликните правой кнопкой мыши проект reservation и выберите «Сборка».

    Эта команда собирает приложение и развёртывает его в GlassFish Server.

Сборка, упаковка и развёртывание reservation с использованием Maven

  1. Удостоверьтесь, чтобы GlassFish Server был запущен (см. Запуск и остановка сервера GlassFish).

  2. В окне терминала перейдите в:

    tut-install/examples/web/jsf/reservation/

  3. Введите следующую команду:

    mvn install

    Эта команда собирает и упаковывает приложение в WAR-файл, reservation.war, который находится в каталоге target. Затем он развёртывается в GlassFish Server.

Запуск reservation

На момент публикации этого руководства браузером, наиболее полно реализующим HTML5, был Google Chrome, и его рекомендуется использовать для запуска этого примера. Однако другие браузеры наверстывают упущенное и к тому времени, когда вы это прочитаете, могут работать одинаково хорошо.

  1. Введите следующий URL в браузере:

    http://localhost:8080/reservation

  2. Введите информацию в поля страницы reservation.xhtml.

    Поле «Performance Date» содержит поле даты со стрелками вверх и вниз, которые позволяют увеличивать и уменьшать месяц, день и год, а также большую стрелку вниз, которая вызывает редактор даты в форме календаря.

    В полях Количество билетов и Цена билетов также есть стрелки вверх и вниз, которые позволяют увеличивать и уменьшать значения в пределах допустимого диапазона и шагов. Estimated Total изменяется при изменении любого из этих двух полей.

    Адреса электронной почты и даты проверяются на соблюдение формата, но не на валидность (например, вы можете сделать заказ на прошедшую дату).

  3. Нажмите «Make Reservation», чтобы завершить резервирование, или «Clear», чтобы восстановить значения полей по умолчанию.

  4. Если вы нажмёте «Make Reservation», откроется страница confirmation.xhtml, отображающая отправленные значения.

    Нажмите Назад, чтобы вернуться на страницу reservation.xhtml.

Назад Вперёд Содержание
Логотип Oracle  Copyright © 2017, Oracle и/или её дочерних компаний. Все права защищены. Версия перевода 1.0.5 (Java EE Tutorial — русскоязычная версия)