JSF + DynamicFaces = AJAX

    Кратко о 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 можно почитать здесь

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 3 429 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 4

      +1
      Спасибо, продолжайте, пожалуйста, в том же духе!
        0
        Пожалуйста :), о чем еще интересно будет почитать?
        0
        Интересно Java + AJAX. Фреймворки, библиотеки и т.п.
          0
          У меня было уже пару постов на тему RichFaces — очень достойный фрэймворк и библиотека компонентов. Много всяких ajax приятностей, в частности в 3.2.2 появился ajaxValidator. Что немаловажно у проекта хорошая поддержка, проект опенсорсный, все копоненты активно юзаются пользователями, так что фрэймворк и библиотека откатаны на практике + по каждому компоненту есть документация.

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

          Самое читаемое