JBoss.orgCommunity Documentation

Chapter 3. Getting Started with RichFaces

3.1. Downloading RichFaces 3.2.0
3.2. Installation
3.3. Simple Ajax Echo Project
3.3.1. JSP Page
3.3.2. Data Bean
3.3.3. faces-config.xml
3.3.4. Web.xml
3.3.5. Deployment

The latest release of RichFaces is available for download at:

http://labs.jboss.com/jbossrichfaces/downloads

in the RichFaces project area under JBoss.

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" .

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.