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

Добавление компонентов на страницу с помощью библиотеки тегов HTML

Теги, определённые стандартной библиотекой тегов HTML JavaServer Faces, представляют компоненты формы HTML и другие основные элементы HTML. Эти компоненты отображают данные или принимают данные от пользователя. Эти данные собираются как часть формы и отправляются на сервер. Обычно, это происходит когда пользователь кликает кнопку. В этом разделе объясняется, как использовать каждый из тегов компонента, показанных в таблице 10-1.

Таблица 10-1 Теги компонентов

Тег

Функции

Представление

Внешний вид

h:column

Представляет столбец данных в компоненте данных

Столбец данных в HTML таблице

Столбец в таблице

h:commandButton

Передаёт форму с данными на сервер

Элемент HTML <input type = "value">, для которого значением type может быть "submit", "reset" или "image"

Кнопка

h:commandLink

Ссылки на другую страницу или местоположение на странице

HTML-элемент <a href>

Ссылка

h:dataTable

Представляет обёртку (wrapper) данных

HTML-элемент <table>

Таблица, которая может быть динамически обновлена

h:form

Представляет форму ввода (внутренние теги формы получают данные, которые будут отправлены вместе с формой)

HTML-элемент <form>

Нет визуального представления

h:graphicImage

Отображает изображение

HTML-элемент <img>

Изображение

h:inputFile

Позволяет пользователю загрузить файл

HTML-элемент <input type = "file">

Поле с кнопкой Обзор ...

h:inputHidden

Позволяет разработчику страницы добавить скрытую переменную на страницу

HTML-элемент <input type = "hidden">

Нет визуального представления

h:inputSecret

Позволяет пользователю безопасно ввести пароль

HTML-элемент <input type = "password">

Поле, которое отображает строку символов вместо фактически введённой строки

h:inputText

Позволяет пользователю вводить строку

HTML-элемент <input type = "text">

Текстовое поле

h:inputTextarea

Позволяет пользователю вводить несколько строк

HTML-элемент <textarea>

Многострочное поле

h:message

Отображает локализованное сообщение

HTML-тег <span>, если используются стили

Текстовая строка

h:messages

Отображает локализованные сообщения

Набор тегов HTML <span>, если используются стили

Текстовая строка

h:outputFormat

Отображает отформатированное сообщение

Простой текст

Простой текст

h:outputLabel

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

HTML-элемент <label>

Простой текст

h:outputLink

Ссылки на другую страницу или местоположение на странице без создания события действия

HTML-элемент <a>

Ссылка

h:outputText

Отображает строку текста

Простой текст

Простой текст

h:panelGrid

Отображает таблицу

HTML-элемент <table> с элементами <tr> и <td>

Таблица

h:panelGroup

Группирует набор компонентов под одним родителем

HTML-элемент <div> или <span>

Строка в таблице

h:selectBooleanCheckbox

Позволяет пользователю изменять логическое значение

HTML-элемент <input type="checkbox">

Независимый переключатель (check box)

h:selectManyCheckbox

Отображает набор флажков, из которых пользователь может выбрать несколько значений

Набор HTML <input> элементов типа checkbox

Группа флажков

h:selectManyListbox

Позволяет пользователю выбрать несколько элементов из набора элементов

HTML-элемент <select>

Список выбора

h:selectManyMenu

Позволяет пользователю выбрать несколько элементов из набора элементов

HTML-элемент <select>

Меню

h:selectOneListbox

Позволяет пользователю выбрать один элемент из набора элементов

HTML-элемент <select>

Список выбора

h:selectOneMenu

Позволяет пользователю выбрать один элемент из набора элементов

HTML-элемент <select>

Меню

h:selectOneRadio

Позволяет пользователю выбрать один элемент из набора элементов

HTML-элемент <input type="radio">

Группа вариантов

Для автономного переключателя используйте атрибут group.

Теги соответствуют компонентам в пакете javax.faces.component. Компоненты более подробно обсуждаются в главе 12 «Разработка с использованием JavaServer Faces».

В следующем разделе объясняются важные атрибуты, общие для большинства тегов компонентов. Для каждого из компонентов, обсуждаемых в следующих разделах, Запись свойств бина объясняет, как записать свойство бина, связанное с этим конкретным компонентом или его значением.

Для получения справочной информации о тегах и их атрибутах см. документацию по библиотеке тегов JavaServer Faces Facelets.

Общие атрибуты тегов компонентов

Большинство тегов компонентов поддерживают атрибуты, показанные в табл. 10-2.

Таблица 10-2 Общие атрибуты тегов компонентов

Атрибут

Описание

binding

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

id

Уникально идентифицирует компонент.

immediate

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

rendered

Задаёт условие отображения компонента. Если условие не выполняется, компонент не отображается.

style

Задаёт стиль каскадной таблицы стилей (CSS) для тега.

styleClass

Определяет класс CSS, который содержит css-стили.

value

Определяет значение компонента в форме выражения.

Все атрибуты тега, кроме id, могут принимать выражения, как определено в EL, описанном в Языке выражений.

Атрибут, такой как render или value, может быть установлен на странице и затем изменён во вспомогательном бине.

Атрибут id

Атрибут id обычно не требуется для тега компонента, но используется, когда другой компонент или класс на стороне сервера должен ссылаться на компонент. Если вы не включите атрибут id, JavaServer Faces автоматически сгенерирует ID компонента. В отличие от большинства других атрибутов тегов JavaServer Faces, атрибут id принимает выражения, используя только синтаксис немедленного выполнения, в котором используются разделители ${}. Для получения дополнительной информации о синтаксисе выражений см. Выражения значений.

Атрибут immediate

Компоненты ввода и компоненты команд (те, которые реализуют интерфейс ActionSource, такие как кнопки и ссылки) могут установить для атрибута immediate значение true, чтобы форсировать события, валидации и конвертации, которые будут срабатывать при применении параметров запроса.

Необходимо тщательно продумать, как комбинация значения immediate компонента ввода и значения immediate компонента команды определяет, что происходит при активации компонента команды.

Предположим, что у вас есть страница с кнопкой и полем ввода количества книг в корзине. Если для атрибутов immediate кнопки и поля установлено значение true, новое значение, введённое в поле, будет доступно для любой обработки, связанной с генерируемым событием когда кнопка нажата. Событие, связанное с кнопкой, а также события, валидация и конвертация, связанные с полем, обрабатываются при применении параметров запроса.

Если для атрибута immediate кнопки установлено значение true, а для атрибута immediate поля установлено значение false, событие связывается с кнопкой обрабатывается без обновления локального значения поля для слоя модели. Причина заключается в том, что любые события, конвертации и валидации, связанные с полем, происходят после применения параметров запроса.

Страница bookshowcart.xhtml приложения Duke's Bookstore содержит примеры компонентов, использующих атрибут immediate для управления тем, какие данные компонента обновляются при клике определённых кнопок. Поле quantity для каждой книги не устанавливает атрибут immediate, поэтому значение равно false (по умолчанию).

<h:inputText id="quantity"
             size="4"
             value="#{item.quantity}"
             title="#{bundle.ItemQuantity}">
    <f:validateLongRange minimum="0"/>
    ...
</h:inputText>

Атрибут immediate гиперссылки «Continue Shopping» установлен в true, а атрибут immediate гиперссылки «Update Quantities» установлен в false:

<h:commandLink id="continue"
               action="bookcatalog"
               immediate="true">
    <h:outputText value="#{bundle.ContinueShopping}"/>
</h:commandLink>
...
<h:commandLink id="update"
               action="#{showcart.update}"
               immediate="false">
    <h:outputText value="#{bundle.UpdateQuantities}"/>
</h:commandLink>

Если кликнуть гиперссылку «Continue Shopping», ни одно из изменений, введённых в полн ввода quantity, не будет обработано. Если кликнуть гиперссылку «Update Quantities», значения в поле quantity будет обновлено в корзине покупок.

Атрибут rendered

Тег компонента использует логическое выражение EL вместе с атрибутом rendered, чтобы определить, будет ли отображаться компонент. Например, компонент commandLink в следующем разделе страницы не отображается, если в корзине нет элементов:

<h:commandLink id="check"
    ...
    rendered="#{cart.numberOfItems > 0}">
    <h:outputText
        value="#{bundle.CartCheck}"/>
</h:commandLink>

В отличие от почти любого другого атрибута тега JavaServer Faces, атрибут rendered ограничен использованием выражений rvalue. Как объяснено в выражениях значений и методов, выражения с rvalue могут только читать данные. Они не могут записать данные обратно в источник данных. Следовательно, выражения, используемые в атрибуте rendered, могут использовать арифметические операторы и литералы, которые могут использовать выражения rvalue, но не выражения lvalue. Например, выражение в предыдущем примере использует оператор >.

Замечание:

В этом и других примерах bundle ссылается на файл java.util.ResourceBundle, который отображает строки, зависящие от установленной локали. Комплекты ресурсов обсуждаются в главе 22 «Интернационализация и локализация веб-приложений».

Атрибуты style и styleClass

Атрибуты style и styleClass позволяют вам указать стили CSS для отрисовки ваших тегов. Отображение сообщений об ошибках с тегами h:message и h:messages описывает пример использования атрибута style для указания стилей непосредственно в атрибуте. Вместо этого тег компонента может ссылаться на класс CSS.

В следующем примере показано использование тега dataTable, который ссылается на класс стиля list-background:

<h:dataTable id="items"
             ...
             styleClass="list-background"
             value="#{cart.items}"
             var="book">

Этот класс определяется таблицей стилей stylesheet.css, которую нужно включить в состав приложения. Для получения дополнительной информации об определении стилей см. Спецификации и черновики каскадных таблиц стилей по ссылке http://www.w3.org/Style/CSS/.

Атрибуты value и binding

Тег, представляющий компонент вывода, использует атрибуты value и binding, чтобы связать значение или объект компонента с соответствующим объектом данных. Атрибут value используется чаще, чем атрибут binding. Примеры его использования приведены в этой главе. Для получения дополнительной информации об этих атрибутах см. Создание Managed-бина, Запись свойств объектов, связанных со значениями компонентов, и Запись свойств, связанных с объектами компонентов.

Добавление в HTML тегов Head и Body

HTML-теги head (h:head) и body (h:body) добавляют структуру HTML-страниц к веб-страницам JavaServer Faces.

  • Тег h:head представляет элемент head страницы HTML.

  • Тег h:body представляет элемент body страницы HTML.

Ниже приведён пример страницы XHTML с использованием обычных тегов разметки заголовка и тела:

<!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">
    <head>
        <title>Add a title</title>
    </head>
    <body>
        Add Content
    </body>
</html>

Ниже приведён пример страницы XHTML с использованием тегов h:head и h:body:

<!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">
    <h:head>
        Add a title
    </h:head>
    <h:body>
        Add Content
    </h:body>
</html>

Оба предыдущих сегмента кода примера отображают одинаковые элементы HTML. Теги head и body полезны в основном для перемещения ресурсов. Для получения дополнительной информации о перемещении ресурсов см. Перемещение ресурсов с использованием тегов h:outputScript и h:outputStylesheet.

Добавление компонента Form

Тег h:form представляет форму ввода, включающую дочерние компоненты, которые могут содержать данные для представления пользователю или отправки на сервер.

На рисунке 10-1 показана типичная форма входа в систему, в которой пользователь вводит имя пользователя и пароль, а затем отправляет форму, кликая кнопку входа в систему.

Рисунок 10-1 Типичная форма

Форма с текстовыми полями «Имя пользователя» и «Пароль» и кнопкой «Вход».

Тег h:form представляет форму на странице и включает в себя все компоненты, которые отображают или собирают данные от пользователя, как показано здесь:

<h:form>
... other JavaServer Faces tags and other content...
</h:form>

Тег h:form также может включать разметку HTML для размещения компонентов на странице. Обратите внимание, что сам тег h:form не выполняет никакой разметки: его целью является сбор данных и объявление атрибутов, которые могут использоваться другими компонентами в форме.

Страница может содержать несколько тегов h:form, но только значения из формы, отправленной пользователем, будут включены в повторный запрос для отправки на сервер.

Использование компонентов Text

Текстовые компоненты позволяют пользователям просматривать и редактировать текст в веб-приложениях. Основные типы текстовых компонентов:

  • Метка, которая отображает текст только для чтения

  • Текстовое поле, которое позволяет пользователям вводить текст (в одну или несколько строк), часто для отправки в составе формы

  • Поле пароля, представляющего собой тип поля, которое отображает набор символов, таких как звездочки, вместо текста пароля, вводимого пользователем

На рисунке 10-2 показаны примеры этих текстовых компонентов.

Рисунок 10-2 Пример текстовых компонентов

Форма.

Текстовые компоненты могут быть классифицированы как входные или выходные данные. Компонент вывода JavaServer Faces, такой как метка, отображается как текст только для чтения. Компонент ввода JavaServer Faces, например текстовое поле, отображается как редактируемый текст.

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

Таблица 10-3 перечисляет теги, которые представляют компоненты ввода.

Таблица 10-3 Входные теги

Тег

Функция

h:inputHidden

Позволяет разработчику страницы добавить скрытую переменную на страницу

h:inputSecret

Стандартное поле пароля: принимает одну строку текста без пробелов и отображает её в виде набора звёздочек при вводе

h:inputText

Стандартное текстовое поле: принимает одну строку текста

h:inputTextarea

Стандартное многострочное поле: принимает несколько строк текста

Теги ввода поддерживают атрибуты, показанные в таблице 10-4 в дополнение к описанным в Общих атрибутах тегов компонентов. Обратите внимание, что эта таблица включает не все атрибуты, поддерживаемые тегами ввода, а только те, которые используются наиболее часто. Полный список атрибутов см. в документации JavaServer Faces Facelets Tag Library.

Таблица 10-4 Атрибуты входных тегов

Атрибут

Описание

converter

Определяет конвертер, который будет использоваться для конвертирования локальных данных компонента. Смотрите Использование стандартных конвертеров для получения дополнительной информации о том, как использовать этот атрибут.

converterMessage

Указывает сообщение об ошибке, отображаемое в случае её возникновения при работе конвертера.

dir

Определяет направление текста, отображаемого этим компонентом. Допустимые значения: ltr — слева направо, rtl — справа налево.

label

Задаёт имя, которое можно использовать для идентификации этого компонента в сообщениях об ошибках.

lang

Указывает код для языка (естественного), используемого на странице, например en или pt-BR.

required

Принимает boolean значение, которое указывает обязательность заполнения этого компонента обязательным.

requiredMessage

Указывает сообщение об ошибке, которое отображается, если пользователь оставляет компонент незаполненным.

validator

Определяет выражение метода, указывающее на метод Managed-бина, который выполняет валидацию данных компонента. См. Ссылка на метод, который выполняет валидацию для примера использования тега f:validator.

validatorMessage

Указывает сообщение об ошибке, отображаемое в случае её возникновения при работе валидатора.

valueChangeListener

Определяет выражение метода, указывающее на метод Managed-бина, который обрабатывает событие ввода значения в этот компонент. См. Ссылка на метод-обработчик изменения значения для примера использования valueChangeListener.

Таблица 10-5 перечисляет теги, которые представляют компоненты вывода.

Таблица 10-5 Теги вывода

Тег

Функция

h:outputFormat

Отображает отформатированное сообщение

h:outputLabel

Стандартная метка "только для чтения": отображает компонент-метку для указанного поля ввода

h:outputLink

Отображает тег <a href>, который ссылается на другую страницу без генерации события действия

h:outputText

Отображает одиночную строку текста

Выходные теги поддерживают атрибут тега converter в дополнение к перечисленным в Общих атрибутах тегов компонентов.

В оставшейся части этого раздела объясняется, как использовать некоторые из тегов, перечисленных в таблице 10-3 и Выходные теги. Другие теги написаны аналогичным образом.

Отображение поля тегом h:inputText

Тег h:inputText используется для отображения текстового поля. Аналогичный тег, h:outputText, отображает одиночную строку текста "только для чтения". В этом разделе показано, как использовать тег h:inputText. Тег h:outputText записывается аналогичным образом.

Вот пример тега h:inputText:

<h:inputText id="name"
             label="Customer Name"
             size="30"
             value="#{cashierBean.name}"
             required="true"
             requiredMessage="#{bundle.ReqCustomerName}">
    <f:valueChangeListener
        type="javaeetutorial.dukesbookstore.listeners.NameChanged" />
 </h:inputText>

Атрибут label указывает понятное имя, которое будет использоваться в параметрах замещения сообщений об ошибках, отображаемых для этого компонента.

Атрибут value ссылается на свойство name Managed-бина с именем CashierBean. Это свойство содержит данные для компонента name. После того, как пользователь отправит форму на сервер, значение свойства name в CashierBean будет установлено в текст, введённый в поле, соответствующее этому тегу.

Атрибут required вызывает перерисовку страницы с отображением ошибки, если пользователь не указал значение в поле name. JavaServer Faces проверяет, является ли значение компонента null или пустой строкой.

Если ваш компонент должен иметь значение не-null и String как минимум длиной в один символ, вы должны добавить атрибут required в тег и установить для него значение true. Если ваш тег имеет атрибут required, для которого установлено значение true, а значение равно null или строке нулевой длины, никакие другие валидаторы, зарегистрированные в теге, не вызываются. Если у вашего тега нет атрибута required, установленного в true, вызываются другие валидаторы, зарегистрированные в теге, но эти валидаторы должны обрабатывать возможность null или строки нулевой длины. Смотрите Валидация строк на null и пустоту для получения дополнительной информации.

Отображение поля пароля тегом h:inputSecret

Тег h:inputSecret отображает HTML-тег <input type="password">. Когда пользователь вводит строку в это поле, вместо вводимого текста отображается строка звёздочек. Вот пример:

<h:inputSecret redisplay="false"
               value="#{loginBean.password}" />

В этом примере атрибуту redisplay присвоено значение false. Это предотвращает отображение пароля в строке запроса или в исходном файле получившейся HTML-страницы.

Отображение метки тегом h:outputLabel

Тег h:outputLabel используется для прикрепления метки к указанному полю ввода с целью сделать его доступным. На следующей странице используется тег h:outputLabel для отображения метки флажка:

<h:selectBooleanCheckbox id="fanClub"
                         rendered="false"
                         binding="#{cashierBean.specialOffer}" />
<h:outputLabel for="fanClub"
               rendered="false
               binding="#{cashierBean.specialOfferText}">
    <h:outputText id="fanClubLabel"
                  value="#{bundle.DukeFanClub}" />
</h:outputLabel>
...

Теги h:selectBooleanCheckbox и h:outputLabel имеют атрибуты rendered, для которых на странице установлено значение false, но могут иметь значение true в CashierBean при определённых обстоятельствах. Атрибут for тега h:outputLabel соответствует id поля ввода, к которому прикреплена метка. Тег h:outputText, вложенный в тег h:outputLabel, представляет компонент метки. Атрибут value в теге h:outputText указывает текст, который отображается рядом с полем ввода.

Вместо использования тега h:outputText для текста, отображаемого в качестве метки, вы можете просто использовать атрибут value тега h:outputLabel. Следующий фрагмент кода показывает, как будет выглядеть предыдущий код, если он будет использовать атрибут value тега h:outputLabel для указания текста метки:

<h:selectBooleanCheckbox id="fanClub"
                         rendered="false"
                         binding="#{cashierBean.specialOffer}" />
<h:outputLabel for="fanClub"
               rendered="false"
               binding="#{cashierBean.specialOfferText}"
               value="#{bundle.DukeFanClub}" />
</h:outputLabel>
...

Отображение ссылки тегом h:outputLink

Тег h:outputLink используется для отображения ссылки, которая при клике загружает другую страницу, но не генерирует событие действия. Вам следует использовать этот тег вместо тега h:commandLink, если вы хотите, чтобы всегда открывался URL, указанный атрибутом value тега h:outputLink и не хотите, чтобы выполнялась какая-либо обработка, когда пользователь кликает ссылку. Вот пример:

<h:outputLink value="javadocs">
    Documentation for this demo
</h:outputLink>

Текст в теле тега h:outputLink задаёт текст ссылки, по которой пользователь может перейти на следующую страницу.

Отображение форматированного сообщения тегом h:outputFormat

Тег h:outputFormat позволяет отображать составные сообщения в виде шаблона MessageFormat, как описано в документации API для java.text.MessageFormat. Вот пример тега h:outputFormat:

<h:outputFormat value="Hello, {0}!">
    <f:param value="#{hello.name}"/>
</h:outputFormat>

Атрибут value указывает шаблон MessageFormat. Тег f:param определяет параметры замещения для сообщения. Значение параметра заменяет {0} в предложении. Если значение "#{hello.name}" равно "Bill", то сообщение, отображаемое на странице, выглядит следующим образом:

Hello, Bill!

Тег h:outputFormat может включать более одного тега f:param для тех сообщений, которые имеют более одного параметра, который необходимо объединить в сообщение. Если у вас есть более одного параметра для одного сообщения, убедитесь, что вы поместили теги f:param в правильном порядке, чтобы данные вставлялись в правильное место в сообщении. Вот предыдущий пример, модифицированный дополнительным параметром:

<h:outputFormat value="Hello, {0}! You are visitor number {1} to the page.">
    <f:param value="#{hello.name}" />
    <f:param value="#{bean.numVisitor}"/>
</h:outputFormat>

Значение {1} заменяется вторым параметром. Параметр является выражением EL bean.numVisitor, в котором свойство numVisitor Managed-бина bean отслеживает посетителей страницы. Это пример атрибута тега, поддерживающего выражения значения и принимающего выражения EL. Сообщение, отображаемое на странице, теперь выглядит следующим образом:

Hello, Bill! You are visitor number 10 to the page.

Использование тегов командных компонентов для выполнения действий и навигации

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

Тег h:commandButton отображается как кнопка. Тег h:commandLink — как ссылка.

В дополнение к атрибутам тегов, перечисленным в Общих атрибутах тегов компонентов, теги h:commandButton и h:commandLink могут использовать следующие атрибуты.

  • action, который является либо значением String, либо выражением метода, указывающим на метод бина, который возвращает значение String. В любом случае значение String используется для определения того, к какой странице обращаться, когда активирован тег командного компонента.

  • actionListener, который является выражением метода, указывающим на метод бина, обрабатывающего событие действия, инициируемое тегом командного компонента.

Смотрите Ссылка на метод, который выполняет навигацию для получения дополнительной информации об использовании атрибута action. Смотрите Ссылка на метод, который обрабатывает событие Action для получения подробной информации об использовании атрибута actionListener.

Отображение кнопки тегом h:commandButton

Если вы используете тег компонента h:commandButton, данные с текущей страницы обрабатываются, когда пользователь кликает кнопку, после чего открывается следующая страница. Вот пример тега h:commandButton:

<h:commandButton value="Submit"
                 action="#{cashierBean.submit}"/>

Клик на кнопку вызовет метод submit бина CashierBean, поскольку атрибут action ссылается на этот метод. Метод submit выполняет обработку и возвращает результат.

Атрибут value примера тега h:commandButton ссылается на метку кнопки. Для получения информации о том, как использовать атрибут action, смотрите Ссылка на метод, который выполняет навигацию.

Отображение ссылки тегом h:commandLink

Тег h:commandLink представляет HTML-ссылку и отображается как HTML-элемент <a>.

Тег h:commandLink должен включать вложенный тег h:outputText, представляющий текст, по которому пользователь кликает для генерации события. Вот пример:

<h:commandLink id="Duke" action="bookstore">
    <f:actionListener
        type="javaeetutorial.dukesbookstore.listeners.LinkBookChangeListener" />
    <h:outputText value="#{bundle.Book201}"/>
/h:commandLink>

Этот тег будет отображать HTML, который выглядит примерно так:

<a id="_idt16:Duke" href="#"
     onclick="mojarra.jsfcljs(document.getElementById('j_idt16'),
     {'j_idt16:Duke':'j_idt16:Duke'},'');
     return false;">My Early Years: Growing Up on Star7, by Duke</a>

Замечание:

Тег h:commandLink отобразит вызов функции на языке JavaScript. Если вы используете этот тег, убедитесь, что в вашем браузере включена поддержка JavaScript.

Добавление графики и изображений тегом h:graphicImage

В приложении JavaServer Faces используйте тег h:graphicImage, чтобы отобразить изображение на странице:

<h:graphicImage id="mapImage" url="/resources/images/book_all.jpg"/>

В этом примере атрибут url указывает путь к изображению. URL тега начинается с косой черты (/), которая добавляет относительный контекстный путь веб-приложения в начало пути до изображения.

Кроме того, вы можете использовать средство, описанное в Веб-ресурсах, чтобы указать местоположение изображения. Вот два примера:

<h:graphicImage id="mapImage"
                name="book_all.jpg"
                library="images"
                alt="#{bundle.ChooseBook}"
                usemap="#bookMap" />

<h:graphicImage value="#{resource['images:wave.med.gif']}"/>

Вы можете использовать аналогичный синтаксис для ссылки на изображение в таблице стилей. Следующий синтаксис в таблице стилей указывает, что изображение находится в resources/img/top-background.jpg:

header {
    position: relative;
    height: 150px;
    background: #fff url(#{resource['img:top-background.jpg']}) repeat-x;
    ...

Управление расположением компонентов с помощью тегов h:panelGrid и h:panelGroup

В приложении JavaServer Faces панели используются в качестве контейнера для других компонентов. Панели отображается в виде HTML-таблицы. Таблица 10-6 перечисляет теги, используемые для создания панелей.

Таблица 10-6 Метки компонентов панели

Тег

Атрибуты

Функция

h:panelGrid

columns, columnClasses, footerClass, headerClass, panelClass, rowClasses, role

Отображает таблицу

h:panelGroup

layout

Группирует набор компонентов под одним родителем

Тег h:panelGrid используется для представления всей таблицы. Тег h:panelGroup используется для представления строк в таблице. Другие теги используются для представления отдельных ячеек в строках.

Атрибут columns определяет, как группировать данные в таблице, и поэтому необходим, если вы хотите, чтобы ваша таблица имела более одного столбца. Тег h:panelGrid также имеет набор необязательных атрибутов, которые определяют CSS-классы: columnClasses, footerClass, headerClass , panelClass и rowClasses. Атрибут role может иметь значение "presentation", чтобы указать, что целью таблицы является форматирование отображения, а не отображение данных.

Если указано значение атрибута headerClass, тег h:panelGrid должен иметь заголовок первым дочерним элементом. Точно так же, если указано значение атрибута footerClass, тег h:panelGrid должен иметь нижний колонтитул последним дочерним элементом.

Вот пример:

<h:panelGrid columns="2"
             headerClass="list-header"
             styleClass="list-background"
             rowClasses="list-row-even, list-row-odd"
             summary="#{bundle.CustomerInfo}"
             title="#{bundle.Checkout}"
             role="presentation">
    <f:facet name="header">
        <h:outputText value="#{bundle.Checkout}"/>
    </f:facet>

    <h:outputLabel for="name" value="#{bundle.Name}" />
    <h:inputText id="name" size="30"
                 value="#{cashierBean.name}"
                 required="true"
                 requiredMessage="#{bundle.ReqCustomerName}">
         <f:valueChangeListener
             type="javaeetutorial.dukesbookstore.listeners.NameChanged" />
    </h:inputText>
    <h:message styleClass="error-message" for="name"/>

    <h:outputLabel for="ccno" value="#{bundle.CCNumber}"/>
    <h:inputText id="ccno"
                 size="19"
                 converterMessage="#{bundle.CreditMessage}"
                 required="true"
                 requiredMessage="#{bundle.ReqCreditCard}">
    <f:converter converterId="ccno"/>
    <f:validateRegex
        pattern="\d{16}|\d{4} \d{4} \d{4} \d{4}|\d{4}-\d{4}-\d{4}-\d{4}" />
    </h:inputText>
    <h:message styleClass="error-message"  for="ccno"/>
    ...
</h:panelGrid>

Предыдущий тег h:panelGrid отображается в виде таблицы, содержащей компоненты, в которые клиент вводит информацию. Этот тег h:panelGrid использует классы таблицы стилей для форматирования таблицы. Следующий код показывает определение list-header:

.list-header {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
}

Поскольку тег h:panelGrid определяет headerClass, тег h:panelGrid должен содержать заголовок. В примере тега h:panelGrid используется тег f:facet для заголовка. У фасетов может быть только один дочерний элемент, поэтому тег h:panelGroup необходим, если вы хотите сгруппировать более одного компонента в f:facet. В примере тега h:panelGrid есть только одна ячейка данных, поэтому тег h:panelGroup не требуется. (Для получения дополнительной информации о фасетах см. Использование связанных с данными компонентов таблицы.

Тег h:panelGroup имеет атрибут layout в дополнение к перечисленным в Общих атрибутах тегов компонентов. Если атрибут layout имеет значение block, отображается HTML-элемент div. В противном случае отображается HTML-элемент span. Если вы указываете стили для тега h:panelGroup, вам следует установить атрибуту layout значение block, чтобы стили могли быть применены к компонентам внутри тега h:panelGroup. Вы должны сделать это, потому что стили, устанавливающие ширину и высоту, не применяются к внутренним элементам HTML-элемента span.

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

Данные, представленные вложенными тегами, группируются в строки в соответствии со значением атрибута columns тега h:panelGrid. Атрибут columns в примере установлен на 2, и поэтому таблица будет иметь два столбца. Столбец, в котором отображается каждый компонент, определяется порядком, в котором компонент указан на странице по модулю 2. Таким образом, если компонент является пятым в списке компонентов, этот компонент будет находиться в столбце 5 по модулю 2, т. е. в столбце 1.

Компоненты выбора одного из значений

Другим часто используемым компонентом является тот, который позволяет пользователю выбрать одно значение, будь то единственное доступное значение или один из набора вариантов. Наиболее распространённые теги для этого вида компонентов следующие:

  • Тег h:selectBooleanCheckbox, отображаемый в виде флажка, который представляет логическое состояние

  • Тег h:selectOneRadio, отображаемый в виде набора параметров

  • Тег h:selectOneMenu, отображаемый в виде прокручиваемого списка

  • Тег h:selectOneListbox, отображаемый в виде непрокручиваемого списка

На рисунке 10-3 показаны примеры этих компонентов.

Рис. 10-3. Пример компонентов для выбора одного элемента

Компоненты выбора, флажок и списки.

Отображение флажка с помощью тега h:selectBooleanCheckbox

Тег h:selectBooleanCheckbox является единственным тегом, который JavaServer Faces предоставляет для выбора логического состояния.

Вот пример, который показывает, как использовать тег h:selectBooleanCheckbox:

<h:selectBooleanCheckbox id="fanClub"
                         rendered="false"
                         binding="#{cashierBean.specialOffer}" />
<h:outputLabel for="fanClub"
               rendered="false"
               binding="#{cashierBean.specialOfferText}"
               value="#{bundle.DukeFanClub}" />

Теги h:selectBooleanCheckbox и h:outputLabel имеют атрибуты rendered, для которых на странице установлено значение false, но могут иметь значение true в CashierBean при определённых обстоятельствах. Тег h:selectBooleanCheckbox отображает флажок, позволяющий пользователям указать, хотят ли они присоединиться к фан-клубу Дюка. Тег h:outputLabel отображает метку для флажка. Текст метки представлен атрибутом value.

Отображение меню тегом h:selectOneMenu

Компонент, который позволяет пользователю выбрать одно значение из набора, может быть представлен как блок или набор параметров. В этом разделе описывается тег h:selectOneMenu. Теги h:selectOneRadio и h:selectOneListbox используются аналогичным образом. Тег h:selectOneListbox аналогичен тегу h:selectOneMenu, за исключением того, что h:selectOneListbox определяет атрибут size, который задаёт, сколько элементов отображается одновременно.

Тег h:selectOneMenu представляет компонент, содержащий список элементов, из которого пользователь может выбрать один элемент. Этот компонент меню иногда называют раскрывающимся списком или полем со списком. В следующем фрагменте кода показано, как используется тег h:selectOneMenu, чтобы позволить пользователю выбрать метод доставки:

<h:selectOneMenu id="shippingOption"
                 required="true"
                 value="#{cashierBean.shippingOption}">
    <f:selectItem itemValue="2"
                  itemLabel="#{bundle.QuickShip}"/>
    <f:selectItem itemValue="5"
                  itemLabel="#{bundle.NormalShip}"/>
    <f:selectItem itemValue="7"
                  itemLabel="#{bundle.SaverShip}"/>
 </h:selectOneMenu>

Атрибут value тега h:selectOneMenu сопоставляется со свойством, которое содержит значение выбранного элемента. В этом случае значение устанавливается вспомогательным бином. Вы не обязаны указывать значение для выбранного в данный момент элемента. Если вы не предоставите значение, браузер определит, какое из них выбрано.

Как и тег h:selectOneRadio, тег h:selectOneMenu должен содержать тег f:selectItems или набор f:selectItem теги для представления элементов в списке. Опишем их с спользование тегов f:selectItem и f:selectItems.

Компонент выбора нескольких значений

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

  • Тег h:selectManyCheckbox, отображаемый в виде набора флажков

  • Тег h:selectManyMenu отображается как меню

  • Тег h:selectManyListbox отображается в виде блока

На рисунке 10-4 показаны примеры этих компонентов.

Рис. 10-4. Пример компонентов для выбора нескольких значений

Группа флажков, прокручиваемый блок и непрокручиваемый блок.

Эти теги позволяют пользователю выбирать ноль или более значений из набора значений. В этом разделе описывается тег h:selectManyCheckbox. Теги h:selectManyListbox и h:selectManyMenu используются аналогичным образом.

В отличие от меню, список отображает подмножество элементов в блоке. Меню отображает только один элемент за раз, когда пользователь не выбирает меню. Атрибут size тега h:selectManyListbox определяет количество элементов, отображаемых одновременно. Блок содержит полосу прокрутки для прокрутки всех оставшихся элементов в списке.

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

<h:selectManyCheckbox id="newslettercheckbox"
                      layout="pageDirection"
                      value="#{cashierBean.newsletters}">
    <f:selectItems value="#{cashierBean.newsletterItems}"/>
</h:selectManyCheckbox>

Атрибут value тега h:selectManyCheckbox сопоставляется со свойством newsletters Managed-бина EJB CashierBean. Это свойство содержит значения выбранных в данный момент элементов из набора флажков. Вы не обязаны предоставлять значение для выбранных в данный момент элементов. Если вы не предоставите значение, первый элемент в списке будет выбран по умолчанию. В Managed-бине CashierBean это значение равно 0, поэтому по умолчанию элементы не выбираются.

Атрибут layout указывает, как устроен набор флажков на странице. Поскольку layout установлен в pageDirection, флажки расположены вертикально. По умолчанию используется значение lineDirection, которое выравнивает флажки по горизонтали.

Тег h:selectManyCheckbox также должен содержать тег или набор тегов, представляющих набор флажков. Для представления набора элементов вы используете тег f:selectItems. Чтобы представлять каждый элемент отдельно, вы используете тег f:selectItem. Следующий раздел объясняет эти теги более подробно.

Использование тегов f:selectItem и f:selectItems

Теги f:selectItem и f:selectItems представляют компоненты, которые могут быть вложены в компонент, позволяющий выбрать один или несколько элементов. Тег f:selectItem содержит значение, метку и описание одного элемента. Тег f:selectItems содержит значения, метки и описания всего списка элементов.

Вы можете использовать либо набор тегов f:selectItem, либо один тег f:selectItems внутри тега компонента.

Преимущества использования тега f:selectItems заключаются в следующем.

  • Элементы могут быть представлены с использованием различных структур данных, включая Array, Map и Collection. Значение тега f:selectItems может представлять даже Generic-коллекцию POJO.

  • Различные списки могут быть объединены в один компонент, они также могут быть сгруппированы внутри компонента.

  • Значения могут генерироваться динамически во время выполнения.

Преимущества использования f:selectItem заключаются в следующем.

  • Элементы в списке могут быть определены со страницы.

  • Во вспомогательном бине требуется меньше кода для свойств f:selectItem.

В оставшейся части этого раздела показано, как использовать теги f:selectItems и f:selectItem.

Использование тега f:selectItems

В следующем примере из Отображение компонентов для выбора нескольких значений показано, как использовать тег h:selectManyCheckbox:

<h:selectManyCheckbox id="newslettercheckbox"
                      layout="pageDirection"
                      value="#{cashierBean.newsletters}">
    <f:selectItems value="#{cashierBean.newsletterItems}"/>
</h:selectManyCheckbox>

Атрибут value тега f:selectItems связан со свойством Managed-бина cashierBean.newsletterItems. Отдельные объекты SelectItem создаются программно в Managed-бине.

Смотрите Свойства UISelectItems для получения информации о том, как написать свойство Managed-бина для одного из этих тегов.

Использование тега f:selectItem

Тег f:selectItem представляет отдельный элемент в списке элементов. Вот пример из Отображения меню, использующего тег h:selectOneMenu ещё раз:

<h:selectOneMenu id="shippingOption"
                 required="true"
                 value="#{cashierBean.shippingOption}">
    <f:selectItem itemValue="2"
                  itemLabel="#{bundle.QuickShip}"/>
    <f:selectItem itemValue="5"
                  itemLabel="#{bundle.NormalShip}"/>
    <f:selectItem itemValue="7"
                  itemLabel="#{bundle.SaverShip}"/>
 </h:selectOneMenu>

Атрибут itemValue представляет значение для тега f:selectItem. Атрибут itemLabel представляет String, которая появляется в компоненте списка на странице.

Атрибуты itemValue и itemLabel поддерживают привязку значений, то есть они могут использовать выражения привязки значений для ссылки на значения во внешних объектах. Эти атрибуты также могут определять литеральные значения, как показано в примере тега h:selectOneMenu.

Отображение результатов компонентов выбора

Если вы отображаете компоненты, которые позволяют пользователю выбирать значения, вы также можете захотеть отобразить результат выбора.

Например, вы можете поблагодарить пользователя, который установил флажок, чтобы присоединиться к фан-клубу Дюка, как описано в Отображение флажка с использованием тега h:selectBooleanCheckbox. Поскольку флажок привязан к свойству specialOffer в CashierBean значением UISelectBoolean, вы можете вызвать метод isSelected свойства, чтобы определить, следует ли отображать сообщение:

<h:outputText value="#{bundle.DukeFanClubThanks}"
              rendered="#{cashierBean.specialOffer.isSelected()}"/>

Точно так же вы можете захотеть подтвердить, что пользователь подписался на новостную рассылку, используя тег h:selectManyCheckbox, как описано в Отображение компонентов для выбора нескольких значений. Для этого вы можете получить значение свойства newsletters, массива String, который содержит выбранные элементы:

<h:outputText value="#{bundle.NewsletterThanks}"
              rendered="#{!empty cashierBean.newsletters}"/>
<ul>
    <ui:repeat value="#{cashierBean.newsletters}" var="nli">
        <li><h:outputText value="#{nli}" /></li>
    </ui:repeat>
</ul>

Вступительное благодарственное сообщение отображается только в том случае, если массив newsletters не пустой. Затем тег ui:repeat — простой способ вывести значения в цикле — отображает содержимое выбранных элементов в подробном списке. (Этот тег указан в таблице 8-2.)

Использование таблицы Data-Bound

Компоненты таблицы с привязкой к данным отображают реляционные данные в табличном формате. В приложении JavaServer Faces тег компонента h:dataTable поддерживает привязку к коллекции объектов данных и отображает данные в виде таблицы HTML. Тег h:column представляет столбец данных в таблице, перебирая каждую запись в источнике данных, которая отображается в виде строки. Вот пример:

<h:dataTable id="items"
             captionClass="list-caption
             columnClasses="list-column-center, list-column-left,
             list-column-right, list-column-center"
             footerClass="list-footer"
             headerClass="list-header"
             rowClasses="list-row-even, list-row-odd"
             styleClass="list-background"
             summary="#{bundle.ShoppingCart}"
             value="#{cart.items}"
             border="1"
             var="item">
    <h:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ItemQuantity}" />
        </f:facet>
        <h:inputText id="quantity"
                     size="4"
                     value="#{item.quantity}"
                     title="#{bundle.ItemQuantity}">
            <f:validateLongRange minimum="1"/>
            <f:valueChangeListener
                type="javaeetutorial.dukesbookstore.listeners.QuantityChanged"/>
        </h:inputText>
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="#{bundle.ItemTitle}"/>
        </f:facet>
        <h:commandLink action="#{showcart.details}">
            <h:outputText value="#{item.item.title}"/>
        </h:commandLink>
    </h:column>
    ...
    <f:facet name="footer"
        <h:panelGroup>
            <h:outputText value="#{bundle.Subtotal}"/>
            <h:outputText value="#{cart.total}" />
                <f:convertNumber currencySymbol="$" type="currency" />
            </h:outputText>
        </h:panelGroup>
    </f:facet>
    <f:facet name="caption">
        <h:outputText value="#{bundle.Caption}"/>
    </f:facet>
</h:dataTable>

В примере тег h:dataTable отображает книги в корзине с указанием количества каждой книги, цены и набора кнопок, которые пользователь может нажать, чтобы удалить книги из корзины.

Теги h:column представляют столбцы данных в таблице. Пока компонент выполняет итерацию по строкам данных, он обрабатывает компонент столбца, связанный с каждым тегом h:column для каждой строки в таблице.

Тег h:dataTable, показанный в предыдущем примере кода, перебирает список книг (cart.items) в корзине покупок и отображает их названия, авторов и цены. Каждый раз, когда тег h:dataTable просматривает список книг, он отображает одну ячейку в каждом столбце.

В тегах h:dataTable и h:column используются фасеты для представления частей таблицы, которые не повторяются или не обновляются. Эти части включают верхние и нижние колонтитулы и подписи.

В предыдущем примере теги h:column включают теги f:facet для представления верхних или нижних колонтитулов столбцов. Тег h:column позволяет вам управлять стилями этих верхних и нижних колонтитулов, поддерживая атрибуты headerClass и footerClass. Эти атрибуты принимают разделённые пробелами списки CSS-классов, которые будут применяться к ячейкам верхнего и нижнего колонтитула соответствующего столбца в отображаемой таблице.

У фасетов может быть только один дочерний элемент. Если вы хотите сгруппировать более одного компонента в f:facet, вам необходим тег h:panelGroup. Поскольку тег фасета, представляющий нижний колонтитул, включает в себя более одного тега, тег h:panelGroup необходим для группировки этих тегов. Наконец, этот же тег h:dataTable включает тег f:facet с его атрибутом name, установленным в caption, что представляет собой заголовок таблицы.

Эта таблица — классический вариант использования компонента данных, поскольку число книг может быть неизвестно разработчикам приложения и страницы при разработке приложения. Компонент данных может динамически регулировать количество строк в таблице для размещения данных.

Атрибут value тега h:dataTable ссылается на данные, которые будут включены в таблицу. Эти данные могут принимать следующие формы:

  • Список бинов

  • Массив бинов

  • Одиночный бин

  • Объект javax.faces.model.DataModel

  • Объект java.sql.ResultSet

  • Объект javax.servlet.jsp.jstl.sql.Result

  • Объект javax.sql.RowSet

Все источники данных для компонентов данных имеют обёртку (wrapper) DataModel. Если вы явно не создадите обёртку (wrapper) DataModel, JavaServer Faces сделает это за вас с данными одного из допустимых типов. Смотрите Запись свойств бина для получения дополнительной информации о том, как писать свойства для использования компонентом данных.

Атрибут var указывает имя, которое используется компонентами в теге h:dataTable в качестве псевдонима данных, на которые ссылается атрибут value из h:dataTable.

В примере тега h:dataTable атрибут value указывает на список книг. Атрибут var указывает на одну книгу в этом списке. Поскольку тег h:dataTable выполняет итерацию по списку, каждая ссылка на item указывает на текущую книгу в списке.

Тег h:dataTable также может отображать только подмножество данных. Эта функция не показана в предыдущем примере. Чтобы отобразить подмножество данных, вы используете необязательные атрибуты first и rows.

Атрибут first указывает первую строку для отображения. Атрибут lines определяет количество строк, начиная с первой строки, которые будут отображаться. Например, если вы хотите отобразить записи со 2 по 10 базовых данных, вы должны установить для first значение 2, а для rows — 9. Когда вы отображаете подмножество данных на своих страницах, вы можете подумать о добавлении ссылки или кнопки, которая приводит к отображению последующих строк при клике. По умолчанию и first, и rows установлены в ноль, что приводит к отображению всех строк данных.

Таблица 10-7 показывает необязательные атрибуты для тега h:dataTable.

Таблица 10-7. Необязательные атрибуты для тега h:dataTable

Атрибут

Задаёт стиль для

captionClass

Заголовок таблицы

columnClasses

Все столбцы

footerClass

Нижний колонтитул

headerClass

Заголовок

rowClasses

Строки

styleClass

Таблица в целом

Каждый из атрибутов в таблице 10-7 может указать более одного стиля. Если в columnClasses или rowClasses указано более одного стиля, они применяются к столбцам или строкам в том порядке, в котором перечислены в атрибуте. Например, если columnClasses указывает стили list-column-center и list-column-right, и если таблица имеет два столбца, первый столбец будет иметь стиль list-column-center, а второй столбец будет иметь стиль list-column-right.

Если атрибут style задаёт больше стилей, чем столбцов или строк, остальные стили будут назначены столбцам или строкам, начиная с первого столбца или строки. Аналогичным образом, если атрибут style определяет меньше стилей, чем столбцов или строк, оставшимся столбцам или строкам будут назначаться стили, начиная с первого стиля.

Отображение сообщений об ошибках тегами h:message и h:messages

Теги h:message и h:messages используются для отображения сообщений об ошибках в случае, если таковые были выданы конвертерами или валидаторами. Тег h:message отображает сообщения об ошибках, связанных с конкретным компонентом ввода, а тег h:messages отображает сообщения об ошибках для всей страницы.

Вот пример тега h:message из приложения guessnumber-jsf:

<p>
    <h:inputText id="userNo"
                 title="Type a number from 0 to 10:"
                 value="#{userNumberBean.userNumber}">
        <f:validateLongRange minimum="#{userNumberBean.minimum}"
                             maximum="#{userNumberBean.maximum}"/>
   </h:inputText>
   <h:commandButton id="submit" value="Submit"
                    action="response"/>
</p>
<h:message showSummary="true" showDetail="false"
           style="color: #d20005;
           font-family: 'New Century Schoolbook', serif;
           font-style: oblique;
           text-decoration: overline"
           id="errors1"
           for="userNo"/>

Атрибут for ссылается на идентификатор компонента, который сгенерировал сообщение об ошибке. Сообщение об ошибке отображается в том же месте, что и тег h:message на странице. В этом случае сообщение об ошибке появится под кнопкой «Отправить».

Атрибут style позволяет вам указать стиль текста сообщения. В примере в этом разделе текст будет отрисован наклонным шрифтом с засечками, красного цвета, New Century Schoolbook, а над текстом появится линия. Теги message и messages поддерживают множество других атрибутов для определения стилей. Для получения дополнительной информации об этих атрибутах обратитесь к документации библиотеки тегов JavaServer Faces Facelets.

Другим атрибутом, поддерживаемым тегом h:messages, является атрибут layout. Его значение по умолчанию — list, которое указывает, что сообщения отображаются в списке маркеров с использованием элементов HTML ul и li. Если для атрибута установлено значение table, сообщения будут отображаться в таблице с использованием элемента HTML table.

В предыдущем примере показан стандартный валидатор, который зарегистрирован в компоненте ввода. Тег отображает сообщение об ошибке, связанное с этим валидатором, когда тот сигнализирует об ошибке во введённом значении. В общем, когда вы регистрируете конвертер или валидатор в компоненте, вы создаёте очередь сообщений об ошибках для этого компонента. Теги h:message и h:messages отображают соответствующие сообщения об ошибках, помещённые в эту очередь компонента, когда валидаторы или конвертеры, не могут сконвертировать или провалидировать значения компонента.

Стандартные сообщения об ошибках предоставляются со стандартными конвертерами и валидаторами. Разработчик приложения может переопределить эти стандартные сообщения и предоставить сообщения об ошибках для кастомных конвертеров и валидаторов путём регистрации кастомных сообщений об ошибках в приложении.

Создание URL для закладок с помощью тегов h:button и h:link

Возможность создавать закладки для URL относится к возможности создавать ссылки на основе заданного результата навигации и параметров компонента.

Большинство браузеров по умолчанию отправляют запросы GET для получения URL и запросы POST для обработки данных. Запросы GET могут иметь параметры запроса и могут кэшироваться, что не рекомендуется для запросов POST, которые отправляют данные на сервер для обработки. Другие теги JavaServer Faces, генерирующие ссылки, используют либо простые запросы GET, как в случае h:outputLink, либо запросы POST, как в случае h:commandLink или h:commandButton. GET-запросы с параметрами запроса обеспечивают более высокую степень детализации для URL. Эти URL создаются с одним или несколькими параметрами name=value, добавляемыми к простому URL после символа ? и разделяемыми &; либо &.

Чтобы создать URL для закладок, используйте тег h:link или h:button. Оба эти тега могут генерировать ссылку с помощью атрибута outcome. Например:

<h:link outcome="somepage" value="Message" />

Тег h:link сгенерирует URL-ссылку, указывающую на файл somepage.xhtml. Из этого тега генерируется следующий HTML-фрагмент (предполагаем, что имя приложения simplebookmark):

<a href="/simplebookmark/somepage.xhtml">Message</a>

Это простой GET-запрос, который не может передавать данные со страницы на страницу. Чтобы создавать более сложные GET-запросы и полнее использовать возможности тега h:link, обратите внимание на параметры представления.

Использование параметров представления для настройки URL для закладок

Чтобы передать параметр с одной страницы на другую, используйте атрибут includeViewParams в теге h:link и, кроме того, используйте тег f:param для указания передаваемых имени и значения. Здесь тег h:link определяет страницу результатов как personal.xhtml и предоставляет параметр с именем Result, значение которого является свойством Managed-бина:

<h:body>
    <h:form>
        <h:graphicImage url="#{resource['images:duke.waving.gif']}"
                        alt="Duke waving his hand"/>
        <h2>Hello, #{hello.name}!</h2>
        <p>I've made your
            <h:link outcome="personal" value="personal greeting page!"
                    includeViewParams="true">
                <f:param name="Result" value="#{hello.name}"/>
            </h:link>
        </p>
        <h:commandButton id="back" value="Back" action="index" />
    </h:form>
</h:body>

Если для компонента установлен атрибут includeViewParams, параметры представления добавляются в гиперссылку. Если значение hello.name равно Timmy, то результирующий URL будет выглядеть так:

http://localhost:8080/bookmarks/personal.xhtml?Result=Timmy

На странице результатов укажите основные теги f:metadata и f:viewparam в качестве источника параметров для настройки URL. Параметры представления объявляются как часть f:metadata для страницы, как показано в следующем примере:

<f:metadata>
    <f:viewParam name="Result" value="#{hello.name}"/>
</f:metadata>

Это позволяет вам указать значение свойства бина на странице:

<h:outputText value="Howdy, #{hello.name}!" />

В качестве параметра просмотра имя также отображается в URL страницы. Если вы редактируете URL, вы меняете вывод на странице.

Поскольку URL может быть результатом различных значений параметров, порядок создания URL был предопределён. Различные значения параметров считываются в следующем порядке:

  1. Компонент

  2. Параметры навигации

  3. Параметры представления

Приложение bookmarks

Приложение bookmarks изменяет приложение hello1, описанное в Веб-модуле с использованием JavaServer Faces: пример hello1, чтобы использовать URL для закладки с применением параметров представления.

Как и hello1, приложение bookmarks включает в себя Managed-бин Hello.java, страницы index.xhtml и response.xhtml. Кроме того, оно включает в себя страницу personal.xhtml, на которую указывает URL для закладок и передаются параметры просмотра со страницы response.xhtml, как описано в Использование параметров представления для настройки URL для закладок.

Вы можете использовать IDE NetBeans или Maven для сборки, упаковки, развёртывания и запуска bookmarks. Исходный код для этого примера находится в каталоге tut-install/examples/web/jsf/bookmarks/.

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

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

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

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

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

    tut-install/examples/web/jsf

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

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

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

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

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

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

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

    tut-install/examples/web/jsf/bookmarks/

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

    mvn install

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

Запуск bookmarks

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

    http://localhost:8080/bookmarks

  2. В текстовом поле введите имя и нажмите «Отправить».

  3. На странице ответа наведите указатель мыши на ссылку «personal greeting page», чтобы просмотреть URL с параметром представления, а затем кликните ссылку.

    Откроется страница personal.xhtml с приветствием для введённого вами имени.

  4. В поле URL измените значение параметра Result и нажмите Return.

    Имя в приветствии изменится на введённое вами.

Перемещение ресурсов с использованием тегов h:outputScript и h:outputStylesheet

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

  • h:outputScript

  • h:outputStylesheet

Эти теги имеют атрибуты name и target, которые можно использовать для указания местоположения отрисовки. Полный список атрибутов для этих тегов см. в документации JavaServer Faces Facelets Tag Library.

Для тега h:outputScript атрибуты name и target определяют, где могут отображаться выходные данные ресурса. Вот пример:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head id="head">
        <title>Resource Relocation</title>
    </h:head>
    <h:body id="body">
        <h:form id="form">
            <h:outputScript name="hello.js"/>
            <h:outputStylesheet name="hello.css"/>
        </h:form>
    </h:body>
</html>

Поскольку атрибут target не определён в тегах, таблица стилей hello.css отображается в элементе head страницы, а hello.js отображается в теле страницы.

Вот HTML, сгенерированный предыдущим кодом:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Resource Relocation</title>
        <link type="text/css" rel="stylesheet"
              href="/context-root/javax.faces.resource/hello.css"/>
    </head>
    <body>
        <form id="form" name="form" method="post"
              action="..." enctype="...">
            <script type="text/javascript"
                    src="/context-root/javax.faces.resource/hello.js">
            </script>
        </form>
    </body>
</html>

Если вы установите атрибут target для тега h:outputScript, входящий запрос GET предоставит параметр location. Вот пример:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head id="head">
        <title>Resource Relocation</title>
    </h:head>
    <h:body id="body">
        <h:form id="form">
            <h:outputScript name="hello.js" target="#{param.location}"/>
            <h:outputStylesheet name="hello.css"/>
        </h:form>
    </h:body>
</html>

В этом случае, если во входящем запросе не указан параметр местоположения, будут применяться местоположения по умолчанию: таблица стилей отображается в заголовке, а сценарий встроен в форму. Однако, если во входящем запросе в качестве значения параметра location указан head, таблица стилей и сценарий будут отображаться в элементе head.

HTML, сгенерированный предыдущим кодом, выглядит следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Resource Relocation</title>
        <link type="text/css" rel="stylesheet"
              href="/context-root/javax.faces.resource/hello.css"/>
        <script type="text/javascript"
                src="/context-root/javax.faces.resource/hello.js">
          </script>
    </head>
    <body>
        <form id="form" name="form" method="post"
              action="..." enctype="...">
        </form>
    </body>
</html>

Аналогично, если во входящем запросе предоставлено body в качестве значения параметра location, скрипт будет отображаться в элементе body.

В предыдущем разделе описан простой пример использования перемещения ресурсов. Эта функция может добавить компонентам и страницам ещё больше функциональности. Автору страницы не обязательно знать местоположение ресурса или его размещение.

Используя аннотацию @ResourceDependency для компонентов, авторы компонентов могут задавать ресурсы для компонента, такие как таблицы стилей и сценарии. Это избавляет авторов страниц от указания конкретного местоположения ресурса.

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