Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011
-
Upload
max-katz -
Category
Technology
-
view
3.768 -
download
4
description
Transcript of Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011
![Page 1: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/1.jpg)
Exadel
#{Ajax Applications with JSF 2 and New RichFaces 4}
CONFESS, ViennaApril 12, 2011
Max KatzExadel
![Page 2: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/2.jpg)
I confess...
![Page 3: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/3.jpg)
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
![Page 4: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/4.jpg)
Exadel
Author of Practical RichFaces
(Apress)
4
Lead-author of Practical RichFaces, 2/e
(Apress, June 2011)
Summer 2011
![Page 5: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/5.jpg)
Exadel
Published April 11, 2011
![Page 6: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/6.jpg)
Exadel
exadel.org – open source projects and community
● Exadel Flamingo
● Exadel Fiji
● Exadel jsf4birt
● Exadel JavaFX Plug-in for Eclipse
![Page 7: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/7.jpg)
Exadel
Tiggr
Let's you easily create, share, and preview interactive web
and mobile HTML prototypes
[http://gotiggr.com]
![Page 8: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/8.jpg)
Exadel
![Page 9: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/9.jpg)
Exadel
Web Preview [desktop][gotiggr.com/preview/6669]
Web Preview [mobile][gotiggr.com/preview/5673]
![Page 10: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/10.jpg)
Exadel
mkblog.exadel.com
@maxkatz
![Page 11: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/11.jpg)
Exadel
Exadel is products and services company
Founded in 1998, headquarters in San Francisco Bay Area (Concord, CA)
350+ employees
![Page 12: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/12.jpg)
Exadel
5
Minsk
Homyel
Kharkov
Donetsk
Ekaterinburg
Moscow
Exadel Offices
Munich
![Page 13: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/13.jpg)
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
![Page 14: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/14.jpg)
Exadel
Services
● Rich enterprise application development, integration
● Eclipse development
● Custom rich component development
● Mobile development
● Training
● Most projects are done in Eastern Europe
![Page 15: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/15.jpg)
Exadel
The Plan Is Simple
1) Ajax features in JSF 2
2) The new RichFaces 4
![Page 16: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/16.jpg)
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
![Page 17: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/17.jpg)
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
![Page 18: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/18.jpg)
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
![Page 19: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/19.jpg)
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
![Page 20: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/20.jpg)
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
![Page 21: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/21.jpg)
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
![Page 22: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/22.jpg)
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
![Page 23: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/23.jpg)
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
![Page 24: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/24.jpg)
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.
![Page 25: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/25.jpg)
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
![Page 26: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/26.jpg)
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
![Page 27: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/27.jpg)
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
![Page 28: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/28.jpg)
Exadel
Just tell me when RichFaces 4 is going to be released?
RichFaces was released on March 29, 2011(Yes, finally!)
![Page 29: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/29.jpg)
Exadel
Good, now tell me what's really new and improved in
RichFaces 4?
![Page 30: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/30.jpg)
Exadel
RichFaces 4
JavaScript in RichFaces is now entirely based on the
popular jQuery library
![Page 31: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/31.jpg)
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
![Page 32: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/32.jpg)
Exadel
RichFaces 4
New client-side validation based on Bean Validation
(JSR 303)
![Page 33: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/33.jpg)
Exadel
RichFaces 4
New, and easy to use CDK (Component Development Kit),
allows quickly to build your own custom rich components
![Page 34: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/34.jpg)
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)
![Page 35: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/35.jpg)
Exadel
RichFaces 4
Run on: Google App Engine (GAE), Amazon EC2,
CloudBees
![Page 36: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/36.jpg)
Exadel
RichFaces 4
JSF implementations: Mojarra or Myfaces
![Page 37: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/37.jpg)
Exadel
RichFaces 4
Any browser
![Page 38: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/38.jpg)
Exadel
RichFaces 4
Tooling support through JBoss Tools, IntelliJ,
NetBeans
![Page 39: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/39.jpg)
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>
![Page 40: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/40.jpg)
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
![Page 41: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/41.jpg)
Exadel
That's not all, you get a lot more upgrades, advanced
features and customization options from RichFaces...
![Page 42: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/42.jpg)
Exadel
RichFaces 4 core – sending an Ajax request
● a4j:ajax
● a4j:commandButton
● a4j:commandLink
● a4j:jsFunction
● a4j:poll
● a4j:push
![Page 43: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/43.jpg)
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}" />
![Page 44: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/44.jpg)
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”
![Page 45: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/45.jpg)
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
![Page 46: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/46.jpg)
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>
![Page 47: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/47.jpg)
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)" />
![Page 48: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/48.jpg)
Exadel
RichFace 4 core – advanced rendering features● <a4j:outputPanel>
● limitRender attribute
● render=”{bean.renderList}”
![Page 49: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/49.jpg)
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
![Page 50: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/50.jpg)
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
![Page 51: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/51.jpg)
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
![Page 52: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/52.jpg)
Exadel
RichFace 4 core – advanced execute features● <a4j:region>
● bypassUpdates attribute
![Page 53: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/53.jpg)
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
![Page 54: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/54.jpg)
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
![Page 55: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/55.jpg)
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
![Page 56: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/56.jpg)
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)
![Page 57: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/57.jpg)
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.
![Page 58: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/58.jpg)
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>
![Page 59: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/59.jpg)
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.
![Page 60: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/60.jpg)
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>
![Page 61: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/61.jpg)
Exadel
RichFace 4 core – more advanced features● <a4j:status>
● <a4j:param>
● <a4j:log>
● JavaScript interactions
![Page 62: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/62.jpg)
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>
![Page 63: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/63.jpg)
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 () {...}}
![Page 64: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/64.jpg)
Exadel
<a4j:log> – Ajax request information● Levels:
◦ debug, info, warn, error
![Page 65: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/65.jpg)
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
![Page 66: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/66.jpg)
Exadel
RichFaces UI components
● Output, panels
● Input
● Menu
● Data iteration
● Tree
● Drag and drop
● Client side validation
● Miscellaneous
![Page 67: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/67.jpg)
Exadel
rich:tab
rich:accordionrich:accordion
rich:progressBar
![Page 68: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/68.jpg)
Exadel
More rich output, panels
● rich:panel
● rich:togglePanel
● rich:popupPanel
● rich:collapsiblePanel
● rich:toolTip
![Page 69: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/69.jpg)
Exadel
rich:calendar
rich:inplaceInput
rich:inputNumberSlider
rich:autocomplete
![Page 70: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/70.jpg)
Exadel
More rich input
● rich:inputNumberSpinner
● rich:inplaceSelect
● rich:select
● rich:fileUpload
![Page 71: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/71.jpg)
Exadel
rich:panelMenu
rich:toolBar
rich:dropDownMenu
![Page 72: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/72.jpg)
Exadel
rich:dataTable
rich:dataTable withrich:collapsibleSubTable
rich:dataScroller
![Page 73: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/73.jpg)
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"
![Page 74: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/74.jpg)
Exadel
Partial table updaterender="tableId:#{bean.rowsSet}"
render="tableId:#{bean.rowsSet}:cellId"
![Page 75: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/75.jpg)
Exadel
More rich data iteration
● a4j:repeat
● rich:extendedDataTable
● rich:list
◦ list | ordered | definition
● rich:dataGrid
● rich:column
◦ Column and row spanning
◦ Filtering, sorting
![Page 76: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/76.jpg)
Exadel
rich:tree
![Page 77: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/77.jpg)
Exadel
Drag and drop
![Page 78: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/78.jpg)
Exadel
Client-side validation based on Bean Validation
(JSR 303)
New in RichFaces 4
![Page 79: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/79.jpg)
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"/>
![Page 80: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/80.jpg)
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"/>
![Page 81: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/81.jpg)
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);}
![Page 82: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/82.jpg)
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
![Page 83: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/83.jpg)
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
![Page 84: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/84.jpg)
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>
![Page 85: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/85.jpg)
Exadel
Rich miscellaneous
● <rich:componentControl>
● <rich:hashParam>
● <rich:jQuery>
![Page 86: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/86.jpg)
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>
![Page 87: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/87.jpg)
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
![Page 88: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/88.jpg)
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>
![Page 89: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/89.jpg)
Exadel
Skins
![Page 90: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/90.jpg)
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
![Page 91: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/91.jpg)
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>
![Page 92: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/92.jpg)
Exadel
Skin file (just a property file)
#ColorsheaderBackgroundColor=#900000headerGradientColor=#DF5858headerTextColor=#FFFFFFheaderWeightFont=bold
generalBackgroundColor=#f1f1f1generalTextColor=#000000generalSizeFont=11pxgeneralFamilyFont=Arial, Verdana, sans-serif
controlTextColor=#000000controlBackgroundColor=#ffffffadditionalBackgroundColor=#F9E4E4
![Page 93: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/93.jpg)
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>
![Page 94: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/94.jpg)
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>
![Page 95: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/95.jpg)
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):
![Page 96: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/96.jpg)
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.
![Page 97: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/97.jpg)
Exadel
Where can I try the new RichFaces 4?
http://richfaces.org/showcase
![Page 98: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/98.jpg)
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
![Page 99: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/99.jpg)
Exadel
That's it for RichFaces, there is one more thing I want to
show you.
![Page 100: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/100.jpg)
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
![Page 101: Ajax Applications with JSF 2 and New RichFaces 4 - CONFESS 2011](https://reader033.fdocuments.net/reader033/viewer/2022050921/555e572ed8b42a8e4c8b5095/html5/thumbnails/101.jpg)
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