Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit
1. Max Katz | Exadel
Senior Systems Engineer
Ajax Applications with JSF 2 and
New RichFaces 4
JAX/JSF Summit, San Jose, CA
2. Exadel
Max Katz
● Senior Systems Engineer at Exadel
● JSF,RichFaces, Java EE consulting,
and training
● Manages exadel.org – Exadel's open
source projects and community
● Community manager for gotiggr.com
prototypes and mobile apps builder
3. Exadel
4
Author of Lead-author of
Practical RichFaces Practical RichFaces, 2/e
(Apress) (Apress, Summer 2011)
5. Exadel
Exadel is a global software
engineering company.
● Founded in 1998,
headquarters in San Francisco
Bay Area
● 7 development offices in
Europe
● 350+ employees
9. Exadel
Exadel Services
● Professional services
● Rich enterprise application
development
● Eclipse development
● Custom rich component development
● Mobile development
● Training
10. Exadel
The Plan Is Simple
1) Ajax features in JSF 2
2) The new RichFaces 4
11. Exadel
JavaServer Faces™ (JSF) is
the standard component-
based user interface (UI)
framework for the
Java EE (5 & 6) platform
JSF 1.2 Java EE 5
JSF 2 Java EE 6
12. Exadel
JSF 2 is a major upgrade
over JSF 1.x
Many features, ideas taken
from projects such as Seam,
RichFaces, and others
13. Exadel
JSF 2 new features
● Facelets ● New scopes
● Composite ◦ Flash, View,
components custom
● Implicit ● Configuration
navigation via annotations
● GET ● Bean Validation
support
support
◦ h:link, h:button
● Basic Ajax
● Resource loading
14. Exadel
JSF 2 <f:ajax>
● Very basic Ajax functionality
● Greatly
inspired by RichFaces 3
<a4j:support> tag
● Ajax in JSF in 3 easy steps:
1. Sending an Ajax request
2.Partial view processing
3.Partial view rendering
17. Exadel
Attribute Value
Important
Event on which to fire the
<f:ajax> event
Ajax request
attributes @all
@this (default)
@form
execute
@none
id's
EL
@all
@this
@form
render
@none (default)
id's
EL
18. Exadel
That's good, but where do
you get rich components and
more?
A rich component framework
is still(?) needed to build
real-world
Ajax applications.
19. Exadel
Official RichFaces logo
RichFaces 4 is a lightweight,
open source framework for
JSF 2
20. Exadel
RichFaces 4 – rich JSF framework
● UI components
◦ a4j:* tag library (core)
◦ rich:* tag library (UI)
◦ Components' JavaScript API
● Skins
● Client-side validation (Bean Validation
based)
● CDK – Component Development Kit
21. Exadel
RichFaces 4
100% built on top of JSF2,
just extends functionality in
JSF 2
23. Exadel
RichFaces 4
● All components are reviewed for
consistency, usability
● Redesigned following semantic
HTML principles
● Server-side
and client-side
performance optimization
● Strict code clean-up and review
32. Exadel
RichFaces versions
Version JSF 1.1 JSF 1.2 JSF 2
RichFaces 3.1.x •
RichFaces 3.3.3* • •
RichFaces 4 •
* Note: RichFaces 3.3.3 has basic JSF 2 support
33. Exadel
RichFaces history
2005: started by Alexander Smirnov
2005-2007: Developed by Exadel
Ajax4jsf - open source, free
RichFaces - commercial
2007: JBoss takes over
Exadel team continues to develop
the framework, project is known as
RichFaces
37. Exadel
RichFaces <a4j:ajax>
● 100% based on standard <f:ajax>
● Just replace f: with a4j: and get
exactly the same functionality
● But, you get extra features...
<h:commandButton>
<f:ajax execute="@form" render="output"/>
</h:commandButton>
<h:commandButton>
<a4j:ajax execute="@form" render="output"/>
</h:commandButton>
38. Exadel
<a4j:ajax> attributes
Feature/Attribute Description
JavaScript to execute before Ajax
onbegin
request
JavaScript to execute after response
onbeforedomupdate
comes back but before DOM update
oncomplete JavaScript to execute after DOM update
Allows to skip JSF phases when
bypassUpdates
validating
limitRender Turns off all auto-rendered panels
status Status to display during Ajax request
Ajax queue Advanced RichFaces client queue
39. Exadel
<a4j:commandButton/Link> –
button and link with built-in Ajax
behavior
<a4j:commandButton value="Save"
action="#{bean.action}"
render="output" />
<a4j:commandLink value="Save"
action="#{bean.action}"
render="output" />
40. Exadel
When using standard JSF button:
<h:form>
<h:inputText>
<h:selectOneMenu>
Need to set
<h:commandButton> execute=”@form”
<f:ajax execute="@form"/> (or execute=”id1 id2”)
</h:commandButton>
<h:form>
When using RichFaces button:
<h:form> RichFaces default
<h:inputText>
<h:selectOneMenu>
value for
<a4j:commandButton/> button/link
<h:form> execute=”@form”
41. Exadel
<a4j:jsFunction> – fire Ajax request
from any JavaScript function, HTML
event
<table>
...
<td onmouseover="update('yellow')"/>
...
</table>
<h:form>
<a4j:jsFunction name="update"
action="#{bean.change}" render="...">
<a4j:param value="param1" assignTo="#{bean.color}"/>
</a4j:jsFunction>
</h:form>
42. Exadel
If you had to pick just one Ajax
control, you would want
<a4j:jsFunction>
<h:commandButton action="#{bean.change}">
<a4j:ajax render="id"/>
</h:commandButton>
Is the same as:
<h:commandButton onclick="sendAjax();"/>
<a4j:jsFunction name="sendAjax"
action="#{bean.change}" render="id"/>
44. Exadel
<a4j:push>
● Server-side events are pushed to
client using Comet or WebSockets.
● Implemented using Atmosphere
● Providesexcellent integration with
EE containers, and advanced
messaging services
<a4j:push address="topic@chat"
ondataavailable="alert(event.rf.data)" />
48. Exadel
render=”#{bean.renderList}”
JSF RichFaces
1) Ajax request sent 1) Ajax request sent
2) Component id's to be 2) Component id's to
rendered resolved be rendered
3) Component id's are resolved
rendered into the page 3) Component id's
4) 2nd Ajax request is sent. are rendered
In this request the
components (resolved in
step 2 are sent with
request) will be rendered
53. Exadel
JSF 2 queue
● JSF2 has very basic queue
functionality
● Events are queued and fired one at a
time
● Only one request is processed on the
server at a time
54. Exadel
<a4j:queue> – “combining” events
from the same component
While a request is executing
on the server, all requests
from button A or button
B will be combined
(merged) if the last event in
the queue is of the same
type.
<a4j:queue />
...
<a4j:commandButton id="buttonA" value="Button A"/>
<a4j:commandButton id="buttonB" value="Button B"/>
55. Exadel
<a4j:queue> – “combining” events
from different components
While a request is executing
on the server, all requests
from button A or button
B will be combined
(merged).
<a4j:queue />
<a4j:commandButton id="buttonA" value="Button A">
<a4j:attachdQueue requestGroupingId="ajaxGroup"/>
</a4j:commandButton>
<a4j:commandButton id="buttonB" value="Button B">
<a4j:attachdQueue requestGroupingId="ajaxGroup"/>
</a4j:commandButton>
56. Exadel
<a4j:queue> – setting request delay
allows “waiting” for requests from
same component in order to merge
events
<a4j:queue requestDelay="1000"/>
<a4j:commandButton id="buttonA" value="Button A">
<a4j:attachdQueue requestDelay="2000"/>
</a4j:commandButton>
<a4j:commandButton id="buttonB" value="Button B"/>
60. Exadel
<a4j:param> - like <f:param>, but
simpler as it also assigns the value to
a bean property automatically
<a4j:commandButton value="Save">
<a4j:param value="1009" assignTo="#{bean.product}"/>
</a4j:commandButton>
public class Bean {
private String product;
public void setProduct (String product) {...}
}
61. Exadel
Another great feature is that
<a4j:param> value can contain any
JavaScript expression or JavaScript
function, when noEscape="true"
<a4j:param name="width"
value="(jQuery(window).width()/2)"
assignTo="#{bean.screenWidth}"
noEscape="true" />
66. Exadel
<rich:popupPanel> can be modal and
non-modal
<rich:popupPanel modal="false">
<f:facet name="header">
Edit User
</f:facet>
...
...
</rich:popupPanel>
71. Exadel
RichFaces data iteration components
support partial updates
render="@column"
render="@header"
render="@body"
render="@footer"
render="cellId"
To render from outside the table:
render="tableId@header"
render="tableId@body"
render="tableId@footer"
72. Exadel
Deciding what rows/cell to update in
run-time
render="tableId:rows(bean.rowsSet)"
render="tableId:rows(bean.rowsSet):cellId"
79. Exadel
Many RichFaces components
provide client-side JavaScript API
<rich:popupPanel> JavaScript API
Method name Description
Return the top co-ordinate for the position of
getTop()
the pop-up panel.
Return the left co-ordinate for the position of
getLeft()
the pop-up panel.
Move the pop-up panel to the co-ordinates
moveTo(top,left)
specified with the top and left parameters.
Resize the pop-up panel to the size specified
resize(width,height)
with the width and height parameters.
show() Show the pop-up panel.
hide() Hide the pop-up panel.
80. Exadel
Invoking component JavaScript API
using #{rich:component(id)}
function
<input type="button"
onclick="#{rich:component('popup')}.show();"
value="Open" />
<rich:popupPanel id="popup">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide();
return false;">
<h:outputText value="Close"/>
</h:outputLink>
</rich:popupPanel>
84. Exadel
RichFaces client functions
Function Description
rich:client(id) Returns component client id
rich:element(id) Returns DOM element
Returns RichFaces client component
rich:component(id)
instance to call JS API method
rich:isUserInRole(role) Returns if the user has specified role
Returns component instance for given
rich:findComponent(id)
short id
85. Exadel
Standard Java EE security with
#{rich:isUserInRole(role)} function
<rich:panel header="Admin panel"
rendered="#{rich:isUserInRole('admin')}">
Very sensitive information
</rich:panel>
<rich:panel header="User panel">
General information
</rich:panel>
● Calls facesContext.getExternalContext.getUserInRole(role)
● What's good is that security roles can be defined anywhere
87. Exadel
Bean Validation (JSR 303)
JSF 2 has support for Bean Validation
(validation done on server)
Bean:
public class Bean {
@Pattern(regexp="...")
private String email;
}
JSF page:
<h:inputText id="email" value="#{bean.email}">
<a4j:ajax event="blur"/>
</h:inputText>
<rich:message for="email"/>
88. Exadel
Client-Validation Based on Bean
Validation
Validation is performed on the client. If no client
implementation available, validation automatically falls
back to standard, server validation
Bean:
public class Bean {
@Pattern(regexp="...")
private String email;
}
JSF page:
<h:inputText id="email" value="#{bean.email}">
<rich:validator />
</h:inputText>
<rich:message for="email"/>
98. Exadel
Skins
● Lightweight extension on top of CSS
● Change
look and feel of all rich
component with a few minor changes
● Can
be applied to standard JSF and
HTML tags as well
104. Exadel
Skinning standard JSF tags and
HTML tags
Apply to each control:
<h:button style="background-color:
'#{richSkin.tableBackgroundColor}'"/>
105. Exadel
Skinning standard JSF tags and
HTML tags automatically
Apply to all standard controls (JSF and HTML):
<context-param>
<param-name>
org.richfaces.enableControlSkinning
</param-name>
<param-value>true</param-value>
</context-param>
106. Exadel
Skinning standard JSF tags and
HTML tags only when special CSS
class is applied to parent container
<context-param>
<param-name>
org.richfaces.enableControlSkinningClasses
</param-name>
<param-value>true</param-value>
</context-param>
<div class="rfs-ctn">
<h:outputText />
<h:inputText />
<h:commandButton />
</div>
107. Exadel
Where can I try the new
RichFaces 4?
http://richfaces.org/showcase
108. Exadel
How can we help with RichFaces
● Web development
with RichFaces
Training Days
● Version 3 to 4 migration JSF 1.2, 2 1-2
● Performance tune-up RichFaces 3, 4 1-2
JSF and RichFaces 2-3
● Custom component RichFaces 3 to 4 1-2
development
● On-site training