JBoss.org Community Documentation

- Prev
- Next

## Chapter 3. Getting Started with RichFaces

## 3.1. Downloading RichFaces 3.2.0

The latest release of RichFaces is available for download at:

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

in the RichFaces project area under JBoss.

## 3.2. Installation

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

## Note:

The previous namespaces URIs (https://ajax4jsf.dev.java.net/ajax and http://richfaces.ajax4jsf.org/rich) are also available for backward compatibility.

## 3.3. Simple Ajax Echo Project

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

### 3.3.1. JSP Page

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

### 3.3.2. Data Bean

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;

            }

            }

### 3.3.3. faces-config.xml

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 RichFaces is required in the configuration file.

### 3.3.4. Web.xml

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.

### 3.3.5. Deployment

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

- PrevChapter 2. Technical Requirements
- Top of page
- Front page
- NextChapter 4. Settings for different environments