Применение RichFaces с JSF 2

Перенос компонентов Web-страницы на RichFaces 4

Среда RichFaces, как и большинство других сред разработки с многофункциональными/Ajax компонентами, предназначенных для использования с JavaServer Faces (JSF), существенно модернизирована, чтобы обеспечить совместимость со значительно измененной версией JSF 2. Джо Сэм Шира рассматривает измененные и новые компоненты RichFaces 4.1, выполняющие те же функции, какие он демонстрировал для версии 3.1 в статье Введение в RichFaces. Кроме того, он приводит новые требования к установке при совместном использовании RichFaces и JSF.

Джо Сэм Шира, разработчик и руководитель, conceptGO

Джо Сэм ШираДжо Сэм Шира (Joe Sam Shirah)— руководитель и разработчик компании conceptGO. Он написал несколько руководств для developerWorks и сайта Oracle Java Developer и был удостоен премии Java Community Award. Является модератором форума developerWorks по Java-фильтрам и ведет разделы FAQ по jGuru JDBC, I18N и Java400.



26.12.2012

Пакет JavaServer Faces (JSF) 2, выпущенный в 2009 году, содержит значительные изменения и дополнения во многих областях, включая системные события, ресурсы и стандартизацию обработки Facelets и Ajax (см. раздел Ресурсы). Хотя в целом такая эволюция приветствуется, она привела к тому, что практически все библиотеки компонентов, написанные для JSF 1.2 — включая RichFaces версии 3.x и ниже — перестали надежно работать, если вообще работали. В ответ группа RichFaces решила переписать код и выпустить версию 4. Как вы увидите из этой статьи, имена некоторых компонентов изменились; другие были удалены, и добавлены новые.

RichFaces 4.1

В статье говорится о версии библиотеки RichFaces 4.1 — которая на момент написания этой статьи проходит этапы разработки milestone и candidate. Один важный недостаток версии 4.0 заключался в отсутствии компонента List Shuttle, который позволял выбирать и упорядочивать несколько элементов. Это упущение восполнено в версии 4.1, где в компоненте Pick List появилась возможность упорядочения.

В 2008 году в своей статье Введение в RichFaces я представил несколько компонентов RichFaces версии 3.1 и объяснил требования, предъявляемые к установке RichFaces и JavaServer Faces (JSF) 1.2. Настоящая статья послужит как руководством для разработчиков, еще не знакомых с RichFaces, так и подспорьем для тех, кто переходит на версию 4.x с предыдущих версий. Я прилагаю WAR с демонстрационным кодом (см. раздел Загрузки).

Эта статья будет полезна и тем, кто не знаком с библиотекой RichFaces и хочет использовать ее с JSF 2 (хотя, возможно, придется пересмотреть и ресурсы из предыдущей статьи ). Тем же, кто использовал RichFaces до версии 4, я предлагаю прочесть и сравнить обе статьи. Для облегчения сравнения версий я использовал в них одни и те же заголовки разделов. Также я постарался повторить внешний вид и функциональность демонстрируемых компонентов.

Далее под RichFaces, если не указана конкретная версия, я буду подразумевать версию 4.x. Начнем с обзора некоторых элементов инфраструктуры, необходимых для разработки приложений с применением библиотеки RichFaces.

Основы

К инфраструктуре для разработки приложений с применением библиотеки RichFaces предъявляются следующие минимальные требования:

  • Java™ SE 6;
  • контейнер Servlet 2.5;
  • минимально современный браузер, такой как Firefox 3.5 или Internet Explorer 7 и выше.

Сам я для целей разработки и тестирования использовал JDK 7, Apache Tomcat 7.0.22 и GlassFish 3.1.1. Браузеры: Firefox 7.0.1 и Internet Explorer 8.

Как правило, с моей установкой и при соблюдении указанных минимумов у вас не должно возникнуть никаких проблем. Однако нужно иметь в виду некоторые моменты, связанные с демонстрационным кодом:

  • если используется контейнер, поддерживающий только Servlet 2.5, то в файле web.xml нужно заменить <web-app version="3.0"...> на <web-app version="2.5"...>;
  • для GlassFish V3 и других контейнеров с поддержкой JEE 6 / JSF 2 из демопроекта можно удалить javax.faces.jar. В демокоде используется версия mojarra-2.1.4;
  • в списке почтовой рассылки я видел упоминание о проблемах в некоторых версиях JSF 2 и более старых контейнерах, связанных с Expression Language (EL). Если вы получите странные результаты, попробуйте загрузить последнюю версию EL.

В этой статье предполагается, что читатель имеет базовые знания по JSF 2 и Tomcat или GlassFish. Если нужны дополнительные сведения об этих технологиях, обращайтесь по соответствующим ссылкам в разделе Ресурсы.


Не "Faces в миниатюре"

Несмотря на название, Facelets ― это не уменьшенная версия JSF; по своей сути Facelets составляет альтернативу JavaServer Pages (JSP) в качестве JSF ViewHandler. Facelets поддерживает все компоненты UI JSF и строит свое собственное дерево компонентов, отражающее представление JSF-приложения. Спецификация JSF 2 не использует JSP в качестве языка определения представлений (view definition language - VDL) и в качестве предпочтительного VDL включает в себя стандартную версию Facelets. По этой причине RichFaces не поддерживает JSP и требует Facelets.

Я предпочитаю придерживаться максимально чистой и простой реализации. В примере проекта вы увидите, что практически весь код страниц (в отличие от разметки) состоит из EL-выражений для геттеров, сеттеров и привязок методов. Хотя в более сложных проектах могут вызваться более сложные выражения, в целом Facelets облегчает сохранение Java-кода отдельно от разметки Web-страницы.

Вот основные различия по сравнению с разработкой до версии JSF 2 с использованием JSP, которые вы здесь заметите:

  • в web.xml и faces-config.xml требуются или введены по умолчанию некоторые дополнительные обозначения;
  • Web-страницы представляют собой XHTML-документы;
  • вместо тегов JSP используются пространства имен XML.

Что касается форматирования, то за исключением начальной части (см. листинг 1) весь код Web-страницы должен выглядеть знакомым. Я считаю этот аспект недооцененным качеством Facelets. Это все, что нужно знать для работы с проектом из этой статьи — и многими другими, в которых Facelets используется главным образом для обработки представления. В Facelets также входит ряд других полезных функций, таких как создание шаблонов и элементы, облегчающие жизнь дизайнерам Web-страниц. Подробнее о Facelets см. в разделе Ресурсы.)

Листинг 1. Начальная часть XHTML-документа Facelets
<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets">

Демонстрация компонентов

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

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

  • Calendar : всплывающий компонент, который позволяет выбирать дату. Пример приведен на рисунке 1. Стрелки < и > управляют месяцем; << и >> ― годом. Кнопка Today внизу выбирает сегодняшний день. Clean отменяет выбор даты. В первом столбце чисел слева показаны недели.
    Рисунок 1. Компонент RichFaces Calendar
    Компонент RichFaces Calendar
  • Pick List: компонент выбора и упорядочения. Pick List в версии 4 заменяет компонент List Shuttle, который позволяет перемещать элементы между доступными и выбранными областями, а также их вверх и вниз в пределах области. Пример приведен на рисунке 2.
    Рисунок 2. Компонент RichFaces Pick List
    Компонент RichFaces Pick List
  • AutoComplete: замена компонента ввода Suggestion Box в версии 4 ― создает кликабельные варианты выбора для заполнения или завершения записи. Пример приведен на рисунке 3.
    Рисунок 3. Компонент RichFaces AutoComplete
    Компонент RichFaces AutoComplete
  • Tab Panel: компонент вывода, создающий страницы с вкладками. Пример приведен на рисунке 4.
    Рисунок 4. Компонент RichFaces Tab Panel
    Компонент RichFaces Tab Panel
  • Accordion: замена компонента ввода Panel Bar в версии 4. В демопроекте Accordion используется для инструкций. Пример приведен на рисунке 5.
    Рисунок 5. Компонент RichFaces Accordion
    Компонент RichFaces Accordion
  • Collapsible Panel: замена компонента ввода Simple Toggle Panel в версии 4. В демопроекте Collapsible Panels используется для вывода результатов. Пример приведен на рисунке 6.
    Рисунок 6. Компонент RichFaces Collapsible Panel
    Компонент RichFaces Collapsible Panel

RichFaces построен на базе Ajax4jsf (см. раздел Ресурсы). Благодаря этому фундаменту любой компонент может поддерживать Ajax несколькими способами. В версии 4 функциональность Ajax часто выполняется автоматически или по умолчанию. В примере приложения возможности Ajax используются для компонентов AutoComplete и Collapsible Panel.


Пример приложения

Пример приложения DwRichFaces4Demo1 минимален; его единственная цель ― продемонстрировать процесс настройки и использования выбранных компонентов. Он всего лишь собирает и отображает входные данные. Способы использования этих данных и компонентов в производственном приложении я оставляю на ваше усмотрение. Помимо необходимых JAR, изображений, файла свойств, поддерживающего набор ресурсов, и файлов каскадных таблиц стилей (CSS), приложение состоит из двух XHTML-страниц и двух Java-классов.

URL-адрес страницы ввода, представленной на рисунке 7, при условии установки Tomcat или GlassFish с настройками по умолчанию: http://localhost:8080/dwRichFaces4Demo1. На этой странице ввода можно выбрать дату с помощью компонента Calendar. Компонент Pick List позволяет перемещать доступные элементы и изменять порядок их следования. Компонент AutoComplete City позволяет вводить название города. City поддерживает Ajax; если нажать клавишу пробела, отображаются все доступные города. При вводе городов с названиями на A или J отображаются соответствующие списки городов. По мере ввода последующих символов список сужается. Нажимая на элементы Accordion, расположенные в левой части экрана, можно получать инструкции по использованию основных компонентов.

Рисунок 7. Страница ввода dwRichFaces4Demo1
Страница ввода dwRichFaces4Demo1

После завершения ввода данных нажмите кнопку Submit. Приложение настолько минимально, что никакого редактирования не предусмотрено. Поскольку ручной ввод для компонента Calendar отключен, нельзя даже ввести неверную дату. Кнопка Submit вызывает отображение страницы результатов, как показано на рисунке 8.

Рисунок 8. Страница результатов dwRichFaces4Demo1
Страница результатов dwRichFaces4Demo1

На странице результатов нажмите на вкладку Result, затем щелкните на соответствующем элементе Collapsible Panel, чтобы увидеть введенные значения. Чтобы вернуться к странице ввода, нажмите кнопку Edit.

Обратите внимание, что цвет фона кнопки Submit на рисунке 7 и кнопки Edit на рисунке 8 совпадает с цветом других элементов, несмотря на то, что эти кнопки ― стандартные компоненты JSF, а не RichFaces. Причину я объясню в следующем разделе.


Настройка

Первое, что необходимо для приложения, это реализаторы (enablers) для JSF, Facelets и RichFaces — то есть JAR-файлы, реализующие их возможности. При миграции имейте в виду, что в версии 4.x зависимости полностью изменились. В каталог lib загружаемого WAR включены следующие JAR-файлы с указанными версиями (см. раздел Загрузки). Список предполагает, что Web-контейнер поддерживает текущие версии EL и Servlet API. Если у вас будут проблемы с исполнением демокода, проверьте выполнение требований JSF, Facelets и RichFaces (см. раздел Ресурсы.) Следует также прочесть примечание к Загрузкам.

JAR-файлы, необходимые для любого проекта RichFaces:

  • JSF 2 (входит в контейнеры JEE 6, такие как GlassFish V3.x)
    • javax.faces.jar
  • Facelets
    • Включен в JSF 2 JAR
  • RichFaces
    • richfaces-components-api-ver.jar
    • richfaces-components-ui-ver.jar
    • richfaces-core-api-ver.jar
    • richfaces-core-impl-ver.jar
  • Другие требуемые зависимости:
    • cssparser-ver.jar
    • guava-ver.jar
    • sac-ver.jar

В моем проекте и в загружаемом WAR (см. список сайтов для загрузки в разделе Ресурсы) используются следующие версии:

  • JSF 2
    • javax.faces.jar — mojarra-2.1.4
  • Facelets
    • Включен в javax.faces.jar
  • RichFaces
    • richfaces-components-api-4.1.0.20111111-CR1.jar
    • richfaces-components-ui-4.1.0.20111111-CR1.jar
    • richfaces-core-api-4.1.0.20111111-CR1.jar
    • richfaces-core-impl-4.1.0.20111111-CR1.jar
  • Другие необходимые зависимости:
    • cssparser-0.9.5.jar
    • guava-10.0.1.jar
    • sac-1.3.jar

Далее идут записи web.xml, показанные в листинге 2, необходимые для реализации JSF. При использовании JSF 2 с контейнером Servlet 3.0 эти записи необязательны. Я предпочитаю явное указание. Если параметры *.faces, *.jsf и /faces/* <url-pattern /> опустить, они отображаются автоматически.

Листинг 2. Минимальные записи JSF в файле web.xml
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

До JSF 2 для того, чтобы Facelets переопределял суффикс .jsp по умолчанию на .xhtml, требовалась запись javax.faces.DEFAULT_SUFFIX. Теперь она не нужна, потому что Facelets по умолчанию устанавливает VDL.

RichFaces 4 больше не требует присутствия в файле web.xml элементов org.ajax4jsf.VIEW_HANDLERS, filter или filter-mapping. Можно просто загрузить JARs-файлы и использовать их.

В листинге 3 показаны записи web.xml, относящиеся к RichFaces, как они используются в демонстрационном приложении.

Листинг 3. Записи в файле web.xml, связанные с RichFaces.
<context-param>
  <param-name>org.richfaces.skin</param-name>
  <param-value>classic</param-value>
</context-param>
<context-param>
  <param-name>org.richfaces.enableControlSkinning</param-name>
  <param-value>true</param-value>
</context-param>

Листинг 3 содержит два параметра контекста:

  • <param-name>org.richfaces.skin</param-name> определяет цветовую схему (скин) приложения. В RichFaces есть несколько встроенных скинов. Скин classic ― голубой. Если этот элемент опущен, то будет использоваться значение по умолчанию ― светло-серый.
  • Значение <param-name>org.richfaces.enableControlSkinning</param-name> влияет на внешний вид RichFaces и, как ни странно, стандартных компонентов JSF. Если это значение true, то стандартные элементы оформляются скином. Вот почему кнопки Submit и Edit на рисунках 7 и 8 имеют тот же цвет, что и тема RichFaces. Если этот элемент опущен, то используется значение по умолчанию true.

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

Существует еще один фрагмент, который фигурирует в каждом приложении: пространство имен RichFaces на XHTML-страницах приложений. Листинг 4 представляет собой модификацию листинга 1 с пространством имен RichFaces.

Листинг 4. Начальная часть XHTML-документа Facelets/RichFaces
<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:a4j="http://richfaces.org/a4j"
     xmlns:rich="http://richfaces.org/rich" >

Практическое применение

Теперь можно посмотреть, как использовать компоненты RichFaces. Я начну с Accordion и Accordion Items (см. рисунок 5). Они заменяют Panel Bar и Panel Bar Items в версиях, предшествующих RichFaces 4. Вряд ли вы будете использовать их часто, но с ними легко работать, и они служат хорошим примером для ознакомления с синтаксисом RichFaces.

Идея в том, что Accordion – это контейнер для Accordion Items. У Accordion Item есть заголовок, и он может содержать любой другой компонент. Компоненты Accordion Items нанизываются один на другой; фактическое содержание отображается при нажатии на планку элемента. Одновременно может отображаться содержание только одного элемента. В данном случае, как видно из листинга 5, я использую простой текст. Обратите внимание, что все компоненты имеют префикс rich:, который указывает на запись пространства имен, включенную в листинг 4. В демонстрационном приложении Accordion содержится в стандартном JSF PanelGrid.

Листинг 5. Компонент RichFaces Accordion
<rich:accordion style="width: 256px;" styleClass="floatLeft">
    <rich:accordionItem header="#{dwRF4D1.calComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.calCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.plComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.plCompText}" style="font: menu;" />
    </rich:accordionItem>
    <rich:accordionItem header="#{dwRF4D1.acComp} #{dwRF4D1.info}">
        <h:outputText value="#{dwRF4D1.acCompText}" style="font: menu;" />
    </rich:accordionItem>
</rich:accordion>

Основной элемент <rich:accordionItem /> не требует почти ничего, кроме заголовка, который здесь извлекается из набора ресурсов с помощью EL-выражения.

Фактическое содержание для демонстрации Accordion Items ― это просто элемент <h:outputText />, опять же с текстом из набора ресурсов. Элемент стиля font я использую для согласованного представления, а также чтобы показать, что RichFaces позволяет гибко использовать CSS.

Обратите внимание, что программисту не нужно иметь дело со сгенерированным JavaScript. Всего за несколько шагов можно создать красивый многоэлементный интерактивный компонент. Это одно из главных достоинств RichFaces. Даже такие простые компоненты позволяют использовать Ajax (через атрибут switchType), активные и неактивные стили, события и многое другое.


Наметим дату

Компонент Calendar (см. рисунок 1) должен показаться знакомым; выбор даты, вероятно, был одним из первых усовершенствований JavaScript для Web-страниц. RichFaces Calendar имеет более 80 атрибутов, но как видно из листинга 6, можно получить широкую функциональность, написав всего несколько строк.

Листинг 6. Компонент RichFaces Calendar
<label for="CalendarID" >#{dwRF4D1.calendar}:</label>
<rich:calendar id="CalendarID"
               value="#{dwRF4D1Handler.selectedDate}"
               timeZone="#{dwRF4D1Handler.timeZone}"
               datePattern="#{dwRF4D1.datePattern}" >
</rich:calendar>

Атрибуту datePattern нужен стандартный шаблон даты, определенный в java.text.SimpleDateFormat. В примере для получения значения, определяющего ключ datePattern как yyyy-MM-dd, опять же используется набор ресурсов. Атрибуты value и timeZone загружаются с применением методов из управляемого компонента, определенного в faces-config.xml, как показано в листинге 7.

Листинг 7. Определение управляемого компонента для dwRF4D1Handler
<managed-bean>
   <managed-bean-name>dwRF4D1Handler</managed-bean-name>
   <managed-bean-class>com.dw.dwRF4D1Handler</managed-bean-class>
   <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Класс com.dw.dwRF4D1Handler служит основой — состоящей в основном из инициализатора, геттеров и сеттеров — и не требует дальнейших разъяснений. Методы getSelectedDate() и setSelectedDate() ожидают java.util.Date. Метод getTimeZone() просто возвращает java.util.TimeZone.getDefault(); подходит ли это на практике, зависит от требований приложения.

Если нужно разрешить пользователю вводить значения даты, установите значение атрибута enableManualInput равным true. Если достаточно просто показать календарь, присвойте атрибуту popup значение false. Конечно, имеется множество других параметров, но для базовой функциональности календаря этого достаточно.

При переходе с предыдущих версий RichFaces настройка компонента Calendar для той функциональности, которая представлена в демокоде, в версии 4 практически ничем не отличается.


Выбор варианта

Компонент Pick List с атрибутом orderable в версии 4 заменяет List Shuttle (см. рисунок 2 и врезку RichFaces 4.1) и идеально подходит для выбора и упорядочения элементов из первоначальной группы. Листинг 8 показывает, что использовать его еще легче, чем можно предположить.

Листинг 8. Компонент RichFaces Pick List
<label for="plID">#{dwRF4D1.pl}:</label>
<rich:pickList id="plID
               value="#{dwRF4D1Handler.orderByTarget}" 
               orderable="true" listWidth="10em" 
               sourceCaption="#{dwRF4D1.available}"  
               targetCaption="#{dwRF4D1.selected}" >
     <f:selectItems value="#{dwRF4D1Handler.orderBySource}" />
</rich:pickList>

XHTML-разметка в примере кода содержит дополнительные атрибуты для переопределения некоторых меток по умолчанию, но для типичного применения требуются только value, <f:selectItems /> и, как правило, orderable.

Атрибуты value для выбранных значений и <f:selectItems /> для доступных вариантов представляют собой классы java.util.List, содержащие объекты любого типа. В JSF 2 значение <f:selectItems /> может быть коллекцией или массивом, содержащим объекты любого типа; toString() вызывается для добавления надписей. Как и я в демокоде, вы, вероятно, чаще всего используете списки со значениями типа String. Помимо инициализации List со значением атрибута <f:selectItems />, в листинге 9 показан весь исходный код Java, относящийся к примеру Pick List. Java-код практически не изменился по сравнению с тем, что использовался во Введении в RichFaces.

Листинг 9. Код Pick List, относящийся к dwRF4D1Handler
private List<String> lOrderBySource = new ArrayList<String>(),
                     lOrderByTarget = new ArrayList<String>();
...
public List getOrderBySource()
{
  return lOrderBySource;
}

public List getOrderByTarget()
{
  return lOrderByTarget;
}
...
public void setOrderBySource( List<String> orderBySource )
{
  lOrderBySource = orderBySource;
}

public void setOrderByTarget( List<String> orderByTarget )
{
  lOrderByTarget = orderByTarget;
}

После того как пользователь сделал свой выбор, обработчик получает соответствующий список.


Автозаполнение

В форумах и списках рассылки часто задают вопрос, что делать, если нужно загрузить в раскрывающийся список тысячи или миллионы записей. Компонент AutoComplete (см. рисунок 3), который заменяет Suggestion Box, позволяет показать допустимые варианты выбора без подобных экстремальных операций. На самом деле именно эта проблема стала одной из основных причин, по которым я начал исследовать RichFaces и аналогичные средства: некоторые элементы ввода данных в исполняемое приложение, такие как название города, предусматривают слишком много возможностей, чтобы их можно было разместить в раскрывающемся списке. Функция AutoComplete подобна знакомым компонентам автозаполнения, применяемым во многих настольных приложениях. Должно быть очевидно, что для того чтобы такого рода возможности имели какой-то шанс эффективно работать в Web-приложении, скорее всего придется привлекать посылки Ajax.

В листинге 10 показана разметка для компонента AutoComplete. Ввод осуществляется с клавиатуры или путем выбора из раскрывающегося списка.

Листинг 10. Компонент RichFaces AutoComplete
<h:form>
  <a4j:queue ignoreDupResponses="true"/> 

...

<label for="CityID">#{dwRF4D1.city}:</label>
<rich:autocomplete id="CityID" mode="ajax" 
                   value="#{dwRF4D1Handler.city}"  
                   autocompleteMethod="#{dwRF4D1City.suggest}" 
                   autofill="false" 
                   selectedItemClass="selCtl" > 
</rich:autocomplete>

Если вы уже использовали Suggestion Box, то по достоинству оцените упрощения, внесенные в AutoComplete. Минимально необходимые атрибуты ― mode, value и autocompleteMethod:

  • mode ― это обычно ajax, вызывающий Ajax-запрос при каждом нажатии клавиши — очень красиво и полностью автоматически. Другие значения: Cached Ajax, Client и Lazy Client;
  • значение value то же, что и в большинстве других компонентов: обычно это геттеры и сеттеры из управляемого компонента;
  • метод autocompleteMethod ― еще один управляемый компонент suggest(), основанный на втором классе Java из демокода, com.dw.City. Подпись метода — public List suggest(Object anObject).

В демокоде при инициализации создается список городов на A и J. Если пользователь нажимает клавишу пробела в текстовом поле названия города, то возвращается весь список. Если нажать клавишу А, то в списке будут только города на A; так же обрабатываются и города на J. С нажатием каждой следующей клавиши диапазон выбора сужается. В своем собственном коде можно делать все, что угодно. В моем производственном приложении результаты берутся из ограниченной базы данных ― вероятно, это наиболее типичный случай. Если данные вам знакомы, то в методе можно принять некоторые меры для оптимизации результатов. Например, можно игнорировать некоторые клавиши, чтобы при их нажатии метод не обращался к базе данных.

В версии 4.x RichFaces основывается на стандартной очереди JSF. Атрибут <a4j:queue /> не обязателен, но его, вероятно, придется часто использовать. Здесь он используется для ignoreDupResponses; просмотрите документацию на предмет других возможностей. Обратите внимание, что <a4j:queue /> используется только для событий компонентов RichFaces. Его можно применять на уровне представления или формы. В файле web.xml можно разрешить глобальную очередь приложений с помощью параметра контекста <param-name>org.richfaces.queue.global.enabled</param-name>.

Можно также создавать именованные очереди, которые компоненты указывают с помощью <a4j:attachQueue name="myRequestQueue" />.

selectedItemClass ― это класс CSS, применяемый к компоненту. RichFaces использует концепцию скинов. Он служит для выбора фона компонентов. В моем приложении было несколько стандартных раскрывающихся списков JSF, в которых для фона использовался системный цвет. Компонент AutoComplete использовал цвет скинов classic, что создавало впечатление несогласованности. Класс SelCtl предписывает компоненту вместо этого использовать цвет фона lightgrey.


Вкладки

Компонент Tab Panel (см. рисунок 4) прост в применении, хотя при миграции следует учитывать некоторые изменения. Он имеет типичные атрибуты RichFaces, но основной, который вы будете использовать, это switchType. Его значение по умолчанию: server. Для постоянной информации чаще применяется client; также доступен ajax. Как видно из листинга 11, для создания набора вкладок обычно используются типичный «сэндвич» RichFaces из элементов <rich:tabPanel /> и наложение «бутербродов» из элементов <rich:tab />.

Листинг 11. Компонент RichFaces Tab Panel
<rich:tabPanel switchType="client" >
        <rich:tab >
          <f:facet name="header">
            <h:panelGrid columns="2">
              <h:outputText value="#{dwRF4D1.info}" />
              <h:graphicImage value="/images/roseTab.jpg" height="20" width="25" />
            </h:panelGrid>
          </f:facet>
          #{dwRF4D1.resultText}
        </rich:tab> 

        <rich:tab header="#{dwRF4D1.result}">
...
        </rich:tab> 
... 
</rich:tabPanel>

Для отображаемого имени каждой вкладки используется атрибут header. В демокоде значение заголовка, как обычно, извлекается из набора ресурсов. Как и элементы Accordion, вкладка может содержать компоненты любого типа. В демоверсии я использовал комплект текстовых ресурсов для вкладки Info и Collapsible Panels для вкладки Result.

Вместо атрибута header можно использовать <f:facet /> с именем header, чтобы включить дополнительную информацию. В демокоде используется <h:panelGrid />, содержащий текст и изображение для заголовка вкладки Info.


Свертываемая панель

Компонент Collapsible Panel заменяет Simple Toggle Panel из версии 4.x. Он состоит из планки и окна, в котором может отображаться любой компонент (см. рисунок 6). Для заголовка используйте атрибут header. Нажатие на планку показывает или скрывает содержимое, как Accordion, но только с одним элементом. В листинге 12 приведена разметка Collapsible Panel для демопроекта.

Листинг 12. Компонент RichFaces Collapsible Panel
<h:panelGrid columns="1" width="50%">
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.calComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.selectedDate} 
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.plComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.orderByTarget} 
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.acComp} #{dwRF4D1.value}" 
                         expanded="false" >
      #{dwRF4D1Handler.city}
  </rich:collapsiblePanel> 
  <rich:collapsiblePanel switchType="ajax" 
                         header="#{dwRF4D1.face}" 
                         expanded="false" >
       <img src="images/myphoto.jpg" 
            height="80" width="64"/>
  </rich:collapsiblePanel>
</h:panelGrid>

Обратите внимание, что атрибут switchType обеспечивает повторение. Кроме значения ajax, используемого в коде, доступны значения client и server. Атрибут expanded определяет, будет ли содержание отображаться первоначально. Для демоверсии я вложил несколько свертываемых панелей в JSF <h:panelGrid />, разместив их на вкладке, помещенной в Tab Panel.


Заключение

RichFaces предоставляет большое количество JSF-компонентов для создания RIA- и Ajax-приложений. Эта статья демонстрирует лишь немногие, но вы должны были получить представление о том, как это работает в RichFaces, и познакомиться с несколькими компонентами, которые могут оказаться полезными во многих приложениях. С выпуском версии 4 Richfaces стал совместимым с JSF 2 и включает в себя упрощения и усовершенствования, которые вы оцените по достоинству. Онлайн-демонстрация всех компонентов, входящих в пакет, а также документация и другие ресурсы доступны на странице проекта RichFaces (см. раздел Ресурсы).

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


Загрузка

ОписаниеИмяРазмер
WAR с демонстрационным кодом для этой статьи1j-richfaces4.zip8,9 MB

Заметка

  1. В WAR включены исходные коды Java. Инструкция по использованию WAR содержится в файле readme.txt, входящем в загрузку.

Ресурсы

Научиться

  • Оригинал статьи: Using RichFaces with JSF 2.
  • RichFaces: сайт RichFaces со ссылками на информацию, документацию, онлайн-демонстрации и загрузки.
  • Главная страница проекта JSF: ресурсы для разработчиков по эталонным реализациям JSF.
  • An introduction to RichFaces (Joe Sam Shirah, developerWorks, март 2008 г.): предыдущая статья того же автора, посвященная RichFaces 3.x и JSF 1.2.
  • JSF 2 fu: цикл статей Дэвида Гири на developerWorks демонстрирует широкий спектр возможностей JSF 2.
  • Новые возможности JSF 2: заметка в блоге Энди Шварца ― устаревающий, но все еще полезный ресурс по возможностям JSF 2.
  • Нужно реализовать Richfaces 4.0 с JSF 2.0: эта тема в дискуссионном форуме RichFaces содержит сведения об использовании RichFaces 4 с IBM WebSphere.
  • Ajax4jsf, теперь входящий в RichFaces, начался как отдельный проект.

Получить продукты и технологии

  • RichFaces: загрузите RichFaces.
  • JSF: загрузите Mojarra 2.x или другую эталонную реализацию JSF.
  • How to add RichFaces 4.x to projects not based on maven (Juan Camilo Prada, RichFaces Wiki, 2011): статья о зависимостях и местах загрузки cssparser.jar, sac.jar и guava.jar.
  • Apache Tomcat: информация и файлы для загрузки контейнера сервлетов Tomcat.
  • GlassFish: информация и файлы для загрузки сервера приложений GlassFish.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Технология Java, Open source
ArticleID=853397
ArticleTitle=Применение RichFaces с JSF 2
publish-date=12262012