Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit

Max Katz | Exadel
Senior Systems Engineer
Ajax Applications with JSF 2 and
New RichFaces 4
JAX/JSF Summit, San Jose, CA

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

Exadel

4

Author of Lead-author of
Practical RichFaces Practical RichFaces, 2/e
(Apress) (Apress, Summer 2011)

Exadel

Exadel is a global software
engineering company.
● Founded in 1998,

headquarters in San Francisco
Bay Area
● 7 development offices in

Europe
● 350+ employees

Exadel
Exadel Offices

Ekaterinburg
Moscow

Minsk

Homyel

5 Kharkov

Munich
Donetsk

Exadel

Open Source with JBoss

Exadel

Exadel Products

exadel.org gotiggr.com
◦ Flamingo
◦ Fiji
◦ jsf4birt
◦ JavaFX Plug-in for
Eclipse

Exadel

Exadel Services
● Professional services
● Rich enterprise application
development
● Eclipse development
● Custom rich component development
● Mobile development
● Training

Exadel

The Plan Is Simple

1) Ajax features in JSF 2

2) The new RichFaces 4

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

Exadel

JSF 2 is a major upgrade
over JSF 1.x

Many features, ideas taken
from projects such as Seam,
RichFaces, and others

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

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

Exadel

<h:form>
<h:input value="#{bean.word}"/>
<h:commandButton>
<f:ajax event="click" 1
execute="@form" 2
listener="#{bean.ajaxListener}"
render="out1 out2"/> 3
</h:commandButton>
<h:input value="#{bean.text}" id="out1"/>
<h:input value="#{bean.phrase}" id="out2"/>
</h:form>

Exadel

<h:form>
<h:input value="#{bean.word}"/>
<h:selectOneMenu value="#{bean.selected}">
<f:selectItems value="#{bean.items}"/>
<f:ajax event="change" 1
execute="@form" 2
listener="#{bean.ajaxListener}"
render="@form"/> 3
</h:commandButton>
<h:input value="#{bean.text}" id="out1"/>
<h:input value="#{bean.phrase}" id="out2"/>
</h:form>

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

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.

Exadel

Official RichFaces logo

RichFaces 4 is a lightweight,
open source framework for
JSF 2

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

Exadel

RichFaces 4

100% built on top of JSF2,
just extends functionality in
JSF 2

Exadel

RichFaces 4

JavaScript is now entirely
based on the popular jQuery
library

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

Exadel

RichFaces 4

New client-side validation
based on Bean Validation
(JSR 303)

Exadel

RichFaces 4

New, and easy to use CDK
(Component Development Kit),
allows quickly to build your
own custom rich components

Exadel

RichFaces 4

Run on: Tomcat 6/7, Resin,
JBoss AS 6/7, GlassFish 3.x,
WebLogic
(run on any server when JSF 2 application
can be deployed)

Exadel

RichFaces 4

Run on: Google App Engine
(GAE), Amazon EC2,
CloudBees

Exadel

RichFaces 4

JSF implementations:
Mojarra or MyFaces

Exadel

RichFaces 4

Any browser

Exadel

RichFaces 4

Tooling support through
JBoss Tools, IntelliJ,
NetBeans

Exadel

RichFaces 4

Zero-configuration, just drop
RichFaces into the application

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

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

Exadel

RichFaces 4

Let's look at RichFaces
features in more detail...

Exadel

RichFaces 4 core – sending
an Ajax request
● <a4j:ajax>
● <a4j:commandButton>
● <a4j:commandLink>
● <a4j:jsFunction>
● <a4j:poll>
● <a4j:push>

Exadel

RichFaces 4

It's important to say it again,
RichFaces only extends and
upgrades JSF 2...

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>

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

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

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”

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>

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

Exadel

<a4j:poll> – periodically send an
Ajax request

<a4j:poll interval="1000"
action="#{bean.count}"
render="output"
enabled="#{bean.pollEnabled}" />

<h:panelGrid id="output">
...
</h:panelGrid>

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)" />

Exadel

RichFace 4 core – advanced
rendering features
● <a4j:outputPanel>
● limitRender attribute
● render=”{bean.renderList}”

Exadel

<a4j:outputPanel> – auto rendered
panel
<a4j:commandButton value="Save" action="#{bean.save}">
<a4j:commandButton value="Edit" action="#{bean.edit}">

<a4j:outputPanel ajaxRendered="true">
<h:panelGrid>
...
</h:panelGrid>
</a4j:outputPanel>

<rich:dataTable>
...
</rich:dataTable>
</a4j:outputPanel>

Exadel

Turning off auto rendered panels
<a4j:commandButton value="Save" action="#{bean.save}">
<a4j:commandButton value="Edit" action="#{bean.edit}"
render="edit" limitRender="true">

<h:panelGrid>
...
</h:panelGrid>
</a4j:outputPanel>
<h:panelGrid id="edit">
<rich:dataTable>
...
</rich:dataTable>
</h:panelGrid>

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

Exadel

RichFace 4 core – advanced
execute features
● <a4j:region>
● bypassUpdates attribute

Exadel

<a4j:region> – defining execute
region declaratively

<h:form>
<a4j:region>
<h:inputText />
<h:inputText />
<h:selectOneMenu />
<a4j:commandButton />
<a4j:region>
</h:form>

Exadel

Skipping
phases
when
validating
1.Restore View
2.Apply Request Values
3.Process Validation
4.Update Model
5.Invoke Application
6.Render Response

<h:inputText id="name" value="#{bean.name}"/>
<a4j:ajax event="blur" bypassUpdates="true"/>
</h:inputText>
<rich:message for="name"/>

Exadel

JavaScript callbacks during Ajax
request
<a4j:commandLink value="Link"
onbegin="ajaxOnBegin()"
onbeforedomupdate="ajaxOnBeforeDomUpdate()"
oncomplete="ajaxOnComplete()">
</a4j:commandLink>

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

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

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

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 id="buttonB" value="Button B"/>

Exadel

<a4j:queue> – ignoring “stale”
responses
<a4j:queue requestDelay="2000
ingoreDupResponses="true"/>

<h:inputText value="#{bean.state}">
<a4j:ajax event="keyup" listener="#{bean.load}"
render="states"/>
</h:inputText>

Exadel

RichFace 4 core – more
advanced features
● <a4j:status>
● <a4j:param>
● <a4j:log>
● JavaScript interactions

Exadel

<a4j:status> – Ajax request
status

<a4j:status name="ajaxStatus">
<f:facet name="start">
<h:graphicImage value="ajaxStatus.jpg"/>
</f:facet>
</a4j:status>

<h:form>
<a4j:commandButton status="ajaxStatus"/>
</h:form>

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}"/>

public class Bean {
private String product;
public void setProduct (String product) {...}
}

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

Exadel

<a4j:log> – Ajax request/response
information, logging

Exadel

RichFaces UI components
● Output, panels
● Input
● Menu
● Data iteration
● Tree
● Drag and drop
● Client side validation
● Miscellaneous

Exadel

rich:tab

rich:accordion

rich:progressBar

Exadel

More rich output, panels
● rich:panel
● rich:togglePanel
● rich:popupPanel
● rich:collapsiblePanel
● rich:toolTip

Exadel

<rich:popupPanel> can be modal and
non-modal

<rich:popupPanel modal="false">
<f:facet name="header">
Edit User
</f:facet>
...
...
</rich:popupPanel>

Exadel

rich:calendar

rich:inplaceInput

rich:inputNumberSlider

rich:autocomplete

Exadel

More rich input
● rich:inputNumberSpinner
● rich:inplaceSelect
● rich:select
● rich:fileUpload

Exadel

rich:panelMenu

rich:toolBar

rich:dropDownMenu

Exadel

rich:dataTable

rich:dataTable with
rich:collapsibleSubTable

rich:dataScroller

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"

Exadel

Deciding what rows/cell to update in
run-time
render="tableId:rows(bean.rowsSet)"

render="tableId:rows(bean.rowsSet):cellId"

Exadel

New collapsible sub table component

Exadel

<rich:dataTable> supports column
and row spanning

Exadel

<rich:extendedDataTable> provides
lazy loading, column resizing, reorder
and more

Exadel

More rich data iteration
● a4j:repeat
● rich:extendedDataTable
● rich:collapsibleSubTable
● rich:list

◦ list | ordered | definition
● rich:dataGrid
● rich:column

◦ Column and row spanning
◦ Filtering, sorting

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.

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>

Exadel

Invoking component JavaScript API
using <rich:componentControl>
component
<h:outputLink value="#">
<h:outputText value="Open" />
<rich:componentControl event="click"
target="popup" operation="show" />
</h:outputLink>

<rich:popupPanel header="RichFaces" id="popup">
<h:outputLink value="#">
<h:outputText value="Close" />
target="popup" operation="hide" />
</h:outputLink>
</rich:popupPanel>

Exadel

<rich:accordion id="c">
<rich:accordionItem header="New York" name="nyc">
<h:outputText value="You selected New York"/>
</rich:accordionItem>
<rich:accordionItem header="San Francisco" name="sf">
<h:outputText value="You selected San Francisco"/>
</rich:accordionItem>
...
</rich:accordion>

Exadel

<input type="button" value="New York City"
onclick="#{rich:component('c')}.switchToItem('nyc')"/>
<input type="button" value="San Francisco"
onclick="#{rich:component('c')}.switchToItem('sf')"/>
<input type="button" value="Los Angeles"
onclick="#{rich:component('c')}.switchToItem('la')"/>

<input type="button" value="First"
onclick="#{rich:component('c')}.switchToItem('@first')"/>
<input type="button" value="Next"
onclick="#{rich:component('c')}.switchToItem('@next')"/>
<input type="button" value="Previous"
onclick="#{rich:component('c')}.switchToItem('@prev')"/>
<input type="button" value="Last"
onclick="#{rich:component('c')}.switchToItem('@last')"/>

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

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

Exadel

Client-side validation based
on Bean Validation
(JSR 303)

New in RichFaces 4

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

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

Exadel

Cross field validation with
<rich:graphValidator>
@Size(min=5,max=15)
private String password1;
@Size(min=5,max=15)
private String password2;

@AssertTrue(message="Passwords don't match")
public boolean checkPassword() {
return password1.equals(password1);
}

<rich:graphValidator value="#{bean}" id="crossField">
<h:inputText value="#{bean.password1}"/>
<h:inputText value="#{bean.password2}"/>
<rich:message for="email" for="crossField"/>
</rich:graphValidator>

Exadel

Rich miscellaneous
● <rich:componentControl>
● <rich:hashParam>
● <rich:jQuery>

Exadel

<rich:componentControl>
● Allows to call JS API on a component
in declarative fashion
<h:outputLink id="openLink" value="#">
<h:outputText value="Open" />
operation="show"
target="popup" />
</h:outputLink>

<rich:popupPanel id="popup">
...
</rich:popupPanel>

Exadel

<rich:hashParam> - creates
JavaScript hash, can be passed to
another client function.

<h:commandButton value="Show popup">
<rich:componentControl target="pp" operation="show">
<rich:hashParam>
<f:param name="width" value="500" />
<f:param name="height" value="300" />
<f:param name="minWidth" value="300" />
<f:param name="minHeight" value="150" />
</rich:hashParam>
</rich:componentControl>
</h:commandButton

Exadel

Using jQuery with <rich:jQuery>

<input type="button" id=" value="Update panel"/>
<rich:jQuery selector="#changeButton" event="click"
query="$('#nycInfo .rf-p-hdr').text('New York City');
$('.rf-p-b').css('color', 'blue');" />

Exadel

Using jQuery when page rendered to
create zebra-like styling for table

Exadel

<style>
.even-row {
background-color: #FCFFFE;
}
.odd-row {
background-color: #ECF3FE;
}
</style>

<rich:dataTable id="gamesTable">
// columns
</rich:dataTable>

<rich:jQuery selector="#gamesTable tr:odd"
query="addClass('odd-row')" />
<rich:jQuery selector="#gamesTable tr:even"
query="addClass('even-row')" />

Exadel

Invoking <rich:jQuery> as a regular
JavaScript function
with mouse over

<h:graphicImage width="100" value="/images/venice.png"
onmouseover="larger(this, {})"
onmouseout="normal(this, {})" />

<rich:jQuery name="larger"
query="animate({width:'241px'})" />
<rich:jQuery name="normal"
query="animate({width:'100px'})"/>

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

Exadel

Ready-to-use skins
● classic
● wine
● blueSky
● ruby
● emeraldTown
● deepMarine
<context-param>
● plain <param-name>org.richfaces.skin</param-name>
<param-value>ruby</param-value>
● japanCherry </context-param>

Exadel

RichFaces Skin file
#Colors
headerBackgroundColor=#900000
headerGradientColor=#DF5858
headerTextColor=#FFFFFF
headerWeightFont=bold

generalBackgroundColor=#f1f1f1
generalTextColor=#000000
generalSizeFont=11px
generalFamilyFont=Arial, Verdana, sans-serif

controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#F9E4E4

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>

Exadel

Overwriting Skin CSS
<style>
.rf-p-hdr {
color: …
font-size: …
font-weight: …
font-family: …
}
</style>
<rich:panel>...</rich:panel>

Exadel

Overwriting Skin CSS
<style>
.rf-p-hdr {
// overwrite skin CSS properties
}
.specialHeader {
// define custom CSS for specific panel
}
</style>

<rich:panel id="panel1">
...
<rich:panel>
<rich:panel id="panel2" headerClass="specialHeader">
...
<rich:panel>

Exadel

Skinning standard JSF tags and
HTML tags

Apply to each control:
<h:button style="background-color:
'#{richSkin.tableBackgroundColor}'"/>

Exadel

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>

Exadel

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>

Exadel

Where can I try the new
RichFaces 4?
http://richfaces.org/showcase

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

Exadel

RichFaces
Rich, flexible, robust, and
proven enterprise-level
extension to JSF 2

Exadel

There is just one more
thing...

Exadel

Try it at: http://gotiggr.com

Exadel

max@exadel.com

@maxkatz

mkblog.exadel.com

gotiggr.com

Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit

More Related Content

What's hot (20)

Similar to Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit (20)

More from Max Katz (13)

Ajax Applications with JSF 2 and New RichFaces 4 - JAX/JSF Summit