100% found this document useful (1 vote)

387 views

Richfaces Tutorial PDF

Uploaded by

balha

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (1 vote)

387 views

Richfaces Tutorial PDF

Uploaded by

balha

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 103

RichFaces

About the Tutorial

RichFaces is a component library developed by JBoss, which provides in-built AJAX support to
JSF application. It reduces all the redundant codes that the developer has to write to create
different markup in the browsers.

Audience
This tutorial has been prepared for the beginners to help them understand the basics of
RichFaces Technology. After completing this tutorial, you will find yourself at a moderate level
of expertise, from where you can take yourself to the next levels.

Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of Java programmi ng
language, text editor, execution of programs, etc. Since we are going to develop web-based
applications using RichFaces, it will be a plus if you have an understanding of other web
technologies such as HTML, CSS, AJAX, JavaScript, and JSF.

Copyright & Disclaimer

All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt.
Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any
contents or a part of contents of this e-book in any manner without written consent of the
publisher.

We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd.
provides no guarantee regarding the accuracy, timeliness or completeness of our website or its
contents including this tutorial. If you discover any errors on our website or in this tutorial,
please notify us at contact@tutorialspoint.com

i
RichFaces

Table of Contents
About the Tutorial .................................................................................................................................................................... i

Audience ..................................................................................................................................................................................... i

Prerequisites .............................................................................................................................................................................. i

Copyright & Disclaimer ............................................................................................................................................................ i

Table of Contents..................................................................................................................................................................... ii

1. RICHFACES - OVERVIEW....................................................................................... 1

Advant ages and Disadvantages ............................................................................................................................................1

2. RICHFACES - ENVIRONMENT SETUP ........................................................................ 2

Technical Requirements .........................................................................................................................................................2

Creating a Project.....................................................................................................................................................................4

3. RICHFACES - ARCHITECTURE ................................................................................10

4. RICHFACES - BASIC CONCEPTS ..............................................................................12

Processing AJAX Request .................................................................................................................................................... 12

Partial Tree Processing ........................................................................................................................................................ 12

Partial View Updates............................................................................................................................................................ 12

Other a4j Tags........................................................................................................................................................................ 13

5. RICHFACES - RICH SKIN .......................................................................................28

Built-in Skin ............................................................................................................................................................................ 28

Creating/Modifying the Skin .............................................................................................................................................. 29

Changing the Skin at Runtime ............................................................................................................................................ 32

6. RICHFACES - INPUT COMPONENTS.........................................................................36

<rich:inplaceInput>............................................................................................................................................................... 36

<rich: inplaceSelect > ............................................................................................................................................................ 37

<rich:SuggestionBox>........................................................................................................................................................... 39
ii
RichFaces

<rich: comboBox> .................................................................................................................................................................. 40

<rich:inputNumberSlider> .................................................................................................................................................. 42

<rich:Calendar> ..................................................................................................................................................................... 44

<rich: InputNumberSpinner>............................................................................................................................................... 50

7. RICHFACES - OUTPUT COMPONENTS......................................................................52

<rich:Panel> ........................................................................................................................................................................... 52

<rich:simpleTogglePanel> ................................................................................................................................................... 53

<rich:tabPanel> ..................................................................................................................................................................... 54

<rich:panelBar> ..................................................................................................................................................................... 55

<rich:tab>................................................................................................................................................................................ 56

<rich:panelMenu>................................................................................................................................................................. 57

<rich: TogglePanel> ............................................................................................................................................................... 58

<rich:toolBar > ........................................................................................................................................................................ 61

<rich:separator> .................................................................................................................................................................... 62

<rich:Spacer> ......................................................................................................................................................................... 63

<rich:modalPanel>................................................................................................................................................................ 63

8. RICHFACES - ITERATION COMPONENT ....................................................................65

<rich:dataTable> ................................................................................................................................................................... 65

<rich: dataDefinitionList >................................................................................................................................................... 68

<rich:dataOrderedList>........................................................................................................................................................ 69

<rich:dataList > ....................................................................................................................................................................... 69

<rich:dataGrid>...................................................................................................................................................................... 70

<rich:datascroller >................................................................................................................................................................ 71

9. RICHFACES - SELECTION COMPONENTS...................................................................74

<rich:pickList> ........................................................................................................................................................................ 74

<rich:orderingList>................................................................................................................................................................ 76

iii
RichFaces

<rich:ListShuttle > ................................................................................................................................................................. 78

10. RICHFACES - MENU COMPONENTS ........................................................................80

<rich:dropDownMenu> ....................................................................................................................................................... 80

<rich: contextMenu> ............................................................................................................................................................. 81

<rich:Component Control> ................................................................................................................................................. 83

11. RICHFACES - RICH-TREE ......................................................................................86

<rich:treeNode> .................................................................................................................................................................... 86

<rich:treeModelAdaptor> ................................................................................................................................................... 88

12. RICHFACES - ERROR HANDLING.............................................................................94

Server Side & Client Side Error Handling ......................................................................................................................... 94

Resource Loading .................................................................................................................................................................. 97

iv
RichFaces
1. RichFaces - Overview

RichFaces is an open source component library for JSF technology. It is developed and designed
by JBoss. RichFaces provides reusable markups and AJAX capabilities to a JSF developer without
having any prior knowledge of front end. RichFaces was developed over JSF 2, hence it follows
the same life cycle of JSF. The in-built AJAX support and customizable look and feel features has
enabled a new horizon for Enterprise Java application.

Advantages and Disadvantages

Following are a few advantages of using RichFaces.

AJAX support: RichFaces eliminates the old boilerplate AJAX, JavaScript codes to include
markups in the webpages. Using RichFaces, a developer can include markups on-the-fly without
having any prior knowledge of AJAX.

Component Development Kit (CDK): As described earlier, the developer need not
concentrate on the markups used in the application, all they need to include is RichFaces tags
to use those functionalit ies. This automatic creation of markups will be done by a runt ime
environment called CDK.

Resource handling: RichFaces provides additional support to create different binary files such
as image, excel, spreadsheet , etc.

Skinning: Skinning is a modern approach that has been introduced in JSF, which makes it very
easy to control the look and feel of the application. Specially-centralized color management using
different other customizable parameters make it very handy for a developer.

Following are a few disadvantages of using RichFaces.

Resource: This being a fairly new technology, getting good quality resource is a huge problem
for rich face developer.

Complex: Transition through different phases and creation of dynamic markups is the entire
responsibility of CDK. Understanding internal processing of CDK is a bit complex and confusing
for a traditional front-end developer.

1
RichFaces
2. RichFaces - Environment Setup

In this chapter, you will set up our development environment and configure your system such
that you can proceed with RichFaces development.

Technical Requirements
As per the technical requirement you will learn how to configure JDK, Application server, or any
IDE of your choice.

System Requirements
You can use any running system, there is no any restriction on memory, RAM and operating
system.

JDK Installation
Before proceeding further, you must have JDK configured on your system. Please refer to the
official website of oracle to download and install JDK 7 or an above version. You might have to
set the environment variable for Java such that it can work properly. To verify your installation
in Windows operating system, hit “java –version” in the command prompt and as an output it
will show you the Java version installed in your system.

IDE Installation
There are numbers of IDE available on the Internet. You can use any as you choose. For this
tutorial, let us use NetBeans 8.2. You can find the download link of different IDE in the following
table.

IDE Name Installation Link

NetBeans https://netbeans.org/downloads/
Eclipse https://www.eclipse.org/downloads/
Intellij https://www.jetbrains.com/idea/download/#section=windows

It is always recommended to use a recent software version to drag out maximum facility from
it. For this tutorial, we will be using NetBeans IDE 8.2 along with JDK 8.

Server Requirements
As an application server, you will be using Tomcat. In this chapter, you will configure the tomcat
server in the system. If you are installing the latest version of NetBeans, then you can directly
install Apache Tomcat along with NetBeans IDE. If you are not doing so, please download the
latest version of T omcat from the official website of the TOMCAT. Keep the extracted Tomcat
files in your C drive or program files. These files will be used in the next phase.

2
RichFaces

Client Requirements
RichFaces is a UI component. Thus, like every UI component , the internet browser will act as a
client for your application. You can use any modern internet browser such as IE, Safari, Chrome ,
etc.

Development Requirements
Downloading required jars: Please visit the official website of JBOSS and download the latest
stable release of the JBoss jar files. Extract the files. You will need the following jars in order to
develop RichFaces Application.

 richfaces-a4j-4.5.17.Final.jar
 richfaces-core-4.5.17.Final.jar
 richfaces-rich-4.5.17.Final.jar
 cssparser-0.9.18.jar
 guava-19.0.jar
 sac-1.3.jar

3
RichFaces

Creating a Project
In this section, let us create a demo application that will be used later to learn more about
RichFaces. Before proceeding further, it is highly recommended that you download and install
all required software and jar files mentioned earlier.

Step 1: Open NetBeans IDE. Go to File -> New Project. You will be redirected to the following
screenshot.

Step 2: Select “Java Web” and “Web Application” in “Categories” and “Projects” tab respectively
and hit “Next”.

Step 3: In the next tab, you have to provide a project name. Here, let us name it as
“RichFaceTutorial”. Then, hit “Next”. You will be redirected to the following screenshot. where
you will be setting up server details.

4
RichFaces

Step 4: Select “Apache Tomcat” from the dropdown and hit “Add”. Once you hit “Add”, you will
be redirected to a separate screen, where you need to configure your server. To configure the
server, you will need the server files downloaded in the previous section.

5
RichFaces

Step 5: Select “Apache Tomcat or TomEE” from the list as shown in the above screenshot and
hit “Next”. You will be redirected to the following screen.

6
RichFaces

Step 6: In the Server location, you need to provide the downloaded Tomcat files location. Hit
“Browse” and navigate to the required folder path and hit “Finish”. Once your server is added
successfully, you will be redirected to the first screen. Hit “Next” and you will get a chance to
select the different frameworks to add into the application as shown in the following screenshot .

7
RichFaces

Step 7: Select “JavaServer Faces” and in “JavaServer Faces Configuration” you have to select
“RichFaces” and hit “Finish”.

If you do not get “RichFaces” as an option, you can add the required jars file from the build path.
After this step, your application is ready to deploy on the application server. Following is the
project directory structure of the application after completing all the above-mentioned steps.

8
RichFaces

Step 8: Go ahead and left-click the “index.xhtml ” file and run the file. You will see the following
output in the browser.

In real-life application, you might have to generate the required war file and deploy in the
application server, as all the pages will be interlinked.

However, for this tutorial we will be running the application page wise as we need to show
different features of different tags.

9
RichFaces
3. RichFaces - Architecture

According to Red Hat official document, there are a total five components that work internally
to provide rich user experience. Following are the five components.

 AJAX Filter: AJAX filter is used to differentiate between different types of request coming
from the client browser. To include this component into the application, you need to
register RichFaces Filter in your application’s web.xml file. AJAX Filter acts differently in
different phases of JSF applications.

 AJAX Action Components: Action components are responsible to send the client
requests from the browser to the AJAX Engine, from where it will process the request and
render the required view as a response.

 AJAX Containers: AJAX container is conceptually similar to the spring container. It is

basically recognizing a specific area of the client browser to process the AJAX request.

 Skinnability: Skin and theme together is referred to as Skinnability. This module acts
independently to provide extensive support to the look and feel of the entire website.

 RichFaces JavaScript Engine: JavaScript Engine runs on the client side that sends
updates to the AJAX engine in order to prepare the response. This engine works
automatically, hence we need not write any extra line of code to control it.

Following is the architectural diagram of the RichFaces application in MVC paradigm.

10
RichFaces

In the above image, the user’s activity will be processed as a “JS Event”. Later, the “JS Event”
will be transmitted to the “XML Filter”, which is nothing but a component of AJAX Filter. “XML
Filter” is responsible for generating and processing user requests. All other components are
internal to the different jar files. We need to use appropriate tags library in order to use those
functionalities.

11
RichFaces
4. RichFaces - Basic Concepts

In this chapter, we will see some basic concepts of RichFaces and we will learn how RichFaces
deal with the processing of AJAX requests and many other functionalities.

Processing AJAX Request

As mentioned earlier, RichFaces provides rich UI components that enables AJAX functionalities
in the web application even without implementing any AJAX codes. All these AJAX capabilities
are introduced via a4:j tag library. <a4j:commandLink> , <a4j:commandButton>,
<a4j:support>, and <a4j:poll> are the four tags that help the developer include AJAX
functionalities into the web application. We will learn more about tag libraries in a subsequent
chapter.

Partial Tree Processing

In a conventional AJAX application, all the input fields will be processed as different nodes of a
tree, however, in RichFaces we have an option of partially submitting the tree nodes and
validating the required fields.

Let us consider an example to understand more about this. Suppose, there are a total of five
elements in HTML - “Name”, ”Employee Id”, ”Employee salary”, ”Employee Address”, and
“Employee Department”. Now you want to validate or process only Employee id, which can be
possible using RichFaces but not possible using AJAX. You need to submit the entire form to the
server. RichFaces provides an execute attribute that can identify a specific component and
process the same. Following are the different levels of execute attributes available.

 @all: This attribute will process all your data.

 @none: This can be used when you don’t want to process any of the data.
 @this: This will process the requesting component only.
 @form: This will process the entire form that contains the requesting component.
 @region: This will process a specific region of a webpage.

Partial View Updates

Like input fields, RichFaces provides similar options to update different views. Developers can
customize the view according to their choice. Like the execute attribute, there is a render
attribute that works similar to the execute attribute. All these attributes work based on the ID
identifier of a webpage.

12
RichFaces

Following are the different levels of render attributes available.

 @all: This will update the entire component.

 @none: This will not update any of your components.
 @this: This will update only the requesting component .
 @from: This will update the form that contains the requesting data.

 @region: This will update a specific region of the webpage.

Other a4j Tags

Till now, we have discussed the conceptual properties about RichFaces application. In this
section, we will learn about them in detail with hands-on examples.

<a4j:AJAX>
This is one of the core components that RichFaces offers. This is nothing but an extending part
of JSF2.0 f:AJAX tag. This tag triggers an AJAX request whenever a JS event occurs in the
webpages. Following example describes more about this tag. Create a “xhtml ”page under the
webpage folder and name it as “a4jAJAXExample.xht ml”. Then, paste the following piece of code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>a4j:AJAX Tag Example</title>
</h:head>
<h:body>

<h:form id="form">
<h:inputText value="#{managedBean.message}">
<a4j:AJAX render="ShowMessage" />
</h:inputText>
<h:outputText value="#{managedBean.message}" id="ShowMessage"
style="animation-duration"/>
</h:form>
</h:body>
</html>

13
RichFaces

We also need to create a managed bean in order to hold the inputs from the webpage. Go ahead
and create a java class under the source package directory. Following is the managedbean.java
class code.

Save both the files and run, which will yield the following output in the browser.

14
RichFaces

<a4j:param>
a4j:param is an extension of f:param tag. It is used to assign a value to a property or an instance
variable. This tag is capable of assigning the value to the instance variable permanent ly.
Following is the “a4jparamExample.ht ml” code.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Param tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="2">
<a4j:commandButton value="TutorialsPoint" render="rep">
<a4j:param value="Tutorials point"
assignTo="#{managedBean.message}" />
</a4j:commandButton>

<a4j:commandButton value="RichFace Tutorials" render="rep">

<a4j:param value="RichFace Tutorials"
assignTo="#{managedBean.message}" />
</a4j:commandButton>
</h:panelGrid>
<br />
<h:outputText id="rep" value="Selected
Name:#{managedBean.message}" />
</h:form>
</h:body>
</html>

15
RichFaces

Following is the corresponding managed bean class code.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("This method is getting called with"+message); // we have
added this line in order to //check how the AJAX call happens to the class methods
without any direct communication
this.message = message;
}
}

Go ahead and run the file. Following is the output in the browser.

Now, in the server console you will see the following output, which proves that xhtml file is
communicating with the managed bean in order to set the instance variable at run time.

16
RichFaces

<a4j:commandButton>
We have already used the command button tag in our previous example. It is used to create a
button inside a xhtml page, which will generate and communicate with the AJAX engine to
process the specific request. It takes an input and processes the same and renders an output in
the web browser.

In the previous example, we have created two buttons - “TutorialsPoint” and “RichFace
Tutorials”. Our command button tag internally communicates with the managed bean and sets
the required instance variables. It is also responsible for rendering the value.

<a4j:commandLink>
Command link works like <h:commandlink> component of JSF 2.0. The c ommand button
generates submit-based AJAX request, whenever the command link works on the JS click event.
This is the only difference we have in the command button and the command link. Following
example will help you understand the tag lib better. Create “a4jCommandLink.xht ml” file and
paste the following code in it.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">

<h:head>
<title>Example of command Link</title>

</h:head>
<h:body>
<h:form id="form">

17
RichFaces

<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{man agedBean.message}" />
<a4j:commandLink value="Click Me" render="out" execute="@form" />
</h:panelGrid>
</h:form>
<br />
<a4j:outputPanel id="out">
<h:outputText value="Welcome to #{managedBean.message} !" />
</a4j:outputPanel>
</h:body>
</html>

No need to change anything in the managed bean class. Run this file and following will be the
output in the browser.

18
RichFaces

<a4j:outputPanel>
The output panel works as a span of the HTML page. It is used to group different component s of
a webpage rather than specify them individually. In the previous example , we have used the
output panel in order to display the message provided in the input text box. Following is the
syntax of the output panel.

<a4j:outputPanel id="out">
<h:outputText value="Welcome to #{managedBean.message} !" />
</a4j:outputPanel>

<a4j:region>
This is the key feature of RichFaces, that allows to process some parts of the webpage from.
Using this tag, partial tree processing happens in RichFaces. It is mainly used to increase the
rendering process. Following example will help you understand this in detail. Please create a
“a4jregionExample.xht ml” file using the following code.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
>
<h:head>
<title>Region Example</title>

</h:head>
<h:body>
<h:form>
<h:inputText value="#{managedBean.message}"/>
<h:inputText value="#{managedBean.job}"/>
<a4j:commandLink id="one" value="one"/>
<a4j:region>
<h:inputText value="#{managedBean.message}"/>

<a4j:commandLink id="two" value="two"/>

</a4j:region>

19
RichFaces

</h:form>

</h:body>

</html>

Along with this xhtml page, please update our managedBean accordingly.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
String job;
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("setMessage method is getting called with --"+message);
this.message = message;
}
public String getJob() {
return job;
}
public void setJob(String job) {
System.out.println("setJob method is getting called with --"+job);
this.job = job;
}
}

20
RichFaces

The above piece of code will yield the following output in the browser.

Whenever the command link “one” is clicked, it will process the entire form, however, when we
click the command link “two”, only the message instance will be processed as it is enclosed
within a region tag. Similarly, if we enclose the command link ‘one’ in another region tag, then
it will process only the first two input parameters. Following is the screenshot of the server
console, whenever the command link “two” is clicked.

Whenever the command link “one” is clicked, following will be the output.

21
RichFaces

<a4j:repeat>
Repeat tag works exactly similar to <ui:repeat > tag of JSF. It helps to iterate over a list in the
webpage. In the following example of “a4jRepeat.xhtml” file, we are iterating through a list from
our managed bean class.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>

</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="1" style="width: 640px">
<a4j:outputPanel id="panel" layout="block">
<a4j:repeat value="#{managedBean.subjectList}" var="sub">
<li>
<h:outputText value="#{sub}"/>
</li>
</a4j:repeat>
</a4j:outputPanel>

</h:panelGrid>
</h:form>

</h:body>

</html>

22
RichFaces

Once you run this specific file in the browser, you will get the following output.

<a4j:status>
As the name suggests, this tag is useful whenever you want to display the status of your AJAX
request in the front-end. You can include a normal text message or gif or image-based status as
per your choice. For a small application such as the following, you will get a glimpse of the status
in the front-end, however, whenever you are running a complex AJAX request , this status is very
much visible. Please modify the “a4jregionExample.xht ml” as shown below.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
>
<h:head>
<title>Region Example</title>

</h:head>
<h:body>
<h:form>
<a4j:status startText="Working..." />
<h:inputText value="#{managedBean.message}"/>
<h:inputText value="#{managedBean.job}"/>
<a4j:commandLink id="one" value="one"/>

23
RichFaces

<a4j:region>
<h:inputText value="#{managedBean.message}"/>

<a4j:commandLink id="two" value="two"/>

</a4j:region>
<a4j:status startText="Done" />
</h:form>

</h:body>

</html>

Whenever you are running this application, you can see a glimpse of two statuses “working...”
and “Done”. These statuses will automatically disappear whenever the request is completed.

<a4j:include>/<a4j:keepAlive>
Include and keepAlive, both tags were introduced in RichFaces 3.0 but in RichFaces 4 these tags
were depreciated as these functionalit ies can be easily achievable using different other tags used
in Facelets such as <ui:include> and <ui:insert >. As the name suggests, include was introduced
to include one page int o another and keepAlive was introduced to control the scope of the
managed bean associate with a JSF page. It is recommended to use the updated version of any
software APIs and use <UI> component and “annotation” implementation to achieve the
business goals.

<a4j:log>
As the name suggests, this a4j component helps to generate the logging info into the web
browser. The following example explains more about this tag. Edit the “a4jregionExample.xht ml”
file in the following way.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Region Example</title>

</h:head>
<h:body>
24
RichFaces

<h:form>
<a4j:status startText="Working..." />
<h:inputText value="#{managedBean.message}"/>
<h:inputText value="#{managedBean.job}"/>
<a4j:commandLink id="one" value="one"/>
<a4j:region>
<h:inputText value="#{managedBean.message}"/>

<a4j:commandLink id="two" value="two"/>

</a4j:region>
<a4j:log></a4j:log>
<a4j:status startText="Done" />
</h:form>

</h:body>

</html>

Now run the above code in the browser and following will be the output. a4j:log will generate
the required logs of all levels whenever required.

<a4j:jsFunction>
This is the most advanced feature of RichFaces, where an automatic JS function can be created
without any JavaScript code. The CDK will generate an automatic JavaScript code based on any
JS event.

In the following example, we are creating a JavaScript function that will be called whenever we
hover on a specified value.

25
RichFaces

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<table width="500" border="1">
<tbody>
<tr>
<td><span onmouseover="showMySkill('core java,J2EE')"
onmouseout="showMySkill('')">BackEnd developer</span></td>
<td><span onmouseover="showMySkill('DB,RDBMS,unix')"
onmouseout="showMySkill('')">Database Admin</span></td>
<td><span onmouseover="showMySkill('JS frameworks,html,java
scripts')" onmouseout="showMySkill('')">Front End Developer</span></td>
</tr>
<tr>
<td colspan="3">You need to know: <b> <h:outputText id="showSkillset"
value="#{managedBean.message}" /> </b></td>
</tr>
</tbody>
</table>
<h:form id="form">
<a4j:jsFunction name="showMySkill" render="showSkillset">
<a4j:param name="name" assignTo="#{managedBean.messa ge}" />
</a4j:jsFunction>
</h:form>
</h:body>
</html>

26
RichFaces

The above code will generate the following output in the browser. Depending on the JS event,
CDK will override the method named “showMySkill()” and the required values will be printed in
the browser.

<a4j:AJAXListener>
This tag is used when you want to execute a particular listener just before rendering the result
to the browser. This tag is not available in RichFaces 4 because the same functionality is available
in <a4j:param>, where you can create an AJAX request on any JS event occurrence . Although
it is advisable to use the updated software version, if you are still using RichFaces 3, then you
can use this tag in the following manner.

<rich:panel>
<f:facet name="header">Using a4j:actionListener</f:facet>
<a4j:commandButton value="Submit" reRender="#{AJAXBean.areas}">
<a4j:AJAXListener binding="#{AJAXBean.renderAreasListener}"/>
</a4j:commandButton>
</rich:panel>

In the above example, on the click of the “Submit” button, a JS event will be created, which will
call the “areas” method implemented inside the bean class and the corresponding result will be
rendered as a result.

27
RichFaces
5. RichFaces - Rich Skin

RichFaces comes with a new feature to control the look and feel of your website in a centralized
manner, called Rich Skin. Skin is a high level implementation of old CSS files, which is more
convenient for the back-end developer to control the look and feel of the website . There are
some built-in skins available, which can be customized according to your choice.

Built-in Skin
There are a number of built-in skins available in the RichFaces component jar file. Following are
some built-in rich skin available.

 Default
 Plain
 emeraldTown
 blueSky
 wine
 japanCherry
 ruby
 classic
 deepMarine
 NULL

In the following example, we will implement ”classic” skin. It is very easy to implement any of
the above-mentioned skins. Before proceeding further, please add the skin in the “web.xml” file
using the line of code given below. We can add any skin of our choice from the above list . We
just need to modify the <param-value> tag with the appropriate skin name.

<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>classic</param-value>
</context-param>

After adding this, please create a “SkinExample.xht ml” file and add the following line of code
into it.

<?xml version='1.0' encoding ='UTF-8' ?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"

28
RichFaces

xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Built in Skin</title>
</h:head>
<h:body>
<h:form>
<rich:panel style="width:60%">
<rich:tabPanel switchType="AJAX">
<rich:tab header="Name">
Tutorials Point
</rich:tab>
<rich:tab header="Features">
Best Place to learn
</rich:tab>
</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

Once we run this page, following will be the output in the browser, where each tab dynamically
propagates to generate a different output. Once you hit the next tab, it will show a different
output.

In the above example, <rich:panel> creates a panel where we are creating different tabs using
<rich:tab>. The <rich:tabPanel switchType="AJAX"> provides AJAX transition of the used tab.

Creating/Modifying the Skin

Skin is nothing but an extended version of CSS design, which will be applied to the webpage at
runtime. In the previous section, we learned some basic in-built functionality of the skin. In this
section, we will create our own skin or modify the existing skin. Skin in the RichFaces can be
customized at the following three levels.

29
RichFaces

Skin property file: All the skins are generated through different property files mentioned under
“rechfaces-a4j-4.5.17.Final” jar file. All we need to do is create a same property file and keep it
under our source folder and edit its property. We need to change our “web.xml” accordingly to
reflect on our new skin property in t he website.

Component style sheet: Implement new CSS file of choice and use it in the application.

Overwrite style class: One can overwrite the style by directly mentioning the style properties
in the xhtml file.

Let us consider an example. We will customize our previous ”classic” skin. Create a property file
inside the “source” package and name it “custom.skin.properties”. Following are the entries of
this property file that were copied from other property files available in the jar file mention
above.

#Colors
headerBackgroundColor=#black
headerGradientColor=#DF5858
headerTextColor=#FFFFFF
headerWeightFont=bold
generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=10px
generalFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#F9E4E4
shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#C0C0C0
subBorderColor=#ffffff
tabBackgroundColor=#EDAEAE
tabDisabledTextColor=#C47979
trimColor=#F7C4C4
tipBackgroundColor=#FAE6B0
tipBorderColor=#E5973E
selectControlColor=#FF9409
generalLinkColor=#CF0000
hoverLinkColor=#FF0000
visitedLinkColor=#CF0000
# Fonts

30
RichFaces

headerSizeFont=11px
headerFamilyFont=Arial, Verdana, sans -serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans -serif
buttonSizeFont=11

CHAPTER 11 ■ SKINS 223

buttonFamilyFont=Arial, Verdana, sans -serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=1px
#Calendar colors
calendarWeekBackgroundColor=#f5f5f5
calendarHolidaysBackgroundColor=#FFF1F1
calendarHolidaysTextColor=#980808
calendarCurrentBackgroundColor=#808080
calendarCurrentTextColor=#ffffff
calendarSpecBackgroundColor=#f1f1f1
calendarSpecTextColor=#000000
warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA
#Gradients
Gradient Type=plain

Depending the skill level, we can change any attribute in this property file. We can add new Style
class or edit the existing one. Once we are done with the creation of the new property file, it is
time to add the same in the “web.xml ” file. Following is the entry of the “web.xml”, which should
point to our skin.

<context-param>
<param-name>org.richfaces.skin</param -name>
<param-value>custom</param-value>
</context-param>

31
RichFaces

Note: Make sure the new property file is present inside the source directory , otherwise it will
throw a runtime error saying “NoClassFound Exception”.

Go ahead and run the previous file named” SkinExample.xht ml”. Following will be the output in
the browser, where we will able to see that the entire look and feel of the website has changed
to “Ruby” as a new property file was copied from ruby.properties file.

Changing the Skin at Runtime

In this example, we will change the skin at run time. Create a skin class like the following.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class skinBean {

private String skin;

public skinBean() {
this.skin="plane";
}

32
RichFaces

public String getSkin() {

return skin;
}
public void setSkin(String skin) {
this.skin = skin;
}
}

Then change the “web.xml” file as follows, to populate the skin name at runtime.

<context-param>
<param-name>org.richfaces.skin </param-name>
<param-value>#{skinBean.skin}</param -value>
</context-param>

After doing so, we need to change the configuration files of the JSF application. The files can be
located under web-INF folder. Add the following bean property to it.

<managed-bean>
<managed-bean-name>skinBean</managed-bean-name>
<managed-bean-class>SkinBean</managed -bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>skin</property-name>
<value>plain</value>
</managed-property>
</managed-bean>

Following is the xhtml file code.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich">
33
RichFaces

<h:head>
<title>TODO supply a title</title>

</h:head>
<h:body>
<h:form>
<div style="display: block; float: left">
<h:selectOneRadio value="#{skinBean.skin}" border="0"
layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic"
onchange="submit()">
<f:selectItem itemLabel="plain" itemValue="plain" />
<f:selectItem itemLabel=" emeraldTown" itemValue="emeraldTown" />
<f:selectItem itemLabel="blueSky" itemValue="blueSky" />
<f:selectItem itemLabel="wine" itemValue="wine" />
<f:selectItem itemLabel="japanCherry" itemValue="japanCherry" />
<f:selectItem itemLabel="ruby" itemValue="ruby" />
<f:selectItem itemLabel="deepMarine" itemValue="deepMarine" />

</h:selectOneRadio>
</div>
<div style="display: block; float: left">
<rich:panel >
<rich:panelMenu style="font-family: monospace; font-size: 12;">
Changing skin in runtime
</rich:panelMenu>

<rich:panelMenu style="font -family: monospace; font-size: 12;">

This is a result of the modification "blueSky" skin
</rich:panelMenu>
</rich:panel>
</div>
</h:form>
</h:body>
</html>

The above piece of code will produce the following output in the browser.

34
RichFaces

In the above example, initially we are selecting “plain”, hence it is pointing to plain. Once you
propagate through the radio button, it will change the color accordingly.

35
RichFaces
6. RichFaces - Input Components

Till now we have learned a lot about different AJAX components of RichFaces along with a new
functionality called “Skin”. In this chapter, we will learn different “Rich” component s that
RichFaces offers in order to develop a modern web application. Following are the different input
components provided by “RichFaces”.

<rich:inplaceInput>
Rich inplaceInput provides an opportunity to create an editable text box instead of a normal
input text box. In the following example, we will create an editable text box using this
component. Create an xhtml file and name it as “richinplaceInput.xhtml”. Write the following
code in that file.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<f:view></f:view>
<h:form>
<rich:inplaceInput
value="#{managedBean.message}"
defaultLabel="Enter Your Name" />
</h:form>
</h:body>
</html>

36
RichFaces

Save this file and run it. Following will be the output in the browser.

Go ahead and type anything of your choice in that text box and hit enter. This tag also provide s
inline edit option. Following will be output after editing.

<rich: inplaceSelect>
This is another input markup provide by RichFaces, where the user can select an input value
from the dropdown list, which is also inline and editable in nature. We need to populate the
dropdown from the internal bean class. Please create a “xhtml” file and name it as
“richinplaceSelectExample.xht ml”. Place the following piece of code in that file.

<?xml version="1.0" encoding="UTF-8"?>

37
RichFaces

</h:head>
<h:body>
<h:form>
<rich:inplaceSelect value="#{subject.subjectName}" defaultLabel="Click to
Select Country">
<f:selectItems value="#{subject.SubJectList()}"></f:selectItems>
</rich:inplaceSelect>
</h:form>
</h:body>
</html>

In the above example, we will populate the dropdown options from the backend. Here is the
bean class named ” subject.java”.

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Subject {

String SubjectName;

public Subject() {
}

public Subject(String SubjectName) {

this.SubjectName = SubjectName;
}

public List<String> SubJectList() { //this list to be rendered

38
RichFaces

ArrayList<String> list = new ArrayList<>();

list.add("JAVA");
list.add("DOTNET");
list.add("COBOL");
list.add("AJAX");
list.add("JAVA SCRIPT");
return list;
}

public String getSubjectName() {

return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}

All the subject name that we are passing through the list will be shown inside the dropdow n
menu. Following will be the output after running this application.

<rich:SuggestionBox>
<rich:SuggestionBox> is used to provide suggestions to the user depending on the input
provided in the input text box. This tag creates a JS event internally and invokes the required

39
RichFaces

listener class to provide the suggestion from the backend. Unfortunately, this suggestionBox and
ComboBox both are combined into a separate tag called “<rich:autocomplete>” in RichFaces 4,
however, if you are using RichFaces 3, you can use this tag as shown below .

<h:inputText id="city" value="#{capitalsBean.capital}" />

<rich:suggestionbox for="city" var="result"
suggestionAction="#{capitalsBean.autocomplete}">
<h:column>
<h:outputText value="#{result.name}" />
</h:column>
</rich:suggestionbox>

Where “capitalsBean” will be a Java class with different parameters and listener class named
“autocomplete” will set the value of the “capital” instance variable at the runtime and provide
the required output of choice. It is highly recommended to use RichFaces 4 “autocomplete”
instead of using this tag as designers are not supporting this tag any more.

<rich:comboBox>
<rich:comboBox> works exactly similar to <rich:suggestionBox>, however, instead of calling
the listener class, this tag pre-renders some suggestions into the client browser that interacts
with each other and provides the desired output. Like <rich:sugegstionBox>, this feature is also
depreciated in the new version with another tag called as “<rich:autocomplete>” described in
the following code.

Create a separate file and name it as “richAutoComplete.xht ml”. Place the following code in that
file.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
40
RichFaces

<h:form id="form">
<h:form id="form">

<rich:autocomplete mode="cachedAJAX" minChars="2"

autocompleteMethod="#{autoComplete.SubJectList()}"
/>

</h:form>
</h:form>
</h:body>
</html>

In the above example, we are populating the subject list through the autocomplete feature of
RichFaces. Create another Java class and name it is as “autoComplete.java”.

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class autoComplete {

public autoComplete(){}
private List<String> autoCompleteList=new ArrayList<>();
public List<String> SubJectList() {
//ArrayList<String> list = new ArrayList<>();
autoCompleteList.add("JAVA");
autoCompleteList.add("DOTNET");
autoCompleteList.add("COBOL");
autoCompleteList.add("AJAX");
autoCompleteList.add("JAVA SCRIPT");
return autoCompleteList;
}
public List<String> getAutoCompleteList() {

41
RichFaces

return autoCompleteList;
}

public void setAutoCompleteList(List<String> autoCompleteList) {

this.autoCompleteList = autoCompleteList;
}

The above file is acting as the bean class and SubjectList () is the method, which is actually
rendering the response to the browser. In the <SuggestionBox>,<ComboBox> tag we need to
implement the listener class, however, in case of <autocomplete> tag this creation of listener
class has been automated, which is easier for the developer. The above piece of code will yield
the following output in the browser.

<rich:inputNumberSlider>
This is a very straightforward tag that helps the developer create a numeric slider bar depending
on the numeric interval. Create “inputNumberSlider.xht ml” file and place the following code
inside it.

<?xml version="1.0" encoding="UTF-8"?>

42
RichFaces

xmlns:rich="http://richfaces.org/rich">
<h:head>

</h:head>
<h:body>
<h:form>
<h:outputText value="Slide Bar example"></h:outputText>
<rich:inputNumberSlider
minValue="1"
maxValue="10"
showArrows="false"
showTooltip="false"
step="1"
>
</rich:inputNumberSlider>
</h:form>
</h:body>
</html>

In the above example, the attributes are pretty much descriptive. The above piece of code will
yield the following output in the browser.

43
RichFaces

<rich:Calendar>
As the name suggests this tag will help create a calendar in the browser. Create a separate file
and name it as “richCalendar.xhtml”. Place the following code inside it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<h:form>
<h1>Calendar</h1>
<rich:calendar value="#{calendarBean.selectedDate}"
locale="#{calendarBean.locale}"
popup="#{calendarBean.popup}"
datePattern="#{calendar.pattern}"
style="width:200px">
44
RichFaces

</rich:calendar>
</h:form>
</h:body>
</html>

We need to create another class called “calendarBean.java” in order to hold all the calendar
values such as Date, Locale, Date Pattern, etc. Following is the code for “calendarBean.java”.

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import javax.faces.event.ValueChangeEvent;

public class CalendarBean {

private static final String[] WEEK_DAY_LABELS = new String[] { "Sun *",

"Mon +", "Tue +", "Wed +", "Thu +", "Fri +", "Sat *" };
private Locale locale;

private boolean popup;

private boolean readonly;
private boolean showInput;
private boolean enableManualInput;
private String pattern;
private Date currentDate;
private Date selectedDate;
private String jointPoint;
private String direction;
private String boundary;

private boolean useCustomDayLabels;

public Locale getLocale() {

return locale;
}

45
RichFaces

public void setLocale(Locale locale) {

this.locale = locale;
}

public boolean isPopup() {

return popup;
}

public void setPopup(boolean popup) {

this.popup = popup;
}

public String getPattern() {

return pattern;
}

public void setPattern(String pattern) {

this.pattern = pattern;
}

public CalendarBean() {

locale = Locale.US;
popup = true;
pattern = "MMM d, yyyy";
jointPoint = "bottomleft";
direction = "bottomright";
readonly = true;
enableManualInput=false;
showInput=true;
boundary = "inactive";
}

public boolean isShowInput() {

return showInput;

46
RichFaces

public void setShowInput(boolean showInput) {

this.showInput = showInput;
}

public boolean isEnableManualInput() {

return enableManualInput;
}

public void setEnableManualInput(boolean enableManualInput) {

this.enableManualInput = enableManualInput;
}

public boolean isReadonly() {

return readonly;
}

public void setReadonly(boolean readonly) {

this.readonly = readonly;
}

public void selectLocale(ValueChangeEvent event) {

String tLocale = (String) event.getNewValue();

if (tLocale != null) {
String lang = tLocale.substring(0, 2);
String country = tLocale.substring(3);
locale = new Locale(lang, country, "");
}
}

public boolean isUseCustomDayLabels() {

return useCustomDayLabels;
}

47
RichFaces

public void setUseCustomDayLabels(boolean useCustomDayLabels) {

this.useCustomDayLabels = useCustomDayLabels;
}

public Object getWeekDayLabelsShort() {

if (isUseCustomDayLabels()) {
return WEEK_DAY_LABELS;
} else {
return null;
}
}

public String getCurrentDateAsText() {

Date currentDate = getCurrentDate();
if (currentDate != null) {
return DateFormat.getDateInstance(DateFormat.FULL).format(
currentDate);
}

return null;
}

public Date getCurrentDate() {

return currentDate;
}

public void setCurrentDate(Date currentDate) {

this.currentDate = currentDate;
}

public Date getSelectedDate() {

return selectedDate;
}

public void setSelectedDate(Date selectedDate) {

this.selectedDate = selectedDate;

48
RichFaces

public String getJointPoint() {

return jointPoint;
}

public void setJointPoint(String jointPoint) {

this.jointPoint = jointPoint;
}

public void selectJointPoint(ValueChangeEvent event) {

jointPoint = (String) event.getNewValue();
}

public String getDirection() {

return direction;
}

public void setDirection(String direction) {

this.direction = direction;
}

public void selectDirection(ValueChangeEvent event) {

direction = (String) event.getNewValue();
}

public String getBoundary() {

return boundary;
}

public void setBoundary(String boundary) {

this.boundary = boundary;
}

49
RichFaces

The above piece of code will generate the following output in the browser.

<rich:InputNumberSpinner>
This tag helps the developer to create a spinner to populate an instance of a bean. Following is
an example that will help you understand the Spinner tag in detail. Please create a separate
xhtml file and named it as “InputNumberSpinner.xht ml” and place the following code inside it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>

50
RichFaces

<h:body>
<h:form>
<h:outputText value="Select a Date"></h:outputText><br/><br/>
<rich:inputNumberSpinner
minValue="1"
maxValue="31"
step="1"
>
</rich:inputNumberSpinner>
</h:form>
</h:body>
</html>

The above piece of code will yield the following output in the browser.

51
RichFaces
7. RichFaces - Output Components

In the previous chapter, we have learned about different input fields or tags that help the user
provide the inputs through the browser. In this chapter, we will learn about different output
components provided by RichFaces.

<rich:Panel>
In some of our previous examples, we have already come across the panel tag. <rich:panel >
creates a rectangular area inside the webpage, which may contain any information. You can
include other panels, images, and any other rich component s inside one panel.

In the following example, we will create a custom panel according to choice and we will provide
a header to our panel using the “header” attribute. Please create a xhtml file and name it as
“richPanelExamlple.xht ml”. Place the following code inside it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<rich:panel header="RichFace Tutorials "
style="font-size: 500px;
align-items:center;
background-color: activecaption">
RichFace Tutorials Presented by TutorialsPoint.com.

</rich:panel>
</h:body>
52
RichFaces

</html>

The above piece of code will yield the following output in the browser.

<rich:simpleTogglePanel>
The simpleTogglePanel provides an opportunity to the developers to change the contains of the
panel in a dynamic way. However, in RichFaces 4, this tag has been suppressed. JBoss has
introduced advanced tags such as <rich:togglePanel>, <rich:tab>, and <rich:tabPanel>. It is
recommended to use the updated version of RichFaces tags for more features and funct ionalities.
If you are still using RichFaces 3, then you can use the following tag.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<rich:simpleTogglePanel switchType="client" label="SimpleToggle">

The simple example of SimpleToggle tag
</rich:simpleTogglePanel>
</ui:composition>

53
RichFaces

<rich:tabPanel>
This tag helps the developers create different tabs inside a panel. We have used this tag in our
skin chapter, where we have created two separate tags inside another panel. Following code will
describe how we use <rich:tabPanel>.

<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style="width:60 %">
<rich:tabPanel switchType="AJAX">
<rich:tab header="Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header="Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>

</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

In this example, we have created two tabs with different headers called “Name” and “Features”.
These two tags will be created inside the <rich:panel>. The above code will yield the following
output.

54
RichFaces

<rich:panelBar>
Like simpleToggleBar, it allows the developers to implement vertical toggling depending on some
JS event. This tag is also suppressed in RichFaces 4. However, you can use it as shown below if
you are using RichFaces 3.0.

<rich:panelBar height="400" width="500">

<rich:panelBarItem label="Toggle1”>
First vertical toggle
</rich:panelBarItem>
<rich:panelBarItem label=”Toggle2”>
Second Vertical Toggle
</ rich:panelBarItem>
</<rich:panelBar >
</ ui:composition >

In RichFaces 4, the same functionality has been implemented using <rich:PanelMenu> tag.

55
RichFaces

<rich:tab>
We are already familiar with this tag. In the example of <rich:tabPanel>, we have created
different tabs with this tag. In the following example, we have created two tags.

<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Faces Tab Example</title>
</h:head>
<h:body>
<h:form>
<rich:panel style="width:60%">
<rich:tabPanel switchType="AJAX">
<rich:tab header="Name">
Tutorials Point----This is Tab Number 1
</rich:tab>
<rich:tab header="Features">
Best Place to learn -------This is Tab Number 2
</rich:tab>

</rich:tabPanel>
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

56
RichFaces

The above piece of code will generate the following output in the browser.

<rich:panelMenu>
Panel Menu helps the developers create a vertical dropdown toggle inside a panel area. The
following example will help us understand this tag better. Create the “richPanelMenu.xhtml” file
and place the following piece of code inside it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="2" columnClasses="cols,cols" width="400">
<rich:panelMenu style="width:200px">
<rich:panelMenuGroup label="Group 1">
<rich:panelMenuItem label="Database" action="#{managedBean.subjectList}">
<f:param name="current" value="DB"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Oracle" action="#{managedBean.subjectList}">
<f:param name="current" value="Oracle"/>

57
RichFaces

</rich:panelMenuItem>
<rich:panelMenuItem label="JAVA" action="#{man agedBean.subjectList}">
<f:param name="current" value="JAVA"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
</h:panelGrid>
</h:form>
</h:body>
</html>

As seen in the above example, panelMenu comes with some other associated tags which helps
in a different manner. <panelGrid > helps create a grid inside the panel. <panelMenuGro up >
helps group the different components that we are going to populate .<panelMenuItem> is the
actual item that will be rendered to the browser. Using the “action” attribute, you can call
different action methods depending on the item selected. The “label” attribute is used to populate
the value in the front-end and the rendered value will be processed to the back-end once the
specified action class is called.

The above piece of code will yield the following output in the browser.

<rich:TogglePanel>
This tag is used to render different outputs that can be switched or toggled using the Toggle
control method. This toggle control method can be implemented or customized. In the following
example, we will implement this method.

58
RichFaces

Create an xhtml file and name it as “richTogglePanel.xhtml”. Place the following code inside it.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Rich Toggle Panel Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</h:head>
<h:body>
<h:form id="form">
<rich:togglePanel id="panel1" activeItem="item1"
itemChangeListener="#{panelMenuBean.updateCurrent}">
<rich:togglePanelItem name="item1">
<p>Content of the toggle 1</p>
</rich0:togglePanelItem>
<rich:togglePanelItem name="item2">
<p>Content of the toggle 2</p>
</rich:togglePanelItem>
</rich:togglePanel>
<a4j:outputPanel id="tabs" layout="block">
<a4j:outputPanel layout="block" styleClass="tabDiv">
<rich:toggleControl event="click" targetPanel="panel1"
targetItem="item1" />
<a4j:commandButton value="Toggle1"/>
</a4j:outputPanel>
<a4j:outputPanel layout="block" styleClass="tabDiv">
<rich:toggleControl event="click" targetPanel="panel1"
targetItem="item2" />
<a4j:commandButton value="Toggle2"/>
</a4j:outputPanel>
</a4j:outputPanel>
</h:form>
59
RichFaces

</h:body>
</html>

We also need to create a bean class to control the transition of the website . Create
“MenuBean.java” class like the following.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.richfaces.event.ItemChangeEvent;

@ManagedBean
@ViewScoped
public class MenuBean {
private String current;
private boolean singleMode;

public boolean isSingleMode() {

return singleMode;
}

public void setSingleMode(boolean singleMode) {

this.singleMode = singleMode;
}

public String getCurrent() {

return this.current;
}

public void setCurrent(String current) {

this.current = current;
}

public void updateCurrent(ItemChangeEvent event) {

setCurrent(event.getNewItemName());

60
RichFaces

}
}

The above code will yield the following output in the browser.

In the above example, the content of the webpage will be changed depending on the button
clicked by the user. “updateCurrent()” is the method which handles the JS event content and
sets the website content on the go.

<rich:toolBar>
toolBar is used to create a horizontal bar in the panel. It is used to create top level menu in the
webpage. In the following example, we will learn how to use this tag in the webpage. Create a
“xhtml” file and name it as “toolbar.xhml”. Place the following code in it.

<?xml version="1.0" encoding="UTF-8"?>

61
RichFaces

<rich:toolbarGroup location="left">
<h:commandButton styleClass="barsearchbutton" onclick="return false;"
value="TAB" />
</rich:toolbarGroup>
<rich:toolbarGroup location="left">
<h:commandButton styleClass="barsearchbutton" onclick="return false;"
value="TAB2" />
</rich:toolbarGroup>
<rich:toolbarGroup location="left">
<h:commandButton styleClass="barsearchbutton" onclick="return false;"
value="TAB3" />
</rich:toolbarGroup>
</rich:toolbar>
</rich:panel>
</h:body>
</html>

The above code will yield the following output in the browser.

In the above example, <toolbarGroup> tag is used to group different same types of tool. Any
number of groups can be created. Location provides the position of the webpage, where the
button will be placed.

<rich:separator>
As the name suggests, it is used to separate different component s on the webpage. This tag has
been suppressed in RichFaces 4, however, if you are still using RichFaces 3, then you can use
the following tag.

<rich:separator lineType="beveled" height="8" width="75%" align="center"/>

<p>Here is more examples of different line types:</p>

<rich:separator height="2" lineType="dotted"/><br/>
<rich:separator height="2" lineType="dashed"/><br/>
<rich:separator height="4" lineType="double"/><br/>
62
RichFaces

<rich:separator height="2" lineType="solid"/><br/>

In the above example, LineType is the attribute that helps us determine the type of separator
we want to use. All of these separator names are pretty much self-descriptive in nature.

<rich:Spacer>
Spacer is a self-described tag that helps the developer provide a space between two components.
This tag is also suppressed in RichFaces4 along with other tags, however, you can use the
following code if you are using RichFaces 3.

<rich:spacer width="1" height="5" title="Here is a spacer..."/>

<rich:modalPanel>
Modal Panel is used to show a pop-up on the go. In RichFaces 4, the modal panel tag has been
changed to popupPanel. In the following example, we will see how it works. Create a xhtml file
and name it as “PopingUp.xhtml”. Place the following code into it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<h:form>

<h:commandButton value="Click ME">

<rich:componentControl target="popup" operation="show" />
</h:commandButton>
<rich:popupPanel id="popup" modal="true" autosized="false" resizeable="false">
Hey !!!
63
RichFaces

How are you?

</rich:popupPanel>

</h:form>

</h:body>
</html>

The above example will generate the following output when the “ClickMe” button is clicked.

64
RichFaces
8. RichFaces - Iteration Component

In the previous chapters, we have learned about the different input and output component s. In
this chapter, we will learn how to iterate through different data structures in the website.

<rich:dataTable>
This tag is used to render a table as a result in the website. In the following example, we will
render a subject table along with the pro-efficiency level.

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value="#{subject.subjectListObj}" var="record" >
<f:facet name="header">
<h:outputText value="My Profile" />
</f:facet>
<rich:column>
<f:facet name="header">Subject Name</f:facet>
<h:outputText value="#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name="header">efficiency Level</f:facet>
<h:outputText value="#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
65
RichFaces

</h:form>
</h:body>

</html>

We need to change our subject.java accordingly to render the list. Following is an example of
subject.java.

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Subject {

String SubjectName;
private String efficiency;
private List<Subject> subjectListObj=new ArrayList<>();
public Subject() {
}

public Subject(String SubjectName,String efficiency ) {

this.SubjectName = SubjectName;
this.efficiency= efficiency;
}
public String getSubjectName() {
return SubjectName;
}
public void setSubjectName(String SubjectName) {
this.SubjectName = SubjectName;
}
public List<Subject> getSubjectListObj() {
66
RichFaces

subjectListObj.add(new Subject("JAVA","Expert"));
subjectListObj.add(new Subject("DOTNET","NA"));
subjectListObj.add(new Subject("JAVA Script","Expert"));
subjectListObj.add(new Subject("Web Service","Expert"));
subjectListObj.add(new Subject("Consulting","Expert"));
return subjectListObj;
}
public void setSubjectListObj(List<Subject> subjectListObj) {
this.subjectListObj = subjectListObj;
}
public String getEfficiency() {
return efficiency;
}
public void setEfficiency(String efficiency) {
this.efficiency = efficiency;
}

The above example will generate the following output in the browser.

67
RichFaces

<rich: dataDefinitionList >

This is the tag used to generate the data definition from a model. This tag is not supported by
JBoss since the invention of RichFaces 4. If you are still using RichFaces 3, then you can use this
tag in the following manner.

<rich:dataDefinitionList var="car" value="#{dataTableScrollerBean.allCars}" rows="5"

first="4" title="Cars">

<f:facet name="term">

<h:outputText value="#{car.make} #{car.model}"></h:outputText>

</f:facet>

<h:outputText value="Price:" styleClass="label"></h:outputText>

<h:outputText value="#{car.price}" /><br/>

<h:outputText value="Mileage:" styleClass="label"></h:outputText>

<h:outputText value="#{car.mileage}" /><br/>

</rich:dataDefinitionList>

In the above example, “dataTableScrollerBean” is a Java class that is used to generate different
values of the car. This is similar to the previous tag where we populated a bunch of object value
using the <datatable> tag.

68
RichFaces

<rich:dataOrderedList>
RichFaces 4 came up with a wide moderation from RichFaces 3. <dataOrderedList > is a tag used
to render a list in an ordered manner. This too is suppressed in RichFaces 4 because the ordering
of an object or a list is much more easier and less time consuming, if done in Java. If your
application uses RichFaces 3, then you can use this tag in the following manner.

<rich:panel style="width:500px">
<f:facet name="header">
Using rich:dataOrderedList
</f:facet>
<rich:dataOrderedList value="#{airlinesBean.airlines}" var="air">
#{air.name}, #{air.code}
</rich:dataOrderedList>
</rich:panel>

In the above example, “airlinesBean” is a Java bean class with a method named “airlinesBean()”.
This method returns an object of type “air”. Later, we can use this air object to populate different
properties in a table format .

<rich:dataList>
As the tag name suggest s, this tag will be used to render an unordered list into the browser.
However, like <orderedList > this tag is also suppressed in the latest version of RichFaces. We
can easily render a list into the browser using <a4j:Repeat > and <rich:dataTable> tag in the
following way.

<a4j:repeat value="#{managedBean.subjectList}" var="sub">

<h:outputText value="#{sub}"/>
</a4j:repeat>

In the above example, we are rendering a list which is an output of the method called
“subjectList()”. If your application is built in RichFaces 3, then you can use this tag as follows.

<rich:panel style="width:500px">
<f:facet name="header">
Using rich:dataList
</f:facet>
<rich:dataList value="#{airlinesBean.airlines}" var="air">
#{air.name}, #{air.code}
</rich:dataList>

69
RichFaces

</rich:panel>

<rich:dataGrid>
Using the <datatable> tag you will be able to render a list as a table, however, <dataGrid> will
help you render an object or a list. In the previous example of <rich:datatable>, just change
the xhtml page as follows and see what is the output of the same.

<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:panel>
<rich:dataGrid value="#{subject.subjectListObj}" var="record" columns="2"
elements="4" first="1" >
<f:facet name="header">
<h:outputText value="My Profile" />
</f:facet>
<rich:panel>
<rich:column>
<f:facet name="header">Subject Name</f:facet>
<h:outputText value="#{record.subjectName}"/>
</rich:column>
:-
<rich:column>
<f:facet name="header">efficiency Level</f:facet>
<h:outputText value="#{record.efficiency}"/>
</rich:column>

70
RichFaces

</rich:panel>

</rich:dataGrid>
</rich:panel>
</h:form>
</h:body>

</html>

The above piece of code will yield the following output in the browser.

<rich:datascroller>
This tag helps to create a scroll bar while populating the table data. It is pretty similar to the
pagination functionality of the JSF. Modify the previous dataTable example in the following
manner.

<?xml version='1.0' encoding='UTF-8' ?>

<title>Rich Data Table</title>

</h:head>
<h:body>
<h:form>
<rich:dataTable value="#{subject.subjectListObj}" var="record" rows="3"
id="MyTable" >
<f:facet name="header">
<h:outputText value="My Profile" />
</f:facet>
<rich:column>
<f:facet name="header">Subject Name</f:facet>
<h:outputText value="#{record.subjectName}"/>
</rich:column>
<rich:column>
<f:facet name="header">efficiency Level</f:facet>
<h:outputText value="#{record.efficiency}"/>
</rich:column>
</rich:dataTable>
<rich:dataScroller for="MyTa ble" maxPages="3">
<f:facet name="first">
<h:outputText value="1" />
</f:facet>
<f:facet name="last">
<h:outputText value="eof" />
</f:facet>
</rich:dataScroller>
</h:form>
</h:body>

</html>

In the above example, you can add your style for a good look and feel. We have implement ed
separate <dataScroller> tags with different facet value. Following will be the output of the above
file. Update the style sheer attribute in order to synchronize the table and the data scroller.

72
RichFaces

73
RichFaces
9. RichFaces - Selection Components

In this chapter, we will learn about different selection components provided by RichFaces
Technology.

<rich:pickList>
Using this tag, we can select one value from the populated list. It also allows us to add and
remove a list component to another List . Following example demonstrates how this works. Go
ahead and create one xhtml file and name it as “pickListExample.xht ml” and place the following
code in it.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
<h:form>
<h:outputText value="Pick List Example"/><br/><br/>
<rich:pickList value="#{managedBean.subjectList}"
sourceCaption="SubjectList"
targetCaption="Selected Subject"
listWidth="170px"
listHeight="120px"
orderable="true">
<f:selectItems value="#{managedBean.subjectList}" itemValue="#{subject}"
itemLabel="#{subject.subjectName}" />
</rich:pickList>
74
RichFaces

</h:form>
</h:body>
</html>

We need to modify our managedBean.java file to populate the list components in the xhtml file.
Following is the snapshot of our modified Java file.

import java.util.Arrays;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
String job;
private List<String>
SubjectList=Arrays.asList("Richface", "AJAX","JAVA","JSF","DOTNET"," python");
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("setMessage method is getting called with --"+message);
this.message = message;
}
public String getJob() {
return job;
}

public void setJob(String job) {

System.out.println("setJob method is getting called with --"+job);
this.job = job;
}

public List<String> getSubjectList() {

return SubjectList;

75
RichFaces

public void setSubjectList(List<String> SubjectList) {

this.SubjectList = SubjectList;
}

The above piece of code will yield the following output in the browser. The “value” attribute of
the pickList tag is nothing but the “getSubjectList()” of the bean class. “itemValue” is the
abbreviation of the object class and the corresponding “itemLabel” is the instance value name .
In this example, our pickList tag automatically creates two separate lists named “sourceCaption”
and “targetCaption”. Attribute orderable is used to maintain the selection order in the target
List.

<rich:orderingList>
This tag is used to render a list as a whole. <orderingList > will automatically provide some
button like function to propagate through the list and it helps order a selected item. In the
following example, we will create one orderingList using the following code for
“OrderingListExample.xht ml”.

<?xml version="1.0" encoding="UTF-8"?>

76
RichFaces

</h:head>
<h:body>
<h:form>
<h:outputText value="ordering List Example"/><br/><br/>
<rich:orderingList value="#{managedBean.subjectList}"
itemValue="#{subject}"
itemLabel="#{subject.subjectName}" >
</rich:orderingList>
</h:form>
</h:body>
</html>

We need not to change our bean class as we are populating the same list again using different
tag for different representation. Like the previous example, even here the value attributes hold
the entire list coming from “getSubjectList()”. “itemValue” and “itemLabel” holds the value of
the object class and corresponding instance variable respectively.

The above piece of code will produce the following output in the browser.

77
RichFaces

<rich:ListShuttle >
ListShuttle tag is available in RichFaces 3. It helps propagate through one list and put s the same
value into another. In RichFaces 4, this tag has been suppressed because the same functionality
can be achieved by another new tag named <rich:pickList> as described above. If you are using
RichFaces 3.0, then you can use this tag in the following manner.

<rich:listShuttle sourceValue="#{toolBar.freeItems}"
targetValue="#{toolBar.items}" var="items" listsHeight="150"
sourceListWidth="130" targetListWidth="1 30" sourceCaptionLabel="Available
Items"
targetCaptionLabel="Currently Active Items"
converter="listShuttleconverter">
<rich:column width="18">
<h:graphicImage value="#{items.iconURI}"></h:graphicImage>
</rich:column>
<rich:column>
<h:outputText value="#{items.label}"></h:outputText>
</rich:column>
<a4j:support event="onlistchanged" reRender="toolBar" />
<a4j:support event="onord erchanged" reRender="toolBar" />
</rich:listShuttle>

78
RichFaces

It is very convenient to use pickList rather than using this tag, as the same functionality can be
achieved using pickList by writing only two lines of code.

79
RichFaces
10. RichFaces - Menu Components

RichFaces provides a wide version of tags to be used for creating a menu type markup. In this
chapter, we will learn some new features along with the old ones using which we can easily
render a menu in the browser.

<rich:dropDownMenu>
Using this tag, the developer can create a dropdown menu. This tag is useful for creating the
header of a website. In the following example, we will learn how to use this tag in practical life.
Create one file and name it as “DropDownList.xht ml”. Place the following code inside it.

<?xml version="1.0" encoding="UTF-8"?>

80
RichFaces

</h:body>
</html>

In the above example, we are creating one toolbar and inside that toolbar we are creating one
dropdown menu. Any number of dropdown menus can be created. If you want to insert any
action-based JS function, then you can implement that inside <menuItem> tag with the attribute
as “action”. The above piece of code will generate the following output in the browser.

<rich:contextMenu>
This tag is useful to generate event-based dropdown on the client side. It will not work
automatically. Users need to create the JS event and then it works accordingly. In the following
example, we will create the render image and then create the JS events based on the users
response. Following is the xhtml file.

<?xml version="1.0" encoding="UTF-8"?>

</h:head>
<h:body>
81
RichFaces

<h:form id="form">
<h:outputScript>
//<![CDATA[
function resize(pic, coeff) {
var w = Math.round(pic.width * coeff);
var h = Math.round(pic.height * coeff);

if (w > 1 && h > 1 && h<1000 && w<1000) {

pic.width = w;
pic.heigth = h;
}
}

function enlarge(element){
resize(element, 1.1);
}

function decrease(element){
resize(element, 0.9);
}
//]]>
</h:outputScript>

<h:graphicImage value="http://www.tutorialspoint.com/images/jsf-mini-
logo.png" id="pic" style="border : 5px solid #E4EAEF"/>
<rich:contextMenu target="pic" mode="client" showEvent="click">
<rich:menuItem label="Zoom In" onclick="enlarge(#{rich:element('pic')});"
id="zin"/>
<rich:menuItem label="Zoom Out"
onclick="decrease(#{rich:element('pic')});" id="zout"/>
</rich:contextMenu>
</h:form>
</h:body>
</html>

82
RichFaces

Run the above example and select the rendered image. Following options “Zoom In” and “Zoom
out” will be presented. Click the appropriate option and the required functionality will be applied
to the image. The above piece of code will generate the following output in the browser.

<rich:Component Control>
This component is user-friendly whenever we want to call any other function from the RichFaces
environment. This tag is used to call JavaScript-based action classes. Following example
demonstrates how this tag can be used. Create a file and name it as “componentContent.xht ml”
file. Place the following piece of code in it.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Component Control Example</title>

83
RichFaces

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</h:head>
<h:body>
<h:commandButton value="Call the popup">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true"
resizeable="false">
<f:facet name="header">
<h:outputText value="Welcome mesage" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;" style="color: inherit">
X
</h:outputLink>
</f:facet>
<p>Welcome to RICH FACE tutorial at tutorialspoint.com
</p>
</rich:popupPanel>
</h:body>
</html>

In the above code, we are calling “onclick()” function using a id “popup”. Once we run it, it shows
a button with “Call the popup”. Once we click the button, RichFaces internally calls the JS function
and provides the following output in the browser.

84
RichFaces

85
RichFaces
11. RichFaces - Rich-Tree

In this chapter, we will learn about tree processing in RichFaces. RichFaces provide all the
required components to create and manipulate a tree.

<rich:treeNode>
This tag is used to create a hierarchical tree. Each node provided inside the <treeNode> will be
a child node of the tree. This tag will be used with another tag called <rich:tree>. All the instance
variables we are using to create a tree must implement any of these three interfaces -
org.richfaces.model.Tree Node, org.richfaces.model.Tree DataModel, and
javax.swing.tree.TreeNode.

In the following example, we will populate a tree using <rich:treeNode> tag from the backend.

<?xml version="1.0" encoding="UTF-8"?>

</rich:treeModelRecursiveAdaptor>
<h:outputText value="#{tree.data}" />
</rich:treeNode>

86
RichFaces

</rich:tree>
</h:form>
</h:body>
</html>

Following is the related java class that implement s “TreeNodeImpl” interface.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.richfaces.model.TreeNodeImpl;

@ManagedBean
@RequestScoped
public class Tree extends TreeNodeImpl {
private Tree stationRoot;
private Tree populateNode;
private Object data;

public Tree() {
super();
}
public Tree(boolean leaf, Object data) {
super(leaf);
this.data = data;
}
public Object getData() {
return data;
}

public Tree getPopulateNode() {

if (populateNode == null) {
String[] List_OF_Node = {"Frist Node",
"Second Node",
"Third Node",
"Fourth Node",
"Fifth Node"};
stationRoot = new Tree(false, "Example Of Tree");

87
RichFaces

for (int i = 0; i < List_OF_Node.length; i++) {

Tree child = new Tree(true, List_OF_Node[i]);
stationRoot.addChild(i, child);
}
populateNode = new Tree();
populateNode.addChild(0, stationRoot);
}
return populateNode;
}
}

The above piece of code will produce the following output in the browser.

<rich:treeModelAdaptor>
This component takes a Map as an input , iterates through it, and produces the required output
in the browser. Whenever we need to populate a recursive map, we can use another tag called
<rich:recursiveTreeModelAdaptor>.

The following example shows how to render the project structure in the browser. In RichFaces
3, these two tags are used <rich:treeNodeAdaptor> and <rich:recursiveTreeNodeAdaptor>.

<?xml version="1.0" encoding="UTF-8"?>

<title>Tree Model and Recursive Model Example</title>

</h:head>
<h:body>
<h:form id="form">
<rich:tree toggleType=" AJAX" var="item" style="max-width: 400px">
<rich:treeModelRecursiveAdaptor roots="#{fileSystemBean.sourceRoots}"
nodes="#{item.directories}">
<rich:treeNode>
#{item.shortPath}
</rich:treeNode>
<rich:treeModelAdaptor nodes="#{item.files}">
<rich:treeNode>#{item}</rich:treeNode>
</rich:treeModelAdaptor>
</rich:treeModelRecursiveAdaptor>
</rich:tree>
</h:form>
</h:body>
</html>

We need to create two new java beans for this example. Following is the code snippet for bean
class ”FileSystemBean.java”, which holds the required folder name.

import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class FileSystemBean {
private static final String SRC_PATH = "/WEB-INF";
private List<FileSystemNode> srcRoots;

public synchronized List<FileSystemNode> getSourceRoots() {

if (srcRoots == null) {
89
RichFaces

srcRoots = new FileSystemNode(SRC_PATH).getDirectories();

}

return srcRoots;
}
}

Following is the code snippet for bean class “FileSystemNode.java”, which holds the required the
leaf node of the project.

import static com.google.common.base.Predicates.containsPattern;

import static com.google.common.base.Predicates.not;
import static com.google.common.collect.Iterables.filter;
import static com.google.common.collect.Iterables.transform;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Set;

import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;

import com.google.common.base.Function;
import com.google.common.collect.Iterables;
import com.google.common.collect.Lists;

public class FileSystemNode {

private static final Function<String, FileSystemNode> FACTORY = new
Function<String, FileSystemNode>() {
public FileSystemNode a pply(String from) {
return new FileSystemNode(from.substring(0, from.length() - 1));
};
};

private static final Function<String, String> TO_SHORT_PATH = new

Function<String, String>() {

90
RichFaces

public String apply(String from) {

int idx = from.lastIndexOf('/');

if (idx < 0) {
return from;
}

return from.substring(idx + 1);

};
};

private String path;

private List<FileSystemNode> directories;
private List<String> files;
private String shortPath;

public FileSystemNode(String path) {

this.path = path;
int idx = path.lastIndexOf('/');
if (idx != -1) {
shortPath = path.substring(idx + 1);
} else {
shortPath = path;
}
}

public synchronized List<FileSystemNode> getDirectories() {

if (directories == null) {
directories = Lists.newArrayList();

Iterables.addAll(directories, transform(filter(getResourcePaths(),
containsPattern("/$")), FACTORY));
}

return directories;
}

91
RichFaces

public synchronized List<String> getFiles() {

if (files == null) {
files = new ArrayList<String>();

Iterables.addAll(files, transform(filter(getResourcePaths(),
not(containsPattern("/$"))), TO_SHORT_PATH));
}

return files;
}

private Iterable<String> getResourcePaths() {

FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
Set<String> resourcePaths = externalContext.getResourcePaths(this.path);

if (resourcePaths == null) {
resourcePaths = Collections.emptySet();
}

return resourcePaths;
}

public String getShortPath() {

return shortPath;
}
}

The above example will produce the following output in the browser.

92
RichFaces

93
RichFaces
12. RichFaces - Error Handling

In this chapter, we will learn about different error handling methods that can be implemented in
RichFaces.

Server Side & Client Side Error Handling

We need to go through the pretty old Java technique (try/Catch) to handle the action class based
exceptions. For client side, we can add one extra file, which will show the error message
whenever an error has occurred on the client side.

Following code snippet can be added in web.xml in order to handle errors on the client side.

<error-page>
<exception-type>java.lang.Throwable</exception-type>
<location>/error.xhtml</location>
</error-page>

Note, the above exception will provide only static exception messages and we might have to use
JSF “ExceptionHandler” class in order to use dynamic exception property. At runtime, RichFaces
provides some features t o validate the input fields, which can be used as a primary building
block of the exception in the application.

Create a new file and place the following code in it.

<?xml version="1.0" encoding="UTF-8"?>

94
RichFaces

<h:form id="form">
<rich:panel>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Student Registration" />
<a4j:status>
<f:facet name="start">
<h:graphicImage value="/images/ai.gif"
style="height:12px;width:12px;" alt="ai" />
</f:facet>
</a4j:status>
</h:panelGroup>
</f:facet>
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{student.name}" id="name" label="name">
<f:validateLength minimum="3" maximum="8" />
<f:validateRequired />
<rich:validator />
</h:inputText>
<rich:message for="name" />
<h:outputText value="Email" />
<h:inputText value="#{student.email}" id="email"
validatorMessage="Ivalid email address">
<f:validateRegex
pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-
Z]{2,5}){1,25})+([;.](([a -zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-
Z]{2,5}){1,25})+)*$" />
<rich:validator />
</h:inputText>
<rich:message for="email" />
<h:outputText value="Age" />
<h:inputText value="#{student.age}" id="age" label="age">
<f:validateLongRange minimum="18" maximum="99" />
<rich:validator />
</h:inputText>
<rich:message for="age" />

95
RichFaces

</h:panelGrid>
</rich:panel>
</h:form>
</h:body>
</html>

Corresponding java class should be a normal bean class like the following.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Student {
private String name;
private String email;
private int age;

public String getName() {

return name;
}

public void setName(String nam e) {

this.name = name;
}

public String getEmail() {

return email;
}

public void setEmail(String email) {

this.email = email;
}

96
RichFaces

public int getAge() {

return age;
}

public void setAge(int age) {

this.age = age;
}

The above example will yield the following output in the browser, whenever there will be an error
in the <h:form>.

Resource Loading
RichFaces improves standard resource handling procedure in JSF application. This can be
implemented either by configuring ResourceServlet or by Resource optimization. To configure
ResourceServlet, we need to add the following piece of code in web.xml.

<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/org.richfaces.resources/*</url-pattern>
</servlet-mapping>

97
RichFaces

We can also enable the optimization in the JSF application, which will optimize different
JavaScript and CSS files. We need to add the following code in order to achieve the optimization
in the application.

<context-param>
<param-name>org.richfaces.resourceOptimization.enabled</param -name>
<param-value>true</param-value>
</context-param>

Youth Centre (Introduction) : Need of Project
No ratings yet
Youth Centre (Introduction) : Need of Project
8 pages
The Girl Before Extract
No ratings yet
The Girl Before Extract
26 pages
Vicidial - Load Balancing Setup
No ratings yet
Vicidial - Load Balancing Setup
8 pages
Vaadin Tutorial
100% (1)
Vaadin Tutorial
75 pages
JSP Tutorial
100% (1)
JSP Tutorial
280 pages
Spring Batch Tutorial
50% (2)
Spring Batch Tutorial
14 pages
Mis Tutorial
100% (1)
Mis Tutorial
59 pages
Phalcon Tutorial
100% (1)
Phalcon Tutorial
101 pages
Jython Tutorial PDF
0% (1)
Jython Tutorial PDF
18 pages
What Is Model-View-Controller (MVC) Architecture?
No ratings yet
What Is Model-View-Controller (MVC) Architecture?
8 pages
Microstrategy Tutorial
100% (2)
Microstrategy Tutorial
119 pages
Css Tutorial PDF
0% (3)
Css Tutorial PDF
28 pages
Eclipse Tutorial
100% (1)
Eclipse Tutorial
88 pages
Perl Tutorial PDF
100% (1)
Perl Tutorial PDF
551 pages
MVC Tutorial PDF
No ratings yet
MVC Tutorial PDF
37 pages
Java8 Tutorial PDF
No ratings yet
Java8 Tutorial PDF
59 pages
A Simple CRUD Tutorial Using Java Servlet
No ratings yet
A Simple CRUD Tutorial Using Java Servlet
18 pages
Java8 Tutorial
100% (1)
Java8 Tutorial
53 pages
Hendra - Fiori Develop
No ratings yet
Hendra - Fiori Develop
9 pages
Log4j Tutorial
100% (1)
Log4j Tutorial
42 pages
Java Dip Tutorial PDF
No ratings yet
Java Dip Tutorial PDF
149 pages
Nodejs Tutorial
100% (2)
Nodejs Tutorial
169 pages
Webrtc Tutorial
100% (1)
Webrtc Tutorial
187 pages
Reactjs Tutorial
0% (2)
Reactjs Tutorial
13 pages
What Is Struts?
No ratings yet
What Is Struts?
55 pages
1.1 Java Full Stack - ByteBrains Technology
No ratings yet
1.1 Java Full Stack - ByteBrains Technology
29 pages
Full Stack Development Concept
No ratings yet
Full Stack Development Concept
67 pages
Coding at The Lowest Level
No ratings yet
Coding at The Lowest Level
27 pages
Maven Tutorial PDF
100% (3)
Maven Tutorial PDF
122 pages
TutorialsPoint Node.js
0% (1)
TutorialsPoint Node.js
145 pages
Design Pattern Tutorial
100% (2)
Design Pattern Tutorial
167 pages
(Ebooks PDF) Download Understanding Oracle APEX 20 Application Development: Think Like An Application Express Developer Edward Sciore Full Chapters
100% (6)
(Ebooks PDF) Download Understanding Oracle APEX 20 Application Development: Think Like An Application Express Developer Edward Sciore Full Chapters
62 pages
Opencv Python Tutorial
100% (1)
Opencv Python Tutorial
88 pages
C Standard Library PDF
100% (2)
C Standard Library PDF
274 pages
Go Tutorial
100% (2)
Go Tutorial
131 pages
Testlink Tutorial
100% (1)
Testlink Tutorial
126 pages
Full Stack Web Development Outlines: HTML 5
100% (1)
Full Stack Web Development Outlines: HTML 5
4 pages
JavaScript - Quick Guide
No ratings yet
JavaScript - Quick Guide
139 pages
Mybatis Tutorial PDF
No ratings yet
Mybatis Tutorial PDF
69 pages
Software Testing Tutorial
100% (1)
Software Testing Tutorial
27 pages
Richfaces Reference
No ratings yet
Richfaces Reference
889 pages
Richfaces Reference
100% (1)
Richfaces Reference
884 pages
Richfaces Reference
No ratings yet
Richfaces Reference
488 pages
Richfaces Reference
No ratings yet
Richfaces Reference
488 pages
Richfaces Reference
No ratings yet
Richfaces Reference
490 pages
Richfaces Usersguide
100% (4)
Richfaces Usersguide
798 pages
Richfaces Reference
100% (10)
Richfaces Reference
794 pages
03 Richfaces
No ratings yet
03 Richfaces
21 pages
10K Blueprint
From Everand
10K Blueprint
Cian O Farrell
5/5 (2)
J Richfaces PDF
No ratings yet
J Richfaces PDF
22 pages
RichFaces - Developer - Guide
No ratings yet
RichFaces - Developer - Guide
98 pages
Develop Applications Using Richfaces 4: Developer Guide
No ratings yet
Develop Applications Using Richfaces 4: Developer Guide
98 pages
Richfaces Reference
No ratings yet
Richfaces Reference
498 pages
Richfaces RefCard
100% (1)
Richfaces RefCard
6 pages
(Ebook) JBoss RichFaces 3.3 by Filocamo, Demetrio ISBN 9781847196880, 1847196888instant download
100% (7)
(Ebook) JBoss RichFaces 3.3 by Filocamo, Demetrio ISBN 9781847196880, 1847196888instant download
52 pages
Business Ideas for 21st Centuary Entrepreneurs: 50+ Profitable Business Ventures.
From Everand
Business Ideas for 21st Centuary Entrepreneurs: 50+ Profitable Business Ventures.
Rokani Lawrence
No ratings yet
Blog Smarter, Not Harder: SEO, Blogging, and AI Strategies to Skyrocket Your Traffic
From Everand
Blog Smarter, Not Harder: SEO, Blogging, and AI Strategies to Skyrocket Your Traffic
Jay Nans
No ratings yet
Learning Solidworks 2018: A Project Based Approach
From Everand
Learning Solidworks 2018: A Project Based Approach
Prof. Sham Tickoo
No ratings yet
Software Patterns Made Easy
From Everand
Software Patterns Made Easy
Justice Nanhou
No ratings yet
Autodesk Fusion 360: A Tutorial Approach
From Everand
Autodesk Fusion 360: A Tutorial Approach
Prof. Sham Tickoo
No ratings yet
JSF+Facelets+Richfaces Installation-Guide: Libraries
No ratings yet
JSF+Facelets+Richfaces Installation-Guide: Libraries
5 pages
Aquaponics for Profit
From Everand
Aquaponics for Profit
David H Dudley
No ratings yet
CUSTOMER Agence PME PNB 2017 ENG 2017 DEP 2017 MMM 2017 Mat - Ancien
No ratings yet
CUSTOMER Agence PME PNB 2017 ENG 2017 DEP 2017 MMM 2017 Mat - Ancien
2 pages
Codpv Ccpme Ccspme Mat - Ccpme - Mat - Ccpme - Mat - Ccspme: Sheet1
No ratings yet
Codpv Ccpme Ccspme Mat - Ccpme - Mat - Ccpme - Mat - Ccspme: Sheet1
1 page
Tensorflow Dev Summit Viewing Party - Tunis
No ratings yet
Tensorflow Dev Summit Viewing Party - Tunis
1 page
Afrique
No ratings yet
Afrique
4 pages
Data Extract From Indicateurs Du Développement Dans Le Monde
No ratings yet
Data Extract From Indicateurs Du Développement Dans Le Monde
4 pages
Logo Tutorial
100% (2)
Logo Tutorial
40 pages
Pyspark Tutorial
100% (2)
Pyspark Tutorial
27 pages
CUSTOMER Agence PME PNB 2017 ENG 2017 DEP 2017 MMM 2017 Mat - Ancien
No ratings yet
CUSTOMER Agence PME PNB 2017 ENG 2017 DEP 2017 MMM 2017 Mat - Ancien
2 pages
Inter Process Communication Tutorial
100% (1)
Inter Process Communication Tutorial
138 pages
Gson Tutorial
0% (1)
Gson Tutorial
13 pages
d3js Tutorial
0% (1)
d3js Tutorial
23 pages
Openshift Tutorial
80% (5)
Openshift Tutorial
110 pages
Minimum Space Requirements PDF
No ratings yet
Minimum Space Requirements PDF
4 pages
PDF
No ratings yet
PDF
17 pages
Ethernet Configuration Fc11 Guide PDF
No ratings yet
Ethernet Configuration Fc11 Guide PDF
2 pages
RET System NT 11jun2012
No ratings yet
RET System NT 11jun2012
55 pages
Universal ASIO Driver For WDM Audio: - Instruction Manual
No ratings yet
Universal ASIO Driver For WDM Audio: - Instruction Manual
3 pages
Sample Electrical Plan
No ratings yet
Sample Electrical Plan
1 page
9 Internet
No ratings yet
9 Internet
36 pages
How To Make An Architectural Portfolio
No ratings yet
How To Make An Architectural Portfolio
16 pages
Rammedearth 180816064240 PDF
100% (3)
Rammedearth 180816064240 PDF
14 pages
04 WIS5 MechanicalTesting 2006
100% (1)
04 WIS5 MechanicalTesting 2006
114 pages
Sika Unitherm-38091 Interior 2010-05 - 1
No ratings yet
Sika Unitherm-38091 Interior 2010-05 - 1
3 pages
Harga PC Branded PDF
No ratings yet
Harga PC Branded PDF
25 pages
Aci 304.2R-96
No ratings yet
Aci 304.2R-96
25 pages
Different Types of Vacuum Cleaners Used in Housekeeping
No ratings yet
Different Types of Vacuum Cleaners Used in Housekeeping
8 pages
Web Dynpro Abap - Scn1
No ratings yet
Web Dynpro Abap - Scn1
39 pages
Xpclaves
No ratings yet
Xpclaves
2 pages
New Giza Kingsrange - VILLAS
No ratings yet
New Giza Kingsrange - VILLAS
28 pages
Visual Basic Programming
100% (2)
Visual Basic Programming
117 pages
Setup Guide Mediatrix3000 Rev 02
No ratings yet
Setup Guide Mediatrix3000 Rev 02
61 pages
Vpls Auto BGP RR
No ratings yet
Vpls Auto BGP RR
16 pages
Title Name (24 Font Size) : Uttaranchal University
No ratings yet
Title Name (24 Font Size) : Uttaranchal University
13 pages
Layered Paging in Idle Mode (RAN16.0 - 01)
No ratings yet
Layered Paging in Idle Mode (RAN16.0 - 01)
52 pages
Soil Investigation Report: Item Page No
No ratings yet
Soil Investigation Report: Item Page No
6 pages
(CQHP) Guidelines For Architecture
No ratings yet
(CQHP) Guidelines For Architecture
23 pages
Method Statement For Taxiway Edge Lights & Manholes
100% (1)
Method Statement For Taxiway Edge Lights & Manholes
7 pages
Natural Ventilation
No ratings yet
Natural Ventilation
4 pages
Structural Analysis of Five-Storey Building: Location: Old Buswang, Kalibo, Aklan
No ratings yet
Structural Analysis of Five-Storey Building: Location: Old Buswang, Kalibo, Aklan
9 pages