Кратко о JSF
JSF — компонентный MVC фреймворк для веб-приложений на java. Основная его задача — упростить разработку интерфейса и связывание его с серверной частью. JSF содержит валидаторы и конвертеры, также вы можете добавить свои компоненты и изменять существующие.
О JSF подробнее здесь (на русском) и здесь (на английском).
Так что же такое Dynamic Faces? Это библиотека для добавления динамики в jsf-приложения. Самое большое преимущество этой библиотеки в том, что DF не требует модифицировать компоненты или переписывать что-то в приложении, чтобы добавить Ajax.
Как добавить Dynamic Faces в приложение?
Добавляем в tag library
<%@ taglib prefix="jsfExt"
uri="http://java.sun.com/jsf/extensions/dynafaces" %>Добавляем следующий тег в head тег нашей страницы для инициализации js-библиотек
<jsfExt:scripts />В форме выставляем атрибут prependId в false
<h:form prependId="false" id="form">Итак, представим, что у нас есть страница с большим количеством jsf-контролов, при изменении одного из них нам нужно динамически обновлять какую-то область. Например, заказ автомобиля, все параметры комплектации влияют на цену. Меняем любую характеристику — сразу меняется цена.
Как это выглядит?
<jsfExt:ajaxZone id=«zoneParams» execute=«zoneParams» render=«zonePrice»>
Объем двигателя <h:selectOneMenu binding="#{ApplicationBean.components.engine}"/>
Сиденья <h:selectOneRadio binding="#{ApplicationBean.components.seats}"/>
</jsfExt:ajaxZone>
<jsfExt:ajaxZone id=«zonePrice»>
Цена: <h:outputtext id=«price» value="#{ApplicationBean.price}"/>
</jsfExt:ajaxZone>
* This source code was highlighted with Source Code Highlighter.
zoneParams — Область c характеристиками автомобиля, execute – область, в которой любые измененные значения отправляются на сервер, execute – область, которая будет перерисовываться.
zonePrice — Область с ценой
Другой способ:
Мы можем генерировать ajax-транзакцию по любому событию на любом компоненте.
Например:
Введите текст:
<h:inputText id=«inputText» valueChangeListener="#{ApplicationBean.valueChangeTxt}"
value="#{ApplicationBean.textVal}"/>
<h:commandButton value=«Ок»
onclick=«fireTransaction(this); return false;»/>
Ваш текст:
<h:outputText id=«outputText» value="#{ApplicationBean.textVal}"/>
* This source code was highlighted with Source Code Highlighter.
JavaScript:
function fireTransaction(object)
{
DynaFaces.fireAjaxTransaction(object,
{
execute: 'inputText',
render: 'outputText',
inputs: 'inputText'
});
}* This source code was highlighted with Source Code Highlighter.
Теперь разберемся, что мы тут написали
У нас есть 3 jsf-компонента:
inputText — думаю, по названию понятно, какой html-тег скрывается за этим названием. Тег имеет атрибут valueChangeListener, который указывает на метод в ApplicationBean, который будет выполняться при смене значения, мы еще вспомним о нем позже. Value — указывает на свойство, где будет хранится значение, которые мы ввели.
CommandButton — кнопка, нажатие по которой собственно и генерирует jsf-транзакцию. Мы видим js-метод fireTransaction, рассмотрим его подробнее.
В качестве параметра передается html-object того компонента, который вызывает транзакцию, далее мы вызываем DynaFaces.
fireAjaxTransaction — это метод из библиотеки Dynamic Faces.
execute — id компонента, из которого берем значение
render — id компонента, который будет обновляться
execute — id компонента, который будет исполняться. Испольняется метод в valueChangeListener, о котором мы говорили раньше.
После вызова этой функции мы возвращаем false, это сделано для того, чтоб не сработало событие submit для формы и страница не перегрузилась.
outputText — обновляемое значение.
Вот и все, вводим текст, нажимаем на кнопку, текст отправляется на сервер и от туда же попадает опять в интерфейс, да еще и вызывается метод valueChangeTxt.
Вызов транзакции можно вешать на любые события.
Подробнее о Dynamic Faces можно почитать здесь
