JSF 2 RichFaces 4 Example

RichFaces is an UI component framework for integrating Ajax capabilities into JSF web applications.

In this tutorial, we are going to use some of RichFaces features in a JSF 2 web application to build a registration form.

 

1. Technologies used

  • JSF 2.2.12
  • RichFaces 4.5.12.Final
  • Maven 3.0.5
  • Eclipse 4.5
  • JDK 1.8
  • Tomcat 7.0

 

2. Project structure

We create a simple JSF 2 web application using Maven.

JSF2RichFaces4Example

 

3. Project dependencies

In addition to JSF and RichFaces dependencies, we need to add Hibernate Validator dependencies.

 

4. JSF view

In order to use RichFaces features, we are going to add the following namespaces in our JSF page :

xmlns:a4j="http://richfaces.org/a4j" : to use Ajax controls
xmlns:rich="http://richfaces.org/rich" : to use rich components

File :  index.xhtml

We have used rich:graphValidator to validate registerController properties when the form is submitted. Validation is performed according to rules we are going to define in the registerController bean (see below).

We have used a4j:commandButton to add Ajax support to the standard h:commandButton. When the “Register” button is clicked the registerController.addUser() method will be invoked.

 

5. Managed Bean

To implement bean validation, we are going to define length constraint on username and password fields. The isPasswordsEquals() method will be used to check if passwords are equals.

File :  RegisterController.java

 

6. Web app configuration

File :  web.xml

 

7. Test It

URL : http://localhost:8080/JSF2RichFaces4Example/index.jsf

Check the length constraint for username and password fields.

JSF2RichFaces4Example (0)

What happens when we provides two different passwords ?

JSF2RichFaces4Example (1)

And if all validation constraints are ok ?

JSF2RichFaces4Example (2)

 

Download source code

  • Dear Walid,

    Very nice article and very helpful..

    Allah swt bless you for your nice sharing.

    Thanks

  • Aman Kumar

    Hi,

    Application is running fine,but richfaces is not working.
    please check the attached screenshot.