3. Exadel
Max Katz
● Senior Systems Engineer
● JSF,RichFaces, Java EE consulting,
and training
● Manages exadel.org – Exadel's open
source projects and community
● Community manager for gotiggr.com
– tool for creating and sharing
interactive web and mobile HTML
prototypes
4. Exadel
4
Summer 2011
Author of Lead-author of
Practical RichFaces Practical RichFaces, 2/e
(Apress) (Apress, June 2011)
6. Exadel
Exadel is a global software
engineering company.
● Founded in 1998,
headquarters in San Francisco
Bay Area
● 7 development offices in
Europe
● 350+ employees
7. Exadel
Exadel Products
● Open Source with JBoss
◦ RichFaces
◦ JBoss Tools/JBoss Developer Studio
● exadel.org
◦ Flamingo
◦ Fiji
◦ jsf4birt
◦ JavaFX Plug-in for Eclipse
● gotiggr.com– interactive Web and mobile
HTML prototypes
8. Exadel
Exadel Services
● Professional services
● Rich enterprise application
development
● Eclipse development
● Custom rich component development
● Mobile development
● Training
9. Exadel
The Plan Is Simple
1) Ajax features in JSF 2
2) The new RichFaces 4
10. 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
11. Exadel
JSF 2
● JSF 2 is a major upgrade over JSF 1.x
● Many features, ideas taken from
projects such as Seam, and RichFaces,
and others
12. 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
13. 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
16. 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
17. 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.
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
24. Exadel
RichFaces 4
Zero-configuration.
Just drop RichFaces into the
application.
31. Exadel
RichFaces 4
Tooling support through
JBoss Tools, IntelliJ,
NetBeans
32. Exadel
Just tell me when RichFaces 4
is going to be released?
RichFaces was released on
March 29, 2011
(Yes, finally!)
33. 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
34. 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
38. 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>
39. Exadel
<a4j:ajax> attributes
Attribute Description
onbegin JavaScript to execute before Ajax request
JavaScript to execute after response
onbeforedomupdate
comes back but before DOM update
oncomplete JavaScript to execute after DOM update
Skips Update Model and Invoke
bypassUpdates Application phases, useful for form
validation
Skips all <a4j:outputPanel
limitRender ajaxRender=”true”> panels. Only
renders what is set in current render
status Status to display during Ajax request
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)" />
46. Exadel
<a4j:outputPanel> – auto
rendered panel
<h:selectOneMenu value="#{bean.fruit}">
<a4j:ajax listener="#{bean.change}"/>
</<h:selectOneMenu>
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid>
...
</h:panelGrid> Rendered on every
</a4j:outputPanel> Ajax request
47. Exadel
Advanced rendering options:
limitRender
<a4j:commandButton render="output"/>
<a4j:commandButton render="output" limitRender="true"/>
<h:panelGrid id="output">
Turns off all auto rendered panels,
...
only renders what is set in current
</h:panelGrid> render
<a4j:outputPanel ajaxRendered="true">
...
</a4j:outputPanel>
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
52. Exadel
JavaScript interactions
<h:commandLink value="Link"
<f:ajax onevent="ajaxEvent();">
</h:commandLink>
Called three times:
1) begin
2) success
3) complete
<a4j:commandLink value="Link"
onbegin="ajaxOnBegin()"
onbeforedomupdate="ajaxOnBeforeDomUpdate()"
oncomplete="ajaxOnComplete()">
</a4j:commandLink>
Events are separated for easier development
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
RichFaces queue upgrades
● Combine
requests from one or more
components
● Delay firing Ajax request
● Cancel DOM updates if “similar” request
was fired
● Define queue as:
◦ Global (all views have queue)
◦ View-based
◦ Form-based
◦ Named (used by particular components only)
55. Exadel
<a4j:queue> – “combining”
events from the same
component
<a4j:queue requestDelay="2000"/>
…
<a4j:commandButton value="Button A1"/>
<a4j:commandButton value="Button AB"/>
Events (clicks) from the same component
are “combined” which results in just one request
from a component being sent. Prevents sending multiple
request from the same component.
56. Exadel
<a4j:queue> – “combining”
events from different
components
<a4j:queue requestDelay="2000"/>
...
<a4j:commandButton>
<a4j:attachQueue requestGroupingId="ajaxGroup"/>
</a4j:commmandButton>
<a4j:commandButton>
<a4j:attachQueue requestGroupingId="ajaxGroup"/>
</a4j:commmandButton>
57. Exadel
<a4j:queue> delay
<a4j:queue requestDelay="2000"/>
... Delay request
by 2 seconds
<a4j:commandButton value="Button1"/>
<a4j:commandButton value="Button2"/>
<a4j:queue requestDelay="2000"/>
... Overwrite default
<a4j:commandButton> delay request
by 1 second
<a4j:attachQueue requestDelay="1000"/>
</a4j:commmandButton>
<a4j:commandButton />
Delay is a “wait” to combine similar events (events from the
same components) together.
61. Exadel
<a4j:param>
● Similar to <f:param> but simpler as it
also assigns the value to a bean
property automatically
<a4j:commandButton value="Save">
<a4j:param name="product" value="1009"/>
</a4j:commandButton>
public class Bean {
private String product;
public void setProduct (String product) {...}
public String getProduct () {...}
}
79. 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
80. 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.
87. 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
90. Exadel
Skins
● Modify existing or create your own
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>myCoolSkin</param-value>
</context-param>
● Change skins in runtime
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{bean.skin}</param-value>
</context-param>
91. Exadel
Overwriting skins
<style>
.rf-p-hr {
// your custom style, applied to all panels on
// on page
}
.panelHeader {
// custom header style
}
</style>
<rich:panel id="panel1">
...
</rich:panel id="panel2">
<rich:panel headerClass="panelHeader">
...
</rich:panel>
92. Exadel
Skinning standard JSF tags
and HTML tags
Apply to each control:
<h:button style="background-color:
'#{richSkin.tableBackgroundColor}'"/>
Apply to all standard controls (JSF and HTML):
<context-param>
<param-name>
org.richfaces.enableControlSkinning
</param-name>
<param-value>true</param-value>
</context-param>
93. Exadel
Skinning standard JSF tags
and HTML tags
<context-param>
<param-name>
org.richfaces.enableControlSkinningClasses
</param-name>
<param-value>true</param-value>
</context-param>
<div class="rfs-ctn">
<h:panelGrid columns="1">
Can be applied to
<h:outputText /> <h:panelGrid>, <rich:panel>, <div>
<h:inputText /> Any standard controls inside the
<h:commandButton /> container will be skinned using
</h:panelGrid> standard controls skinning classes.
</div>
94. Exadel
Where can I try the new
RichFaces 4?
http://livedemo.exadel.com/richfaces4-demo
95. 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
98. Exadel
Powerful prototyping Build interactive
Large number of web components, HTML prototypes
layout containers and jQuery Define navigation, show pop-ups
Mobile components. and other event/actions to make
the prototype like the real
application.
Collaborate View and share
Collaborate with colleagues and the HTML prototype
customers in real time, get View prototypes in any browser,
feedback. share with anyone, get feedback.
99. Exadel
Try this web prototype: Try this mobile prototype:
gotiggr.com/preview/6669 gotiggr.com/preview/5673