Ajax Applications with RichFaces and JSF 2

Max Katz

Senior Systems Engineer

Exadel

mkatz@exadel.com

Max KatzSenior Systems Engineer at Exadel

RIA strategy, development, training and

consulting

Products:

• Exadel JavaFX plug-in for Eclipse

• Exadel FacesFX (JavaFX as JSF VDL)

• Exadel Fiji (JSF with JavaFX and Flex)

• jsf4birt (JSF-BIRT integration)

Author of Practical RichFaces

(Apress)

Co-author of RichFacesDzone RefCard

ExadelProducts and services

Founded in 1998, headquarters in San

Francisco Bay Area

300+ employees

Offices in:

• Concord, California - 1998

• Russia, Moscow - 1999

• Belarus, Minsk - 2002

• Belarus, Vitebsk - 2005

• Ukraine, Donetsk and Kharkov - 2006

Exadel ProductsOpen Source with JBoss

• RichFaces

• JBoss Tools/JBoss Developer Studio

Exadel

• JavaFX plug-in for Eclipse

• FacesFX

• Fiji (JSF – JavaFX/Flex integration)

• jsf4birt (JSF – BIRT/Actuate integration)

• Mobile ecommerce

Exadel ServicesRich Enteprise Applications

development

Custom rich components

Eclipse development

Cloud services

Mobile development

Training

The Plan:1)Tell you about RichFaces 3 and 4

2)Show you some examples

3)Tell you about other interesting JSF

projects

RichFaces is a JSF

framework:JSF-Ajax components (100+)

Skins and themes

CDK (Component Development Kit)

100+ Ajax and rich

componentsTwo tag libraries:

a4j: - framework-level AJAX support

rich: - component-level AJAX support (self

contained rich components)

RichFaces components demo

SkinsControl look and feel via skin

Change skins on the fly

Custom skins

CDK (Component

Development Kit)Facility for creating, generating, and testing

custom rich JSF components

What else you should know:JSF 1.1, 1.2, 2 (Mojarra, MyFaces)

Runs in any servlet container, application server

Seam, Spring

Portal: JBoss, Liferay, WebLogic

Very active community, forum

2 books, Dzone Refcard

Works with 3rd party component libraries

JBoss Tools/JBoss Developer Studio

a4j:support – attach Ajax request to any JSF component

<h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" action="#{bean.change}" reRender="info, details"/></<h:selectOneMenu><h:panelGrid id="info"> ...</h:panelGrid><h:panelGrid id="details"> ...</h:panelGrid>

Can also be an EL-expression:reRender="{bean.areas}"

a4j:jsFunction – Ajax request from any JS function

<table> ... <td onmouseover="update('yellow')"/> ...</table><a4j:jsFunction name="update" action="#{bean.change}" reRender="panel"> <a4j:actionparam value="param1" assignTo="#{bean.color}"/></a4j:jsFunction>

a4j:outputPanel – auto-rendered area

<h:selectOneMenu value="#{bean.fruit}"> <a4j:support event="onchange" action="#{bean.change}"/></<h:selectOneMenu><a4j:outputPanel ajaxRendered="true"> <h:panelGrid> ... </h:panelGrid> <h:panelGrid> ... </h:panelGrid></a4j:outputPanel>

Always Ajax renderedarea

a4j:queue– controlling traffic to server

<a4j:queue requestDelay="1000"/>

<a4j:commandButton value="Save" action="#{bean.change}" reRender="details"/><h:panelGrid id="details"> ...</h:panelGrid>

Hibernate Validator support

<h:inputText id="email" value="#{bean.email}"> <rich:ajaxValidator event="onblur"/></h:inputText><rich:message for="email"/>

public class Bean { @Email private String email; // setter and getter }

JavaScript interactions during Ajax call

<h:selectOneMenu value="#{bean.drink}"> <f:selectItem itemValue="Espresso"/> <f:selectItem itemValue="Cappuccino"/> <f:selectItem itemValue="Tea"/> <a4j:support event="onchange" reRender="drink" onsubmit="alert('Getting new drink...')" onbeforedomupdate="alert('About to update DOM')" oncomplete="alert('Browser DOM updated.')" /></h:selectOneMenu>

Rich components JavaScript API

<rich:listShuttle id="list" sourceValue="#{bean.source}" targetValue="#{bean.target}" var="items"> ...</rich:listShuttle>

<input type="button" onclick="#{rich:component('list')}.copyAll();" value="Copy All Items"/>

Rich data componentsVarious data iteration components

Dynamic columns

Column and row span

Specific row(s) update via Ajax

Update via Ajax

JSF 2

JSF 2 – major upgrade!Standard UI technology in Java EE 6

Facelets

Ajax

Composite components

GET requests

Annotations

And more...

<f:ajax>Inspired by <a4j:support> from RichFaces

<h:inputText value="#{bean.text}" > <f:ajax event="keyup" execute="@form" listener="#{bean.countListener}" render="id2 id2" /></h:inputText>

4

JSF 1.2 JSF 2

RichFaces 3.3.2

RichFaces 3.3.3

(Mar 2010)

RichFaces 4

(Summer 2010)

How RichFaces 4 extends

the capabilities of JSF 2?

With RichFaces 4 you get:Two tag libraries:

• a4j:*

• rich:*

Skins

CDK (Component Development Kit)

Plus advanced features, customization

f:ajax + RichFaces = a4j:ajaxPlus:

render – can be bound to an EL and resolved

during request

limitToRender – doesn't update

bypassUpdates – skip Update Model and

Invoke Application phases for validation

<h:inputText value="#{bean.text}" > <a4j:support event="onkeyup" action="#{bean.countAction}" reRender="id1, id2"/></h:inputText>

<h:inputText value="#{bean.text}" > <f:ajax event="keyup" execute="@form" listener="#{bean.countListener}" render="id2 id2" /></h:inputText>

<h:inputText value="#{bean.text}" > <a4j:ajax event="keyup" listener="#{bean.countListener}" render="id2, id2" /></h:inputText>

RichFaces 3.x

JSF 2

RichFaces 4

a4j:outputPanel - auto-rendered areas

a4j:queue - controlling traffic

a4j:status - status indicator for Ajax request

a4j:poll - periodically sends Ajax request

a4j:jsFunction - sends Ajax request from

any JavaScript function

a4:region - advanced features to mark what

to process on the server

80+ rich components

SkinsControl entire application look and feel skin

Create and edit skins

Overwrite CSS generated by skin

CDK (Component

Development Kit)Simple to use

Need “real” JSF components

Key changes in RichFaces 4 Consistency and consolidation

Performance tuning and review

New custom behaviors

Dynamic resource extensions

Semantic HTML markup

Updated skinning

Component libraries interoperability

New, simpler to use CDK

Updated documentation

Module build system for easy contribution

More frequent releases

Ways to communicate

Twitterhttp://twitter.com/richfaces

Project updates, blogs, announcement

IRC#richfaces @ irc.freenode.net

Nearly always up for questions, comments

MeetingsWeekly Meeting for design, features, planning, etc...

http://www.jboss.org/richfaces

RichFaces web site

Other JSF projects

Fiji: JSF-JavaFX integration<fiji:javaFx archive="/javafx/chart.jar" applicationClass="com.exadel.fiji.Chart"/>

Fiji: JSF-Flex integration<fiji:lineChart value="#{bean.data}"/>

FacesFX – JavaFX as JSF

VDL (View Description

Language)JavaFX script is a very powerful UI language

JavaFX nodes for JSF component

Value-expression

jsf4birtWrap any BIRT or Actuate report as JSF

component

<rich:panel header="BIRT Report as JSF component" style="width:790px"> <birt:birtWrapper id="report" reportDesign="/Reports/new_report.rptdesign"> <f:param name="Text" value="#{bean.text}"/> <f:param name="X" value="#{bean.x}" /> </birt:birtWrapper></rich:panel>

BIRT report as JSF component

FlamingoIntegrates Java EE, Seam, Spring back end

with rich UI front ends JavaFX, Flex, Swing

Flamingo MobileIntegrates Java EE, Seam, Spring back end

with mobile (iPhone, Android, BlackBerry)

JavaFX plug-in for EclipseEclipse plug-in for developing JavaFX

applications

Open source, free

Exadel offers enterprise RichFaces

support, and development

services

Custom on-site 1-2 days RichFaces

training

Best way to get started: 1) Components showcase, source code and more:

http://livedemo.exadel.com/richfaces-demo/welcome.jsf

2) Getting started article (JavaLobby.com):

http://tiny.cc/richfacesstart

3) 4-part webinar series:

http://tiny.cc/richfaceswebinar

4) Photo Album application (with Seam):

http://livedemo.exadel.com/photoalbum

5) Visit the forum:

http://jboss.org/richfaces

Bloghttp://mkblog.exadel.com

Twitterhttp://twitter.com/maxkatz