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