Exadel

#{Ajax Applications with JSF 2 and New RichFaces 4}

CONFESS, ViennaApril 12, 2011

Max KatzExadel

I confess...

Exadel

Senior Systems Engineer at Exadel

JSF, RichFaces, Java EE

exadel.org – open source projects and community

http://gotiggr.com – create, share, and preview web and mobile interactive HTML prototypes

Exadel

Author of Practical RichFaces

(Apress)

4

Lead-author of Practical RichFaces, 2/e

(Apress, June 2011)

Summer 2011

Exadel

Published April 11, 2011

Exadel

exadel.org – open source projects and community

● Exadel Flamingo

● Exadel Fiji

● Exadel jsf4birt

● Exadel JavaFX Plug-in for Eclipse

Exadel

Tiggr

Let's you easily create, share, and preview interactive web

and mobile HTML prototypes

[http://gotiggr.com]

Exadel

Exadel

Web Preview [desktop][gotiggr.com/preview/6669]

Web Preview [mobile][gotiggr.com/preview/5673]

Exadel

mkblog.exadel.com

@maxkatz

Exadel

Exadel is products and services company

Founded in 1998, headquarters in San Francisco Bay Area (Concord, CA)

350+ employees

Exadel

5

Minsk

Homyel

Kharkov

Donetsk

Ekaterinburg

Moscow

Exadel Offices

Munich

Exadel

Products

● Open Source with JBoss

◦ RichFaces

◦ JBoss Tools/JBoss Developer Studio

● exadel.org

◦ Flamingo

◦ Fiji

◦ jsf4birt

◦ JavaFX Plug-in for Eclipse

● gotiggr.com– create, share, and preview interactive Web and mobile HTML prototypes

Exadel

Services

● Rich enterprise application development, integration

● Eclipse development

● Custom rich component development

● Mobile development

● Training

● Most projects are done in Eastern Europe

Exadel

The Plan Is Simple

1) Ajax features in JSF 2

2) The new RichFaces 4

Exadel

RichFaces 4 workshops at CONFESS, April 1408:00-10:00

RichFaces: Foundation (a4j)

10:30-12:30

RichFaces: Rich UI components

13:30-15:30

RichFaces: Client-side validation

16:00-18:00

RichFaces: Skins

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

● JSF 2 is a major upgrade over JSF 1.x

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

Exadel

● Facelets

● Composite components

● Implicit navigation

● GET support

◦ h:link, h:button

● Resource loading

JSF 2 new features

● New scopes

◦ Flash, View, custom

● Configuration via annotations

● Bean Validation support

● Basic Ajax

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" execute="@form" listener="#{bean.ajaxListener}" render="out1 out2"/> </h:commandButton> <h:input value="#{bean.text}" id="out1"/> <h:input value="#{bean.phrase}" id="out2"/></h:form>

1

2

3

Exadel

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

1

2

3

Exadel

Attribute Value

eventEvent on which to fire the Ajax request

execute

@all@this (default)@form@noneid'sEL

render

@all@this@form@none (default)id's EL

Important <f:ajax> attributes

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

RichFaces 4 – rich JSF framework

● JSF 2 based

● 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 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

Just tell me when RichFaces 4 is going to be released?

RichFaces was released on March 29, 2011(Yes, finally!)

Exadel

Good, now tell me what's really new and improved in

RichFaces 4?

Exadel

RichFaces 4

JavaScript in RichFaces 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 <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

Attribute Description

onbegin JavaScript to execute before Ajax request

onbeforedomupdateJavaScript to execute after response comes back but before DOM update

oncomplete JavaScript to execute after DOM update

bypassUpdatesSkips Update Model and Invoke Application phases, useful for form validation

limitRenderSkips all <a4j:outputPanel ajaxRender=”true”> panels. Only renders what is set in current render

status Status to display during Ajax request

<a4j:ajax> attributes

Exadel

That's not all, you get a lot more upgrades, advanced

features and customization options from RichFaces...

Exadel

RichFaces 4 core – sending an Ajax request

● a4j:ajax

● a4j:commandButton

● a4j:commandLink

● a4j:jsFunction

● a4j:poll

● a4j:push

Exadel

<a4j:commandButton/Link> – Ajax button/link

/* standard button with f:ajax */<h:commandButton value="Save" action="#{bean.action}"> <f:ajax execute="@form" render="output"/></h:commandButton>

/* RichFaces button */<a4j:commandButton value="Save" render="output" action="#{bean.action}" />

Exadel

<h:form> <h:inputText> <h:selectOneMenu> <h:commandButton> <f:ajax execute="@form"/> </h:commandButton><h:form>

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

Need to set execute=”@form”(or execute=”id1 id2”)

RichFaces defaultvalue for button/linkexecute=”@form”

Exadel

<table> ... <td onmouseover="update('yellow')"/> ...</table>

<h:form> <a4j:jsFunction name="update" action="#{bean.change}" reRender="..."> <a4j:param value="param1" assignTo="#{bean.color}"/> </a4j:jsFunction></h:form>

<a4j:jsFunction> – fire Ajax request from any JavaScript function, HTML event

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

● Provides excellent 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

<h:selectOneMenu value="#{bean.fruit}"> <a4j:ajax listener="#{bean.change}"/></<h:selectOneMenu>

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

Rendered on every Ajax request

Exadel

Advanced rendering options: limitRender

<a4j:commandButton render="output"/><a4j:commandButton render="output" limitRender="true"/>

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

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

Turns off all auto rendered panels,only renders what is set in currentrender

Exadel

render=”#{bean.renderList}”

1) Ajax request sent

2) Component id's to be rendered resolved

3) Component id's are rendered into the page

4) 2nd Ajax request is sent. In this request the components (resolved in step 2 are sent with request) will be rendered

1) Ajax request sent

2) Component id's to be rendered resolved

3) Component id's are rendered

JSF RichFaces

Exadel

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

● bypassUpdates attribute

Exadel

<a4j:region> – declaratively define execute region<h:form> <a4j:region> <h:inputText /> <h:inputText /> <a4j:commandButton execute="@region"/> <a4j:region></h:form>

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

Execute options: ● @all● @this● @form● @none● id's● EL● @region

Exadel

Skipping phases when validating

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

1.Restore View2.Apply Request Values3.Process Validation4.Update Model5.Invoke Application6.Render Response

Exadel

JSF 2 queue

● JSF 2 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

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)

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.

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>

Exadel

<a4j:queue> delay<a4j:queue requestDelay="2000"/>...<a4j:commandButton value="Button1"/><a4j:commandButton value="Button2"/>

<a4j:queue requestDelay="2000"/>...<a4j:commandButton> <a4j:attachQueue requestDelay="1000"/></a4j:commmandButton><a4j:commandButton />

Delay request by 2 seconds

Overwrite default delay request by 1 second

Delay is a “wait” to combine similar events (events from the same components) together.

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>

● 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 () {...}}

Exadel

<a4j:log> – Ajax request information● Levels:

◦ debug, info, warn, error

Exadel

JavaScript interactions

<a4j:commandLink value="Link" onbegin="ajaxOnBegin()" onbeforedomupdate="ajaxOnBeforeDomUpdate()" oncomplete="ajaxOnComplete()"></a4j:commandLink>

<h:commandLink value="Link" <f:ajax onevent="ajaxEvent();"></h:commandLink>

Called three times:1) begin2) success3) complete

Events are separated for easier development

Exadel

RichFaces UI components

● Output, panels

● Input

● Menu

● Data iteration

● Tree

● Drag and drop

● Client side validation

● Miscellaneous

Exadel

rich:tab

rich:accordionrich:accordion

rich:progressBar

Exadel

More rich output, panels

● rich:panel

● rich:togglePanel

● rich:popupPanel

● rich:collapsiblePanel

● rich:toolTip

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 withrich:collapsibleSubTable

rich:dataScroller

Exadel

Partial table update

render="@row"

render="@column"render="@header"

render="@footer"

render="@body"

render="cellId"

To render from outside the table:render="tableId@header"render="tableId@body"render="tableId@footer"

Exadel

Partial table updaterender="tableId:#{bean.rowsSet}"

render="tableId:#{bean.rowsSet}:cellId"

Exadel

More rich data iteration

● a4j:repeat

● rich:extendedDataTable

● rich:list

◦ list | ordered | definition

● rich:dataGrid

● rich:column

◦ Column and row spanning

◦ Filtering, sorting

Exadel

rich:tree

Exadel

Drag and drop

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 (server-side)

public class Bean { @Pattern(regexp="...") private String email;}

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

Exadel

RichFaces client validation <rich:validator>

public class Bean { @Pattern(regexp="...") private String email;}

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

Exadel

RichFaces client validation <rich:graphValidator>

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

@Size(min=5,max=15,message="...")private String password1;@Size(min=5,max=15,message="...")private String password2;

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

Exadel

RichFaces client functions

Function Description

rich:client(id) Returns component client id

rich:element(id) Returns DOM element

rich:component(id)Returns RichFaces client component instance to call JS API method

rich:isUserInRole(role) Returns if the user has specified role

rich:findComponent(id)Returns component instance for given short id

Exadel

Many RichFaces components provide client-side JavaScript API

Method name Description

getTop() Return the top co-ordinate for the position of the pop-up panel.

getLeft() Return the left co-ordinate for the position of the pop-up panel.

moveTo(top,left)Move the pop-up panel to the co-ordinates specified with the top and left parameters.

resize(width,height)Resize the pop-up panel to the size specified with the width and height parameters.

show() Show the pop-up panel.

hide() Hide the pop-up panel.

<rich:popupPanel> JavaScript API

Exadel

Using <rich:component('id')>

<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

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" /><rich:componentControl event="click"

operation="show" target="popup" /></h:outputLink>

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

Exadel

<rich:hashParam>

● Group client side parameters into a hash map to be passed to component client API

<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

<rich:jQuery>

<input type="button" id="changeButton" value="Change title" /><rich:jQuery selector="#changeButton" query="click(function(){

$('#panel #panel_header').text('Capital of Russia');})"/>

<rich:panel header="Moscow" id="panel"> Moscow is the capital, the most populous ...</rich:panel>

Exadel

Skins

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

● plain

● japanCherry

<context-param> <param-name>org.richfaces.skin</param-name> <param-value>ruby</param-value></context-param>

Exadel

Skin file (just a property file)

#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=bold

generalBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serif

controlTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4

Exadel

Skins

● Modify existing or create your own

● Change skins in runtime

<context-param> <param-name>org.richfaces.skin</param-name> <param-value>myCoolSkin</param-value></context-param>

<context-param> <param-name>org.richfaces.skin</param-name> <param-value>#{bean.skin}</param-value></context-param>

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>

Exadel

Skinning standard JSF tags and HTML tags

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

Apply to each control:

<context-param> <param-name> org.richfaces.enableControlSkinning </param-name> <param-value>true</param-value></context-param>

Apply to all standard controls (JSF and HTML):

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"> <h:outputText /> <h:inputText /> <h:commandButton /> </h:panelGrid></div>

Can be applied to <h:panelGrid>, <rich:panel>, <div> Any standard controls inside the container will be skinned using standard controls skinning classes.

Exadel

Where can I try the new RichFaces 4?

http://richfaces.org/showcase

Exadel

How can we help with RichFaces

● Web development with RichFaces

● Version 3 to 4 migration

● Performance tune-up

● Custom component

development

● On-site training

Training Days

JSF 1.2, 2 1-2

RichFaces 3, 4 1-2

JSF and RichFaces 2-3

RichFaces 3 to 4 1-2

Exadel

That's it for RichFaces, there is one more thing I want to

show you.

Exadel

gotiggr.com/preview/6669

gotiggr.com/preview/5673

Looking for beta testers for new

Tiggr version where you can build

mobile apps and access remote

services and APIs

Exadel

RichFaces 4 workshops at CONFESS, April 1408:00-10:00

RichFaces: Foundation (a4j)

10:30-12:30

RichFaces: Rich UI components

13:30-15:30

RichFaces: Client-side validation

16:00-18:00

RichFaces: Skins

Exadel

mkblog.exadel.com

@maxkatz

max@exadel.com

gotiggr.com

Thank you!