JBoss richfaces tutorial

RichFaces is an open source framework that greatly enhance JSF including lifecycle, validation, conversion facilities and management of static and dynamic resources. RichFaces components with built-in Ajax support and a highly customizable look-and-feel can be easily incorporated into JSF applications.  

In this tutorial we'll see how to develop some rich pages using Eclipse Editor. It's assumed that the readed is already familiar with JSF concepts. So at first download Richfaces from JBoss site:

Setting up your Richfaces application:

The very first things necessary for an application are the libraries so add to your project the following libraries:
jboss richfaces tutorial

As you can see you need 3 kind of libraries: the rich faces libs you have just downloaded, a JSF implementation (in this case we use MyFaces) and some dependancies required by MyFaces.

We're almost done, we need only a few adds on to the web.xml to get it working correclty:

<?xml version="1.0" encoding="UTF-8"?>
<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">

 

    <context-param>
        <param-name>org.richfaces.SKIN</param-name>
        <param-value>blueSky</param-value>
    </context-param>
    <context-param>
        <param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>
        <param-value>true</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>


    <!-- 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>*.faces</url-pattern>
    </servlet-mapping>


</web-app>

The parameter org.richfaces.SKIN is used to set up your Rich faces skin, in this case we're using the "blueSky" skin which is quite similar to XP style.

The the parameter org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL is needed to tell JBoss that your application comes with its own JSF implementation, otherwise JBoss will use the default shipped with the bundled tomcat.

The Servlet Filter "RichFaces Filter" is used to enable Ajax capabilities. The Faces Servlet is nothing new if you are familiar with JSF.

Let's write a sample JSP named test.jsp just to check your environment is ok:


<%@ 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>

    <body>
        <f:view>
            <h:form>

                <div align="center">

                    <rich:spacer width="1" height="50" />
                    <rich:panel style="width:320px;">
                        <f:facet name="header">
                            <h:outputText value="Login please"></h:outputText>
                        </f:facet>
                        <h:panelGrid columns="2">
                            <h:outputText value="Name: " />
                            <rich:inplaceInput defaultLabel="Enter username" />
                            <h:outputText value="Email:" />
                            <rich:inplaceInput defaultLabel="Enter password" />

                        </h:panelGrid>
                    </rich:panel>
                </div>

            </h:form>
        </f:view>

    </body>
</html>

Invoke your jsf using the .faces suffix: http://localhost:8080/YourContext/test.faces

This should produre a rich panel panel with a Login form.
jboss richfaces example

Notice that for the keeping it simple the input fields are not bound to any JSF Beans. However in a real world application you should rather register the input fields with a Bean and add an action for example on the submit button.


<rich:inplaceInput  value="#{UserBean.userName}" defaultLabel="Enter username"/>
<rich:inplaceInput  value="#{UserBean.password}" defaultLabel="Enter password"/>
  
<h:commandButton  id="submit" action="#{UserBean.loginAction}" />