Using JSF RichFaces with Spring and JPA

JSF (Java Server Faces) is the most serious successor to the famous Struts Framework. It has a large success and it is adopted in most of the recent JEE projects. JSF is a standard and it has very strong community and industry support.

JSF is a MVC (Model-View-Controller) web framework based on component driven UI design model. It allows developers to concentrate on application business logic rather than on little details of HTML.

Photo credit: st_dimov

Many libraries come to extend JSF framework with Ajax components to help creating rich user interfaces. The most used libraries are :

    RichFaces ( JBoss project)
    ICEfaces (ICEsoft project)
    MyFaces (Apache project)

In this article, I present a project example to explain, in first step, how to integrate JSF with Spring and JPA and, in second step, how to use RichFaces to enhance the application interface.

1 – Create a basic JSF project

You can browse the source code of the project example in this link or you can checkout the project source code from Google SVN repository in this URL
. After you check out the project into your IDE, the project will be structured as shown in the picture.

1.1 – Add JSF dependencies

To add JSF support to the application, you need to add some dependencies to the pom.xml file as shown in the source code bellow.






1.2 – Add JSF configuration to web.xml file

FacesServlet must be configured in web.xml, it is the central controller for the JSF application. It receives all requests for the JSF application and initializes the JSF components before the JSP or XHTML is displayed.


		<servlet-name>Faces Servlet</servlet-name>

		<servlet-name>Faces Servlet</servlet-name>

1.3 – Create faces-config.xml file

faces-config.xml allows to configure the application, managed beans, convertors, validators, and navigation rules.

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns=""

In the faces-config.xml, we specify SpringBeanFacesELResolver as el-resolver (Expression Language Resolver). The #{customerDao} el-expression (line 18) will be resolved by Spring framework, costomerDao is defined in Spring application-context.xml file.

1.4 -Create managed bean

JSF application uses a bean with each page in the application. The bean defines the properties and methods associated with the UI components used on the page. A bean can also define a set of methods that perform functions, such as validating the component’s data, for the component. The model object bean is like any other JavaBeans component: it has a set of accessor methods. The source code below present a managed bean used in this application example to add a customer.

import java.util.List;
import com.mycompany.dao.ICustomerDao;
import com.mycompany.entity.Customer;
import com.mycompany.entity.CustomerOrder;

 * @author abdelkafi samer
public class CustomerController {
private ICustomerDao customerDao;
private String customerId;
private String taxId;
private String name;
private String adresse;
private List<CustomerOrder> customerOrders;
private List<Customer> customers;
public void save(){
    	Customer customer= new Customer(Integer.parseInt(taxId), name, adresse, city, state, zip, phone, null);;

public ICustomerDao getCustomerDao() {
	return customerDao;

// getters and setters

1.5 – Create facelets files

Using facelets template increase re-use and simplify maintenance on your JavaServer Faces project. The picture bellow prent the template used in this application example. To browse the source code click on the file name of the page.



The picture below presents the basic JSF screen of the application.

2 – Add RichFaces Support to the application

In this part, I present a way to enhance JSF application user interface by using RichFaces library.

2.1 – Add richfaces dependencies

In the pom.xml file we need to add RichFaces dependencies as shown in the source code bellow.




2.2 – Add reachfaces pram and filter to web.xml file

RichFaces need some parameters (SKIN, VIEW_HANDLERS, LoadScriptStrategy …) to be specified in web.xml file.


		<display-name>RichFaces Filter</display-name>
		<servlet-name>Faces Servlet</servlet-name>

2.3 – Modify Facelets files

RichFaces has many components, you can explore them from this link.

To use Richfaces component we need to add xmlns (xml namespaces) to the facelets file and replace basic JSF tag by rich faces one.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns=""

<ui:composition template="./template/template.xhtml">
<ui:define name="body">
<f:view >

        <f:facet name="header">
        	<h:outputText value="Edit Customer"/>
        <h:panelGrid columns="3" title="Customer" rowClasses="s1row" columnClasses="wfcol1,wfcol2,wfcol3">
        <h:outputText value="Name: " />
			<h:inputText value="#{}" id="name" required="true"/>
			<rich:message for="name" />
			<h:outputText value="Phone: " />
			<h:inputText value="#{}" id="phone" required="true"/>
			<rich:message for="phone" />
			<h:outputText value="Address: " />
			<h:inputText value="#{customer.adresse}" id="adresse" required="true"/>
			<rich:message for="adresse" />
			<h:outputText value="TaxId: " />
			<h:inputText value="#{customer.taxId}" id="taxId" required="true">
				<f:validateLongRange minimum="0" maximum="100"/>
			<rich:message for="taxId" />
			<h:outputText value="City: " />
			<h:inputText value="#{}" id="city" required="true"/>
			<rich:message for="city" />
			<h:outputText value="State: " />
			<h:inputText value="#{customer.state}" id="state" required="true"/>
			<rich:message for="state" />
			<h:outputText value="Zip: " />
			<h:inputText value="#{}" id="zip" required="true">
				<f:validateLongRange minimum="0" maximum="9999"/>
			<rich:message for="zip" />
			<f:facet name="footer"> 
				<a4j:commandButton action="#{}"  value="save"/>



This picture presents an application screen after Richfaces integration. This screen uses Ajax to communicate with the server. The save button doesn’t reload the whole page, it just call the save method in the managed bean and update the screen.

7 thoughts on “Using JSF RichFaces with Spring and JPA

  1. Hi Samer
    You are doing a good job. I ‘m impressed by the value and the diversity of the topics you are sharig with others. Keep going and good luck.

  2. Hi Samer,

    Thanks for your post, It helped me to start my application now I’m subscribed to your site. But now I’m facing a problem using RichFaces, Spring, JPA/Hibernate. I would really appreciate your help. I posted my problem here Thanks.

  3. I really appreciate your sample code. Strait forward samples of different configurations for spring. THANKS!

  4. Hi Samer,
    Please what’s your application server for the version of the server, because i have some compatibility problems


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s