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

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

Как описано в Определение тега кастомного компонента в дескрипторе библиотеки тегов, вы должны убедиться, что TLD, который определяет любые кастомные теги, упакован в приложение, если вы собираетесь использовать теги на своих страницах. Файлы TLD хранятся в каталоге WEB-INF/ или подкаталоге файла WAR или в каталоге META-INF/ или подкаталоге библиотеки тегов, упакованной в файл JAR.

Вам также необходимо включить объявление пространства имён на страницу, чтобы страница имела доступ к тегам. Кастомные теги для примера Duke's Bookstore определены в bookstore.taglib.xml. Тег ui:composition на странице index.xhtml объявляет пространство имён, определённое в библиотеке тегов:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:bookstore="http://dukesbookstore"
                template="./bookstoreTemplate.xhtml">

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

Пример Duke's Bookstore включает в себя кастомный компонент карты изображения на странице index.xhtml. Этот компонент позволяет выбрать книгу, нажав на область карты изображения:

...
<h:graphicImage id="mapImage"
                name="book_all.jpg"
                library="images
                alt="#{bundle.chooseLocale}"
                usemap="#bookMap" />
<bookstore:map id="bookMap"
               current="map1"
               immediate="true"
               action="bookstore">
    <f:actionListener
        type="javaeetutorial.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="map6" value="#{Book207}"
                    onmouseover="resources/images/book_207.jpg"
                    onmouseout="resources/images//book_all.jpg"
                    targetImage="mapImage" />
</bookstore:map>

Стандартный тег h:graphicImage связывает изображение (book_all.jpg) с картой изображения, на которую ссылается значение атрибута usemap.

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

На странице атрибуты onmouseover и onmouseout определяют изображение, которое отображается, когда пользователь выполняет действия, описанные атрибутами. Кастомный отрисовщик также отображает атрибут onclick.

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

Когда кастомный отрисовщик отображает эти атрибуты в HTML, он также отображает код JavaScript. Кастомный отрисовщик также отображает весь атрибут onclick, а не позволяет автору страницы установить его.

Кастомный отрисовщик, который отображает тег HTML map, также отображает скрытый компонент input, который содержит текущую область. Серверные объекты получают значение скрытого поля input и задают локаль в объекте FacesContext в соответствии с выбранной областью.