Объяснение на примере карты изображения

Duke’s Bookstore включает в себя кастомный компонент карты изображения на странице index.xhtml. Эта карта изображений отображает выбор из шести названий книг. Когда пользователь кликает одно из названий книг на карте изображения, приложение переходит на страницу, на которой отображается название выбранной книги, а также информация о выбранной книге. Страница позволяет пользователю добавить любую книгу в корзину.

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

Зачем использовать JavaServer Faces для реализации карты изображения?
Пояснение к отрисованному HTML
Пояснение к странице Facelets
Конфигурирование модели данных
Обзор классов карты изображения

Зачем использовать JavaServer Faces для реализации карты изображения?

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

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

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

Пояснение к отрисованному HTML

Вот сокращённая версия части формы HTML-страницы, которую приложение должно отобразить:

<form id="j_idt13" name="j_idt13" method="post"
        action="/dukesbookstore/index.xhtml" ...>
    ...
    <img id="j_idt13:mapImage"
         src="/dukesbookstore/javax.faces.resource/book_all.jpg?ln=images"
         alt="Choose a Book from our Catalog"
         usemap="#bookMap" />
    ...
    <map name="bookMap">
       <area alt="Duke"
          coords="67,23,212,268"
          shape="rect"
          onmouseout="document.forms[0]['j_idt13:mapImage'].src='resources/images/book_all.jpg'"
          onmouseover="document.forms[0]['j_idt13:mapImage'].src='resources/images/book_201.jpg'"
          onclick="document.forms[0]['bookMap_current'].value='Duke'; document.forms[0].submit()"
       />
    ...
       <input type="hidden" name="bookMap_current">
    </map>
    ...
</form>

Тег img связывает изображение (book_all.jpg) с картой изображения, указанной в значении атрибута usemap.

Тег map определяет карту изображения и содержит набор тегов area.

Каждый тег area определяет область карты изображения. Атрибуты onmouseover, onmouseout и onclick определяют, какой код JavaScript выполняется при возникновении этих событий. Когда пользователь наводит указатель мыши на область, функция onmouseover отображает карту с выделенной областью. Когда пользователь перемещает мышь из области, функция onmouseout повторно отображает исходное изображение. Если пользователь кликает на область, функция onclick устанавливает значение тега input в качестве идентификатора выбранной области и отправляет страницу.

Тег input представляет собой скрытый элемент управления, в котором хранится значение выбранной в данный момент области между обменами клиент-сервер, чтобы классы серверных компонентов могли получить это значение.

Серверные объекты получают значение bookMap_current и задают локаль в объекте javax.faces.context.FacesContext в соответствии с выбранным регионом.

Пояснение к странице Facelets

Вот сокращённая форма страницы Facelets, которую компонент карты изображения использует для создания HTML-страницы, показанной в предыдущем разделе. Он использует кастомные теги bookstore:map и bookstore:area для представления кастомных компонентов:

<h:form>
    ...
        <h:graphicImage id="mapImage"
                        name="book_all.jpg"
                        library="images"
                        alt="#{bundle.ChooseBook}"
                        usemap="#bookMap" />
        <bookstore:map id="bookMap"
                       current="map1"
                       immediate="true"
                       action="bookstore">
            <f:actionListener
                type="dukesbookstore.listeners.MapBookChangeListener" />
            <bookstore:area id="map1" value="#{Book201}"
                            onmouseover="resources/images/book_201.jpg"
                            onmouseout="resources/images/book_all.jpg"
                            targetImage="mapImage" />
            <bookstore:area id="map2" value="#{Book202}"
                            onmouseover="resources/images/book_202.jpg"
                            onmouseout="resources/images/book_all.jpg"
                            targetImage="mapImage"/>
            ...
        </bookstore:map>
    ...
</h:form>

Атрибут alt тега h:graphicImage соответствует локализованной строке «Выбрать книгу в нашем каталоге».

Тег f:actionListener в теге bookstore:map указывает на класс слушателя для события действия. Метод слушателя processAction помещает идентификатор книги для выбранной области карты в сессию. Способ обработки этого события объясняется более подробно в Обработка событий для кастомных компонентов.

Атрибут action тега bookstore:map определяет результат типа String — «bookstore» — который по неявному правилу навигации отправляет приложение на страницу bookstore.xhtml. Для получения дополнительной информации о навигации см. Настройка правил навигации.

Атрибут immediate тега bookstore:map имеет значение true, что указывает на то, что по умолчанию реализация javax.faces.event.ActionListener должна выполняться в фазе применение параметров запроса жизненного цикла обработки запросов вместо ожидания фазы вызова приложения. Поскольку запрос, полученный в результате клика на карту, не требует какой-либо валидации, конвертации данных или обновления серверных объектов, имеет смысл перейти непосредственно к фазе вызова приложения.

Атрибут current тега bookstore:map установлен в область по умолчанию, которая называется map1 (книга My Early Years: Growing Up on Star7, by Duke).

Обратите внимание, что теги bookstore:area не содержат никаких данных JavaScript, координат или формы, отображаемых на странице HTML. JavaScript генерируется классом dukesbookstore.renderers.AreaRenderer. Значения атрибутов onmouseover и onmouseout указывают изображение, которое будет загружено при возникновении этих событий. Как генерируется JavaScript, объясняется подробнее в Выполнение кодирования.

Данные о координатах, форме и альтернативном тексте получают через атрибут value, значение которого относится к атрибуту в области видимости приложения. Значением этого атрибута является бин, в котором хранятся данные coords, shape и alt. Как эти бины хранятся в области приложения, объясняется более подробно в следующем разделе.

Конфигурирование модели данных

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

Чтобы решить эту проблему, приложение инкапсулирует всю эту информацию в наборе объектов ImageArea. Эти объекты инициализируются в области видимости приложения средством создания Managed-бинов (см. Использование элемента Managed-бина). Вот часть объявления Managed-бина для компонента ImageArea, соответствующего кликабельной точке в Южной Америке:

<managed-bean eager="true">
    ...
    <managed-bean-name>Book201</managed-bean-name>
    <managed-bean-class>
        javaeetutorial.dukesbookstore.model.ImageArea
    </managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
    <managed-property>
        ...
        <property-name>shape</property-name>
        <value>rect</value>
    </managed-property>
    <managed-property>
        ...
        <property-name>alt</property-name>
        <value>Duke</value>
    </managed-property>
    <managed-property>
        ...
        <property-name>coords</property-name>
        <value>67,23,212,268</value>
    </managed-property>
</managed-bean>

Для получения дополнительной информации об инициализации Managed-бинов с помощью средства создания Managed-бина см. Раздел Файл конфигурации приложения.

Атрибуты value тегов bookstore:area ссылаются на бины в области видимости приложения, как показано в этом теге bookstore:area из index.xhtml:

<bookstore:area id="map1" value="#{Book201}"
                onmouseover="resources/images/book_201.jpg"
                onmouseout="resources/images/book_all.jpg"
                targetImage="mapImage" />

Чтобы ссылаться на значения бина объекта модели ImageArea из класса компонента, вы реализуете метод getValue в классе компонента. Этот метод вызывает super.getValue. Суперкласс tut-install/examples/case-studies/dukes-bookstore/src/java/dukesbookstore/components/AreaComponent.java, UIOutput, имеет метод getValue, который выполняет работу по поиску объекта ImageArea, связанного с AreaComponent. Класс AreaRenderer, который должен отображать значения alt, shapeи coords из ImageArea вызывает метод getValue у AreaComponent для получения объекта ImageArea.

ImageArea iarea = (ImageArea) area.getValue();

ImageArea — это простой компонент, поэтому вы можете получить доступ к форме, координатам и альтернативным текстовым значениям, вызвав соответствующие методы доступа ImageArea. Создание класса отрисовщика объясняет, как это сделать в классе AreaRenderer.

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

Таблица 15-2 суммирует все классы, необходимые для реализации компонента карты изображения.

Таблица 15-2 Классы карты изображения

Класс

Функция

AreaSelectedEvent

javax.faces.event.ActionEvent, указывающий, что был выбран AreaComponent из MapComponent.

AreaComponent

Класс, определяющий AreaComponent, который соответствует кастомному тегу bookstore:area.

MapComponent

Класс, определяющий MapComponent, который соответствует кастомному тегу bookstore:map.

AreaRenderer

AreaComponent делегирует отрисовку javax.faces.render.Renderer-у.

ImageArea

Бин, который хранит форму и координаты кликабельных точек.

MapBookChangeListener

Слушатель действия для MapComponent.

Исходный каталог Duke’s Bookstore, называемый bookstore-dir — tut-install/examples/case-studies/dukes-bookstore/src/java/dukesbookstore/. Классы событий и слушателей расположены в каталоге bookstore-dir/listeners/. Классы компонентов расположены в bookstore-dir/components/. Классами визуализации расположены в bookstore-dir/renderers/. ImageArea находится в каталоге bookstore-dir/model/.