Введение в Ajax4JSF

Java Server Faces предоставил компонентную архитектуру для создания компонентов пользовательского интерфейса для веб-приложения. Цель Ajax — обеспечить более быстрый отклик клиентским приложениям путем перезагрузки только необходимых данных. Было бы неплохо использовать преимущества Jsf и Ajax для разработки надежных веб-приложений. Ajax4Jsf предоставляет решение для этого. Это интеграция Java Server Faces с Ajax (что означает асинхронный JavaScript и Xml), тем самым обеспечивая поддержку Ajax для компонентов пользовательского интерфейса Jsf. В этой статье делается попытка дать обзор Ajax4Jsf Framework, который теперь является проектом с открытым исходным кодом в сообществе JBoss.

• Введение в Ajax4Jsf
• Изучение библиотеки Ajax4Jsf
• Пример приложения на Ajax4Jsf

2) Что такое Ajax4Jsf?

Перед тем, как попробовать Ajax4Jsf, полезно узнать о различных технологиях, на которых построен Ajax4Jsf. Из названия самой платформы следует понимать, что в нее встроены Ajax (асинхронный JavaScript и Xml) и Jsf (Java Server Faces), две наиболее популярные технологии. Давайте сначала посмотрим на эти две технологии, прежде чем углубляться в Ajax4Jsf.

Java Server Faces предоставляет компонентную платформу для управления и разработки компонентов пользовательского интерфейса в веб-приложении. Он также предоставляет богатый набор функциональных возможностей, который включает в себя обработку событий, настройку механизма навигации по страницам, проверку клиентских данных, преобразование данных и т. Д. Он также предоставляет подключаемую архитектуру, в которой разработчики могут разрабатывать свои собственные компоненты пользовательского интерфейса и легко подключаться к Framework. , Одной из основных особенностей Jsf Framework является то, что он не предназначен для одного типа клиентов. Это означает, что помимо Html Browser Clients для рабочего стола, можно даже иметь Wml Browser Clients для мобильных телефонов.

Ajax, который обозначает асинхронный JavaScript и Xml, не нов. Более умный способ использования существующих стандартов / технологий, таких как JavaScript, Xml и Html, породил Ajax. Используя Ajax, код JavaScript может напрямую взаимодействовать с серверной частью. Данные запроса и ответа между клиентом и сервером обмениваются в формате XML. Одним из основных преимуществ использования Ajax является то, что он ускоряет производительность веб-приложения, загружая только часть рассматриваемой веб-страницы, тем самым обеспечивая лучшие результаты. Для получения дополнительной информации и приложений Ajax, обратитесь http://jsf.javabeat.net/articles/2007/06/ajax-functionality-in-custom-java-server-faces-component .

Теперь пришло время взглянуть на Ajax4Jsf. Как можно было бы догадаться, Ajax4Jsf — это платформа, которая при включении в веб-приложение добавит поддержку Ajax для компонентов Jsf. Поскольку Jsf является компонентно-ориентированной средой, легко создать дополнительные компоненты, обеспечивающие поддержку Ajax для страниц Jsf. Итак, все Компоненты в Библиотеке Ajax4Jsf являются не чем иным, как расширением Компонентов Jsf. Прозрачное использование Java Script Code вместе с Xml Http Request Objects будет обеспечиваться самой платформой, что означает, что разработчику не нужно смешивать Java Script Code в их приложении. Давайте подробно рассмотрим внутреннюю структуру Ajax4Jsf Framework в следующем разделе.

3) Ajax4Jsf Internals

Прежде чем рассматривать внутренние компоненты Ajax4Jsf, давайте кратко рассмотрим архитектуру Jsf. Стоит сначала изучить архитектуру Jsf, прежде чем углубляться в детали.

В Java Server Faces всякий раз, когда Клиент делает запрос, приходит к ресурсу, он перехватывается сервлетом Faces (как представлено javax.faces.webapp.FacesServlet). Этот сервлет будет выполнять запрос клиента, который будет проходить через шесть различных этапов жизненного цикла, таких как этап восстановления представления, применение значений запроса, проверка входных данных пользователя, обновление объектов модели, выполнение приложения и, наконец, рендеринг ответа. Ajax4Jsf — это инфраструктура, которая добавляет поддержку существующего приложения Jsf. Фактически Ajax4Jsf Framework реализован в виде фильтра, тем самым добавляя функцию JavaScript и зависимости XmlHttpObject к существующим компонентам Jsf. Но когда запрос является запросом Ajax4Jsf, все меняется. Специально, когда Запрос сделан Пользователем,запускается событие Java Script Event, которое обрабатывается механизмом Ajax, который обычно находится на стороне клиента. Теперь работа Ajax Engine заключается в том, чтобы отправить исходный запрос Ajax4Jsf, что означает, что запрос будет перехвачен фильтром Ajax4Jsf. Затем преобразование данных в формат Xml будет проходить здесь через различные фильтры Xml, после чего запрос перенаправляется в исходный сервлет Faces, в результате чего запрос проходит несколько этапов.Затем преобразование данных в формат Xml будет проходить здесь через различные фильтры Xml, после чего запрос перенаправляется в исходный сервлет Faces, в результате чего запрос проходит несколько этапов.Затем преобразование данных в формат Xml будет проходить здесь через различные фильтры Xml, после чего запрос перенаправляется в исходный сервлет Faces, в результате чего запрос проходит несколько этапов.

В Ajax4Jsf Framework существуют так называемые Ajax-контейнеры, которые представляют Дерево компонентов вместе со значениями запросов, которые кодируются и декодируются во время Ajax-запросов и ответов. Именно из-за доступности Ajax Engine в клиенте возможно обновление части областей на веб-странице.

4) Изучение библиотеки Ajax4Jsf

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

4.1) Тег региона

Не все данные клиента на странице нужны серверу для обработки. В большинстве случаев для обработки этого конкретного запроса достаточно только данных из части страницы. Вот тут-то и появляется тег Ajax Region Tag. Это своего рода тег контейнера, означающий, что он может содержать теги другого типа. Когда компоненты определены в этом теге, только значения этих компонентов обрабатываются на стороне сервера при выполнении запроса Ajax.

По умолчанию, если на странице JSP нет определения тега региона, вся страница JSP будет считаться регионом Ajax. Возможно также использование нескольких тегов регионов на одной странице.

Следующий фрагмент кода показывает использование этого тега:

<a4j:region id = "employeeRegion" actionListener = "#{manager.processEmpData}">
<!-- Other Set of Components -->
</a4:region>

<a4j:region id = "stockRegion" actionListener = "#{manager.processStockData}">
<!-- Other Set of Components -->
</a4:region>

В приведенном выше коде мы определили две области, одна из которых является employeeRegion, а другая — stockRegion. Всякий раз, когда делается запрос Ajax для «employeeRegion» (или «stockRegion»), часть данных, доступных только с «employeeRegion», будет отправляться на сервер (метод Manager. ProcessEmpData ()) для обработки.

4.2) Тег командной кнопки.

Он представляет собой компонент кнопки и может использоваться для запуска событий действий на сервере. Это очень похоже на тег кнопки команды Jsf, но вместо генерации запроса Jsf при нажатии кнопки будет сгенерирован запрос Ajax, который будет перехвачен механизмом Ajax. Существует полезный атрибут «oncomplete», который может содержать код JavaScript или функцию JavaScript, которая будет выполняться, как только ответ придет с сервера.

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

Ниже приведен фрагмент кода, демонстрирующий использование тега Command Button:

<a4j:commandButton id = "clickButton" value = "Click Me"
action = "#{Listener.processClickRequest}" oncomplete = "jsFunction()">
reRender = "CompId1, CompId2, CompId3"
</a4j:commandButton>

В приведенном выше коде всякий раз, когда активируется кнопка со значением «Click Me», вызывается метод processClickRequest () в классе Listener. После этого Компоненты, представленные идентификаторами компонентов (CompId1, CompId2 и CompId3), получат обновленное значение с сервера. Затем, наконец, будет вызвана функция Java Script jsFunction (), как указано в атрибуте «oncomplete».

4.3) Тег Командной Связи

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

Следующий фрагмент кода показывает использование этого компонента:

<a4:commandLink id = "myLink" value = "This is my Link"
action = "Listener.processMyLink">
</a4:commandLink>

4.4) Тэг вывода мультимедиа

В то время как тэг вывода текста используется для заливки нормального содержимого символов, этот тег используется для визуализации Rich Contents на клиенте в форме изображений, аудио или видео. Чтобы достичь этого, атрибут ‘createContent’ должен предоставлять метод, который принимает два аргумента типа java.io.OuputStream и java.lang.Object. Ниже приводится использование для того же:

<a4j:mediaOutput id = "telephone" element = "img" mimeTye = "image/png"
createContent = "#{ImagePainter.drawImage}">
</a4j:mediaOutput>

В приведенном выше фрагменте кода, атрибут «элемент» может принимать эти возможные наборы значений («якорь», «изображение», «объект», «апплет»), который представляет имя элемента HTML, который должен использоваться для визуализации этого образ. Обратите внимание, что mimeType указывает на файл image / png, так как мы собираемся создать массив байтов из файла изображения типа png. Учитывая атрибут ‘createContent’, он принимает выражение Jsf EL, метод которого принимает в качестве аргументов OutputStream и Object. Ниже приведен код для того же:

ImagePainter.java

package net.javabeat.articles.ajax4jsf.introduction;

import java.io.*;

public class ImagePainter {

private String fileName = "telephone.png";

public void drawImage (OutputStream output, Object object) throws IOException{

File file = new File(fileName);
byte byteArray[] = new byte[1000];

FileInputStream inputStream = new FileInputStream(file);
while(true){
try{
int bytesRead = inputStream.read(byteArray);
output.write(byteArray, 0, bytesRead);
}finally{
if (inputStream != null){
inputStream.close();
}
}
}
}
}

Обратите внимание, что объект OutputStream, который передается в качестве аргумента методу drawImage (), должен быть заполнен байтовым массивом, указывающим на ресурс изображения.

4.5) Сохранение живого тега

Предположим, что управляемый компонент компонента был объявлен с областью действия «Запрос» в файле конфигурации с помощью тега <managed-bean-scope>. Тогда время жизни этого объекта Bean действительно только для текущего запроса. Любая попытка сделать ссылку на объект Bean после завершения запроса приведет к возникновению исключения недопустимого аргумента сервером, поскольку объект Bean теперь недопустим.

Чтобы избежать возникновения подобных исключений, мы можем зависеть от тега Keep Alive, который используется для поддержания состояния объекта Whole Bean в последующих запросах. Ниже приведен фрагмент кода для того же:

<a4j:keepAlive beanName = "#{manager.empBean}">
</a4j:keepAlive>

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

Manager.java

class Manager{

private EmployeeBean empBean;
// Getters and Setters for empBean.

}

4.6) Повторить тег

В теге реализована базовая операция итерации, и, как правило, предпочтительно отображать набор объектов, найденных в коллекции. Это очень похоже на функциональность, доступную в компоненте <h: dataTable>. Ниже приведен сценарий использования этого тега.

<a4j:repeat id = "repeater" value = "#{manager.empList}" var = "employee">
<h:outputText id = "name" value = "#{employee.name}"/>
<h:outputText id = "age" value = "#{employee.age}"/>
</a4:repeat>

Предположим, что у нас есть класс с именем Manager, который представляет коллекцию объектов Employee, содержащих два свойства, а именно имя и возраст. Ниже приводится структура класса менеджера.

Manager.java

public class Manager{

private List<Employee> employees;
// Getters and setters for employees;

}


Employee.java


public class Employee{

private String name;
private int age;

// Getters and Setters for name and age

}

Если предположим, что мы хотим отобразить список сотрудников на странице, то мы можем использовать тег повторения. Атрибут ‘value’ в теге обычно представляет коллекцию, а атрибут ‘var’ может содержать элемент из объекта Collection. Этот тег тождественно эквивалентен циклу for.

for (Employee employee : manager.getEmployees() ){
display(employee.getName());
display(employee.getAge());
}

4.7) Метка опроса Метка

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

<a4j:poll id = "refreshId" reRender = "CompId1, CompId2" timeout = "50000"
interval = "1000">
</a4j:poll>

В приведенном выше, страница будет обновляться автоматически через каждую 1 секунду (как указано в атрибуте ‘interval’). Обратите внимание, что для атрибута timeout установлено значение 50 секунд, что означает, что через 50 секунд страница перестанет автоматически обновляться. Список компонентов, подлежащих повторной визуализации, указывается в атрибуте reRender.

4.8) Метка статуса Метка

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

<a4j:status startText = "Request sent to the Server" stopText = "Request is completed">
</a4j:status>

В вышеприведенном случае, когда Клиент инициирует Запрос, тогда сообщение «Запрос отправлено на Сервер» (как представлено атрибутом «startText») отображается до тех пор, пока Запрос не будет полностью обработан, и в этом случае сообщение «Запрос завершен» (как представлен атрибутом «stopText»).

4.9) Тег поддержки

Наиболее часто используемый тег в библиотеке Ajax4Jsf — это поддержка, которая обеспечивает поддержку Ajax для компонентов Jsf. Он всегда отображается как дочерний тег для различных компонентов Jsf. Следующий список обеспечивает использование этого тега,

<a4j:inputText id = "userInput">
<a4j:support event = 'onblur' action = "#{bean.process}"
binding = "bean.userInput" reRender = "CompId1, CompId2"/>
</a4j:inputText>

In the above sample, whenever the focus is lost for the user input text Field Component, and then the corresponding process method in the Bean class will be invoked. The ‘reRender’ attribute defines a list of components whose values are to be updates once the request is over. Note the usage of the ‘binding’ attribute. This attribute resolves to an EL Expressing which maps to the UIInput Control of the Component represented by userInput. Following is the structure in which the Bean class may look like,

Bean.java

public class Bean{

private UIInput userInput;
//Getters and Setters

}

5) Sample Application

5.1) Introduction

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>

<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

<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>/faces/*</url-pattern>
</servlet-mapping>

<session-config>
<session-timeout>30</session-timeout>
</session-config>

<!-- Welcome files -->
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

</web-app>

<?xml version="1.0" encoding="UTF-8"?>

<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

<managed-bean>
<managed-bean-name>accountSearcher</managed-bean-name>
<managed-bean-class>
net.javabeat.articles.ajax4jsf.introduction.AccountSearcher
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %>

<h:inputText id = "AccountNo" binding = "#{accountSearcher.accountTextField}">
</h:inputText>

public class AccountSearcher {

private UIInput accountTextField;
// Getters and Setters for the same.

}

package net.javabeat.articles.ajax4jsf.introduction;

import java.util.Date;

public class Account {

private long accountNo;
private String bankName;
private String customerName;
private String branchName;
private String openDate;
private double closingBalance;
private String address;
private String emailId;
private String phoneNumber;

public Account() {
}

public long getAccountNo() {
return accountNo;
}

public void setAccountNo(long accountNo) {
this.accountNo = accountNo;
}

public String getBankName() {
return bankName;
}

public void setBankName(String bankName) {
this.bankName = bankName;
}

public String getCustomerName() {
return customerName;
}

public void setCustomerName(String customerName) {
this.customerName = customerName;
}

public String getAddress() {
return address;
}

public void setAddress(String address) {
this.address = address;
}

public String getEmailId() {
return emailId;
}

public void setEmailId(String emailId) {
this.emailId = emailId;
}

public String getBranchName() {
return branchName;
}

public void setBranchName(String branchName) {
this.branchName = branchName;
}

public String getOpenDate() {
return openDate;
}

public void setOpenDate(String openDate) {
this.openDate = openDate;
}

public double getClosingBalance() {
return closingBalance;
}

public void setClosingBalance(double closingBalance) {
this.closingBalance = closingBalance;
}

public String getPhoneNumber() {
return phoneNumber;
}

public void setPhoneNumber(String phoneNumber) {
this.phoneNumber = phoneNumber;
}
}

package net.javabeat.articles.ajax4jsf.introduction;

import java.util.HashMap;
import java.util.Map;

public class AccountCreator {

private static Map<Long, Account> accounts;

public static void createTestAccounts(){
if (accounts == null || accounts.isEmpty()){
accounts = new HashMap<Long, Account>();
}

Account account = null;
account = createAccountInfo(123456, "Hdfc Bank",
"Jenny", "Shastri Nagar, Chennai",
"10/05/2003", 100033.53, "Address1",
"[email protected]", "99123456789");
accounts.put(account.getAccountNo(), account);

account = createAccountInfo(234567, "Icici Bank",
"Joseph", "Besant Nagar, Chennai",
"121/09/2001", 3200033.53, "Address2",
"[email protected]", "99987654321");
accounts.put(account.getAccountNo(), account);
}

private static Account createAccountInfo(long accountNo, String bankName,
String customerName, String branchName, String openDate,
double closingBalance, String address, String emailId, String phoneNumber){

Account account = new Account();
account.setAccountNo(accountNo);
account.setBankName(bankName);
account.setCustomerName(customerName);
account.setBranchName(branchName);
account.setOpenDate(openDate);
account.setClosingBalance(closingBalance);
account.setAddress(address);
account.setEmailId(emailId);
account.setPhoneNumber(phoneNumber);
return account;
}

public static Account getAccountInfo(Long accountNo){
return accounts.get(accountNo);
}
}

package net.javabeat.articles.ajax4jsf.introduction;

import javax.faces.component.UICommand;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

public class AccountSearcher {

private Account account;

private UIInput accountTextField;
private UIInput bankNameTextField;
private UIInput customerNameTextField;
private UIInput branchNameTextField;
private UIInput openDateTextField;
private UIInput closingBalanceTextField;
private UIInput addressTextArea;
private UIInput emailIdTextField;
private UIInput phoneNumberTextField;

public AccountSearcher() {
AccountCreator.createTestAccounts();
}

public void search(ActionEvent actionEvent){

String strAccountNo = (String)getAccountTextField().getSubmittedValue();
long accountNo = 0L;
try{
accountNo = Long.parseLong(strAccountNo);
account = AccountCreator.getAccountInfo(accountNo);
if (account != null){
setComponentsValueToNull();
}else{
// Error Message.
}
}catch(Exception exception){
exception.printStackTrace();
}
}

private void setComponentsValueToNull(){
bankNameTextField.setSubmittedValue(null);
customerNameTextField.setSubmittedValue(null);
branchNameTextField.setSubmittedValue(null);
openDateTextField.setSubmittedValue(null);
closingBalanceTextField.setSubmittedValue(null);
addressTextArea.setSubmittedValue(null);
emailIdTextField.setSubmittedValue(null);
phoneNumberTextField.setSubmittedValue(null);
}

public Account getAccount() {
return account;
}

public void setAccount(Account account) {
this.account = account;
}

public UIInput getAccountTextField() {
return accountTextField;
}

public void setAccountTextField(UIInput accountTextField) {
this.accountTextField = accountTextField;
}

public UIInput getBankNameTextField() {
return bankNameTextField;
}

public void setBankNameTextField(UIInput bankNameTextField) {
this.bankNameTextField = bankNameTextField;
}

public UIInput getCustomerNameTextField() {
return customerNameTextField;
}

public void setCustomerNameTextField(UIInput customerNameTextField) {
this.customerNameTextField = customerNameTextField;
}

public UIInput getBranchNameTextField() {
return branchNameTextField;
}

public void setBranchNameTextField(UIInput branchNameTextField) {
this.branchNameTextField = branchNameTextField;
}

public UIInput getOpenDateTextField() {
return openDateTextField;
}

public void setOpenDateTextField(UIInput openDateTextField) {
this.openDateTextField = openDateTextField;
}

public UIInput getClosingBalanceTextField() {
return closingBalanceTextField;
}

public void setClosingBalanceTextField(UIInput closingBalanceTextField) {
this.closingBalanceTextField = closingBalanceTextField;
}

public UIInput getAddressTextArea() {
return addressTextArea;
}

public void setAddressTextArea(UIInput addressTextArea) {
this.addressTextArea = addressTextArea;
}

public UIInput getEmailIdTextField() {
return emailIdTextField;
}

public void setEmailIdTextField(UIInput emailIdTextField) {
this.emailIdTextField = emailIdTextField;
}

public UIInput getPhoneNumberTextField() {
return phoneNumberTextField;
}

public void setPhoneNumberTextField(UIInput phoneNumberTextField) {
this.phoneNumberTextField = phoneNumberTextField;
}
}