Simple JSF application with RichFaces

 

"RichFaces Greeter"—the simple application—is hello-world like application but with one difference: the world of RichFaces will say "Hello!" to user first.
Create standard JSF 1.2 project with all necessary libraries; name the project "Greeter" and follow the decription.

1. Adding RichFaces libraries into the project

Copy following "jars" from lib folder to WEB-INF/lib folder of "Greeter" JSF application.

commons-beanutils.jar
commons-collections.jar
commons-digester.jar
commons-logging.jar
jhighlight-1.0.jar
richfaces-api-3.3.2.SR1.jar
richfaces-impl-3.3.2.SR1.jar
richfaces-ui-3.3.2.SR1.jar

 

2. Registering RichFaces in web.xml

After RichFaces libraries where added into the project it is necessary to register them in project web.xml file. Add following lines in web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>epmWeb</display-name> 
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param> 
    <context-param>
        <param-name>org.richfaces.SKIN</param-name>
        <param-value>blueSky</param-value>
    </context-param> 
    <context-param>
        <param-name>org.richfaces.CONTROL_SKINNING</param-name>
        <param-value>enable</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>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/* </url-pattern>
    </servlet-mapping> 
    <login-config>
        <auth-method>BASIC</auth-method>
    </login-config> 
</web-app>

3. Managed bean

The "RichFaces Greeter" application needs a managed bean. In project JavaSource folder create a new managed bean with name user in demo package and paste there the following simple code:

package com.apj.epm.demo; 
public class User {
    private String name = ""; 
    public String getName() {
        return name;
    } 
    public void setName(String name) {
        this.name = name;
    }
}

4. Registering bean in faces-cofig.xml

With the next step the user bean should be registered in faces-config.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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"
    version="1.2">
    <managed-bean>
        <managed-bean-name>user</managed-bean-name>
        <managed-bean-class>com.apj.epm.demo.User</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
        <managed-property>
            <property-name>name</property-name>
            <property-class>java.lang.String</property-class>
            <value></value>
        </managed-property>
    </managed-bean>
</faces-config>

5. RichFaces Greeter index.jsp

The "RichFaces Greeter" application has only one JSP page. Create index.jsp page in root of WEB CONTENT folder and add there following code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>RichFaces Greeter</title>
</head>
<body>
<f:view>
    <a4j:form>
        <rich:panel header="RichFaces Greeter" style="width: 315px">
            <h:outputText value="Your name: " />
            <h:inputText value="#{user.name}">
                <f:validateLength minimum="1" maximum="30" />
            </h:inputText>
            <a4j:commandButton value="Get greeting" reRender="greeting" /> 
            <h:panelGroup id="greeting">
                <h:outputText value="Hello, " rendered="#{not empty user.name}" />
                <h:outputText value="#{user.name}" />
                <h:outputText value="!" rendered="#{not empty user.name}" />
            </h:panelGroup>
        </rich:panel>
    </a4j:form>
</f:view>
</body>
</html>

The application uses three RichFaces components: <rich:panel> is used as visual container for information;<a4j:commandButton> with built-in Ajax support allows rendering a greeting dynamically after a response comes back and <a4j:form> helps the button to perform the action.
Note, that the RichFaces tag library should be declared on each JSP page.

6. Welcome Page - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="0;url=index.jsf" > 
<title>Enterprise Project Management System</title>
</head>
<body> 
</body>
</html>

7. Deploy and show result