The latest release of RichFaces is available for download at:
http://labs.jboss.com/jbossrichfaces/downloads |
in the RichFaces project area under JBoss.
Unzip "richfaces-ui-3.2.0-bin.zip" file to the chosen folder.
Copy "richfaces-api-3.2.0.jar" , "richfaces-impl-3.2.0.jar" , "richfaces-ui-3.2.0.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:
...
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
Add the following lines for each JSP page of your application.
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
For XHTML pages:
<xmlns:a4j="http://richfaces.org/a4j">
<xmlns:rich="http://richfaces.org/rich">
The previous namespaces URIs (https://ajax4jsf.dev.java.net/ajax and http://richfaces.ajax4jsf.org/rich) are also available for backward compatibility.
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="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ 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>
<rich:panel header="Simple Echo">
<h:inputText size="50" value="#{bean.text}" >
<a4j:support event="onkeyup" reRender="rep"/>
</h:inputText>
<h:outputText value="#{bean.text}" id="rep"/>
</rich:panel>
</h:form>
</f:view>
</body>
</html>
Only two tags distinguish this page from a "regular" JSF one. There are <rich:panel> and <a4j:support> .
The <rich:panel> allows to place the page elements in rectangle panel that can be skinned.
The <a4j:support> with corresponding attributes (as it was shown in the previous example) 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>
Nothing that relates directly to RichFaces 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>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<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