Professional Documents
Culture Documents
CONTENTS INCLUDE:
JBoss RichFaces
n
What is RichFaces?
n
Basic Concepts
n
Controlling Traffic
n
a4j:* Tags
rich:* Tags
By Nick Belaevski, Ilya Shaikovsky
n
n
Hot Tips and more...
Jay Balunas, and Max Katz
RichFaces is a JSF component library that consists of two Sending an AJAX request
main parts: AJAX enabled JSF components and the CDK a4j:support
(Component Development Kit). RichFaces UI components are Sends an AJAX request based on a DHTML event supported
divided into two tag libraries a4j: and rich:. Both tag libraries by the parent component. In this example, the AJAX request
offer out-of-the-box AJAX enabled JSF components. The CDK will be triggered after the user types a character in the text box:
is a facility for creating, generating and testing you own rich a4j:support
JSF components (not covered in this card). <h:inputText value=”#{echoBean.text}”>
<a4j:support event=”onkeyup” action=”#{echoBean.count}”
reRender=”echo, cnt”/>
Installing Richfaces </h:inputText>
<h:outputText id=”echo” value=”Echo: #{echoBean.text}”/>
<h:outputText id=”cnt” value=”Count: #{echoBean.textCount}”/>
See the RichFaces Project page for the latest version- http:// can be attached to any html tag that supports
a4j:support
www.jboss.org/jbossrichfaces/. DHTML events, such as:
Add these jar files to your WEB-INF/lib directory: richfaces- a4j:support
api.jar, richfaces-impl.jar, richfaces-ui.jar, <h:selectOneRadio value=”#{colorBean.color}”>
<f:selectItems value=”#{colorBean.colorList}” />
commons-beanutils.jar, commons-collections.jar,
<a4j:support event=”onclick” reRender=”id” />
commons-digester.jar, commons-logging.jar </h:selectOneRadio>
a4j:commandButton, a4j:commandLink
www.dzone.com
RichFaces Filter
Update the web.xml file with the RichFaces filter: Similar to h:commandButton and h:commandLink but with two
major differences. They trigger an AJAX request and allow
RichFaces Filter
partial JSF component tree rendering.
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name> The request goes through the standard JSF life cyle. During
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
the Render Response, only components whose client ids are
<filter-mapping> listed in the reRender attribute (echo, count) are rendered
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name> back the the browser.
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher> a4j:commandButton, a4j:commandLink
<dispatcher>INCLUDE</dispatcher> <h:inputText value=”#{echoBean.text}”/>
<dispatcher>ERROR</dispatcher> <h:outputText id=“echo” value=“Echo: #{echoBean.text}”/>
</filter-mapping> <h:outputText id=“cnt” value=“Count: #{echoBean.textCount}”/>
<a4j:commandButton value=“Submit” action=“#{echoBean.count}”
reRender=“echo, cnt”/>
Page setup
Configure RichFaces namespaces and taglibs in your XHTML RichFaces for Java EE
and JSP pages.
100+ JSF AJAX components
JBoss RichFaces
Facelets
• Works with JSF 1.2 and JSF 2.0 (2nd half 2009)
xmlns:a4j=”http://richfaces.org/a4j”
xmlns:rich=”http://richfaces.org/rich” • Works with Seam, Spring Framework
• Developed by Exadel, the creators of RichFaces and Ajax4jsf
JSP • Contact us today to learn how we can help you
<%@ taglib uri=”http://richfaces.org/a4j” prefix=”a4j”%> richfaces@exadel.com
<%@ taglib uri=”http://richfaces.org/rich” prefix=”rich”%>
a4j:poll
public class PollBean { To limit rendering to only components set in the reRender
private Boolean enabled=false; // setter and getter
public void start () {enabled = true;}
attribute, set limitToList=”true”. In this example, only
public void stop () {enabled = false;} h:panelGrid will be rendered:
public Date getNow () {return new Date();}
}
<a4j:commandLink reRender=”panel” limitToList=”true”/>
<h:panelGrid id=”panel”>
<h:dataTable>...</h:dataTable>
a4j:jsFunction </h:panelGrid>
Allows sending an AJAX request directly from any JavaScript <a4j:outputPanel ajaxRendered=”true”>
<h:dataTable>...</h:dataTable>
function (built-in or custom). </a4j:outputPanel>
a4j:jsFunction
<td onmouseover=”setdrink(‘Espresso’)”
Deciding what to process on the server
onmouseout=”setdrink(‘’)”>Espresso</td> When an AJAX request is sent to the server, the full HTML
...
<h:outputText id=”drink” value=”I like #{bean.drink}” /> form is always submitted. However, once on the server we
<a4j:jsFunction name=”setdrink” reRender=”drink”>
<a4j:actionparam name=”param1” assignTo=”#{bean.drink}”/>
can decide what components to decode or process during
</a4j:jsFunction> the Apply Request, Process Validations and Update Model
When the mouse hovers or leaves a drink, the setdrink() phases. Selecting which components to process is important
JavaScript function is called. The function is defined by an in validation. For example, when validating a component (field)
a4j:jsFunction tag which sets up the AJAX call. It can call via AJAX, we don’t want to process other components in the
listeners and perform partial page rendering. The drink form (in order not to display error messages for components
parameter is passed to the server via a4j:actionparam tag. where input hasn’t been entered yet). Controlling what is
processed will help us with that.
a4j:push
a4j:push works similarly to a4j:poll; however, in order to The simplest way to control what is processed on the server is
check the presence of a message in a queue, it only makes a to define an AJAX region using the a4j:region tag (by default
minimal HEAD request(ping-like) to the server without invoking the whole page is an AJAX region).
the JSF life cycle. If a message exists, a sandard JSF request is
<h:inputText>
sent to the server. <a4j:support event=”onblur” />
</h:inputText>
Partial view (page) rendering <a4j:region>
<h:inputText>
There are two ways to perform partial view rendering when <a4j:support event=”onblur” />
AJAX requests return. </h:inputText>
</a4j:region>
ReRender attribute When the user leaves the 2nd input component (onblur event),
Most RichFaces components support the reRender attribute to an AJAX request will be sent where only this input field will be
define the set of client ids to reRender. processed on the server. All other components outside this
Attribute Can bind to
region will not be processed (no conversion/validation, update
model, etc). It’s also possible to nest regions:
reRender Set, Collection, Array, comma-delimited String
<a4j:region>
ReRender can be set statically as in the examples above or with ...
<a4j:region>
EL: ...
</a4j:region>
<a4j:commandLink reRender=”#{bean.renderControls}”/> </a4j:region>
To process a single input or action component, instead of Other notable attributes include: disabled, id, binding,
wrapping inside a4j:region, it’s possible to use the ajaxSingle status, size, timeout.
attribute:
Named Queues
<h:inputText>
<a4j:support event=”onblur” ajaxSingle=”true”/> Named queues will only be used by components that reference
</h:inputText> them by name as below:
When using ajaxSingle=”true” and a need arises to process <a4j:queue name=”fooQueue” ... />
additional components on a page, the process attribute is <h:inputText … >
<a4j:support eventsQueue=”fooQueue” .../>
used to include id’s of components to be processed. </h:inputText>
When just validating form fields, it is usually not necessary View Components within the parent <f:view> will use this queue
to go through the Update Model and Invoke Application Form Component within the parent <h:form> or <a4j:form> will use this queue
phases. Setting bypassUpdates=”true”, will skip these phases,
improving response time, and allowing you to perform Global Queue
validation without changing the model’s state. To enable the global queue for an application you must add
this to the web.xml file.
<h:inputText>
<a4j:support event=”onblur” ajaxSingle=”true” <context-param>
bypassUpdates=”true”/> <param-name>org.richfaces.queue.global.enabled</param-name>
</h:inputText> <param-value>true</param-value>
</context-param>
JavaScript interactions
RichFaces components send an AJAX request and do partial It is possible to disable or adjust the global queue’s settings in
page rendering without writing any direct JavaScript code. If a particular view by referencing it by its name.
you need to use custom JavaScript functions, the following
<a4j:queue name=”org.richfaces.global_queue” disabled=”true”... />
attributes can be used to trigger them.
Tag Attributte Description View Scoped Default Queues
a4j:commandButton, onbeforedomupdate: JavaScript code to be invoked after Defined the <a4j:queue> as a child to the <f:view>.
a4j:commandLink, response is received but before browser DOM update
a4j:support, oncomplete: JavaScript code to be invoked after browser DOM <f:view>
a4j:poll, updatedata. Allows to get the additional data from the server ...
a4j:jsFunction during an AJAX call. Value is serialized in JSON format. <a4j:queue ... />
a4j:commandButton, onclick: JavaScript code to be invoked before AJAX request is
a4j:commandLink sent.
a4j:support,
a4j:poll
onsubmit: JavaScript code to be invoked before AJAX request
is sent.
Performance Tips:
• Control the number of requests sent to the server.
• Limit the size of regions that are updated per request
Controlling Traffic using <a4j:region/>
• Cache or optimize database access for AJAX requests
Flooding a server with small requests can cripple a web
• Don’t forget to refresh the page when needed
application, and any dependent services like databases.
the identifier of the view to include: rich:inplaceInput Inline inconspicuous input fields
One handy usage of a4j:include is for building multi-page Components include: comboBox, fileUpload, inplaceSelect,
wizards. Ajax4jsf command components put inside the inputNumberSpinner
included page (e.g. first.xhtml for our case) will navigate users Output Tags
to another wizard page via AJAX:
Tag Description
<a4j:commandButton action=”next” value=”To next page” /> rich:modalPanel Blocks interactions with the rest of the page while active
(The “next” action should be defined in the faces-config.xml rich:panelMenu Collapsable grouped panels with subgroup support
navigation rules for this to work). Setting ajaxRendered true rich:progressBar AJAX polling of server state
will cause a4j:include content to be updated on every AJAX
rich:tabPanel Tabbed panel with client, server, or ajax switching
request, not only by navigation. Currently, a4j:include cannot
be created dynamically using Java code. rich:toolBar Complex content and settings
rich:dataGrid Complex grid rendering of grouped data from a model rich:dndParam To pass parameters during a drag-n-drop action.
Selects
Provides visually appealing list manipulation options for the UI.
Tag Description
Using skin property values on the page
rich:listShuttle Advanced
data list
You can use skinBean implicit object to use any value from the
manipulation skin file on your page.
(figure x)
<h:commandButton value=”Next”
style=”background-
rich:orderingList Visually
color:#{skinBean.
manipulate a
tabBackgroundColor}”/>
lists order
Validation Tags
AJAX endabled validation including hibernate validation.
Tag Description
The button color is set according to the current skin[Ruby].s
rich:ajaxValidator Event triggered validation without updating the model- this skips
all JSF phases except validation.
Loading different skins at runtime
rich:beanValidator Validate individual input fields using hibernate validators in your
bean/model classes
You can define an applications skin with EL expression like this:
rich:graphValidator Validate whole subtree of components using hibernate validators. <context-param>
can also validate the whole bean after model updates. <param-name>org.richfaces.SKIN</param-name>
<param-value>#(skinBean.currentSkin)</param-value>
Drag-Drop </context-param>
Allows many component types to support drag and drop Define a session scoped skinBean and manage its currentSkin
features. property at runtime with your skin names values. Every
A B O U T THE A U THO R s R e c o mm e n d e d b o o k
Nick Belaevski JBoss RichFaces is a rich
Nick Belaevski is the team leader of the RichFaces project working for Exadel Inc.
He has more than four years of experience in development of middleware products JSF component library that
including JBoss Tools and RichFaces.
Projects: RichFaces helps developers quickly
develop next–generation
Ilya Shaikovski web applications. Practical
Ilya Shaikovsky is the Exadel product manager working on the RichFaces project RichFaces describes how
since Exadel began ajax4jsf. He’s responsible for requirements gathering, specifica-
tion development, JSF related product analysis and supporting RichFaces and to best take advantage of
JSF related technologies for business applications. Prior to this he worked on the
Exadel Studio Pro product. RichFaces, the integration of
Projects: RichFaces the Ajax4jsf and RichFaces
Jay Balunas libraries, to create a flexible
Jay Balunas works as the RichFaces Project Lead and core developer at JBoss, a di- and powerful programs. Assuming some JSF
vision of Red Hat. He has been architecting and developing enterprise applications
for over ten years specializing in web tier frameworks, UI design, and integration. background, it shows you how you can radically
Jay blogs about Seam, RichFaces, and other technologies at
reduce programming time and effort to create rich
http://in.relation.to/Bloggers/Jay
Projects: RichFaces, Seam Framework, and JBoss Tattletale AJAX based applications.
Max Katz
Max Katz is a senior system engineer at Exadel. He is the author of “Practical Rich- BUY NOW
Faces” (Apress). He has been involved with RichFaces since its inception. He has
written numerous articles, provided training, and presented at many conferences books.dzone.com/books/practicalrichfaces
and webinars about RichFaces. Max blogs about RichFaces and RIA technologies at
http://mkblog.exadel.com.
Projects: RichFaces
Bro
ugh
t to
you
by...
Professional Cheat Sheets You Can Trust
att erns “Exactly what busy developers need:
P ld
simple, short, and to the point.”
ign
ona
McD
Des By
Jaso
n
8 by th ntin ler d
oesn
GoF ller , co hand ler
LUD
E:
Best
se
sib ility and
the
the
hand
tab
Cha Multip ecific o should cep pat
this if the m up the
man an ac
z.co
n n
sp s ents
be a ject ime. d is see passed
Download Now
Com reter plem ks to to
of ob at runt handle code
RichFaces Spring Configuration
Use t im ec b e
se
n
rp n n A
min
ed
being uag
es e ch should ats until arent
Inte Whe er t ng ntim it p
tor det la pe
no me ru or if s re e
a rd
... the
n
uest in so ethod ception proces e no
mor
Itera tor ore req
n A ling
dm the e ar
tho nce
ptio thro nd
Exce ion is sm to ha up th tered or
e ca un
n
Ob
se Me S ral
Refcardz.com
late ERN fere d in mp
le pt
exce mecha n pass
ni ed coun
Beh
avio
k re
n
p liste is en
ATT
BIRT Windows Powershell
Te m Exa a .
quic
he
has ack. W tion uest to ject
P a , as c t- cep Ob
V is it
s
n
q
N s rn je call
st e ex e re
IG vide tte le O
b le th nd th
DES pro n pa sab iagram .
s, hand s to ha
UT fcard F) desig of Reu
JSF 2.0 Dependency Injection with EJB 3
ct
obje
ABO s re o clas
sd
xam
ple oke
r
ttern our (G ts
rz!
D a n e rn re cts D
This al 23 G n Patt h patte and a c t obje enting M AN
, M
ef
orig
in esig Eac tion stru ple
m
CO nd
kD re. rma con ir im
ma
boo Softwa om
BPM&BPMN Getting Started with Eclipse
re R
la a e e ( low
ex p n d larg cute is al
atio can be . +exe . Th s su
ch
Cre ey form jects an o
bject nship
t th d to rate ob s, d as ed rela
tio
Get
a s e m
orith ts.
te
th
m . r n s: U d is pa a lg c
ea
be tr bject b
as
e to
syste y ge r
obje
o
man
tt it
ive
l Pa ing lly
ra e n m ana e n R ece al low aditiona
twe
s.
twe uest tr er
ctu to req ndled in
d
Stru s be sed s be nt or
stru
cture ern
Patt respo
s: U
nsib
ilitie
ship
s th
at c
an psu
Enca quest
late
sa
e ha
to b llbacks
d ca
.
nalit
y.
riant
times
or in
varia
ling
the
invo
catio
n.
DZone, Inc. ISBN-13: 978-1-934238-47-9
ral
re
ng an ing
avio , an
d tion Pur
pose the
ueui k fu
nctio led at va ject
hand
cess
Beh nships rela as q pro y to be
1251 NW Maynard
e ob
rela
tio ith o
bje c t
that
can
b e
ed
You ne s need
ca llbac be hand ed.
to need
sts is couple
d fro
m th
asyn
no us
chro nctiona
fu
the rn the without n it is
lit
any
need ISBN-10: 1-934238-47-3
ls w ips st que
n
Reque y of re be de ate ar
Dea e. nsh ould cilit d patte ssing entatio particul
pe: latio
50795
Use or n
to fa
A hist r sh ce
pro implem ents its ting.
Cary, NC 27513
an
Sco ntim pe used e comm
n voke
s re toty Whe for
n
ec
clas The in ely al m
b ject ed at ru it h Pro wid th
are utilizing a job q of the
n ueue actu d imple
ue is
exp
O w C s ue ue
c h ang D e als e . ro xy bq
ueue s. By
hm g
to ge
iven owled at is en rface th
que eq
be e: tim P Jo
gorit nb e kn ct th inte
cop pile r S le of al ed ca to have d obje of the
rato er mp
ss S at com serv
888.678.0399
Exa ut
Deco nes
an
.com
919.678.0300
one
Abst tory
C C
Fac
B
State
t
pte
r eigh gy
Ada Flyw Stra
te
od
z
Meth
more than 2 million software developers, architects and decision
S S
ter B
w. d
ge rpre plate
Brid
Refcardz Feedback Welcome
B
Inte Tem
S B
er tor or
ww
C B r B
NSIB
ILIT
Y B
S
Com
posi
te
PO succ
ess
or Sponsorship Opportunities 9 781934 238479
RES
“DZone is a developer’s dream,” says PC Magazine.
F
CH
AIN
O
ace
>> sales@dzone.com
terf r
<<in andle ()
H
uest
Copyright © 2009 DZone, Inc. All rights nreserved.
Clie
t
No part of this publication
dle
r2
d le req
may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical,
+ha
n
Version 1.0
Han
photocopying, or otherwise, without prior written permissionCon
ofetethe
cr
que
stpublisher.
() Reference: Practical RichFaces, Max Katz, APress, 2008
rns
re
n dle
1 +ha king
ler by lin om
and uest n e .c