Developer Guide

Develop applications
using RichFaces 4
by Brian Leathem (Red Hat), Lukas Fryc (Red Hat), and Sean Rogers (Red Hat)
1. Introduction ................................................................................................................. 1
2. Getting started with RichFaces ................................................................................... 3
2.1. Technical Requirements ...................................................................................... 3
2.1.1. Project libraries and dependencies ............................................................ 3
2.2. Development environments ................................................................................. 5
2.3. Setting up RichFaces .......................................................................................... 5
2.4. Creating a project with JBoss Tools ..................................................................... 6
2.5. Creating a project with Maven ............................................................................. 6
2.5.1. Setting up Maven ..................................................................................... 6
2.5.2. Using the RichFaces project archetype ...................................................... 7
2.6. Using RichFaces in existing JSF 2 projects ........................................................ 10
3. RichFaces overview ................................................................................................... 11
3.1. Full technical requirements ................................................................................ 11
3.1.1. Server requirements ............................................................................... 11
3.1.2. Client requirements ................................................................................ 11
3.1.3. Development requirements ..................................................................... 11
3.2. Architecture ...................................................................................................... 12
3.2.1. Ajax Action Components ......................................................................... 12
3.2.2. Ajax Containers ...................................................................................... 12
3.2.3. Ajax Output ............................................................................................ 12
3.2.4. Skins and theming ................................................................................. 12
3.2.5. RichFaces Ajax Extensions ..................................................................... 13
3.3. Technologies .................................................................................................... 13
3.4. Differences between JSF and RichFaces mechanisms ........................................ 13
3.5. Restrictions ....................................................................................................... 13
4. Basic concepts .......................................................................................................... 15
4.1. Sending an Ajax request ................................................................................... 15
4.2. Partial tree processing ...................................................................................... 15
4.3. Partial view updates .......................................................................................... 16
4.4. Component overview ......................................................................................... 16
5. Advanced features ..................................................................................................... 17
5.1. JSF 2 integration .............................................................................................. 17
5.2. Error handling ................................................................................................... 17
5.2.1. Client-side errors .................................................................................... 17
5.2.2. Server-side errors .................................................................................. 17
5.3. Other functions ................................................................................................. 17
5.4. Resource loading .............................................................................................. 17
5.4.1. Configuring ResourceServlet ................................................................... 18
5.4.2. Resource optimization ............................................................................ 18
5.4.3. Resource mapping ................................................................................. 19
6. Skinning and theming ................................................................................................ 21
6.1. What are skins? ................................................................................................ 21
6.2. Using skins ....................................................................................................... 21
6.3. Skinning overview ............................................................................................. 22

iii
Developer Guide

6.3.1. Skin parameter tables ............................................................................ 22

6.3.2. Support for round corners ....................................................................... 24
6.3.3. ECSS files ............................................................................................. 24
6.4. Customizing skins ............................................................................................. 25
6.4.1. Creating a new skin ............................................................................... 26
6.5. Changing skins at runtime ................................................................................. 27
6.6. Skinning standard controls ................................................................................ 29
6.6.1. Automatic skinning ................................................................................. 29
6.6.2. Skinning with the rfs-ctn class ................................................................. 29
A. Style classes and skin parameters ............................................................................... 31
A.1. Processing management ................................................................................... 31
A.1.1. <a4j:log> ............................................................................................... 31
A.2. Rich inputs ....................................................................................................... 33
A.2.1. <rich:autocomplete> ............................................................................... 33
A.2.2. <rich:calendar> ...................................................................................... 34
A.2.3. <rich:editor> .......................................................................................... 40
A.2.4. <rich:fileUpload> .................................................................................... 41
A.2.5. <rich:inplaceInput> ................................................................................. 43
A.2.6. <rich:inputNumberSlider> ....................................................................... 45
A.2.7. <rich:inputNumberSpinner> .................................................................... 46
A.3. Rich selects ..................................................................................................... 47
A.3.1. <rich:inplaceSelect> ............................................................................... 47
A.3.2. <rich:select> .......................................................................................... 50
A.3.3. <rich:orderingList> ................................................................................. 51
A.3.4. <rich:pickList> ........................................................................................ 52
A.4. Panels and containers ...................................................................................... 54
A.4.1. <rich:panel> ........................................................................................... 54
A.4.2. <rich:accordion> .................................................................................... 54
A.4.3. <rich:collapsiblePanel> ........................................................................... 56
A.4.4. <rich:popupPanel> ................................................................................. 57
A.4.5. <rich:tabPanel> ...................................................................................... 58
A.5. Tables and grids .............................................................................................. 60
A.5.1. <rich:dataTable> .................................................................................... 60
A.5.2. <rich:collapsibleSubTable> ..................................................................... 62
A.5.3. <rich:collapsibleSubTableToggler> .......................................................... 64
A.5.4. <rich:extendedDataTable> ...................................................................... 65
A.5.5. <rich:dataGrid> ...................................................................................... 67
A.5.6. <rich:list> ............................................................................................... 69
A.5.7. <rich:dataScroller> ................................................................................. 69
A.6. Trees ............................................................................................................... 71
A.6.1. <rich:tree> ............................................................................................. 71
A.6.2. <rich:treeNode> ..................................................................................... 71
A.7. Menus and toolbars .......................................................................................... 73
A.7.1. <rich:dropDownMenu> ........................................................................... 73

iv
 A.7.2. <rich:contextMenu> ................................................................................ 75
A.7.3. <rich:panelMenu> .................................................................................. 76
A.7.4. <rich:toolbar> ......................................................................................... 81
A.8. Output and messages ....................................................................................... 82
A.8.1. <rich:message> ..................................................................................... 82
A.8.2. <rich:messages> .................................................................................... 83
A.8.3. <rich:notify> ........................................................................................... 83
A.8.4. <rich:notifyMessage> ............................................................................. 84
A.8.5. <rich:notifyStack> ................................................................................... 85
A.8.6. <rich:progressBar> ................................................................................. 86
A.8.7. <rich:tooltip> .......................................................................................... 86
A.9. Drag and drop .................................................................................................. 87
A.9.1. <rich:dropTarget> ................................................................................... 87
A.9.2. <rich:dragIndicator> ............................................................................... 87
B. Migration Notes ........................................................................................................... 89
B.1. RichFaces 4.3.0.Final ....................................................................................... 89
B.1.1. Built-in sorting and filtering controls ......................................................... 89
B.1.2. NotifyMessage string escaping ............................................................... 89
B.1.3. Select input validation ............................................................................ 89
C. Revision History .......................................................................................................... 91

v
vi
Chapter 1.

Introduction
The RichFaces framework is a rich component library for JavaServer Faces (JSF). The framework
extends the JSF framework's Ajax capabilities with advanced features for enterprise web
application development.

RichFaces leverages several parts of the JSF 2 framework including lifecycle, validation,
conversion facilities, and management of static and dynamic resources. The RichFaces
framework includes components with built-in Ajax support and a customizable look-and-feel that
can be incorporated into JSF applications.

RichFaces provides a number of advantages for enterprise web application development:

• Create complex application views using out-of-the-box components. The RichFaces user
interface (UI) library (rich) contains components for adding rich interactive features to JSF
applications. It extends the RichFaces framework to include a large set of Ajax-enabled
components that come with extensive skinning support. Additionally, the RichFaces framework
is designed to be used seamlessly with other 3d-party libraries on the same page, so you have
more options for developing applications.

• Write your own customized rich components with built-in Ajax support. The Component
Development Kit (CDK), used for the RichFaces UI library creation, includes a code-generation
facility and a templating facility using XHTML (extended hyper-text markup language) syntax.

• Generate binary resources on the fly. Extensions to JSF 2 resource-handling facilities can
generate images, sounds, Microsoft Excel spreadsheets, and more during run-time.

• Create a modern rich user-interface with skinning technology. RichFaces provides a skinning
feature that allows you to define and manage different color schemes and other parameters of
the look and feel. It is possible to access the skin parameters from page code during run-time.
RichFaces comes packaged with a number of skins to get you started, but you can also easily
create your own customized skins too.

1
2
Chapter 2.

Getting started with RichFaces

Follow the instructions in this chapter to configure the RichFaces framework and get started with
application development.

If you have existing projects that use a previous version of RichFaces, refer to the RichFaces
Migration Guide.

2.1. Technical Requirements

The minimum technical requirements needed to get started with RichFaces are outlined below.

• Java Development Kit (JDK) 6 or higher

• An application server compliant with Java Platform, Enterprise Edition 6 (JEE6), such as JBoss
Application Server 7 or a servlet container coupled with a JSF implementation, such as Apache
Tomcat + Mojarra 2.x.

• A compliant web browser, such as Firefox 17, Chrome 23, or Internet Explorer 9

2.1.1. Project libraries and dependencies

RichFaces library comes in form of Java archives for Core Framework and Components.

RichFaces libraries

• richfaces-core-api.jar

• richfaces-core-impl.jar

• richfaces-components-api.jar

• richfaces-components-ui.jar

The framework depends on third-party dependencies which can be classified to mandatory and
optional (libraries enabling certain functionality).

Note that these dependencies may depend on their own runtime dependencies.

Mandatory third-party dependencies

• Java Server Faces 2.x implementation

3
Chapter 2. Getting started wi...

• javax.faces.jar (version 2.1.5 or higher)

• or myfaces-impl.jar (version 2.1.5 or higher)

• Google Guava

• guava.jar (version 10.0.1)

• CSS Parser

• cssparser.jar (version 0.9.5)

• Simple API for CSS

• sac.jar (version 1.3)

Optional third-party dependencies

• Bean validation (JSR-303) integration for client-side validation (JSR-303 API and
Implementation)

• validation-api.jar (version 1.0.0.GA)

• hibernate-validator.jar (version 4.2.0.Final or higher)

• Push transport library - Atmosphere (without dependencies)

• atmosphere-runtime.jar (version 1.0.10)

(selected compatibility modules atmosphere-compat-*.jar may be necessary)

• Push JMS integration (JMS API and Implementation)

• jms.jar (version 1.1)

• hornetq-jms.jar (version 2.2.7.Final or higher)

• Push CDI integration (CDI API and Implementation)

• cdi-api.jar (version 1.0-SP4)

• javax.inject.jar (version 1)

• jsr-250-api.jar (version 1.0)

• weld-servlet.jar (version 1.1.4.Final)

• Extended caching (EhCache)

• ehcache.jar (version 1.6.0)

4
 Development environments

Dependencies for servlet containers

Some of dependencies are part of Java EE 6 specification and thus it is not
necessary to include them in projects running on Java EE applications servers.

It is still necessary to include them on servlet containers.

Dependencies on Servlet API, JSP API and EL API are excluded since these are
integral parts of both application servers and servlet containers.

2.2. Development environments

RichFaces applications can be developed using a range of tools, including integrated development
environments (IDEs). This chapter covers only two such environments in detail:

• JBoss Tools, as described in Section 2.4, “Creating a project with JBoss Tools”.

• Maven, as described in Section 2.5, “Creating a project with Maven”.

Other environments, such as Idea or NetBeans, could also be used for RichFaces development,
but are not detailed in this book.

2.3. Setting up RichFaces

Follow the instructions in this section to set up the RichFaces framework and begin building
applications.

1. Download RichFaces archive

Download RichFaces from the JBoss RichFaces Downloads area at http://www.jboss.org/

richfaces/download.html. The binary files (available in .zip or .bin.tar.gz archives) contain
the following:

• compiled, ready-to-use Java Archives (JAR files) of the RichFaces libraries

• library source JAR files

• documentation, including Java documentation and JavaScript documentation

• archetypes

• example source code

2. Unzip archive

Create a new directory named RichFaces, then unzip the archive containing the binaries
there.

5
Chapter 2. Getting started wi...

2.4. Creating a project with JBoss Tools

Follow the procedure in this section to create a new RichFaces application with JBoss Tools
Ensure you are using the latest version of JBoss Tools.

1. Create a new project

Create a new project based on the JSF 2 environment using the RichFaces 4 template. In
JBoss Tools, select File → New → JSF Project from the menu. Name the project, select JSF
2 from the JSF Environment drop-down box, and click the Finish button to create the project.

If necessary, update the JSF 2 JAR files to the latest versions.

2. Add the RichFaces libraries to the project

Add RichFaces libraries and their mandatory dependencies to the project. Copy them from
the location where you unzipped the RichFaces archive to the WebContent/WEB-INF/lib/
directory of your project in JBoss Tools.

3. Reference the tag libraries

The RichFaces tag libraries need to be referenced on each XHTML page in your project:

<ui:composition xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
...
</ui:composition>

You are now ready to begin constructing your RichFaces applications. RichFaces components
can be dragged and dropped into your application's XHTML pages from the RichFaces palette
in JBoss Tools.

2.5. Creating a project with Maven

Apache Maven is a build automation and project management tool for Java projects. Follow the
instructions in this section to create a Maven project for RichFaces.

2.5.1. Setting up Maven

Maven can be downloaded and installed from Apache's website at http://maven.apache.org/

download.html. Due to the use of dependency importing, Maven version 3.0.3 or above is required.

Once Maven has been installed, no further configuration is required to begin building Maven
projects.

6
 Using the RichFaces project archetype

2.5.2. Using the RichFaces project archetype

A Maven archetype is a template for creating projects. Maven uses an archetype to generate a
directory structure and files for a particular project, as well as creating pom.xml files that contain
build instructions.

The RichFaces Component Development Kit includes a Maven archetype named richfaces-
archetype-simpleapp for generating the basic structure and requirements for a RichFaces
application project. Maven can obtain the archetype from the JBoss repository at https://
repository.jboss.org/nexus/content/groups/public/. The archetype is also included with the
RichFaces source code in the archetypes directory. Follow the procedure in this section to
generate a new Maven-based RichFaces project using the archetype.

1. Add required repository

The details for the JBoss repository need to be added to Maven so it can access the
archetype. Add a profile in the maven_installation_folder/conf/settings.xml file under
the <profiles> element:

<profiles>
...
<profile>
<id>jboss-public-repository</id>
<repositories>
<repository>
<id>jboss-public-repository-group</id>
<name>JBoss Public Maven Repository Group</name>
<url>https://repository.jboss.org/nexus/content/groups/
public/</url>
<layout>default</layout>
<releases>
<enabled>true</enabled>
<updatePolicy>never</updatePolicy>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>never</updatePolicy>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>jboss-public-repository-group</id>
<name>JBoss Public Maven Repository Group</name>
<url>https://repository.jboss.org/nexus/content/groups/
public/</url>
<layout>default</layout>
<releases>

7
Chapter 2. Getting started wi...

<enabled>true</enabled>
<updatePolicy>never</updatePolicy>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>never</updatePolicy>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>

The profile then needs to be activated in the <activeProfiles> element:

<activeProfiles>
<activeProfile>jboss-public-repository</activeProfile>
</activeProfiles>

For further details, refer to the JBoss RichFaces Wiki.

2. Generate the project from the archetype

The project can now be generated with the richfaces-archetype-simpleapp archetype.

Create a new directory for your project, then run the following Maven command in the
directory:

mvn archetype:generate -DarchetypeGroupId=org.richfaces.archetypes

-DarchetypeArtifactId=richfaces-archetype-simpleapp -
DarchetypeVersion=4.3.2.Final -DgroupId=org.docs.richfaces -
DartifactId=new_project

The following parameters can be used to customize your project:

-DgroupId
Defines the package for the Managed Beans

-DartifactId
Defines the name of the project

The command generates a new RichFaces project with the following structure:

new_project
### pom.xml
### readme.txt
### src
### main

8
 Using the RichFaces project archetype

### java
# ### org
# ### docs
# ### richfaces
# ### RichBean.java
### webapp
### index.xhtml
### templates
# ### template.xhtml
### WEB-INF
### faces-config.xml
### web.xml

3. Add test dependencies (optional)

Your root directory of your project contains a project descriptor file, pom.xml. If you wish to
include modules for test-driven JSF development, add any dependencies for the tests to the
pom.xml file.

For testing server-side part of your implementation, check out JBoss Arquillian project [http://
www.jboss.org/arquillian].

If you want to test JSF from client's perspective with ability to access state of JSF internals,
use JBoss JSFUnit project [http://www.jboss.org/jsfunit] (with Arquillian integration).

For automation of client-side tests in real-browser, you may want to employ Arquillian
Ajocado [http://community.jboss.org/wiki/ArquillianAjocado] and Arquillian Drone [https://
docs.jboss.org/author/display/ARQ/Drone] extensions.

For mocking JSF environment, there is set of tools in RichFaces jsf-test project. For full
details on how to use the jsf-test project, refer to article Test Driven JSF Development [http://
community.jboss.org/docs/DOC-13155].

4. Build the project

Build the project from the command line by entering the mvn install command.

The BUILD SUCCESSFUL message indicates the project has been assembled and is ready to
import into an IDE (integrated development environment), such as JBoss Tools.

5. Import the project into an IDE

To import the project into Eclipse and JBoss Tools, use the JBoss Maven Integration plug-
ins. These plug-ins work with plug-ins from the M2Eclipse project to import Maven projects.

a. Install the plug-ins

i. Choose Help → Install New Software from the Eclipse menu.

9
Chapter 2. Getting started wi...

ii. Select the JBoss Tools update site to use, then open the Maven Support group and
select the JBoss Maven Integration and JBoss Maven JSF Configurator plug-
ins.

iii. Follow the prompts to install the integration plug-ins. The installation will
automatically include the transitive dependencies Maven Integration for Eclipse
and Maven Integration for WTP. Both of these dependencies are from the
M2Eclipse project.

iv. Restart Eclipse to finish the installation.

b. Open the importing wizard

With the plug-ins installed, open the importing wizard by choosing File → Import from
the menu.

c. Select the project

Select Maven → Existing Maven Projects as the import source and choose the
directory with the pom.xml file for your project.

Exporting from Maven

The ability to prepare the project for Eclipse and export it using Maven is
deprecated in RichFaces 4.3.2.Final. The process does not support JBoss
integration-specific features, such as JSF Facets.

Your project is now ready to use. Once components and functionality have been added, you can
run the application on a server and access it through a web browser at the address http://
localhost:8080/jsf-app/.

2.6. Using RichFaces in existing JSF 2 projects

RichFaces can be added to existing JSF 2 projects by adding the new RichFaces libraries. Refer
to Step 2 and Step 3 in Section 2.4, “Creating a project with JBoss Tools” for details.

Application-level settings

In RichFaces 4, it is not necessary to add any extra settings to the web.xml or

config.xml settings files to use the framework.

10
Chapter 3.

RichFaces overview
Read this chapter for technical details on the RichFaces framework.

3.1. Full technical requirements

RichFaces has been developed with an open architecture to be compatible with a wide variety
of environments.

3.1.1. Server requirements

RichFaces 4 requires either of the following server technologies:

• An application server compliant with Java Platform, Enterprise Edition 6 (JEE6 or JEE6), such
as JBoss Application Server 7.

• A major servlet container, such as Jetty 8 or Apache Tomcat 7.

3.1.2. Client requirements

Clients accessing RichFaces applications require a web browser. For a list of supported
web browsers, refer to the browser compatibility matrix [https://community.jboss.org/wiki/
PrioritizedRichFacesBrowsersCompatibilityMatrix] in the RichFaces wiki.

3.1.3. Development requirements

Developing applications with the RichFaces framework requires the Java Development Kit (JDK),
an implementation of JavaServer Faces (JSF), and a development environment.

Java Development Kit (JDK)

RichFaces supports the following JDK versions:

• JDK 1.6 and higher

JavaServer Faces (JSF)

RichFaces supports the following JSF implementations and frameworks:

• MyFaces 2.x

• Seam 3.x

• Mojara 2.x

Development environment
RichFaces can be developed using most Java development environments. The following are
recommended, and used for examples in this guide:

11
Chapter 3. RichFaces overview

• JBoss Tools 3.3 and higher

• Maven 3.0.3 and higher

3.2. Architecture
The important elements of the RichFaces framework are as follows:

• Ajax Action Components

• Ajax Containers

• Ajax Output

• Skins and Theming

• RichFaces Ajax Extensions

Read this section for details on each element.

3.2.1. Ajax Action Components

The RichFaces framework includes several Ajax Action Components and Submitting Bahaviors:
<a4j:commandButton>, <a4j:commandLink>, <a4j:poll>, <a4j:ajax>, and more. Use Ajax
Action Components to send Ajax requests from the client side.

3.2.2. Ajax Containers

AjaxContainer is an interface that marks part of the JSF tree that is decoded during an Ajax
request. It only marks the JSF tree if the component or behavior sending the request does not
explicitly specify an alternative. AjaxRegion is an implementation of this interface.

3.2.3. Ajax Output

AjaxContainer is an interface that marks part of the JSF tree that will be updated and rendered on
the client for every Ajax request. It only marks the JSF tree if the component or behavior sending
the request does not explicitly turn off automatic updates.

3.2.4. Skins and theming

RichFaces includes extensive support for application skinning. Skinning is a high-level extension
to traditional CSS (Cascading Style Sheets) which allows the color scheme and appearance of
an application to be easily managed. The skins simplify look-and-feel design by allowing multiple
elements of the interface to be handled as manageable features, which have associated color
palettes and styling. Application skins can additionally be changed on the fly during run-time,
allowing user experiences to be personalized and customized.

For full details on skinning and how to create skins for the components in your application, refer
to Chapter 6, Skinning and theming.

12
 RichFaces Ajax Extensions

3.2.5. RichFaces Ajax Extensions

The RichFaces Ajax Extensions plug in to the standard JSF 2 Ajax script facility. They extend the
script facility with new features and options.

3.3. Technologies
RichFaces 4 features full JSF 2 integration and uses standard web application technologies such
as JavaScript, XML (Extensible Markup Language), and XHTML (Extensible Hypertext Markup
Language).

3.4. Differences between JSF and RichFaces

mechanisms
JavaServer Faces 2 evaluates Ajax options, such as execute and render, while rendering a page.
This allows any parameters to be sent directly from the client side.

RichFaces evaluates the options when the current request is sent. This increases both the security
of the data and the convenience for evaluating parameters.

For example, binding Ajax options to Java Bean properties in RichFaces allows you to evaluate
the options dynamically for the current request, such as defining additional zones to render.
Parameters changed manually on the client side will not influence the request processing. With
JSF 2, the options have evaluated during the previous page rendering would need to be used.

3.5. Restrictions
The following restrictions apply to applications implementing the RichFaces framework:

• As with most Ajax frameworks, you should not attempt to append or delete elements on a page
using RichFaces Ajax, but should instead replace them. As such, elements that are rendered
conditionally should not be targeted in the render attributes for Ajax controls. For successful
updates, an element with the same identifier as in the response must exist on the page. If it is
necessary to append code to a page, include a placeholder for it (an empty element).

• JSF 2 does not allow resources such as JavaScript or Cascading Style Sheets (CSS) to be
added if the element requiring the resource is not initially present in the JSF tree. As such,
components added to the tree via Ajax must have any required resources already loaded. In
RichFaces, any components added to the JSF tree should have components with corresponding
resources included on the main page initially. To facilitate this, components can use the
rendered="false" setting to not be rendered on the page.

• JSF does render resource links (stylesheets, scripts) in order of occurence, thus if
you add <h:outputStylesheet> to the <h:head> section, JSF will render it before the
RichFaces resource links (dependencies of RichFaces components). To be able to overwrite

13
Chapter 3. RichFaces overview

RichFaces stylesheets and re-use RichFaces JavaScript implementation, you need to render
<h:outputStylesheet target="head"> to the <h:body> section (safe solution is to place it
on the end of the section; however to keep readability, you can use start of the section).

• Switching RichFaces skins via Ajax during runtime should be avoided, as this requires all the
stylesheets to be reloaded.

14
Chapter 4.

Basic concepts
Read this chapter for the basic concepts of using RichFaces in conjunction with Ajax and
JavaServer Faces.

4.1. Sending an Ajax request

Many of the tags in the a4j and rich tag libraries are capable of sending Ajax requests from a
JavaServer Faces (JSF) page.

• The <a4j:commandButton> and <a4j:commandLink> tags are used to send an Ajax request
on the click JavaScript event.

• The <a4j:poll> tag is used to send an Ajax request periodically using a timer.

• The <a4j:ajax> tag allows you to add Ajax functionality to standard JSF components and send
Ajax request on a chosen JavaScript event, such as keyup or mouseover, for example.

• Most components in the rich tag library have built-in Ajax support. Refer to the RichFaces
Component Reference for details on the use of each component.

4.2. Partial tree processing

Use the execute attribute to specify which parts of the JSF tree to process during an Ajax request.
The execute attribute can point to an id identifier of a specific component to process. Components
can also be identified through the use of Expression Language (EL).

Alternatively, the execute attribute accepts the following keywords:

@all
Every component is processed.

@none
No components are processed.

@this
The requesting component with the execute attribute is processed.

@form
The form that contains the requesting component is processed.

@region
The region that contains the requesting component is processed. Use the <a4j:region>
component as a wrapper element to specify regions.

Some components make use of additional keywords. These are detailed under the relevant
component entry in the RichFaces Component Reference.

15
Chapter 4. Basic concepts

4.3. Partial view updates

Use the render attribute to specify which components to render for an Ajax update. The render
attribute can point to an id identifier of a specific component to update. Components can also be
identified through the use of Expression Language (EL).

Alternatively, the render attribute accepts the following keywords:

@all
Every component is updated.

@none
No components are updated.

@this
The requesting component with the execute attribute is updated.

@form
The form that contains the requesting component is updated.

@region
The region that contains the requesting component is updated. Use the <a4j:region>
component as a wrapper element to specify regions.

Some components make use of additional keywords. These are detailed under the relevant
component entry in the RichFaces Component Reference.

Use the <a4j:outputPanel> component with the ajaxRendered="true" setting to always update
a section irrespective of the requesting component's render attribute. The <rich:message> and
<rich:messages> components are based on the <a4j:outputPanel> component, and as such
will also always be updated. To override this behavior, use the limitRender="true" setting on
the requesting component.

4.4. Component overview

The RichFaces framework is made up of two tag libraries: the a4j library and the rich library.
The a4j tag library represents Ajax4jsf, which provides page-level Ajax support with core
Ajax components. This allows developers to make use of custom Ajax behavior with existing
components. The rich tag library provides Ajax support at the component level instead, and
includes ready-made, self-contained components. These components don't require additional
configuration in order to send requests or update.

For details on the use of the various components, refer to RichFaces Component Reference.

16
Chapter 5.

Advanced features
Read this chapter for details on some of the advanced features and configuration possibilities for
the RichFaces framework.

5.1. JSF 2 integration

JavaServer Faces (JSF) is the Java-based web application framework upon which the RichFaces
framework has been built. RichFaces is now integrated with JSF 2, which features several
improvements to the framework.

• The standard display technology used by JSF 1 was JavaServer Pages (JSP). With JSF 2, the
standard display technology has been changed to Facelets, which is a more powerful and more
efficient View Declaration Language (VLD) than JSP.

5.2. Error handling

RichFaces allows standard handlers to be defined for processing different application exceptions.
Custom JavaScript can be executed when these exceptions occur.

5.2.1. Client-side errors

JSF provides a global onError handler on the client. The handler provides the relevant error code
and other associated data. The RichFaces Ajax components provide the error attribute if extra
functionality needs to be defined.

Additional processing is available through a number of components, such as the following:

• The <a4j:status> component has an additional error state.

• The <a4j:queue> component can be used to process errors.

5.2.2. Server-side errors

Use the JSF 2 ExceptionHandler class to handle server-side errors such as session expiration.

5.3. Other functions

RichFaces provides a number of advanced functions, such as managing user roles and identifying
elements. Refer to the Functions chapter in the RichFaces Component Reference for further
details.

5.4. Resource loading

The RichFaces improves a standard JSF resource handling in order to achieve following features:

17
Chapter 5. Advanced features

• resource optimization - serves optimized component resource dependencies (JavaScript, CSS)

• resource mapping - re-routes resource requests (maps an one resource to an another resource)

5.4.1. Configuring ResourceServlet

For leveraging RichFaces resource loading improvements, the ResourceServlet needs to be
registered.

ResourceServlet is automatically registered in the Servlet 3.0 and higher environments.

In the Servlet 2.5 and lower environments, it is necessary to register the ResourceServlet
manually in the WEB-INF/web.xml configuration file:

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

5.4.2. Resource optimization

The resource optimization feature provides optimized component dependencies - JavaScript, CSS
- which are compressed and aggregated to resource packages.

The loading of compressed resource packages may lead into significant client performance
boost, since many small files are aggregated into one big file - the number of HTTP connections
necessary to download application resources is significantly decreased.

Example 5.1. Enabling resource optimization

To enable the resource optimization, add a following configuration to web.xml:

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

Example 5.2. Resource optimization in development JSF project stage

Resource optimization is influenced by the project stage:

18
 Resource mapping

• resources are not compressed in the development stage and during unit-testing to enable client-
side debugging

• resources are compressed in the production stage and during a system-testing to minimize
network bandwidth

Switch to the development project stage during a development:

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

5.4.3. Resource mapping

The resource mapping feature maps an existing JSF resource (determined by library and name)
to a another resource.

This feature can help to solve the following cases:

• providing alternative versions of JSF resources

• map several JSF resources to one

• using external resources

• moving resources to servers serving static content

5.4.3.1. Resource mapping configuration file

Configuring the resource mapping means adding new records to the class-path file META-INF/
richfaces/static-resource-mappings.properties.

Each line in the configuration file represents one relocation.

A following sample shows a JSF resource with the name resourceLibrary:resourceName

relocated to a resource anotherResourceLibrary:anotherResourceName:

resourceLibrary\:resourceName=anotherResourceLibrary/anotherResourceName

Mapping resource name to relative URL

The definition above contains a JSF resource name on the left side of the
expression and a relative path on the right side.

19
Chapter 5. Advanced features

The expression on the right side represents a path relative to

a JSF resource root, thus resource path anotherResourceLibrary/
anotherResourceName actually maps JSFto a resource with name
anotherResourceLibrary:anotherResourceName.

Additional mapping files

It is possible to define additional resource mapping configuration files by using a

contextual parameter identifying the class-path locations where the files reside:
org.richfaces.resourceMapping.mappingFile (a comma-separated list of the
class-path files).

5.4.3.2. Examples of resource mapping

Example 5.3. Providing alternative file

All requests for jquery.js are served as requests for jquery-alternative-version.js:

jquery.js=jquery-alternative-version.js

Example 5.4. Mapping several resources to one

Both some:jquery.js and another:jquery.js are mapped to final:jquery.js:

some\:jquery.js=final/jquery.js
another\:jquery.js=final/jquery.js

Example 5.5. Using external resources

Mappings with a resource path starting with http:// or https:// are served as absolute resource
locations:

A following sample instructs to load jquery.js from CDN:

jquery.js=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

20
Chapter 6.

Skinning and theming

Read this chapter for a guide to skinning and theming RichFaces applications, including how to
implement themes, and details on customizing and extending skins.

6.1. What are skins?

Application skins are used with the RichFaces framework to change the appearance of an
application through setting the colors and decoration of controls and components. Typically
the appearance of web applications is handled through the CSS (Cascading Style Sheet) files
associated with the application, but skinning allows the settings in a CSS file to be abstracted and
easily edited. Skins consist of a small, generalized set of font and color parameters that can be
applied to multiple different styles. This avoids repetitive coding and duplication in CSS files. CSS
files are not completely replaced: skins work as a high-level extension to standard CSS.

Each skin has a set of skin-parameters, which are used to define the theme palette and other
elements of the user interface. These parameters work together with regular CSS declarations,
and can be referred to from within CSS using JavaServer Faces Expression Language (EL).

The skinning feature of RichFaces also allows skins to be changed at runtime, so users can
personalize an application's appearance on the fly.

6.2. Using skins

RichFaces includes a number of predefined skins. These skins can be used in RichFaces web
applications by specifying the skin name in the org.richfaces.skin context parameter in the
web.xml settings file. The predefined skins are as follows:

• DEFAULT

• plain, which contains no skin parameters and is intended for embedding RichFaces
components into existing projects with their own styles.

• emeraldTown

• blueSky

• wine

• japanCherry

• ruby

• classic

• deepMarine

To add one of these skins to your application, add the org.richfaces.SKIN context parameter
to the web.xml configuration file:

21
Chapter 6. Skinning and theming

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

6.3. Skinning overview

RichFaces skins are implemented using the following three-level scheme:

Component stylesheets
Stylesheets are provided for each component. CSS style parameters map to skin parameters
defined in the skin property file. This mapping is accomplished through the use of ECSS files.
Refer to Section 6.3.3, “ECSS files” for details on ECSS files.

Skin property files

Skin property files map skin parameters to constant styles. Skin properties are defined in
skin.properties files. Refer to Section 6.3.1, “Skin parameter tables” for a listing of the skin
parameters used in a typical skin.

Custom style classes

Individual components can use the styleClass attribute to redefine specific elements. These
components then use the styles defined in a CSS file instead of the standard look for
components as defined by the ECSS stylesheets.

6.3.1. Skin parameter tables

Table 6.1, “Parameter settings for the blueSky skin” lists the default values for the parameter
settings in the blueSky skin. These values are all listed in the blueSky.skin.properties file,
which can be customized and extended as described in Section 6.4, “Customizing skins”.

Table 6.1. Parameter settings for the blueSky skin

Parameter name Default value
headerBackgroundColor #BED6F8

headerGradientColor #F2F7FF

headTextColor #000000

headerWeightFont bold

generalBackgroundColor #FFFFFF

generalTextColor #000000

generalSizeFont 11px

generalFamilyFont Arial, Verdana, sans-serif

controlTextColor #000000

controlBackgroundColor #FFFFFF

22
 Skin parameter tables

Parameter name Default value

additionalBackgroundColor #ECF4FE

shadowBackgroundColor #000000

shadowOpacity 1

panelBorderColor #BED6F8

subBorderColor #FFFFFF

calendarWeekBackgroundColor #F5F5F5

calendarHolidaysBackgroundColor #FFEBDA

calendarHolidaysTextColor #FF7800

calendarCurrentBackgroundColor #FF7800

calendarCurrentTextColor #FFEBDA

calendarSpecBackgroundColor #E4F5E2

calendarSpecTextColor #000000

editorBackgroundColor #F1F1F1

editBackgroundColor #FEFFDA

errorColor #FF0000

gradientType plain

tabBackgroundColor #C6DEFF

tabDisabledTextColor #8DB7F3

tableHeaderBackgroundColor #D6E6FB

tableSubHeaderBackgroundColor #ECF4FE

tableBorderWidth 1px

tableHeaderTextColor #0B356C

trimColor #D6E6FB

tipBackgroundColor #FAE6B0

tipBorderColor #E5973E

selectControlColor #E79A00

generalLinkColor #0078D0

hoverLinkColor #0090FF

visitedLinkColor #0090FF

headerSizeFont 11px

headerFamilyFont Arial, Verdana, sans-serif

tabSizeFont 11px

tabFamilyFont Arial, Verdana, sans-serif

buttonSizeFont 11px

23
Chapter 6. Skinning and theming

Parameter name Default value

buttonFamilyFont Arial, Verdana, sans-serif

tableBackgroundColor #FFFFFF

tableFooterBackgroundColor #CCCCCC

tableSubfooterBackgroundColor #F1F1F1

tableBorderColor #C0C0C0

warningColor #FFE6E6

warningBackgroundColor #FF0000

6.3.2. Support for round corners

Support for round borders in your skins is available via the panelBorderRadius skin parameter.
The value of this parameter maps to the CSS 3 border-radius property. This CSS 3 property is
ignored in older browsers, and the skin gracefully degrades to square corners.

Units of the panelBorderRadius skin parameter must be either px (pixels). or % (a percentage).

6.3.3. ECSS files

RichFaces uses ECSS files to add extra functionality to the skinning process. ECSS files are CSS
files which use Expression Language (EL) to connect styles with skin properties.

Example 6.1. ECSS style mappings

The ECSS code for the <rich:panel> component contains styles for the panel and its body:

.rf-p{
background-color:'#{richSkin.generalBackgroundColor}';
color:'#{richSkin.panelBorderColor}';
border-width:1px;
border-style:solid;
padding:1px;
}

.rf-p-b{
font-size:'#{richSkin.generalSizeFont}';
color:'#{richSkin.generalTextColor}';
font-family:'#{richSkin.generalFamilyFont}';
padding:10px;
}

.rf-p defines the panel styles

• The background-color CSS property maps to the generalBackgroundColor skin

parameter.

24
 Customizing skins

• The color CSS property maps to the panelBorderColor skin parameter.

.rf-p-b defines the panel body styles

• The font-family CSS property maps to the generalFamilyFont skin parameter.

• The font-size CSS property maps to the generalSizeFont skin parameter.

• The color CSS property maps to the generalTextColor skin parameter.

6.4. Customizing skins

Skins in RichFaces can be customized on each of the three levels:

Skin property files

Application interfaces can be modified by altering the values of skin parameters in the skin
itself. Edit the constant values defined in the skin.properties file to change the style of
every component mapped to that skin property.

Component stylesheets
Mappings and other style attributes listed in a component's ECSS file can be edited. Edit the
ECSS file to change the styles of all components of that type.

Custom components style classes

Individual components can use the styleClass attribute to use a unique style class. Add the
new style class to the application CSS and reference it from an individual component with
the styleClass attribute.

Overwriting stylesheets in application

You can load custom stylesheets using <h:outputStylesheet> which rewrites of extends
styles defined for style classes of components.

Customizing skins by rewriting/extending component style

classes
If you want to extend/overwrite style sheet definitions with own stylesheets,
make sure you place definitions to be rendered in right order of occurence (see
Restrictions section for details).

Example 6.2. Simple skinning example

Using any component, such as a panel, without specifying a styleClass will use the default skin
parameters for that component.

<rich:panel>This is a panel without a header</rich:panel>

25
Chapter 6. Skinning and theming

When rendered for display, the panel consists of two HTML elements: a wrapper <div> element
and a <div> element for the body of the panel. The wrapper element for a panel without a specified
styleClass is rendered as follows:

<div id="..." class="rf-p">

<div id="..." class="rf-p-b">
This is a panel without a header
</div>
</div>

To customize the panel appearance according to the three-level scheme, adjust the styles
according to the following approach:

1. Change the definitions for the generalBackgroundColor or panelBorderColor parameters

in the skin. This will cause all panels in the application to change to the new settings.

2. Redefine the rf-p class in the application CSS. This will also cause all panels in the
application to change to the new settings, though the skin itself has not been altered. Any
properties not mapped to skin parameters should be redefined in this way.

3. Specify a different styleClass attribute to style the individual component. If a styleClass

attribute is used, the specified style class is applied to the component, which could extend
or override the default styles.

<rich:panel styleClass="customClass">...</rich:panel>

The customClass style is added to the CSS, and is applied to the component when it is
rendered for display:

<div class="rf-p customClass">

...
</div>

6.4.1. Creating a new skin

1. Create the skin file

The name of the skin file should follow the format new_skin_name.skin.properties and is
placed in either the META-INF/skins/ directory or the classpath directory of your project.

26
 Changing skins at runtime

2. Define the skin constants

• Define all the skin constants

Add skin parameter constants and values to the file. All the skin parameters listed in
Table 6.1, “Parameter settings for the blueSky skin” should be included in the skin file,
with settings relevant to your new skin.

Example 6.3. blueSky.skin.properties file

Open the blueSky.skin.properties file from the /META-INF/skins directory in the

richfaces-impl-version.jar package. The file lists all the skin parameter constants shown
in Table 6.1, “Parameter settings for the blueSky skin”.

You can use the blueSky.skin.properties file as a template for your new skin.

• Extend a base skin

Instead of redefining an entire new skin, your skin can use an existing skin as a base on
which to build new parameters. Specify a base skin by using the baseSkin parameter in
the skin file, as shown in Example 6.4, “Using a base skin”.

Example 6.4. Using a base skin

This example takes the blueSky skin as a base and only changes the generalSizeFont
parameter.

baseSkin=blueSky
generalSizeFont=12pt

3. Reference the skin definition

Add a skin definition <context-param> to the web.xml settings file of your application:

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

6.5. Changing skins at runtime

To allow users to change skins at runtime, use a managed bean to access the skin.

1. Create the skin bean

The skin bean is a simple interface to manage the skin:

27
Chapter 6. Skinning and theming

public class SkinBean {

private String skin;

public String getSkin() {

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

2. Reference the skin bean

Add the @ManagedBean and @SessionScoped references to the class.

• Alternatively, use EL (Expression Language) to reference the skin bean from the web.xml
settings file.

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

3. Set initial skin

The application needs an initial skin to display before the user chooses an alternative skin.
Specify the skin in your class with @ManagedProperty.

@ManagedProperty(value="blueSky")
private String skin;

• Alternatively, specify the initial skin in the web.xml configuration file.

<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>blueSky</value>
</managed-property>

28
 Skinning standard controls

</managed-bean>

6.6. Skinning standard controls

Standard HTML controls used alongside RichFaces components are also themed to create a
cohesive user interface.

6.6.1. Automatic skinning

The skinning style properties are automatically applied to controls based on their element names
and attribute types. If the HTML elements are referenced in the standard skin stylesheets, the
controls will be styled according to the mapped skin properties.

Standard HTML controls are skinned in this way by default. To override this behavior and
prevent the RichFaces skins from being applied to the standard HTML controls, set the
org.richfaces.enableControlSkinning context parameter in the web.xml configuration file to
false:

<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>

6.6.2. Skinning with the rfs-ctn class

The skinning style properties can be determined through a separate CSS
class. This method is not available by default, but is enabled through the
org.richfaces.enableControlSkinningClasses context parameter in the web.xml
configuration file:

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

When enabled, a stylesheet with predefined classes offers a special CSS class named rfs-ctn.
Reference the rfs-ctn class from any container element (such as a <div> element) to skin all
the standard HTML controls in the container.

Standard HTML controls can also be specifically defined in the CSS. Refer to the /core/
impl/src/main/resources/META-INF/resources/skinning_both.ecss file in the richfaces-
ui.jar package for examples of specially-defined CSS classes with skin parameters for HTML
controls.

29
30
Appendix A. Style classes and skin
parameters
Each of the RichFaces components are listed below, along with their style classes and skin
parameters. For further details on each component, refer to the relevant section in the RichFaces
Component Reference.

A.1. Processing management

A.1.1. <a4j:log>

Table A.1. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-log generalTextColor color
This class defines styles
for the log.
.rf-log-popup No skin parameters.
This class defines styles
for the log when it appears
as a pop-up.
.rf-log-popup-cnt No skin parameters.
This class defines styles
for the content of the log
pop-up.
.rf-log-inline No skin parameters.
This class defines styles
for the log when it appears
in-line.
.rf-log-contents No skin parameters.
This class defines styles
for the log contents.
.rf-log-entry-lbl No skin parameters.
This class defines styles
for a label in the log.
.rf-log-entry-lbl-debug No skin parameters.
This class defines styles
for the debug label in the
log.

31
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-log-entry-lbl-info No skin parameters.
This class defines styles
for the information label
in the log.
.rf-log-entry-lbl-warn No skin parameters.
This class defines styles
for the warning label in
the log.
.rf-log-entry-lbl-error No skin parameters.
This class defines styles
for the error label in the
log.
.rf-log-entry-msg No skin parameters.
This class defines styles
for a message in the log.
.rf-log-entry-msg-debug No skin parameters.
This class defines styles
for the debug message in
the log.
.rf-log-entry-msg-info No skin parameters.
This class defines styles
for the information
message in the log.
.rf-log-entry-msg-warn No skin parameters.
This class defines styles
for the warning message
in the log.
.rf-log-entry-msg-error No skin parameters.
This class defines styles
for the error message in
the log.
.rf-log-entry-msg-xml No skin parameters.
This class defines styles
for an XML message in the
log.

32
 Rich inputs

A.2. Rich inputs

A.2.1. <rich:autocomplete>

Table A.2. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-au-fnt generalTextColor color
This class defines styles generalFamilyFont font-family
for the auto-complete box
generalSizeFont font-size
font.
.rf-au-inp controlBackgroundColor background-color
This class defines styles
for the auto-complete
input box.
.rf-au-fld panelBorderColor border-color
This class defines styles controlBackgroundColor background-color
for the auto-complete
field.
.rf-au-fld-btn No skin parameters.
This class defines styles
for a button in the auto-
complete field.
.rf-au-btn headerBackgroundColor background-color
This class defines styles panelBorderColor border-left-color
for the auto-complete box
button.
.rf-au-btn-arrow No skin parameters.
This class defines styles
for the button arrow.
.rf-au-btn-arrow-dis No skin parameters.
This class defines styles
for the button arrow when
it is disabled.
.rf-au-lst-scrl No skin parameters.
This class defines styles
for the scrollbar in the
auto-complete list.
.rf-au-itm No skin parameters.
This class defines styles
for an item in the auto-
complete list.

33
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-au-itm-sel headerBackgroundColor background-color
This class defines styles generalTextColor border-color
for a selected item in the
auto-complete list.
.rf-au-shdw No skin parameters.
This class defines styles
for the auto-complete box
shadow.
.rf-au-shdw-t, .rf-au- No skin parameters.
shdw-l, .rf-au-shdw-r, .rf-
au-shdw-b
These classes define
styles for the top, left,
right, and bottom part
of the auto-complete box
shadow.
.rf-au-tbl No skin parameters.
This class defines styles
for a table in the auto-
complete box.

A.2.2. <rich:calendar>

Table A.3. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-cal-extr panelBorderColor border-color
This class defines the
styles for a pop-up
calendar exterior.
.rf-cal-btn No skin parameters.
This class defines styles
for a calendar button.
.rf-cal-hdr panelBorderColor border-bottom-color
This class defines the additionalBackgroundColor background-color
styles for a calendar
generalSizeFont font-size
header.
generalFamilyFont font-family
.rf-cal-hdr-optnl panelBorderColor border-bottom-color
This class defines the additionalBackgroundColor background-color
styles for an optional
generalSizeFont font-size
header.

34
 <rich:calendar>

Class (selector) Skin Parameters Mapped CSS properties

generalFamilyFont font-family
.rf-cal-hdr-month headerBackgroundColor background-color
This class defines the headerSizeFont font-size
styles for the month
headerFamilyFont font-family
header.
headerWeightFont font-weight
headerTextColor color
.rf-cal-ftr panelBorderColor border-right-color, border-
This class defines the bottom-color
styles for a calendar additionalBackgroundColor background
footer.
generalSizeFont font-size
generalFamilyFont font-family
.rf-cal-ftr-optnl panelBorderColor border-right-color, border-
This class defines the bottom-color
styles for an optional additionalBackgroundColor background
footer.
generalSizeFont font-size
generalFamilyFont font-family
.rf-cal-tl headerBackgroundColor background-color
This class defines the headerSizeFont font-size
styles for calendar
headerFamilyFont font-family
toolbars.
headerWeightFont font-weight
headerTextColor color
.rf-cal-tl-ftr additionalBackgroundColor background
This class defines the generalSizeFont font-size
styles for a toolbar item in
generalFamilyFont font-family
the calendar footer.
.rf-cal-tl-btn No skin parameters.
This class defines styles
for a toolbar button.
.rf-cal-tl-btn-dis No skin parameters.
This class defines styles
for a disabled toolbar
button.
.rf-cal-tl-btn-hov calendarWeekBackgroundColorbackground-color
This class defines the generalTextColor color
styles for toolbar items
tableBackgroundColor border-color
when it is hovered over
with the mouse cursor.

35
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

panelBorderColor border-right-color, border-
bottom-color
.rf-cal-tl-btn-press panelBorderColor border-color
This class defines the panelBorderColor border-right-color, border-
styles for toolbar items bottom-color
when it is pressed.
.rf-cal-tl-close No skin parameters.
This class defines styles
for a Close button in a
toolbar.
.rf-cal-c panelBorderColor border-bottom-color, border-
This class defines the right-color
styles for regular calendar tableBackgroundColor background-color
cells.
generalSizeFont font-size
generalFamilyFont font-family
.rf-cal-c-cnt No skin parameters.
This class defines styles
for the content of a cell.
.rf-cal-today background-color
calendarCurrentBackgroundColor
This class defines the calendarCurrentTextColor color
styles for the cell
representing today's date.
.rf-cal-sel headerBackgroundColor background-color
This class defines the headerTextColor color
styles for the selected day.
.rf-cal-hov calendarSpecBackgroundColorbackground-color
This class defines the calendarSpecTextColor color
styles for a cell when it
is hovered over with the
mouse cursor.
.rf-cal-week panelBorderColor border-bottom-color, border-
This class defines the right-color
styles for week numbers. calendarWeekBackgroundColorbackground-color

generalSizeFont font-size
generalFamilyFont font-family
.rf-cal-holiday background-color
calendarHolidaysBackgroundColor
This class defines the calendarHolidaysTextColor color
styles for weekends and
holidays.

36
 <rich:calendar>

Class (selector) Skin Parameters Mapped CSS properties

.rf-cal-boundary-day No skin parameters.
This class defines styles
for an active boundary
button.
.rf-cal-sp-inp buttonSizeFont font-size
This class defines the buttonFamilyFont font-family
styles for a spinner input
field in the pop-up element
for time selection.
.rf-cal-sp-inp-cntr controlBackgroundColor background-color
This class defines the panelBorderColor border-color
styles for a wrapper <td>
subBorderColor border-right-color, border-
element for a spinner input
bottom-color
field in the pop-up element
for time selection.
.rf-cal-sp-btn headerBackgroundColor background-color, border-
This class defines the color
styles for a wrapper
<td> element for spinner
buttons in the pop-up
element for time selection.
.rf-cal-sp-up No skin parameters.
This class defines styles
for the Up spinner button.
.rf-cal-sp-down No skin parameters.
This class defines styles
for the Down spinner
button.
.rf-cal-sp-press No skin parameters.
This class defines styles
for a spinner button when
it is pressed.
.rf-cal-edtr-shdw tableBackgroundColor background
This class defines the
styles for the calendar
editor shadow.
.rf-cal-edtr-layout-shdw shadowBackgroundColor background-color
This class defines the
styles for the layout
shadow of a calendar
editor.

37
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-cal-edtr-btn No skin parameters.
This class defines styles
for a button in the calendar
editor.
.rf-cal-edtr-btn-over panelBorderColor border-color
This class defines the calendarSpecBackgroundColorbackground
styles for the calendar
editor button when it is
hovered over with the
mouse cursor.
.rf-cal-edtr-btn-sel background-color
calendarCurrentBackgroundColor
This class defines the calendarCurrentTextColor color
styles for the calendar
editor button when it is
selected.
.rf-cal-edtr-tl-over additionalBackgroundColor background
This class defines the tableBackgroundColor border-color
styles for a toolbar item in
panelBorderColor border-right-color, border-
the calendar editor when
bottom-color
it is hovered over with the
mouse cursor.
.rf-cal-edtr-tl-press additionalBackgroundColor background
This class defines the panelBorderColor border-color
styles for a toolbar item in
tableBackgroundColor border-right-color, border-
the calendar editor when it
bottom-color
is pressed.
.rf-cal-time-inp No skin parameters.
This class defines styles
for the time input field.
.rf-cal-time-btn tableBackgroundColor border-color
This class defines the panelBorderColor border-right-color, border-
styles for a button in the bottom-color
pop-up element for the
calendar's time section.
.rf-cal-time-btn-press tableBackgroundColor border-right-color, border-
This class defines the bottom-color
styles for a pressed button panelBorderColor border-color
in the pop-up element
calendarWeekBackgroundColorbackground-color
for the calendar's time
section.

38
 <rich:calendar>

Class (selector) Skin Parameters Mapped CSS properties

.rf-cal-timepicker-cnt panelBorderColor border-color
This class defines the additionalBackgroundColor background
styles for the content of
generalSizeFont font-size
the pop-up element during
time selection. generalFamilyFont font-family

.rf-cal-timepicker-inp generalSizeFont font-size

This class defines the generalFamilyFont font-family
styles for an input field in
the time picker.
.rf-cal-timepicker-ok No skin parameters.
This class defines styles
for the OK button in the
time picker.
.rf-cal-timepicker- No skin parameters.
cancel
This class defines styles
for the Cancel button in
the time picker.
.rf-cal-monthpicker-cnt panelBorderColor border-color
This class defines the tableBackgroundColor background
styles for the content of
generalSizeFont font-size
the pop-up element during
month or year selection. generalFamilyFont font-family

.rf-cal-monthpicker-ok additionalBackgroundColor background

This class defines the panelBorderColor border-top-color
styles for the OK button for
the month picker.
.rf-cal-monthpicker- additionalBackgroundColor background
cancel panelBorderColor border-top-color
This class defines the
styles for the Cancel
button for the month
picker.
.rf-cal-monthpicker- panelBorderColor border-right-color
split
This class defines the
styles for the splitter in the
month picker.

39
Appendix A. Style classes and...

A.2.3. <rich:editor>

Table A.4. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.cke_skin_richfaces panelBorderColor border-color
editorMainBackgroundColor background-color
.cke_skin_richfaces .cke_wrapper

panelBorderColor
.cke_skin_richfaces .cke_dialog_body border-color
generalBackgroundColor background
headerBackgroundColor
.cke_skin_richfaces .cke_dialog_title repeat-x
headerWeightFont font-weight
headerTextColor color
headerFamilyFont font-family
headerSizeFont font-size
.cke_skin_richfaces
.cke_path editorMainTextColor color
a,
.cke_skin_richfaces .cke_path .cke_empty

.cke_button additionalBackgroundColor background-color

.cke_skin_richfaces
a.cke_on panelBorderColor border-color
.cke_button panelBorderColor
.cke_skin_richfaces border-color
a:hover, tabBackgroundColor background-color
.cke_skin_richfaces
.cke_button
a:focus,
.cke_skin_richfaces
.cke_button
a:active

.cke_rcombo panelBorderColor
.cke_skin_richfaces border-color
a, generalSizeFont font-size
.cke_skin_richfaces
.cke_rcombo
generalFamilyFont font-family
a:active,
.cke_rcombo controlTextColor
.cke_skin_richfaces color
a:hover controlBackgroundColor background-color
headerBackgroundColor
.cke_skin_richfaces .cke_rcombo .cke_openbutton background-color
panelBorderColor border-left-color

40
 <rich:fileUpload>

A.2.4. <rich:fileUpload>

Table A.5. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-fu generalBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the file upload control.
.rf-fu-hdr headerBackgroundColor background-color, border-
This class defines styles color
for the header of the file
upload control.
.rf-fu-lst No skin parameters.
This class defines styles
for lists in the file upload
control.
.rf-fu-cntr-hdn No skin parameters.
This class defines styles
for the file upload
container when it is
hidden.
.rf-fu-btns-lft, .rf-fu- No skin parameters.
btns-rgh
These classes define
styles for buttons on the
left and right of the file
upload control.
.rf-fu-btn-add trimColor background-color
This class defines styles panelBorderColor border-color
for the Add button in the
file upload control.
.rf-fu-btn-cnt-add generalTextColor color
This class defines styles generalFamilyFont font-family
for the content of the Add
generalSizeFont font-size
button in the file upload
control.
.rf-fu-btn-add-dis tableFooterBackgroundColor background-color
This class defines styles tableFooterBackgroundColor border-color
for the Add button in the
file upload control when it
is disabled.

41
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-fu-btn-cnt-add-dis tabDisabledTextColor color
This class defines styles generalFamilyFont font-family
for the content of the Add
generalSizeFont font-size
button in the file upload
control when it is disabled.
.rf-fu-btn-upl trimColor background-color
This class defines styles panelBorderColor border-color
for the Upload button in
the file upload control.
.rf-fu-btn-cnt-upl generalTextColor color
This class defines styles generalFamilyFont font-family
for the content of the
generalSizeFont font-size
Upload button in the file
upload control.
.rf-fu-btn-clr trimColor background-color
This class defines styles panelBorderColor border-color
for the Clear button in the
file upload control.
.rf-fu-btn-cnt-clr generalTextColor color
This class defines styles generalFamilyFont font-family
for the content of the Clear
generalSizeFont font-size
button in the file upload
control.
.rf-fu-itm panelBorderColor border-bottom-color
This class defines styles
for an item in the file
upload control.
.rf-fu-itm-lft, .rf-fu- No skin parameters.
itm-rgh
These classes define
styles for items on the left
and right of the file upload
control.
.rf-fu-itm-lbl generalTextColor color
This class defines styles generalFamilyFont font-family
for the label of an item in
generalSizeFont font-size
the file upload control.
.rf-fu-itm-st generalTextColor color
This class defines styles generalFamilyFont font-family
for the status of an item in
generalSizeFont font-size
the file upload control.

42
 <rich:inplaceInput>

Class (selector) Skin Parameters Mapped CSS properties

.rf-fu-itm-lnk generalLinkColor color
This class defines styles generalFamilyFont font-family
for a link item in the file
generalSizeFont font-size
upload control.
.rf-fu-inp No skin parameters.
This class defines styles
for the input field in the file
upload control.
.rf-fu-inp-cntr No skin parameters.
This class defines styles
for the input field container
in the file upload control.

A.2.5. <rich:inplaceInput>

Table A.6. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ii editorBackgroundColor background-color
This class defines styles generalTextColor border-bottom-color
for the in-place input when
it is in the default state.
.rf-ii-act No skin parameters.
This class defines styles
for the in-place input when
it is in the editing state.
.rf-ii-chng No skin parameters.
This class defines styles
for the in-place input when
it is in the changed state.
.rf-ii-dis No skin parameters.
This class defines styles
for the in-place input when
it is in the disabled state.
.rf-ii-fld editBackgroundColor background-color, border-
This class defines styles bottom-color
for the in-place input field. generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size

43
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-ii-lbl generalTextColor color
This class defines styles generalSizeFont font-size
for the label of the in-place
input.
.rf-ii-dflt-lbl No skin parameters.
This class defines styles
for the default label of the
in-place input.
.rf-ii-btn tabBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the buttons for the in-
place input.
.rf-ii-btn-p tabBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the buttons for the in-
place input when they are
pressed.
.rf-ii-btn-set, .rf-ii- No skin parameters.
btn-prepos, .rf-ii-btn-
pos
These classes define the
positioning of the buttons.
.rf-ii-btn-shdw No skin parameters.
This class defines styles
for the button shadows for
the in-place input.
.rf-ii-btn-shdw-t, .rf- No skin parameters.
ii-btn-shdw-b, .rf-ii-
btn-shdw-l, .rf-ii-btn-
shdw-r
These classes define the
top, bottom, left, and
right edge of the button
shadows.
.rf-ii-none No skin parameters.
This class defines styles
for the in-place input when
it cannot be edited.

44
 <rich:inputNumberSlider>

A.2.6. <rich:inputNumberSlider>

Table A.7. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-insl No skin parameters.
This class defines styles
for the number slider itself.
.rf-insl-trc controlBackgroundColor background-color
This class defines styles panelBorderColor border-bottom-color
for the number slider track.
.rf-insl-trc-cntr No skin parameters.
This class defines styles
for the container of the
number slider track.
.rf-insl-mn generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the minimum label on
generalTextColor color
the number slider.
panelBorderColor border-left-color
.rf-insl-mx generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the maximum label on
generalTextColor color
the number slider.
panelBorderColor border-right-color
.rf-insl-inp generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the input field on the
generalTextColor color
number slider.
.rf-insl-inp-cntr No skin parameters.
This class defines styles
for the container of the
input field.
.rf-insl-hnd No skin parameters.
This class defines styles
for the handle on the
number slider.
.rf-insl-hnd-cntr No skin parameters.
This class defines styles
for the container of the
handle.

45
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-insl-hnd-sel No skin parameters.
This class defines styles
for the handle when it is
selected.
.rf-insl-hnd-dis No skin parameters.
This class defines styles
for the handle when it is
selected.
.rf-insl-dec, .rf-insl- No skin parameters.
inc
These classes define
styles for the step controls
to decrease and increase
the number.
.rf-insl-dec-sel, .rf- No skin parameters.
insl-inc-sel
These classes define
styles for the step controls
when they are selected.
.rf-insl-dec-dis, .rf- No skin parameters.
insl-inc-dis
These classes define
styles for the step controls
when they are disabled.
.rf-insl-tt generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the tool-tip on the
generalTextColor color
number slider.
tipBorderColor border
tipBackgroundColor background-color

A.2.7. <rich:inputNumberSpinner>

Table A.8. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-insp panelBorderColor border-color
This class defines styles
for the number spinner
itself.

46
 Rich selects

Class (selector) Skin Parameters Mapped CSS properties

.rf-insp-inp generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the input field on the
generalTextColor color
number spinner.
controlBackgroundColor background-color
.rf-insp-btns headerBackgroundColor background-color
This class defines styles panelBorderColor border-left-color
for the buttons on the
number spinner.
.rf-insp-dec, .rf-insp- No skin parameters.
inc
These classes define
styles for the step controls
to decrease and increase
the number.
.rf-insp-dec-dis, .rf- No skin parameters.
insp-inc-dis
These classes define
styles for the step controls
when they are disabled.

A.3. Rich selects

A.3.1. <rich:inplaceSelect>

Table A.9. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-is editorBackgroundColor background-color
This class defines styles generalTextColor border-bottom-color
for the in-place select
when it is in the default
state.
.rf-is-act No skin parameters.
This class defines styles
for the in-place select
when it is in the editing
state.
.rf-is-chng No skin parameters.
This class defines styles
for the in-place select

47
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

when it is in the changed
state.
.rf-is-dis No skin parameters.
This class defines styles
for the in-place select
when it is in the disabled
state.
.rf-is-fld editBackgroundColor background
This class defines styles generalTextColor color
for the in-place select field.
generalFamilyFont font-family
generalSizeFont font-size
.rf-is-opt generalTextColor border-color
This class defines styles
for an option for the in-
place select.
.rf-is-sel generalTextColor border-color
This class defines styles
for the selected option of
the in-place select.
.rf-is-lbl No skin parameters.
This class defines styles
for the label of the in-place
select.
.rf-is-dflt-lbl No skin parameters.
This class defines styles
for the default label of the
in-place select.
.rf-is-edit No skin parameters.
This class defines styles
for the in-place select
when it is being edited.
.rf-is-btn tabBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the buttons for the in-
place select.
.rf-is-btn-p tabBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the buttons for the in-
place select when they are
pressed.

48
 <rich:inplaceSelect>

Class (selector) Skin Parameters Mapped CSS properties

.rf-is-btn-set, .rf-is- No skin parameters.
btn-prepos, .rf-is-btn-
pos
These classes define the
positioning of the buttons.
.rf-is-lst-pos No skin parameters.
This class defines the
positioning of the list.
.rf-is-lst-dec editBackgroundColor background-color
This class defines styles panelBorderColor border-color
for a decreasing list for the
in-place select.
.rf-is-lst-scrl No skin parameters.
This class defines styles
for the list scrollbar.
.rf-is-shdw No skin parameters.
This class defines styles
for the in-place select
shadow.
.rf-is-shdw-t, .rf-is- No skin parameters.
shdw-b, .rf-is-shdw-l, .rf-
is-shdw-r
These classes define the
top, bottom, left, and right
edge of the in-place select
shadows.
.rf-is-btn-shdw No skin parameters.
This class defines styles
for the button shadows for
the in-place select.
.rf-is-none No skin parameters.
This class defines styles
for the in-place select
when it cannot be edited.

49
Appendix A. Style classes and...

A.3.2. <rich:select>

Table A.10. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-sel No skin parameters.
This class defines styles
for the select control itself.
.rf-sel-cntr panelBorderColor border-color
This class defines styles
for the container of the
select control.
.rf-sel-inp controlBackgroundColor background-color
This class defines styles
for the select control input
field.
.rf-sel-fld-err No skin parameters.
This class defines styles
for the input field when an
error occurs.
.rf-sel-opt generalTextColor color
This class defines styles generalSizeFont font-size
for an option in the select
generalFamilyFont font-family
control.
.rf-sel-sel generalTextColor border-color
This class defines styles
for the selected option of
the select control.
.rf-sel-dflt-lbl No skin parameters.
This class defines styles
for the default label of the
select control.
.rf-sel-btn headerBackgroundColor background-color
This class defines styles panelBorderColor border-left-color
for the button of the select
control.
.rf-sel-btn-arrow No skin parameters.
This class defines styles
for the arrow on the button.

50
 <rich:orderingList>

Class (selector) Skin Parameters Mapped CSS properties

.rf-sel-btn-dis No skin parameters.
This class defines styles
for the button of the select
control when it is disabled.
.rf-sel-lst-scrl No skin parameters.
This class defines styles
for the list scrollbar.
.rf-sel-shdw No skin parameters.
This class defines styles
for the select control
shadow.
.rf-sel-shdw-t, .rf-sel- No skin parameters.
shdw-b, .rf-sel-shdw-l,
.rf-sel-shdw-r
These classes define the
top, bottom, left, and right
edge of the select control
shadows.

A.3.3. <rich:orderingList>

Table A.11. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ord No skin parameters.
This class defines styles
for the orderingList control
itself.
.rf-ord-cntr No skin parameters.
This class defines styles
for the container of the
orderingList control.
.rf-ord-cptn headerTextColor color
This class defines styles headerSizeFont font-size
for the caption of the
headerFamilyFont font-family
orderingList control.
headerWeightFont font-weight
.rf-ord-lst No skin parameters.
This class defines styles
for the items list of the
orderingList control.

51
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-ord-hdr headerBackgroundColor background-color
This class defines styles headerTextColor color
for the header of the items
headerSizeFont font-size
list.
headerFamilyFont font-family
headerWeightFont font-weight
.rf-ord-opt generalTextColor color
This class defines styles generalSizeFont font-size
for an option in the
generalFamilyFont font-family
orderingList control.
.rf-ord-sel generalTextColor border-color
This class defines styles
for the selected option of
the orderingList control.
.rf-ord-dflt-lbl No skin parameters.
This class defines styles
for the default label of the
orderingList control.
.rf-ord-btn headerBackgroundColor background-color
This class defines styles panelBorderColor border-left-color
for the button of the
orderingList control.
.rf-ord-btn-dis No skin parameters.
This class defines styles
for the button of the
orderingList control when
it is disabled.
.rf-ord-lst-scrl No skin parameters.
This class defines styles
for the list scrollbar.

A.3.4. <rich:pickList>

Table A.12. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-pick No skin parameters.
This class defines styles
for the pickList control
itself.

52
 <rich:pickList>

Class (selector) Skin Parameters Mapped CSS properties

.rf-pick-src-cptn, .rf- headerTextColor color
pick-tgt-cptn headerSizeFont font-size
These classes define
headerFamilyFont font-family
styles for the source and
target captions of the headerWeightFont font-weight
pickList control.
.rf-pick-lst No skin parameters.
This class defines styles
for the items list of the
pickList control.
.rf-pick-hdr headerBackgroundColor background-color
This class defines styles headerTextColor color
for the header of the items
headerSizeFont font-size
list.
headerFamilyFont font-family
headerWeightFont font-weight
.rf-pick-opt generalTextColor color
This class defines styles generalSizeFont font-size
for an option in the pickList
generalFamilyFont font-family
control.
.rf-pick-sel generalTextColor border-color
This class defines styles
for the selected option of
the pickList control.
.rf-pick-dflt-lbl No skin parameters.
This class defines styles
for the default label of the
pickList control.
.rf-pick-btn headerBackgroundColor background-color
This class defines styles panelBorderColor border-left-color
for the button of the
pickList control.
.rf-pick-btn-dis No skin parameters.
This class defines styles
for the button of the
pickList control when it is
disabled.
.rf-pick-lst-scrl No skin parameters.
This class defines styles
for the list scrollbar.

53
Appendix A. Style classes and...

A.4. Panels and containers

A.4.1. <rich:panel>

Table A.13. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-p generalBackgroundColor background-color
This class defines styles panelBorderColor color
for the panel itself.
.rf-p-hdr headerBackgroundColor background-color, border-
This class defines styles color
for the header of a panel. headerTextColor color
headerSizeFont font-size
headerWeightFont font-weight
headerFamilyFont font-family
.rf-p-b generalTextColor color
This class defines styles generalSizeFont font-size
for the body of a panel.
generalFamilyFont font-family

A.4.2. <rich:accordion>

Table A.14. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ac panelBorderColor border-color
This class defines styles generalBackgroundColor background
for the accordion control
itself.
.rf-ac-itm-hdr panelBorderColor border-bottom-color
This class defines styles headerBackgroundColor background-color
for the header of an
headerTextColor color
accordion item.
headerWeightFont font-weight
headerFamilyFont font-family
headerSizeFont font-size
.rf-ac-itm-hdr-act, .rf- No skin parameters.
ac-itm-hdr-inact
These classes define
styles for the header when
the item is either active

54
 <rich:accordion>

Class (selector) Skin Parameters Mapped CSS properties

(expanded) or inactive
(collapsed).
.rf-ac-itm-hdr-dis tabDisabledTextColor color
This class defines styles
for the header when it is
disabled.
.rf-ac-itm-gr No skin parameters.
This class defines styles
for an item group.
.rf-ac-itm-cnt panelBorderColor border-bottom-color
This class defines styles generalTextColor color
for the content of an
generalFamilyFont font-family
accordion item.
generalSizeFont font-size
.rf-ac-itm-ico No skin parameters.
This class defines styles
for the item icon.
.rf-ac-itm-exp-ico No skin parameters.
This class defines styles
for the expanded icon for
an item.
.rf-ac-itm-ico-act, .rf- No skin parameters.
ac-itm-ico-inact
These classes define
styles for the icon when
the item is either active
(expanded) or inactive
(collapsed).
.rf-ac-itm-lbl No skin parameters.
This class defines styles
for the item label.
.rf-ac-itm-lbl-act, .rf- No skin parameters.
ac-itm-lbl-inact
These classes define
styles for the label when
the item is either active
(expanded) or inactive
(collapsed).

55
Appendix A. Style classes and...

A.4.3. <rich:collapsiblePanel>

Table A.15. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-cp panelBorderColor color
This class defines styles generalBackgroundColor background
for the collapsible panel
itself.
.rf-cp-hdr headerBackgroundColor background-color, border-
This class defines styles color
for the header of a headerTextColor color
collapsible panel.
headerWeightFont font-weight
headerFamilyFont font-family
headerSizeFont font-size
.rf-cp-hdr-exp, .rf-cp- No skin parameters.
hdr-colps
These classes define
styles for the header
when the item is either
expanded or collapsed.
.rf-cp-gr No skin parameters.
This class defines styles
for a collapsible panel
group.
.rf-cp-b generalTextColor color
This class defines styles generalFamilyFont font-family
for the body of a
generalSizeFont font-size
collapsible panel.
.rf-cp-ico No skin parameters.
This class defines styles
for the panel icon.
.rf-cp-exp-ico No skin parameters.
This class defines styles
for the expanded icon for a
panel.
.rf-cp-ico-exp, .rf-cp- No skin parameters.
ico-colps
These classes define
styles for the icon when

56
 <rich:popupPanel>

Class (selector) Skin Parameters Mapped CSS properties

the panel is either
expanded or collapsed.
.rf-cp-lbl No skin parameters.
This class defines styles
for the panel label.
.rf-cp-lbl-exp, .rf-cp- No skin parameters.
lbl-colps
These classes define
styles for the label
when the panel is either
expanded or collapsed.

A.4.4. <rich:popupPanel>

Table A.16. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-pp-btn No skin parameters.
This class defines styles
for the pop-up panel
button.
.rf-pp-shade No skin parameters.
This class defines styles
for the shading that covers
the page when presenting
a modal pop-up panel.
.rf-pp-cntr panelBorderColor border
This class defines styles generalBackgroundColor background
for the container for the
pop-up panel.
.rf-pp-hdr headerBackgroundColor background
This class defines styles
for the header of the pop-
up panel.
.rf-pp-hdr-cnt headerTextColor color
This class defines styles headerWeightFont font-weight
for the content of the
headerFamilyFont font-family
header.
headerSizeFont font-size

57
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-pp-cnt generalTextColor color
This class defines styles generalFamilyFont font-family
for the content of the pop-
generalSizeFont font-size
up panel.
.rf-pp-cnt-scrlr generalBackgroundColor background
This class defines styles
for the scroll bars of the
pop-up panel.
.rf-pp-hndlr No skin parameters.
This class defines styles
for borders of the pop-up
panel. The border handler
is used to re-size the
panel.
.rf-pp-hndlr-t, .rf-pp- No skin parameters.
hndlr-b, .rf-pp-hndlr-l,
.rf-pp-hndlr-r, .rf-pp-
hndlr-tl, .rf-pp-hndlr-tr,
.rf-pp-hndlr-bl, .rf-pp-
hndlr-br
These classes define
styles for the top, bottom,
left, right, top-left, top-
right, bottom-left, and
bottom-right edges of the
border handler.

A.4.5. <rich:tabPanel>

Table A.17. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-tab-hdr panelBorderColor border
This class defines styles tabBackgroundColor background-color
for a tab header.
generalTextColor color
.rf-tab-hdr-act additionalBackgroundColor background-color
This class defines styles
for a tab header when it is
active.

58
 <rich:tabPanel>

Class (selector) Skin Parameters Mapped CSS properties

.rf-tab-hdr-inact No skin parameters.
This class defines styles
for a tab header when it is
inactive.
.rf-tab-hdr-dis tabDisabledTextColor color
This class defines styles
for a tab header when it is
disabled.
.rf-tab-hdr-tabline-vis additionalBackgroundColor background-color
This class defines styles panelBorderColor border-color
for the header tab line
when it is visible.
.rf-tab-hdr-tabs No skin parameters.
This class defines styles
for the tabs in the header.
.rf-tab-hdr-spcr panelBorderColor border-bottom
This class defines styles
for the tab header spacer.
.rf-tab-lbl generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for the tab label.
.rf-tab-hdn No skin parameters.
This class defines styles
for the tab when it is
hidden.
.rf-tab-hdr-scrl-lft, additionalBackgroundColor background
.rf-tab-hdr-scrl-rgh panelBorderColor border
These classes define
generalFamilyFont font-family
styles for the left and right
controls for the tab header generalSizeFont font-size
scroller.
.rf-tab-hdr-tablst additionalBackgroundColor background
This class define styles for panelBorderColor border
the tab header list.
generalFamilyFont font-family
.rf-tab-hdr-brd tabBackgroundColor background
This class define styles for panelBorderColor border
the tab header border.

59
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-tab-cnt generalBackgroundColor background
This class define styles panelBorderColor border
for the content of the tab
generalFamilyFont font-family
panel.
generalSizeFont font-size

A.5. Tables and grids

A.5.1. <rich:dataTable>

Table A.18. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-dt tableBackgroundColor background-color
This class defines styles tableBorderWidth border-left-width, border-top-
for the table. width
tableBorderColor border-left-color, border-top-
color
.rf-dt-cap No skin parameters.
This class defines styles
for the table caption.
.rf-dt-r No skin parameters.
This class defines styles
for a table row.
.rf-dt-fst-r No skin parameters.
This class defines styles
for the first row in a table.
.rf-dt-c tableBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a table cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dt-nd tableBorderWidth border-bottom-width, border-
This class defines styles right-width
for a node. tableBorderColor border-bottom-color, border-
right-color

60
 <rich:dataTable>

Class (selector) Skin Parameters Mapped CSS properties

generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dt-hdr No skin parameters.
This class defines styles
for a table header.
.rf-dt-hdr-fst No skin parameters.
This class defines styles
for the first header.
.rf-dt-hdr-c tableHeaderBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a header cell. right-width
tableBorderColor border-bottom-color, border-
right-color
tableHeaderTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dt-shdr No skin parameters.
This class defines styles
for a table sub-header.
.rf-dt-shdr-fst No skin parameters.
This class defines styles
for the first sub-header.
.rf-dt-shdr-c tableHeaderBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a sub-header cell. right-width
tableBorderColor border-bottom-color, border-
right-color
tableHeaderTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dt-ftr No skin parameters.
This class defines styles
for a table footer.
.rf-dt-ftr-fst No skin parameters.
This class defines styles
for the first footer.

61
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-dt-ftr-c tableFooterBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a footer cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dt-sftr No skin parameters.
This class defines styles
for a table sub-footer.
.rf-dt-sftr-fst No skin parameters.
This class defines styles
for the first sub-footer.
.rf-dt-sftr-c tableFooterBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a sub-footer cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size

A.5.2. <rich:collapsibleSubTable>

Table A.19. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-cst No skin parameters.
This class defines styles
for the table.
.rf-cst-r No skin parameters.
This class defines styles
for a table row.
.rf-cst-fst-r No skin parameters.
This class defines styles
for the first row in a table.

62
 <rich:collapsibleSubTable>

Class (selector) Skin Parameters Mapped CSS properties

.rf-cst-c tableBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a table cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-cst-hdr No skin parameters.
This class defines styles
for a table header.
.rf-cst-hdr-fst No skin parameters.
This class defines styles
for the first header.
.rf-cst-hdr-fst-r No skin parameters.
This class defines styles
for the first row in the
header.
.rf-cst-hdr-c background-color
tableSubHeaderBackgroundColor
This class defines styles tableBorderWidth border-bottom-width, border-
for a header cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-cst-shdr No skin parameters.
This class defines styles
for a table sub-header.
.rf-cst-shdr-fst No skin parameters.
This class defines styles
for the first sub-header.
.rf-cst-shdr-c background-color
tableSubHeaderBackgroundColor
This class defines styles tableBorderWidth border-bottom-width, border-
for a sub-header cell. right-width
tableBorderColor border-bottom-color, border-
right-color

63
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-cst-ftr No skin parameters.
This class defines styles
for a table footer.
.rf-cst-ftr-fst No skin parameters.
This class defines styles
for the first footer.
.rf-cst-ftr-c background-color
tableSubFooterBackgroundColor
This class defines styles tableBorderWidth border-bottom-width, border-
for a footer cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-cst-sftr No skin parameters.
This class defines styles
for a table sub-footer.
.rf-cst-sftr-fst No skin parameters.
This class defines styles
for the first sub-footer.
.rf-cst-sftr-c background-color
tableSubFooterBackgroundColor
This class defines styles tableBorderWidth border-bottom-width, border-
for a sub-footer cell. right-width
tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size

A.5.3. <rich:collapsibleSubTableToggler>

Style classes (selectors)

.rf-csttg
This class defines styles for a toggle control.

64
 <rich:extendedDataTable>

.rf-csttg-exp
This class defines styles for a toggle control which expands the sub-table.

.rf-csttg-colps
This class defines styles for a toggle control which collapses the sub-table.

A.5.4. <rich:extendedDataTable>

Table A.20. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-edt tableBorderWidth, border
This class defines styles tableBorderColor
for the table. tableBackgroundColor background-color
.rich-edt-cnt No skin parameters.
This class defines styles
for the table content.
.rf-edt-c tableBorderWidth, border-bottom
This class defines styles tableBorderColor
for a table cell. tableBorderWidth, border-right
tableBorderColor

.rf-edt-c-cnt generalFamilyFont font-family

This class defines styles generalSizeFont font-size
for the contents of a cell.
.rf-edt-tbl-hdr tableBorderWidth, border-bottom
This class defines styles tableBorderColor
for the table header. tableHeaderTextColor color
generalFamilyFont font-family
generalSizeFont font-size
tableHeaderTextColor color
.rich-edt-hdr No skin parameters.
This class defines styles
for a header.
.rf-edt-hdr-c tableBorderWidth, border-bottom
This class defines styles tableBorderColor
for a table header cell. tableBorderWidth, border-right
tableBorderColor

.rf-edt-hdr-c-cnt generalFamilyFont font-family

This class defines styles generalSizeFont font-size
for the contents of a
tableHeaderTextColor color
header cell.

65
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-edt-tbl-ftr tableBorderWidth, border-top
This class defines styles tableBorderColor
for the table footer. tableFooterBackgroundColor background-color

.rich-edt-ftr tableBorderWidth, border-top

This class defines styles tableBorderColor
for a footer. tableFooterBackgroundColor background-color

.rich-edt-ftr-cnt No skin parameters.

This class defines styles
for the content of a footer.
.rf-edt-ftr-c tableBorderWidth, border-bottom
This class defines styles tableBorderColor
for a table footer cell. tableBorderWidth, border-right
tableBorderColor

.rf-edt-ftr-c-cnt generalFamilyFont font-family

This class defines styles generalSizeFont font-size
for the contents of a footer
generalTextColor color
cell.
.rf-edt-ftr-emp tableBorderWidth, border-right
This class defines styles tableBorderColor
for an empty footer cell.
.rich-edt-ftr-fzn No skin parameters.
This class defines styles
for a frozen footer.
.rich-edt-b No skin parameters.
This class defines styles
for the body of the table.
.rf-edt-r-sel tableBorderWidth, border-right
This class defines styles tableBorderColor
for the selected row.
.rich-edt-r-act No skin parameters.
This class defines styles
for the active row.
.rich-edt-rsz No skin parameters.
This class defines styles
for the table resizer.
.rich-edt-rsz-cntr No skin parameters.
This class defines styles
for the resize container.

66
 <rich:dataGrid>

Class (selector) Skin Parameters Mapped CSS properties

.rich-edt-rsz-mkr generalTextColor border-left
This class defines styles
for the resize marker.
.rf-edt-rord tableBorderWidth, border
This class defines tableBorderColor
styles for the re-order tableHeaderBackgroundColor background-color
functionality. / tableBackgroundColor
.rich-edt-rord-mkr No skin parameters.
This class defines styles
for the re-order marker.
.rich-edt-spcr No skin parameters.
This class defines a
spacer for Internet
Explorer 7 compatibility.

A.5.5. <rich:dataGrid>

Table A.21. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-dg tableBackgroundColor background-color
This class defines styles tableBorderWidth border-left-width, border-top-
for the grid. width
tableBorderColor border-left-color, border-top-
color
.rf-dg-cap No skin parameters.
This class defines styles
for the grid caption.
.rf-dg-r No skin parameters.
This class defines styles
for a grid row.
.rf-dg-c tableBorderWidth border-bottom-width, border-
This class defines styles right-width
for a grid cell. tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size

67
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-dg-nd-c tableBorderWidth border-bottom-width, border-
This class defines styles right-width
for a node cell. tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dg-th tableBorderWidth border-bottom-width
This class defines styles tableBorderColor border-bottom-color
for the grid header section.
.rf-dg-h No skin parameters.
This class defines styles
for a grid header.
.rf-dg-h-f No skin parameters.
This class defines styles
for the first header.
.rf-dg-h-r No skin parameters.
This class defines styles
for a header row.
.rf-dg-h-c tableHeaderBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a header cell. right-width
tableBorderColor border-bottom-color, border-
right-color
tableHeaderTextColor color
generalFamilyFont font-family
generalSizeFont font-size
.rf-dg-f No skin parameters.
This class defines styles
for a grid footer.
.rf-dg-f-f No skin parameters.
This class defines styles
for the first footer.
.rf-dg-f-c tableFooterBackgroundColor background-color
This class defines styles tableBorderWidth border-bottom-width, border-
for a footer cell. right-width

68
 <rich:list>

Class (selector) Skin Parameters Mapped CSS properties

tableBorderColor border-bottom-color, border-
right-color
generalTextColor color
generalFamilyFont font-family
generalSizeFont font-size

A.5.6. <rich:list>

Table A.22. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ulst-itm generalTextColor color
This class defines styles generalFamilyFont font-family
for an item in an unordered
generalSizeFont font-size
list.
.rf-olst-itm generalTextColor color
This class defines styles generalFamilyFont font-family
for an item in an unordered
generalSizeFont font-size
list.
.rf-dlst-trm generalTextColor color
This class defines styles generalFamilyFont font-family
for the term of an item in a
generalSizeFont font-size
definition list.
.rf-dlst-dfn generalTextColor color
This class defines styles generalFamilyFont font-family
for the definition of an item
generalSizeFont font-size
in a definition list.

A.5.7. <rich:dataScroller>

Table A.23. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ds generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for the data scroller.
tableBackgroundColor background
.rf-ds-btn generalTextColor color
This class defines styles generalFamilyFont font-family
for buttons in the data
generalSizeFont font-size
scroller.
tableBorderColor border-color

69
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

headerBackgroundColor background-color
.rf-ds-btn-first No skin parameters.
This class defines styles
for the first button.
.rf-ds-btn-fastrwd No skin parameters.
This class defines styles
for the fast rewind button.
.rf-ds-btn-prev No skin parameters.
This class defines styles
for the previous button.
.rf-ds-btn-next No skin parameters.
This class defines styles
for the next button.
.rf-ds-btn-fastfwd No skin parameters.
This class defines styles
for the fast forward
button.
.rf-ds-btn-last No skin parameters.
This class defines styles
for the last button.
.rf-ds-nmb-btn generalTextColor color
This class defines styles generalFamilyFont font-family
for page number buttons
generalSizeFont font-size
in the data scroller.
tableBorderColor border-color
tableBackgroundColor background-color
.rf-ds-press tableBorderColor border-color
This class defines styles
for a data scroller when a
control is pressed.
tableBackgroundColor background
.rf-ds-act tableBorderColor color
This class defines styles
for an active data scroller.
.rf-ds-dis tableBorderColor color
This class defines styles
for a disabled data
scroller.

70
 Trees

A.6. Trees

A.6.1. <rich:tree>

Style classes (selectors)

.rf-tr-nd
This class defines styles for the nodes in a tree.

.rf-tr-nd-last
This class defines styles for last node in a tree.

.rf-tr-nd-colps
This class defines styles for a collapsed tree node.

.rf-tr-nd-exp
This class defines styles for an expanded tree node.

A.6.2. <rich:treeNode>

Table A.24. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-trn generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for a tree node.
.rf-trn-lbl No skin parameters.
This class defines styles
for a tree node label.
.rf-trn-cnt No skin parameters.
This class defines styles
for tree node content.
.rf-trn-sel additionalBackgroundColor background
This class defines styles
for a selected tree node.
.rf-trn-ldn additionalBackgroundColor background
This class defines styles
for a tree node when it is
loading.
.rf-trn-hnd No skin parameters.
This class defines styles
for a tree node handle.

71
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-trn-hnd-lf No skin parameters.
This class defines styles
for the handle of a leaf
node.
.rf-trn-hnd-colps No skin parameters.
This class defines styles
for the handle of a
collapsed node.
.rf-trn-hnd-exp No skin parameters.
This class defines styles
for the handle of an
expanded node.
.rf-trn-hnd-ldn-fct No skin parameters.
This class defines styles
for the loading facet of a
tree node handle.
.rf-trn-ico No skin parameters.
This class defines styles
for tree node icon.
.rf-trn-ico-lf No skin parameters.
This class defines styles
for the icon of a leaf node.
.rf-trn-ico-colps No skin parameters.
This class defines styles
for the icon of a collapsed
node.
.rf-trn-ico-exp No skin parameters.
This class defines styles
for the icon of an
expanded node.
.rf-trn-ico-cst No skin parameters.
This class defines styles
for a custom node icon.

72
 Menus and toolbars

A.7. Menus and toolbars

A.7.1. <rich:dropDownMenu>

Table A.25. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ddm-lbl headerFamilyFont font-family
This class defines styles
for the label of the drop-
down menu.
.rf-ddm-dis tabDisabledTextColor color
This class defines styles
for the drop-down menu
when it is disabled.
.rf-ddm-lbl-dis headerFamilyFont font-family
This class defines styles
for the label of the drop-
down menu when it is
disabled.
.rf-ddm-pos No skin parameters.
This class defines the
positioning of the drop-
down menu.
.rf-ddm-lbl-unsel No skin parameters.
This class defines styles
for the label of the drop-
down menu when it is
unselected.
.rf-ddm-lst panelBorderColor border-color
This class defines styles additionalBackgroundColor background-color
for the drop-down list.
.rf-ddm-lst-bg additionalBackgroundColor border-color
This class defines styles
for the background of the
drop-down list.
.rf-ddm-sublst No skin parameters.
This class defines the
positioning of the menu
when used as a sub-
menu.

73
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-ddm-itm generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for a menu item.
.rf-ddm-itm-sel headerBackgroundColor border-color
This class defines styles tabBackgroundColor background-color
for a menu item when it is
selected.
.rf-ddm-itm-unsel No skin parameters.
This class defines styles
for a menu item when it is
unselected.
.rf-ddm-itm-dis tabDisabledTextColor color
This class defines styles
for a menu item when it is
disabled.
.rf-ddm-itm-lbl generalTextColor color
This class defines styles
for the label in a menu
item.
.rf-ddm-itm-ic No skin parameters.
This class defines styles
for the icon in a menu item.
.rf-ddm-emptyIcon No skin parameters.
This class defines styles
for an empty icon in a
menu item.
.rf-ddm-sep panelBorderColor border-top-color
This class defines styles
for a menu separator.
.rf-ddm-nd No skin parameters.
This class defines styles
for a menu node.

74
 <rich:contextMenu>

A.7.2. <rich:contextMenu>

Table A.26. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ctx-lbl headerFamilyFont font-family
This class defines styles
for the top level container
of the context menu.
.rf-ctx-dis tabDisabledTextColor color
This class defines styles
for the context menu when
it is disabled.
.rf-ctx-lbl-dis headerFamilyFont font-family
This class defines styles
for the top level of the
context menu when it is
disabled.
.rf-ctx-pos No skin parameters.
This class defines the
positioning of the context
menu.
.rf-ctx-lbl-unsel No skin parameters.
This class defines styles
for the top level of the
context menu when it is
unselected.
.rf-ctx-lst panelBorderColor border-color
This class defines styles additionalBackgroundColor background-color
for the context list.
.rf-ctx-lst-bg additionalBackgroundColor border-color
This class defines styles
for the background of the
context list.
.rf-ctx-sublst No skin parameters.
This class defines the
positioning of the menu
when used as a sub-
menu.
.rf-ctx-itm generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for a menu item.

75
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-ctx-itm-sel headerBackgroundColor border-color
This class defines styles tabBackgroundColor background-color
for a menu item when it is
selected.
.rf-ctx-itm-unsel No skin parameters.
This class defines styles
for a menu item when it is
unselected.
.rf-ctx-itm-dis tabDisabledTextColor color
This class defines styles
for a menu item when it is
disabled.
.rf-ctx-itm-lbl generalTextColor color
This class defines styles
for the label in a menu
item.
.rf-ctx-itm-ic No skin parameters.
This class defines styles
for the icon in a menu item.
.rf-ctx-emptyIcon No skin parameters.
This class defines styles
for an empty icon in a
menu item.
.rf-ctx-sep panelBorderColor border-top-color
This class defines styles
for a menu separator.
.rf-ctx-nd No skin parameters.
This class defines styles
for a menu node.

A.7.3. <rich:panelMenu>

Table A.27. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm No skin parameters.
This class defines styles
for the panel menu itself.
.rf-pm-gr panelBorderColor border-top-color
This class defines styles
for a panel menu group.

76
 <rich:panelMenu>

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm-exp, .rf-pm-colps No skin parameters.
These classes define
styles for the panel menu
when it is expanded or
collapsed.
.rf-pm-ico No skin parameters.
This class defines styles
for the panel menu icons.
.rf-pm-ico-exp, .rf-pm- No skin parameters.
ico-colps
These classes define
styles for the panel menu
icons when they are
expanded or collapsed.
.rf-pm-hdr-exp, .rf-pm- No skin parameters.
hdr-colps
These classes define
styles for the panel menu
headers when they are
expanded or collapsed.
.rf-pm-itm panelBorderColor border-top-color
This class defines styles generalTextColor color
for a panel menu item.
.rf-pm-itm-gr No skin parameters.
This class defines styles
for a panel menu item
as part of a panel menu
group.
.rf-pm-itm:hover additionalBackgroundColor background-color
This class defines styles
for a panel menu item
when the mouse hovers
over it.
.rf-pm-itm-sel No skin parameters.
This class defines styles
for a panel menu item
when it is selected.
.rf-pm-itm-dis tabDisabledTextColor color
This class defines styles
for a panel menu item
when it is disabled.

77
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm-itm-ico No skin parameters.
This class defines styles
for the icon in a panel
menu item.
.rf-pm-itm-exp-ico No skin parameters.
This class defines styles
for the icon in a panel
menu item when it is
expanded.
.rf-pm-itm-lbl generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the label in a panel
menu item.
.rf-pm-gr panelBorderColor border-top-color
This class defines styles
for a panel menu group.
.rf-pm-gr-gr No skin parameters.
This class defines styles
for a panel menu group
as part of another panel
menu group.
.rf-pm-gr-sel No skin parameters.
This class defines styles
for a panel menu group
when it is selected.
.rf-pm-gr-hdr generalTextColor color
This class defines styles
for the header of a panel
menu group.
.rf-pm-gr-hdr:hover additionalBackgroundColor background
This class defines styles
for the header of a panel
menu group when the
mouse hovers over it.
.rf-pm-gr-hdr-dis tabDisabledTextColor color
This class defines styles
for the header of a panel
menu group when it is
disabled.

78
 <rich:panelMenu>

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm-gr-ico No skin parameters.
This class defines styles
for the icon in a panel
menu group.
.rf-pm-gr-exp-ico No skin parameters.
This class defines styles
for the icon in a panel
menu group when it is
expanded.
.rf-pm-gr-lbl generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the label in a panel
menu group.
.rf-pm-gr-cnt No skin parameters.
This class defines styles
for the content of a panel
menu group.
.rf-pm-top-itm panelBorderColor border-color
This class defines styles generalTextColor color
for the top panel menu
item.
.rf-pm-top-itm-gr No skin parameters.
This class defines styles
for the top panel menu
item as part of a panel
menu group.
.rf-pm-top-itm:hover headerTextColor color
This class defines styles
for the top panel menu
item when the mouse
hovers over it.
.rf-pm-top-itm-sel No skin parameters.
This class defines styles
for the top panel menu
item when it is selected.
.rf-pm-top-itm-dis tabDisabledTextColor color
This class defines styles
for the top panel menu
item when it is disabled.

79
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm-top-itm-ico No skin parameters.
This class defines styles
for the icon in the top panel
menu item.
.rf-pm-top-itm-exp-ico No skin parameters.
This class defines styles
for the icon in the top
panel menu item when it is
expanded.
.rf-pm-top-itm-lbl generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the label in the top
panel menu item.
.rf-pm-top-gr panelBorderColor border-color
This class defines styles
for the top panel menu
group.
.rf-pm-top-gr-gr No skin parameters.
This class defines styles
for the top panel menu
group as part of another
panel menu group.
.rf-pm-top-gr-sel No skin parameters.
This class defines styles
for the top panel menu
group when it is selected.
.rf-pm-top-gr-hdr headerTextColor color
This class defines styles headerBackgroundColor background-color
for the header of the top
panel menu group.
.rf-pm-top-gr-hdr-dis tabDisabledTextColor color
This class defines styles additionalBackgroundColor background-color
for the header of the top
panel menu group when it
is disabled.
.rf-pm-top-gr-ico No skin parameters.
This class defines styles
for the icon in the top panel
menu group.

80
 <rich:toolbar>

Class (selector) Skin Parameters Mapped CSS properties

.rf-pm-top-gr-exp-ico No skin parameters.
This class defines styles
for the icon in the top panel
menu group when it is
expanded.
.rf-pm-top-gr-lbl generalSizeFont font-size
This class defines styles generalFamilyFont font-family
for the label in the top
panel menu group.
.rf-pm-top-gr-cnt No skin parameters.
This class defines styles
for the content of the top
panel menu group.

A.7.4. <rich:toolbar>

Table A.28. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-tb panelBorderColor border-color
This class defines styles headerTextColor color
for the toolbar itself.
headerBackgroundColor background-color
headerFamilyFont font-family
headerSizeFont font-size
headerWeightFont font-weight
.rf-tb-itm No skin parameters.
This class defines styles
for an item in the toolbar.
.rf-tb-sep No skin parameters.
This class defines styles
for a separator in the
toolbar.
.rf-tb-sep-grid, .rf-tb- No skin parameters.
sep-line, .rf-tb-sep-disc,
.rf-tb-sep-square
These classes define
styles for grid, line, disc,
and square separators.

81
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-tb-cntr No skin parameters.
This class defines styles
for the container of the
toolbar.

A.8. Output and messages

A.8.1. <rich:message>

Table A.29. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-msg generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for the message itself.
.rf-msg-err errorColor color
This class defines styles
for an error message.
.rf-msg-ftl errorColor color
This class defines styles
for a fatal message.
.rf-msg-inf generalTextColor color
This class defines
styles for an information
message.
.rf-msg-wrn warningTextColor color
This class defines styles
for a warning message.
.rf-msg-ok generalTextColor color
This class defines styles
for a basic OK message.
.rf-msg-sum, .rf-msg-det No skin parameters.
These classes define
styles for the summary or
details of a message.

82
 <rich:messages>

A.8.2. <rich:messages>

Table A.30. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-msgs generalFamilyFont font-family
This class defines styles generalSizeFont font-size
for the message itself.
.rf-msgs-err errorColor color
This class defines styles
for an error message.
.rf-msgs-ftl errorColor color
This class defines styles
for a fatal message.
.rf-msgs-inf generalTextColor color
This class defines
styles for an information
message.
.rf-msgs-wrn warningTextColor color
This class defines styles
for a warning message.
.rf-msgs-ok generalTextColor color
This class defines styles
for a basic OK message.
.rf-msgs-sum, .rf-msgs- No skin parameters.
det
These classes define
styles for the summary or
details of a message.

A.8.3. <rich:notify>

Table A.31. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ntf No skin parameters.
This class defines styles
for notification
.rf-ntf-shdw headerBackgroundColor background-color
This class defines style headerTextColor color
of the shadow under
notification box.

83
Appendix A. Style classes and...

Class (selector) Skin Parameters Mapped CSS properties

.rf-ntf-cnt panelBorderColor border-color
This class defines style of generalBackgroundColor background-color
the content of notification
panelTextColor color
box.
.rf-ntf-ico No skin parameters.
This class defines style for
notification icon.
.rf-ntf-sum No skin parameters.
This class defines style
for notification message
summary.
.rf-ntf-det No skin parameters.
This class defines style
for notification message
detail.
.rf-ntf-cls No skin parameters.
This class defines style for
element wrapping close
button.
.rf-ntf-cls-ico No skin parameters.
This class defines style for
close button icon.

A.8.4. <rich:notifyMessage>

Table A.32. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ntf-inf generalTextColor color
This class defines
styles for an informative
message.
.rf-ntf-wrn No skin parameters.
This class defines styles
for a warning notifications.
.rf-ntf-err No skin parameters.
This class defines styles
for a error notifications.
.rf-ntf-ftl No skin parameters.
This class defines styles
for a fatal notifications.

84
 <rich:notifyStack>

Class (selector) Skin Parameters Mapped CSS properties

.rf-ntf-inf .rf-ntf-ico, No skin parameters.
.rf-ntf-wrn .rf-ntf-ico,
.rf-ntf-err .rf-ntf-ico,
.rf-ntf-ftl .rf-ntf-ico
These classes define style
for notification icon based
on severity of notification
message.

A.8.5. <rich:notifyStack>

Table A.33. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-ntf-pos-tl No skin parameters.
This class defines
where top-left stack
of notification will be
positioned
.rf-ntf-pos-tr No skin parameters.
This class defines
where top-right stack
of notification will be
positioned
.rf-ntf-pos-bl No skin parameters.
This class defines
where bottom-left stack
of notification will be
positioned
.rf-ntf-pos-br No skin parameters.
This class defines
where bottom-right stack
of notification will be
positioned

85
Appendix A. Style classes and...

A.8.6. <rich:progressBar>

Table A.34. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-pb-lbl No skin parameters.
This class defines styles
for labels on the progress
bar.
.rf-pb-prgs panelBorderColor border-color
This class defines styles selectControlColor background-color
for the progressed portion
of the progress bar.
.rf-pb-init, .rf-pb-fin generalTextColor color
These classes define generalFamilyFont font-family
styles for the initial state
generalSizeFont font-size
and finished state.

A.8.7. <rich:tooltip>

Table A.35. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties

.rf-tt No skin parameters.
This class defines styles
for the tool-tip itself.
.rf-tt-loading No skin parameters.
This class defines styles
for the tool-tip when it is
loading.
.rf-tt-cnt No skin parameters.
This class defines styles
for the tool-tip content.
.rf-tt-cntr tipBorderColor border-color
This class defines styles generalFamilyFont font-family
for the progressed portion
generalSizeFont font-size
of the progress bar.

86
 Drag and drop

A.9. Drag and drop

A.9.1. <rich:dropTarget>

Style classes (selectors)

.rf-drp-hvr
This class defines styles for the drop target when a dragged item is hovering over it.

.rf-drp-hlight
This class defines styles for a highlighted drop target.

A.9.2. <rich:dragIndicator>

Style classes (selectors)

.rf-ind
This class defines styles for the drag indicator.

.rf-ind-drag.accept
This class defines styles for the indicator when it is over an acceptable drop target.

.rf-ind-drag.reject
This class defines styles for the indicator when it is over an unacceptable drop target.

.rf-ind-drag.default
This class defines styles for the indicator when it is being dragged, and is not over any drop
targets.

87
88
Appendix B. Migration Notes
This section of the guide will track any breaking changes introduced in new releases, and identify
any steps required to accommodate those changes in your application.

B.1. RichFaces 4.3.0.Final

B.1.1. Built-in sorting and filtering controls
The <extendedDataTable> now has built-in sorting and filtering controls. If you have existing
<extendedDataTable> with custom sort and/or filter controls, you will want to disable the built-in
sort and/or filter controls. This can be done either on a column-by-column basis, or for all columns
in your applications.

For details on disabling the built-in sort and filter controls, refer to sections "External filter controls"
and "External sort controls" in the RichFaces Component Reference.

B.1.2. NotifyMessage string escaping

Prior to version 4.3.0.Final, the message summary and details of the <rich:notifyMessage> and
<rich:notifyMessages> components were not escaped. In the 4.3.0.Final release, an attribute
escape was added with a default value true.

B.1.3. Select input validation

The <rich:select> now validates that manually entered input values match one of the values of
the provided list (including support for client-side validation).

89
90
Appendix C. Revision History
Revision History
Revision 1.0 Mon Apr 11 2011 SeanRogers
4.0.0.Final Release
Revision 1.1 Wed Nov 16 2011 BrianLeathem, LukasFryc
4.1.0.Final Release
Revision 1.2 Wed Feb 22 2011 BrianLeathem, LukasFryc
4.2.0.Final Release

91
92