Notes on RichFaces - The Risberg Family

granddetourfannieInternet and Web Development

Feb 2, 2013 (4 years and 5 months ago)

173 views

Page
1

Notes on
RichFaces

Created 05/10/07

Updated 05/30/07
,
Updated 10
/04/07
, Updated 02/15/08
, Updated 08/02
/08, Updated 12/13/08, Updated 02/13/09

Updated 03
/03/09
, Updated 03/21
/09
, Updated 03/24
/09
,
Updated 05/20/09
, Updated 06/05/09
,
Updated 07/31/09

Update
d 08/30
/09
, Updated 09/16/09
, Updated 10/29/09
, Updated 01/19
/10
, Updated 02/27/10

Introduction

RichFaces is an advanced
component library for
JavaServer Faces

built on the open source framework
Ajax4jsf
. It
allows easy integration of
Ajax

capabilities in
to enterprise application development.


RichFaces enriches the Ajax4jsf framework in two ways. First, it expands the number of visual ready
-
to
-
use
components.
The components look much like Java Swing components, or similar ones.
Secondly, it implements
the
skinnability feature of the Ajax4jsf framework including a large number of predefined skins.

Using skinnability, it
is easier to manage the look
-
and
-
feel of an application.


RichFaces originated from
Ajax4jsf

framework which was created and designed b
y Alexander Smirnov.
In the fall
of 2005, Smirnov joined Exadel and continued to develop the framework. The first version of what would become
Ajax4jsf was released in March 2006. Later in the same year, Exadel VCP was split off and the Ajax4jsf framewo
rk
and Rich Faces was born. While RichFaces provided out
-
of
-
the
-
box components or what’s called a component
-
centric Ajax approach (components do everything you need), Ajax4jsf provided what’s called page
-
wide Ajax
support. You as a developer specify what

parts of the page should be processed on
the
server after some client side
user actions and what parts should be updated after processing. Ajax4jsf became an open source project hosted on
Java.net while RichFaces became a commercial JSF component library
.


In March 2007
JBoss

(now a division of
Red Hat
) and Exadel signed a partnership where Ajax4jsf and RichFaces
would now be under the JBoss umbrella and be called JBoss Ajax4jsf and JBoss RichFaces. RichFaces would now
also be open source and free. In S
eptember 2007, JBoss and Exadel decided to merge Ajax4jsf and RichFaces under
the RichFaces name. It made sense as both libraries were now free and open source. Having just one product
solved many version and compatibility issues that existed before, suc
h as which version of Ajax4jsf works with
what version of RichFaces.


The current release is 3.3.2
.
SR1, released

October 14
,

2009.

RichFaces also inc
lude
s

the prototype and
script.a
c
u
l
o.
us JavaScript libraries.


There are ove
r 80 RichFaces components avai
lable today. S
ome have over 50 different attribut
es, making them very
flexible. This document is organized as:



Resources



Example



RichFaces basic concepts



More a4j: tags, concepts and features



Input components



Output components



Data iteration components



S
election components



Menu components



Tree and scrollable table components



Skinability (themes)


There is a live demo of Rich Faces at
http://livedemo.exadel.com/richfaces
-
demo/index.jsp
.

Our

login is
jrisberg
@aol.com
, with the fall 2008 password.

The live

demo allows you to see each of the

component types

through examples of their choosing
.

Kind of like the quick reference cards. It doesn’t allow you to construct the
components

interactively

and then process and view them.

It also allows you to see each

of them in the standard
skins.

Page
2

Recent Releases

Version 3.3.2.SR1
, released
October

14th
,

2009. Mostly bug fixes beyond 3.3.0.

Consider
switching to

this in the
future
.


Version
3.3.0
, released January 2009. A
dded rich:editor
, improvements to e
xtended d
ata table
.


Version
3.2.x
, released
September 9, 2008
. A
dded rich:hotkey, rich:ajaxValidator, rich:beanValidator,
rich:graphVali
d
ator, i
mprovement to dataTableScroller
,
new E
xtendedDataTable (
manageable

selection of rows,
column
s recording, grouping by co
lumns
, etc.).

We

are currently using this

version
(
3.2.2.SR1
)
.


Version

3.1.x
, released

June 2008: no new comp
on
ents,

this was a

focus on stability.


RichFaces also depends on the following libraries: commons
-
beanutils.jar, commons
-
collections.jar, commo
ns
-
digester.jar, commons
-
logging.jar
.


As indicated above, w
e are
currently using Version 3.2.2.SR
1.


RichFaces is shipped as three interrelated libraries:
-
api,
-
ui, and

impl. You must use consistent versions of all
three.

Resources

There is a develop
er’s reference guide shipped with t
he download, which is
over 800 pages long.



“JBoss Rich
Faces 3.3” by
Demetrio Filocamo
. P
ackt Publishing, October 2009,
320 pages. List price $39.99,
Amazon price $31.44, used from $26.33. Not yet reviewed on Amazon.
com. We looked through this in the
bookstore, and it has a n
umber of examples of using Rich
Faces.

A contact management and event scheduling
program is built.


“Practical RichFaces” by Max Katz. Apress, December 2008
, 300 pages. List price $39.99, Amazo
n price $39.99,
used from $24.33
.

Rated 4 stars on Amazon.com.


This was the first
printed book on Rich Faces, and it is by the
main developer.
JBoss RichFaces is a rich JSF component library that helps developers quickly develop next

generation web appl
ications.
Practical RichFaces

describes how to best take advantage of RichFaces, the integration
of the Ajax4jsf and R
ichFaces libraries, to create
flexible and powerful programs.

Assuming some JSF background,
it shows you how you can radically reduce pro
gramming time and effort to create rich AJAX
-
based applications.


“An Introduction to RichFaces”,
http://www.ibm.com/developerworks/java/library/j
-
richfaces/index.html

May
2008.


For more information see
RichFaces User Forum
.


There is a reference card at DZ
one
. We have a printed copy
.

RichFaces Basic C
oncepts

RichFaces is a rich componen
t library for JSF and an advanced framework for easily integrating AJAX capabilities
into business application development.

The RichFaces components come ready to use out
-
of
-
the
-
box, so developers
can immediately save time in taking advantage of component

features to create Web applications that provide
greatly improved user experience more reliably and more quickly.


RichFaces also includes strong support for the
skinnability of JSF applications.


RichFaces also takes full advantage of the benefits of the

JSF framework including
lifecycle, validation, and conversion facilities, along with the management of static and dynamic resources.


RichFaces differs from other AJAX approaches by enabling page
-
oriented AJAX support instead of the traditional
component
-
oriented support.

This means you can define an event in the page that invokes a particular AJAX
request and then you can also define those areas of the page that need to be synchronized with the JSF Component
Tree after this particular AJAX request is pro
cessed on the server.

Page
3

Visual Appearance

Most of the RichFaces components create a visual appearance similar to desktop applications, with checkboxes,
dialog boxes, panels, tabs, sliders, etc. The background colors (by default) are sky blue, with black edg
es, and white
regions. Here is a typical screen:



This shows a toolbar at the top and button, a panel in the middle, and a table inside that.


Here is a data table and a pager:



Here is a more comprehensive example:

Page
4



In this, we can see the structur
e of the panels, the top banner that was probably produced by Seam Gen, a number of
buttons, a colored image in the upper left, a pop
-
up window in the middle right, and some custom icon
-
based
components near the lower right. It still has its roots in Rich
Faces but it is starting to look unique. The trick to
making this look interesting is the icons and the color overrides.

Basic display model of RichFaces

The display model is based on “skins”.


Skins are basically set of colors to use for particular regio
ns on the page. They aren’t really like WordPress themes,
controlling layout, font management, background colors, etc. For that, you are dealing with a level above skins.

Page
5



This confirms how the skin is defined as a set of colors and fonts for named are
as, supported with specific image
and files and ge
nerated gradient files. The gradients help allow the results to look like desktop applications such as
those based on Windows XP
.

Ajax4Java

We will begin our technical discussion with Ajax4Java, commonly k
nown as a4j. As described in the introduction,
this is an Ajax library for JSF.


Ajax
-
based
JSF
component libraries offer a refreshed approach to Ajax by putting separation between the application
and the low
-
level
XMLHttpRequest
object, significantly red
ucing the risk of letting Ajax through the door. Ajax
-
enabled
JSF
component libraries such as Ajax4jsf execute the
JSF
life cycle asynchronously in response to user
interactions, resulting in partial page updates that don’t disrupt the user’s activity. Eve
n better, this exchange is
transparent to the developer, who doesn’t have to touch a line of JavaScript.


The most important a4j tags are:





a4j:support


adds Ajax processing onto any JSF component. Typically applied to buttons and input fields



a4j:comm
andButton


this a button that only performs an Ajax fetch, rerendering a portion of the page.



a4j:commandLink


similar to commandButton, but this
appears

as a link.


Page
6

The a4j:support tags
deserve

more discussion. It’s used to bind a user
-
initiated JavaSc
ript event to a server

side
action invoked via Ajax and to designate regions of the page that get rerendered from the Ajax response,
encompassing the essence of Ajax4jsf.


Page rendering is used to drive the results of the Ajx request. You can specify any

id on the page and cause
rendering to occur within and under it.


However, do not try to rerender a page element that itself has a rendered tag on it.


The structure of a request is as follows:



The key sentence here is “Ajax4jsf filter the JSF response

and the Ajax engine that receives the partial response
stitches those changes into the rendered page

.

This happens very quickly.

Sending an Ajax request to the Server

The a4j:support tag sends an AJAX request based on a DHTML event supported by the pare
nt component. For
instance it might be used within an editing component, to inform the server.


At the top of the file, a4j is bound to the namespace
http://richfaces.org/a4j
.


Here is an example:



<h:selectOn
eMenu id=”
account
” rendered=”true”



value=”#{accountManager.selectedAccount
Id}”>


<f:selectItems
value=”#{accountManager.validAccountSelectList}”
/>




<a
4j
:support event=”onchange”




reRender=”attributes”




actionListener=”#{accountManager.resetAccount
}”



ajaxSingle=”true”

/>


</h:selectOneMenu>

Page
7


The reRender attribute contains the ids of DOM elements which are to be re
-
rendered. These must be act
ual DOM
elements present at run
-
time, not the names of seam s:decorate tags. The elements must also not have a
“rendered”attribute applied.


The a4j:commandButton and a4j:comnandLink tags are similar to their JSF versions, but trigger an AJAX request.

If
you combine a h:commandButton wi
th a a:support, you get almost the same thing, but there are two requests set,
one of which is a full page repaint.


Using a4j:outputPanel.
The component is used for components grouping in the Ajax output area, which offers
several additional output oppor
tunities such as inserting of non
-
present in tree components, saving of transient
elements after Ajax request and some others.


Using a4:commandButton

component is very similar to JSF
<h:commandButton>

, the only difference is that an
Ajax form submit is g
enerated on a click and it allows dynamic rerendering after a response comes back.


The a4j:poll tag enables periodic polling of the server via an AJAX request.


The a4j:push tag sends a request to the server.

Structure of a RichFaces page

and its CSS

Each

page is defined by a nested set of tags, with typically very little HTML remaining. This is quite different from
typical JSP or PHP pages.

Here is an example:


<rich:panelBar height="192" width="256">


<rich:panelBarItem label="#{dWRFD1.calComp} #{dWRF
D1.info}">


<h:outputText value="#{dWRFD1.calCompText}" style="font: menu;" />


</rich:panelBarItem>


<rich:panelBarItem label="#{dWRFD1.lsComp} #{dWRFD1.info}">


<h:outputText value="#{dWRFD1.lsCompText}" style="font: menu;" />


</rich:panelBar
Item>


<rich:panelBarItem label="#{dWRFD1.sbComp} #{dWRFD1.info}">


<h:outputText value="#{dWRFD1.sbCompText}" style="font: menu;" />


</rich:panelBarItem>

</rich:panelBar>


Likewise, the structure of the CSS file for the page is quite different. Th
e CSS file defines mostly the specific
overrides for labels, buttons, rather than defining the visual information and even layout as we often see in
WordPress themes and PHP. The result is that you don’t have to keep adding more and information to the CSS

for
each of the different pages in the application, which is quite handy in a large enterprise application with many pages.


To override the colors (as in the last example above),

override the styles as follows:



Page
8

.rich
-
panel
-
body
{


background
-
color
:

#ebf3fd
;

}

Queue M
anagement

AJAX events are proce
ssed through a

queue to avoid server bottlenecks. Queues can be named or unnamed. There
is also a global queue.

The Rich Tags

There are over 40 different tags for display components. They can be organized

into ones for input, ones for output,
ones for layout control, and ones for creating menu systems. Many of them include AJAX processing.

Rich Tags for
Input C
omponents

Currently, we are using
mostly

standard JSF component
s

for the input forms. These inc
lude the following:


The h:form component

is the outer container for an HTML form, and must be used to define the Action for the form
in JSF.


The h:inputText componen
t generates an HTML <input> tag, and its validation logic.


The h:inputTextarea component

generates an HTML <text> tag, and its validation logic.


RichFaces offers the following:


The rich:inplaceInput

componen
t will inline inconspicuous input fields.


The rich:inputNumberSlider component…


The rich:s
uggestion
Box

component is
an

input compone
nt that provides clickable suggestions to complete an entry
.

This element adds "on
-
keypress" suggestions capabilites to any input text component (like <h:inputText>). It creates
a pop
-
up window for a input field component pointed to by the "for" attribute
. For an ordinary request, render a
hidden HTML <div> element and the necessary JavaScript code. When input to the target field exceeds the
"minChars" property (default is 1), perform an AJAX request with the value current entered.

If the AJAX request i
s
detected and the request parameters map contains the client ID of this component, call a method defined by
suggestionAction, and use it to return a value as data for render table, same as <h:dataTable>. In this case, the
component then works the same as
an ordinary dataTable. The rendered table is inserted in the pop
-
up area and is
used for suggestion prompts for input element. If a user clicks on such a table row, its text (or value defined by
fetchValue) is inserted as the value of the input field.


Se
e also rich:calendar and rich:editor for more advanced functions.

Rich Tags for
Output C
omponents

Currently, we are using a number of RichFaces components for the layout management of output pages. These
include the following:


The
rich:
panel
component is

a
rectangular

area on a page that may contain any co
ntent including other panels. Each
p
anel has a header (optionally) and a body. The default look
-
a
n
d
-
feel is based on the current skin. Look
-
a
n
d
-
feel of
any parts of the panel, including co
lor scheme,
borders and padding

can be customizable using CSS classes.



The rich:panel component can have a facet that defines the header.


The rich:spacer c
omponent is a
spacer

that is used in layout and rendered as a transparent image. The attributes
include heigh
t and width.

Page
9


The rich:simp
leTogglePanel component is used to create an expand
-
collapse region on the page.

Basically it doesn’t
everthing that the panel does, plus the expand
-
collapse facility.
The swi
tchtype can be specified as "client",
"server"(defau
lt), "ajax". If the server mode is used, then the server will get a request to make the change and it can
be recorded in the session state for later recovery. The other two modes operate only in the client.

Here is an
example:



The
rich:panelGroup

com
ponent is simply a container for a set of items within a panel.


The
rich:column

component is used inside a rich:dataTable.


The rich:toolbar componen
t is a horizontal bar with Action items on it that accepts any JSF components as children.


The rich:toolb
arGroup componen
t is a group of items inside a tool bar.


The rich:panelBar componen
t is used for grouping any content which is loaded on the client side and appears as
grou
ps divided on child panels that expand when

header is clicked.

Here is an example:



The rich:
panelBarItem component is used inside the panelBar.


The source code for a use of panelBar and panelItem, driven through a configuration file is shown here in this
example using the Incra package’s PComponent class:


<rich:panelBar width=

400


height=

400

>


<c:forEach items=”#{configurationManager.components}” var=”component”>


<rich:panelBarItem label=”#{component.name}”>


<s:div rendered=”#{configurationManager.checkAccess(component)}”>


<h:outputText value=”#{component.la
bel}”

/
>


<br

/>

Page
10


<ui:repeat value=”#{component.children}” value=”childComponent”>


<s:div rendered=”#{configurationManager.checkAccess(childComponent)}”>


<s:link view=”#{childComponent.action}”



v
alue=”#{childComponent.name}”>


<f:param name=”
#{c
hildComponent.actionName}”


value=”#{childComponent.actionArg
}
” />


</s:link>


<br

/>


<h:outputText value=”#{childComp
onent.label}”
/
>


</s:div>


</ui:repeat>


</s:div>


</rich:panelBarItem>


</c:forEach>

</rich:panelBar>


The main trick in this file is that one must use <c:forEach> when the iteration is creating a Rich Faces component,
while
you can use the Facelets tag <ui:repeat> for the individual links since they are not Rich Faces components.


The rich:tabPanel component

is an output component that creates tabbed pages
. Here is an example:


The individual pages ar
e created with rich:tab

components (though it seems like the name should have been
rich:tabPanelItem).

Hence, the code for the above example would be:


<rich:tabPanel switchType="client" >


<rich:tab label="Canon">


content


</rich:tab>


<rich:tab label="Nikon">


conte
nt


</rich:tab>


<rich:tab label="Olympus">


content


</rich:tab>

</rich:tabPanel>


The rich:modalP
anel component can be wrapped around a panel to make it modal.


The rich:progressBar component.

This is discussed in more detail below.

Data Table Com
ponents

The rich:datatable

component is used

to show


tabular data. Adding capabilities onto the standard <h:dataTable>,
this component enables row and column spans for columns, a flexible layout for a header and a footer.


DataTable supports "master
-
de
tail" pattern and allows showing the combination of a master table and detail sub
-
tables.

This is done with the rich:subTable tag.
The <rich:subTable> component is used for inserting subtables into
tables with opportunity to choose data from a model and
built
-
in Ajax updates support.
Here is an example:

Page
11



Typical source code to produce something like this would be:


<
rich:dataTable

value
=
"#{capitalsBean.capitals}"

var
=
"capitals"
>


<
rich:column
>


...


</
rich:column
>


<
rich:s
ubTable

value
=
#{
capitals.details
}

var
=
"detail"
>


<
rich:column
>


...


</
rich:column
>


</
rich:subTable
>


</
rich:dataTable
>


Here is another example (from RF02, see below):




From analysis

of the source for thi
s page
, we can see that there is just one <table> element in the emitted HTML.
The tags are causing RichFaces to generate rows for the main table and rows for the subtitle. All of the columns line
up, because they are all in the same table. The implicat
ion is that the width of the columns should be similar
between the subtable and the table.

Page
12


Another very useful tag, (which appears to be in 3.2.0 and later) is the rich:columns tag, which will take a list of
column specifications from your backing bean, a
nd generate the table. This is very useful for tables with
configurable columns.

Menu C
omponents

You can draw pull
-
down menus and more.

The following tags:


The rich:dropD
own
M
enu component is the basis for a set of application menus that

can include

icon
s and
submenus.

Here is an example:



The configuration might look like:


<
rich:dropDownMenu

value
=
"File"

direction
=
"bottom
-
right"

jointPoint
=
"tr"
>


<
rich:menuItem

submitMode
=
"ajax"

value
=
"New"

action
=
"#{ddmenu.doNew}"
/>


<
rich:menuItem

submitMod
e
=
"ajax"

value
=
"Open"

action
=
"#{ddmenu.doOpen}"
/>


<
rich:menuGroup

value
=
"Save

As..."
>


<
rich:menuItem

submitMode
=
"ajax"

value
=
"Text

File"



action
=
"#{ddmenu.doSaveText}"
/>


<
rich:menuItem

submitMode
=
"ajax"

value
=
"P
DF

File"



action
=
"#{ddmenu.doSavePDF}"
/>


</
rich:menuGroup
>


<
rich:menuItem

submitMode
=
"ajax"

value
=
"Close"

action
=
"#{ddmenu.doClose}"
/>


<
rich:menuSeparator

id
=
"menuSeparator11"
/>


<
rich:menuItem

submitMode
=
"ajax"

val
ue
=
"Exit"

action
=
"#{ddmenu.doExit}"
/>

</
rich:dropDownMenu
>


The rich:contextMenu component c
an be attached to a right click

on most components.

Tree and Scrollable Table C
omponents

The <rich:tree> component is designed for hierarchical data presentation a
nd is applied for building a tree structure
with a drag
-
and
-
drop capability
. Use the following components:


The rich:tree component is the core parent component for a tree


The rich:treeNode component defines one treenode


The rich:treeNode
Adapte
r will fe
tch a set of treenodes from a data source.


The rich:recursiveTreeNode
Adapter

will walk through a data structure and gather all of the tree nodes. This is
similar to one of the Swing elements.

Selection Components

In
addition to

the basic <select> and <op
tion> elements, these tags will generate lists of selection elements and
control orders and facilities to move elements from one list to another (such as multi
-
selection facility, like the Incra
custom columns configuration screen.

Page
13


The simplest is the ric
h:orderingList tag. This creates a scrolling list of objects, with buttons to the right to move
objects, up and down the list, thus changing the order.

It takes a list of SelectItems


The next one is the rich:picker tag. This creates a scrolling list of

objects, and a blank one to the right of it, along
with buttons to move objects from one into the other.

It takes a list of SelectItems.


The primary tag is rich:listShuttle

which combines the picker facilities between two lists and the order facility on

the
right
. This component is used for moving chosen items from one list into another with their optional reordering
there.

Here is an example:


The code for this looks like:


<
rich:listShuttle

id
=
"myListShuttle"



sourceValue
=
"#{toolBa
r.freeItems}"

targetValue
=
"#{toolBar.items}"



sourceRequired

=

"true"

targetRequired

=

"true"



var
=
"items"

converter
=
"listShuttleconverter"


sourceCaptionLabel
=
"Source

List"



targetCap
tionLabel
=
"Target

List"
>



<
rich:column
>


<
h:graphicImage

value
=
"#{items.iconURI}"

/>


</
rich:column
>



<
rich:column
>




<
h:outputText

value
=
"#{items.label}"

/>


</
rich:column
>


</
rich:listShuttle
>


The most important attribute are the sourceValue and the targetVa
lue, which are lists of objects. Note that this is
different from the JSF list selectors

or the above two Rich
Faces selectors
, which require lists of SelectItem objects.

Instead, the listS
huttle uses what is called a custom model, in which the columns to be rendered are described as one
found find in a jsf:datatable tag.


The
<rich:listShuttle>
component provides the possibility to use ordering controls set, which performs reordering
in the

target item list.

Every control has possibility to be disabled.


An ordering controls set could be defined with
"topControlLabel"
,
"bottomControlLabel"
,
"upControlLabel"
,
"downControlLabel"
attributes.


It is also possible to use
"topControl"
,
"top
ControlDisabled"
,
"bottomControl"
,
"bottomControlDisabled"
,
"upControl"
,
"upControlDisabled"
,
"downControl"
,
"downControlDisabled"
facets in order to replace the default
controls with facets content.

Modal D
ialog
Components

Use the rich:modalPanel t
ag.

Page
14


The component implements a modal window that blocks user interaction with the main application while active.


T
o work properly, the
<rich:modalPanel>

should always be placed outside the original
<h:form>
. For performing
submits from within the
<rich:m
odalPanel>

it must include its own
<h:form>
.


In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM tree.


Position the
<rich:modalPanel>

on the screen by specifying coordinates of it's top
-
left corner. Set values for
"t
op"

and
"left"

attributes in pixels for Y and X coordinates correspondingly. By default the component is
autopositionable.


The modal window can be moved and resized by the end user. To disable those features (which are enabled by
default) set
"moveable"

and
"resizeable"

attributes to
false
. Resizing may be limited by specifying window's
minimal sizes with the
"minWidth"

and
"minHeight"

attributes.


To open and close the
<rich:modalPanel>

use one of three
JS API functions

(offset to the "Reference Data" below
in this chapter):


The
controls

facet places any control on a header, defines image, style and fun
ction for it. For example, "Close"
control:


<rich:modalPanel

id="pnl">



...



<f:facet

name="controls">



<h:graphicImage

value="/pages/close.png"

style="cursor:pointer"

onclick="R
ichfaces.hideModalPanel('pnl')"

/>



</f:facet>



...


</rich:modalPanel>


The result:

Showing and hiding the modal dialog

Besides client ID it is possible to pass other parameters while opening and closing the
<rich:modalPanel>

with the
JS API function. For example, you can pass top and left in
dents or panel size:


<a

onclick="Richfaces.showModalPanel('pnl',

{top:'10px',

left:'10px',

height:
'400px'});">Show

ModalPanel</a>

Others

There is a tag that will enable Google Maps functionality

Using CSS with Rich Faces objects

Typically very minimal CS
S is preferred. As we have converted some of our JSF
-
based pages to RichFaces
-
based
pages, the CSS that made the JSF
-
based pages look good provided to make the RichFaces
-
based pages look bad.

Page
15

Skinability (themes)

A skin is a look and feel for the RichFace
s components. For instance, it is similar to how Java Swing can have a
“Windows” look and feel, a “Macintosh” look and feel”, and a “Steel” look and feel that is unique to Swing.


The skins can be
previewed

using the Rich Faces Live Demo site.


Before ver
sion 3.1.3, RichFaces loa
ded styles and script
s

on demand, i
.e. files are loaded only if they are required on
a particular page. Since RichFaces 3.1.3, it's possible to manage how the RichFaces script and style files are loaded
to application.

Defining Sk
ins

These are
described

through CSS files.

The one
s that we use most often are:



DEFAULT


this provides a black lettering and lines on a white background



blueSky



this provides buttons in shades of blue, with white lettering. Similar to XP style.



ruby



this provides buttons in shades of red, with white lettering


We could define our own, or would could simply work with the default one, and then make further adjustments
through the application’s CSS file.

Particularly Interesting Components

Progress Bar

r
ich:progressBar

is a component which could be used to display progress of any client or server side process.


In order to display progress of some server side process(
mode="ajax"
) component uses polling method. It just polls
server to get the
value
which
should be updated by server side process.

Example source:


<
h:form
>


<
a4j:outputPanel

id
=
"progressPanel"
>


<
rich:progressBar

value
=
"#{progressBarBean.currentValue}"


interval
=
"2000"

label
=
"#{progressBarBean.currentValue}

%"


enabled
=
"#{progressBarBean.enabled}"

minValue
=
"
-
1"

maxValue
=
"100"


reRenderAfterComplete
=
"progressPanel"
>


<
f:facet

name
=
"initial"
>


<
br

/>


<
h:outputText

value
=
"Process

doesn't

started

yet"

/>


<
a4j:commandButton

action
=
"#{progressBarBean.startProcess}"


value
=
"Start

Process"

reRender
=
"progressPanel"


rendered
=
"#{progressBarBean.buttonRendered}"



style
=
"margin:

9px

0px

5px;"

/>


</
f:facet
>


<
f:facet

name
=
"complete"
>


<
br

/>


<
h:outputText

value
=
"Process

Done"

/>


<
a4j:commandButton

action
=
"#{progress
BarBean.startProcess}"


value
=
"Restart

Process"

reRender
=
"progressPanel"


rendered
=
"#{progressBarBean.buttonRendered}"


style
=
"margin:

9px

0px

5px;"

/>


</
f:facet
>



</
rich:progressBar
>


</
a4j:outputPanel
>


</
h:form
>

Page
16

InputNumberSlider

InputNumberSlider is a highly customizable component that is used to define numeric input in a given range. You
can use a slider or just type some text into an input field.


Example source:



<
rich:inputNumberSlider

value
=
"50"

showInput
=
"false"


enableManualInput
=
"false"

showBoundaryValues
=
"false"


showToolTip
=
"false"

/>

Summary of Learning Examples Created



RF01


this is a very simple
example that

shows

how to combine JSF, Facelets, and RichFaces.
It was
derived from JSF test program “Lima”. RF01

has thee pages: a main page and two data display pages

(which use regular JSF DataTables)
. There is also a common header and footer. There is no database
co
nnection.
Since it is just a web application, we deploy it into Tomcat
.



RF02


this is a more advanced example
, but with
the same structure as above. RF02

shows three pages:
the first shows panels that open and close

as well as an inputNumberSlider
, the

second shows a tab bar, and
the third shows use of
rich:dataTable and rich:subTable
.


There is no database connection.
Since it is just a
web application, we deploy it into Tomcat.

Ideas to Test
(in RF03)

A style sheet to override colors

Banner with a cu
stom logo

Panel with a custom logo in the content.