To use Ajax4jsf framework you need JDK 1.4 or higher, any JSF implementation and your favorite Servlet Container. To read more on the Environments, see further chapters.
Ajax4jsf is designed in an easy-to-use way, so that you should do only a few simple steps to get AJAX functionality in your JSF application.
The latest release of Ajax4jsf is available for download at:
| http://labs.jboss.com/portal/jbossajax4jsf/downloads |
in the Ajax4jsf project area under JBoss.
Note:
Starting from Ajax4jsf 1.1.1, the oscache library is not required to be in the classpath anymore.
- Unzip "ajax4jsf.zip" file to the chosen folder.
- Copy "ajax4jsf.jar" and "oscache-2.3.2.jar" files into the "WEB-INF/lib" folder of your application.
-
Add the following content into the
"WEB-INF/web.xml"
file of your application:
<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>
Note:
You can copy and paste the above text from the "README.txt" file.
Add the following line for each JSP page of your application where you are going to bring in AJAX functionality.
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
For XHTML pages:
<xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
In our JSF project you need only one JSP page that has a form with a couple of child tags: <h:inputText> and <h:outputText> .
This simple application let you input some text into the <h:inputText> , send data to the server, and see the server response as a value of <h:outputText> .
Here is the necessary page (echo.jsp):
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>repeater </title>
</head>
<body>
<f:view>
<h:form>
<h:inputText size="50" value="#{bean.text}" >
<a4j:support event="onkeyup" reRender="rep"/>
</h:inputText>
<h:outputText value="#{bean.text}" id="rep"/>
</h:form>
</f:view>
</body>
</html>The only line that distinguishes this page from a "regular" JSF one is
<a4j:support event="onkeyup" reRender="rep"/>
The line adds an AJAX support to the parent <h:inputText> tag. This support is bound to "onkeyup" JavaScript event, so that each time when this event is fired on the parent tag, our application sends an AJAX request to the server. It means that the text field pointed to our managed bean property contains up-to-date value of our input.
The value of "reRender" attribute of the <a4j:support> tag defines which part(s) of our page is (are) to be updated. In this case, the only part of the page to update is the <h:outputText> tag because its ID value matches to the value of "reRender" attribute. As you see, it's not difficult to update multiple elements on the page, only list their IDs as the value of "reRender".
In order to build this application, you should create a managed bean:
package demo;
public class Bean {
private String text;
public Bean() {
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}Next, it's necessary to register your bean inside of the faces-config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>bean</managed-bean-name>
<managed-bean-class>demo.Bean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>text</property-name>
<value/>
</managed-property>
</managed-bean>
</faces-config>
Note:
Nothing that relates directly to Ajax4jsf is required in the configuration file.
It is also necessary to add jar files (see installation chapter) and modify the "web.xml" file:
<?xml version="1.0"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>a4jEchoText</display-name>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<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-map>
<listener>
<listener-class>
com.sun.faces.config.ConfigureListener
</listener-class>
</listener>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
</web-app>Now your application should work.
Finally, you should be able to place this application on your Web server.To start your project, point your browser at http://localhost:8080/a4jEchoText/echo.jsf
Introduction to Ajax4Jsf - Sample Application by Shunmuga Raja