Статьи

Введение в JBoss RichFaces

Январь 13, 2019

Эта учебная статья даст очень краткое введение в JBoss RichFaces. Вместо того, чтобы просто перечислить функции, мы собираемся кратко определить RichFaces и затем погрузиться в настоящий пошаговый пример. В этом примере мы собираемся выйти за рамки стандартного примера «Hello World». Мы вернемся к этому через мгновение.

JBoss RichFaces

Если вы уже знаете, что такое RichFaces, вы можете пропустить этот раздел. Для тех из вас, кто этого не делает, вот что вам нужно знать (самые важные части). JBoss RichFaces — это богатая библиотека компонентов для JSF. RichFaces не заменяет стандартную JSF, поэтому вы используете RichFaces либо с реализацией Mojara JSF (Sun RI), либо с реализацией MyFaces. RichFaces просто предоставляет готовые компоненты Ajax для создания приложений на основе Ajax. Еще один способ взглянуть на это — просто множество дополнительных компонентов JSF, помимо того, что обеспечивает стандартный JSF. Эти компоненты включают в себя все необходимое кодирование JavaScript, поэтому вам почти никогда не придется работать с JavaScript напрямую.

Хорошо, это единственное место, где я, вероятно, собираюсь создать некоторую путаницу, но мне разрешено сделать это только один раз. RichFaces — это не просто набор плагинов, а фактически фреймворк. Одна из его главных особенностей — богатые компоненты. Компоненты разделены на библиотеки тегов. Кроме того, RichFaces предоставляет возможности скинирования (тем) вместе с Ajax4jsf CDK (Component Development Kit). В этой статье я упоминаю только CDK, так что вы знаете, что он существует.

Две библиотеки тегов

Хотя продукт называется RichFaces, он все еще имеет две разные библиотеки тегов. Одна библиотека тегов называется a4j: а другая — rich :. Библиотека тегов a4j: обеспечивает поддержку AJAX на уровне страниц. Он в основном предоставляет базовые элементы управления, где вы решаете, как отправить запрос, что отправить на сервер и что обновить. Такой подход дает вам много силы и гибкости. Библиотека rich: tag обеспечивает поддержку AJAX на уровне компонентов. Компоненты из этой библиотеки предоставляют все свои функциональные возможности «из коробки». Другими словами, вам не нужно решать, как отправить запрос и что обновить.

Skinability

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

Были сделаны. Это все, что вам нужно знать на данный момент.

За пределами «Hello World»

Я уверен, что вы немного устали от примеров «Hello World». Хотя они очень полезны (в начале), они не очень практичны в реальном мире. Итак, на этот раз давайте пойдем дальше «Hello World». В этом примере мы отобразим список пользователей в таблице. Каждая строка будет иметь кнопку «Редактировать». Когда эта кнопка нажата, приложение откроет модальную панель, где этот выбранный пользователь может быть отредактирован. При сохранении изменений будет обновляться только эта конкретная строка в таблице, а не вся таблица.

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

[Img_assist | NID = 4698 | название = | убывание = | ссылка = нет | ALIGN = не определено | ширина = 345 | Высота = 216]

[Img_assist | NID = 4699 | название = | убывание = | ссылка = нет | ALIGN = не определено | ширина = 421 | Высота = 271]

Руководство

Установка

Мы начнем с загрузки Eclipse.

Eclipse и WTP (проект веб-инструментов)


  1. Создайте новый каталог на диске с именем richfaces.     (Обратите внимание на отсутствие пробелов в имени каталога.)

  2. Начнем с загрузки плагинов Eclipse 3.3 и WebTools.     Перейдите на страницу
    http://www.eclipse.org/downloads/packages/release/europa/winter и выберите Eclipse IDE для разработчиков Java EE для загрузки. Этот дистрибутив уже включает в себя WTP (плагины Web Tools Project). Даже если у вас есть Eclipse, имеет смысл иметь отдельную установку только для примера, так что это не повлияет на любую другую вашу работу.)

  3. Разархивируйте загруженный файл в созданный вами каталог richfaces.

Убедитесь, что вы скачали правильную версию Eclipse и версию JBoss Tools:

Версия JBoss Tools Работает с версией Eclipse.
JBoss Tools 2.1.x Затмение 3.3 (Европа)

Инструменты JBoss


  1. Загрузите JBoss Tools, перейдя на страницу: http: //labs.jboss.com/tools/download/.     Ищите последнюю версию 2.1.x GA.

  2. Нажмите на ссылку «Все плагины — Windows / Linux» и загрузите файл.

  3. Разархивируйте файл в каталоге richfaces

В конце этих шагов вы должны иметь следующую структуру:


ричфайкс

затмение

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

Шаблоны проектов

Шаблоны проектов позволят вам быстро создать проект с уже настроенными RichFaces.


  1. Загрузите этот файл:

    http://java.dzone.com/sites/all/files/richfaces-template.zip

  2. Разархивируйте файл и скопируйте содержимое в

  3. <eclipse> \ plugins \ org.jboss.tools.common.projecttemplates_X.XX Вы будете предупреждены о том, что некоторые файлы перезаписываются, что вы можете безопасно сделать.

Кот

Загрузите Tomcat 5.5 или 6.0 с http://tomcat.apache.org/ в папку richfaces и распакуйте его.

В конце этих шагов вы должны иметь следующую структуру:


richfaces

затмение

apache-tomcat-XXX

Мы закончили с настройкой. Далее мы собираемся запустить Eclipse и начать сборку нашего приложения.

заявка

Создание нового проекта


  1. Выберите Файл / Новый / Проект JSF

  2. В качестве имени проекта введите «richfaces-start»

  3. Для среды JSF выберите JSF 1.2, Facelets, RichFaces

  4. Для шаблона выберите шаблон на основе используемой версии Tomcat.

  5. Нажмите Готово, чтобы создать проект

Создание класса модели

Поскольку мы имеем дело с пользователями, мы собираемся создать класс модели пользователя.
В каталоге JavaSource создайте Java-класс example.model.User и обратите внимание на имя пакета:

package example.model;

public class User {

 @Override
 public String toString() {
  return name + " " + email;
 }
 private String name;
 private String email;
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getEmail() {
  return email;
 }
 public void setEmail(String email) {
  this.email = email;
 }
 public User(String name, String email) {
  super();
  this.name = name;
  this.email = email;
 }
}

 

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

Создание управляемого компонента

В JavaSource создайте Java-класс example.beans.UserBean. Опять же обратите внимание на название пакета:

package example.beans;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import example.model.User;

public class UserBean {

 private List <User>users;
 
 public List <User>getUsers() {
  return users;
 }
 
 @PostConstruct
 public void init () {
  
  users = new ArrayList <User>();
  users.add (new User("Joe", "[email protected]"));
  users.add (new User("Charley", "[email protected]"));
  users.add (new User("John", "[email protected]"));
  users.add (new User("Greg", "[email protected]"));
  users.add (new User("Prescila", "[email protected]"));
 }
}

 

Этот класс также прост. Список из пяти пользователей создается и помещается в ArrayList. Аннотация @PostConstruct полезна для инициализации свойств. Это гарантирует, что аннотированный метод будет вызываться только один раз при создании компонента.

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


  1. Откройте WebContent / WEB-INF / face-config.xml

  2. Переключиться на вид дерева

  3. Выберите «Управляемые компоненты» и нажмите «Добавить».

    — Сохраните запрос области.

    — Для класса введите полное имя класса Java компонента,

    например. Beans.UserBean. — Для имени введите или сохраните userBean.

  4. Нажмите Готово

Мы готовы создать пользовательский интерфейс.

Регистрация управляемого компонента выглядит следующим образом: 

<managed-bean>
  <managed-bean-name>userBean</managed-bean-name>
  <managed-bean-class>example.beans.UserBean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

 

 

Создание пользовательского интерфейса

В папке WebContent создайте страницу с именем user.xhtml со следующим содержимым:

<!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:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j">

  <head>
   <title>RichFaces</title>
  </head>
  <body>
   <h:form>
  <rich:panel>
   <f:facet name="header">
    Just some users
   </f:facet>
   <rich:dataTable value="#{userBean.users}" var="user">
    <h:column>
     <h:outputText id="name" value="#{user.name}"/>
    </h:column>
    <h:column>
     <h:outputText id="email" value="#{user.email}"/>
    </h:column>
   </rich:dataTable>
  </rich:panel>
   </h:form>
  </body>
</html>

 

Страница тоже очень простая. Мы просто отображаем всех пользователей, которых создали в управляемом компоненте, используя компонент rich: dataTable. На данный момент мы готовы протестировать приложение.

Работает на сервере

1. Убедитесь, что все сохранено.
2. В представлении «Серверы» щелкните правой кнопкой мыши сервер и выберите «Пуск».
3. Щелкните правой кнопкой мыши файл users.xhtml и выберите «Запуск от имени / Запуск на сервере»
4. Нажмите «Готово».

Должно открыться окно веб-браузера с отображением пользователей в таблице.

[Img_assist | NID = 4744 | название = | убывание = | ссылка = нет | ALIGN = слева | ширина = 250 | Высота = 190]

 

 

 

 

 

 

 

 

Следующим шагом является добавление кнопки в каждый столбец, при нажатии на которую открывается модальная панель с информацией о пользователе.

Одна вещь, которую вы, вероятно, заметили, это то, что у вас синяя цветовая схема, в то время как мои снимки экрана имеют красную цветовую схему. Я использую другой скин. Если вы хотите изменить скин, это очень легко сделать. Откройте файл WEB-INF / web.xml и измените параметр скина на ruby:

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>ruby</param-value>
 </context-param>

Сохраните и перезагрузите сервер.

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

Добавление модальной панели

Сначала мы создадим модальную панель. Модальная панель должна быть размещена вне исходной формы, потому что она должна иметь свою собственную форму:

<rich:modalPanel id="useredit">

   <f:facet name="header">

   User

  </f:facet>

  <h:form>

  <h:panelGrid id="userinfo">

   <h:outputLabel for="nameInput" value="Name:"/>

 <h:inputText id="nameInput" value="#{userBean.selectedUser.name}"/>

   <h:outputLabel for="emailInput" value="Email:"/>

 <h:inputText id="emailInput" value="#{userBean.selectedUser.email}"/>

 <h:panelGrid columns="2">

  <a href="#" onclick="#{rich:component('useredit')}.hide();return false">

   Close

  </a>

  <a4j:commandLink oncomplete="#{rich:component('useredit')}.hide();return false">

   Save

  </a4j:commandLink>

 </h:panelGrid>

  </h:panelGrid>

  </h:form>

</rich:modalPanel>

Код довольно прост, я скоро расскажу о ссылках «Закрыть» и «Сохранить».

Далее нам нужно открыть всплывающее окно. Для этого мы собираемся добавить еще один столбец в таблицу. Столбец будет содержать кнопку, чтобы открыть всплывающее окно. Мы сделаем этот столбец первым. Кодировка выглядит так:

...
<h:column>
    <a4j:commandButton value="Edit"
     oncomplete="#{rich:component('useredit')}.show()"
     reRender="userinfo">
       <f:setPropertyActionListener value="#{user}" 
      target="#{userBean.selectedUser}" />
    </a4j:commandButton>
                    </h:column>
...

Для отображения и скрытия модальной панели мы используем клиентскую функцию RichFaces под названием # {rich: component (‘id’)}, чтобы получить ссылку на компонент (в нашем случае это модальная панель). Получив ссылку, мы вызываем JavaScript API для этого компонента. В нашем случае это show (), чтобы открыть и скрыть (), чтобы закрыть модальную панель. Позже мы будем вызывать метод сохранения при нажатии кнопки «Сохранить» на модальной панели.

Как мы узнаем, какая строка была выбрана и соответствует пользователю, которого мы хотели бы редактировать. Для этого мы используем стандартный тег JSF с именем f: setPropertyActionListener. В основном это слушатель, который возьмет объект в текущей строке и назначит его свойству userBean.selectedUser внутри управляемого компонента. У нас пока нет этого свойства, поэтому давайте добавим его.

private User selectedUser;

public User getSelectedUser() {
 return selectedUser;
}
public void setSelectedUser(User selectedUser) {
 this.selectedUser = selectedUser;
}

Прежде чем мы проверим это, необходимо упомянуть еще одну вещь. Обратите внимание, что определение кнопки «Изменить» имеет атрибут reRender, установленный в «userinfo». Это необходимо для повторного отображения выбранной информации пользователя. Сначала мы передаем выбранного пользователя на сервер. Когда страница отображается обратно в браузер, мы хотим повторно отобразить это свойство (userSelected), чтобы отобразить выбранного пользователя.

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

[Img_assist | NID = 4699 | название = | убывание = | ссылка = нет | ALIGN = не определено | ширина = 421 | Высота = 271]

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

Конкретное обновление строки

Обновление всей таблицы довольно просто. Как обновить только строку, которая была отредактирована? Все компоненты данных в RichFaces (включая a4j: repeat) имеют функцию, которая позволяет обновлять только подмножество строк. Все такие компоненты предоставляют атрибут ajaxKeys, который указывает на строку или строки, которые необходимо обновить.

Давайте сначала рассмотрим изменения, которые мы должны сделать на странице.
Во-первых, нам нужно установить атрибут ajaxKeys в rich: dataTable (изменения показаны жирным шрифтом):

<rich:dataTable value="#{userBean.users}" var="user" 
   ajaxKeys="#{userBean.rowsToUpdate}">

Это все, что нам нужно сделать со столом.

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

<a4j:commandLink actionListener="#{userBean.save}"
      oncomplete="#{rich:component('useredit')}.hide()"
      reRender="name, email">
      Save
    </a4j:commandLink>

ActionListener указывает на слушателя внутри управляемого компонента, который мы собираемся создать следующим. У нас также есть атрибут reRender, указывающий на столбцы в таблице. По сути, для частичного обновления таблицы нам нужно указать две вещи. Во-первых, какие столбцы обновлять. В нашем случае мы обновляем столбцы name и email. Во-вторых, нам нужно указать, какие строки обновлять. Это делается с помощью атрибута ajaxKeys, который связан с объектом Set, который содержит номера строк для обновления.

Давайте посмотрим, какие изменения необходимы в управляемом компоненте.

Сначала нам нужно создать объект Set для хранения строк для обновления:

private Set <Integer>rowsToUpdate;
public Set <Integer>getRowsToUpdate() {
 return rowsToUpdate;
}

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

Далее нам нужен слушатель save ().

public void save (ActionEvent event) {
  
 rowsToUpdate.clear();
 rowsToUpdate.add(users.indexOf(selectedUser));
}

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

Наконец, нам нужно инициализировать свойство rowToUpdate внутри метода init () сразу после создания пользователей:

rowsToUpdate =  new HashSet<Integer>();

Единственное другое изменение, которое нам нужно, — это добавить на страницу тег a4j: keepAlive. Это область разговора бедного человека (как в Шове). По сути, нам нужно поддерживать список пользователей дольше, чем запрос, поэтому a4j: keepAlive делает именно это. Прямо перед модальной панелью добавьте следующее:

<a4j:keepAlive beanName="userBean"/>

Убедитесь, что все сохранено, повторно разверните и запустите приложение. Теперь вы сможете открывать модальную панель, редактировать информацию о пользователе и сохранять изменения. Когда изменения сохранены, обновляется только эта конкретная строка.

Резюме

Я надеюсь, что этот пример показал вам немного больше, чем просто Hello World. Мы использовали компонент таблицы вместе с модальной панелью. Это два компонента, которые очень часто используются в реальных приложениях. Я также показал вам, как редактировать определенную запись в таблице через модальную панель, а затем обновлять только эту конкретную строку. Конечно, обновление только определенной строки — это особенность компонентов данных RichFaces.

Отметим еще одну вещь: когда мы создавали здесь приложение на основе AJAX, нам не приходилось иметь дело с каким-либо JavaScript (ну, кроме очень простой клиентской функции, доступной в RichFaces). RichFaces заботится о генерации всего необходимого (и обычно довольно сложного) JavaScript.

С RichFaces вы можете продолжать использовать компонентный подход JSF, но с большим набором дополнительных компонентов для создания приложений с богатым пользовательским интерфейсом.

 

об авторе

Он помогает клиентам ускорить разработку RIA, а также предоставляет услуги наставничества, консультирования и обучения. Макс является признанным экспертом в сообществе разработчиков JSF. В течение последних трех лет он проводил тренинги для JSF / RichFaces, выступал на многих конференциях и написал несколько опубликованных статей по темам, связанным с JSF. Макс также возглавляет стратегию RIA Exadel и пишет о технологиях RIA в своем блоге http://mkblog.exadel.com . Он является автором книги «Практические RichFaces» (Apress). Макс получил степень бакалавра в области компьютерных наук в Калифорнийском университете в Дэвисе.

 

 

 

41
Share: