richfaces 4 component deep dive - jax/jsfsummit
DESCRIPTION
Deep dive into some of RichFaces 4.0 most complex and useful components: a4j:queue, a4j:push, rich:validator, rich:graphValidator. Given at JAX/JSFSummit, San Jose, June 2011.TRANSCRIPT
![Page 1: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/1.jpg)
Jay Balunas | JBoss, By Red Hat
RichFaces 4.0 Component Deep Dive
![Page 2: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/2.jpg)
• RichFaces Project Lead• JBoss Core Developer• JSF 2.2 Expert Group• Red Hat W3C Member
Who am I
![Page 4: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/4.jpg)
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
![Page 5: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/5.jpg)
JavaServer Faces (JSF) JSF 1.2
EE5 Extensible
JSF 2.0 EE6 Standardized Adv. Features Still Extensible
Made RichFaces, Seam, Facelets, etc...Possible!
![Page 6: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/6.jpg)
What Features..Annotation based configurationFaceletsComposite componentsJSP deprecatedBookmark GET supportBuilt in resource handling
Integrated AjaxBean validation Event systemException handlingImplicit navigationBehaviors frameworkProject stages
![Page 7: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/7.jpg)
RichFaces 4.0 Lighting Review
• Advanced framework built on top of JSFo Extends JSF coreo Full set of UI componentso Resource Handlingo Component development kito Skinning
• Two tag libraries o a4j: Page level ajax support & utility
componentso rich: Self contained visual components
![Page 8: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/8.jpg)
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
![Page 9: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/9.jpg)
JSF 2.0 Request Queue
• New with JSF 2.0• Preserves server/client state• Very few options• No client side api• Can lead to traffic jams...
![Page 10: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/10.jpg)
<a4j:queue ... >• Logical queue on top of JSF 2• Tuning features
• requestDelay• ignoreDupResponses• requestGrouping
• Queue scoping • Client side events & API
![Page 11: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/11.jpg)
Request Delay<h:form id="form"> <!-- Queue applied to whole form --> <a4j:queue requestDelay="500"/>
<h:inputText id="username" value="#{userBean.name}" /> <a4j:ajax event="keyup" .../> </h:inputText> <h:inputText id="message" value="#{userBean.msg}" /> <a4j:ajax event="keyup" .../> </h:inputText> ...</h:form>
![Page 13: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/13.jpg)
<h:form id="form"> <!-- Applied to whole form --> <a4j:queue requestDelay="1000"/> ...
<f:view> <!-- Applied to whole view --> <a4j:queue requestDelay="500"/> ...
View Scoped Form Scoped
Global Queue
<context-param> <param-name>org.richfaces.queue.enabled</param-name> <param-value>true</param-value></context-param>
![Page 14: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/14.jpg)
Named Queues
<!-- Checking availability is costly, so send less often --><a4j:queue name="available_queue" requestDelay="2000"/>...<h:inputText id="username" value="#{registrationBean.username}" /> <a4j:ajax event="keyup" action="checkUsername" > <a4j:attachQueue name="available_queue"/> </a4j:ajax></h:inputText>
![Page 15: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/15.jpg)
AttachQueue Tips
• Override settings directly• Skip the named queue
http://bit.ly/ilJu6e
![Page 16: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/16.jpg)
Client-Side Events & API• Events
• complete()• requestqueue()• requestdequeued()
• API• queue.getSize()• queue.isEmpty()• queue.set/getQueueOptions()
![Page 17: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/17.jpg)
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
![Page 18: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/18.jpg)
What is Bean Validation
• Bean Validation JSR-303 o Part of Java EE6
• Generic, tier independent constraints• Custom, and composition constraints
possible• Constraint groups, and object graph
validation • Message localization• Define constraints once, apply everywhere*
![Page 19: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/19.jpg)
Bean Validation Samplepublic class User {
@NotEmpty @Size(max=100) private String name;
@NotEmpty @Pattern(regexp = "[a-zA-Z0-9]+@[a-zA-Z0-9].....") private String email;
@ValidProject private String project;}
![Page 20: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/20.jpg)
RichFaces 4.0 & BV
• Introduces client-side validationoJSF validatorsoBean validation constraints
• JavaScript implementationsoValidatorsoConverters
• rich:message(s) enhanced
![Page 21: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/21.jpg)
BV Constraints & JSF Validators
JSF Validation Example:- Demo: http://bit.ly/mJ9qK4- XHTML: http://bit.ly/k7YhG6- Java: http://bit.ly/lLw4PZ
Bean Validation Example:- Demo: http://bit.ly/hsCJ16- XHMTL: http://bit.ly/l7MkLA- Java: http://bit.ly/iQJvGP
![Page 22: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/22.jpg)
Additional Features
Login:<h:inputText id="login" value="#{user.login}"> <rich:validator event="keyup"/></h:inputText><rich:message for="login"/>
• Behavior events• Ajax fallback• Custom constraints*
![Page 23: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/23.jpg)
GraphValidation
• Validate all fields of a model objectoNot just current view valuesoAdds method validations
• In the validation phaseoNot hijacking the lifecycle
![Page 24: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/24.jpg)
<h:inputSecret id="pwd1" value="#{regBean.pwd1}"/>...<h:inputsecret id="pwd2" value="#{regBean.pwd2}"/>
@Size(min = 5, max = 15, message = "Wrong size for password")private String pwd1="";@Size(min = 5, max = 15, message = "Wrong size for confirmation")private String pwd2="";
![Page 25: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/25.jpg)
Graph Validation Example:- Demo: http://bit.ly/lv6ccS- XHTML: http://bit.ly/jZltn8- Java: http://bit.ly/l6W1U2
![Page 26: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/26.jpg)
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
![Page 27: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/27.jpg)
What Is Server-Side Push
Server-events can push updates/datato the the browser
![Page 28: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/28.jpg)
• Integrates with AtmosphereoComet/WebSocketsoGraceful degradation
• Java Messaging Service (JMS)oReliability, flexibility, etc....
<a4j:push ...>
![Page 29: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/29.jpg)
<a4j:push ...> Basic Usage
<a4j:push address="subtopic@twPush" onerror="alert(event.rf.data)" ondataavailable="processData(event.rf.data)"/>
Topic configured in JMSCustomizable subtopic
address="#{twBean.curSearch}@twPush"
Supports EL as well
![Page 30: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/30.jpg)
Getting the Message Out• TopicsContext
– In application–Handles JMS details
• Direct JMS–Standard JMS messages–From anywhere
![Page 31: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/31.jpg)
Getting the Message Out
TopicsContext Publishing- TweetStream: http://bit.ly/itrrbS
Standard JMS Message- TweetStream: http://bit.ly/kQcriB
![Page 32: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/32.jpg)
Client Processing Options
• Partial Page Rendering– No data payload needed– Use JSF to process rendering
• Direct DOM Updates– Data payload
• String, or JSON– JavaScript Required
![Page 33: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/33.jpg)
Client Processing Options
Partial Page Rendering Example- Demo: http://bit.ly/tweetstream2- XHTML: http://bit.ly/ijIUNS Direct DOM Updates Example- IRC-Chat XHTML: http://bit.ly/m2AYnY- IRC-Chat Java: http://bit.ly/lSe055
![Page 34: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/34.jpg)
<a4j:push ...> Setup
• JMS server setupo JNDI name: /topic/<topic>
• web.xml setupo JMS factory & topic namespaces
• Topics InitializeroBinds topic to richfaces
![Page 35: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/35.jpg)
<a4j:push ...> Setup
Automatic JMS configuration with hornetq & JBoss AS - JMS: http://bit.ly/lNjGgg - Role: http://bit.ly/mgskTi
web.xml: http://bit.ly/jreH3k
TopicsInitializer: http://bit.ly/jDOwzm
![Page 36: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/36.jpg)
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
![Page 37: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/37.jpg)
• JSF 2.0/2.1 • Released & implemented
• JSF 2.2• In JCP now - due end of year• Priorities: portals, ease of use, minor features, bugs
• JSF 3.0• Part of EE 7•No JSR yet
JavaServer Faces Futures
![Page 38: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/38.jpg)
RichFaces 3.3.X
• JSF 1.2oEE5
• Communityo3.3.4 SNAPSHOToNo release plans at this time
• Enterprise fully supported viaoEnterprise Application Platform 4/5 (EAP)oEnterprise Portal Platform 4/5 (EPP)oWeb Framework Kit 1.X (WFK)
![Page 39: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/39.jpg)
• 4.0.0.Final Released in March!!oJSF 2.0/2.1
• Communityo4.1.0 in development now
• Enterprise supported viaoEnterprise Application Platform 6 (EAP)oEnterprise Portal Platform 6 (EPP)oWeb Framework Kit 2 (WFK)
RichFaces 4.X
![Page 40: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/40.jpg)
• Time-boxed 6 month release planoFall 2011
• In the works:oGit migrationoMobile & HTML5 updatesoNew componentsoSeam-forge integrationoSandbox & CDK process oand more...
Plus of coarse: bug fixes & stabilization
rich:editorrich:notifyrich:picklistrich:orderedlistetc....
RichFaces 4.1
![Page 41: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/41.jpg)
Rich Components!
![Page 43: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/43.jpg)
• Project Page: http://richfaces.org• 4.0.0.Final Downloads
o http://bit.ly/RF_Downloads• Getting Started Guide
o http://bit.ly/RH_Getting_Started • User Forums & Wiki
o http://bit.ly/RF_User_Space• RichFaces Bug Tracker
o http://bit.ly/RF_Jira
Getting Started
![Page 44: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/44.jpg)
• Developer Forums & Wikio http://bit.ly/RF_Dev_Space
• Development Guideo http://bit.ly/RF_Dev_Setup
• GitHub Sourceo https://github.com/organizations/richfaces
• Build Optionso http://bit.ly/RF_Build_Options
• CI Servero http://bit.ly/RF_Hudson_CI
Getting Involved
![Page 45: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/45.jpg)
More Way To Connect• Project Twitter Account
o http://twitter.com/richfaces
• Project Calendaro http://bit.ly/RF_Calendar
• IRC o #richfaces @ irc.freenode.net
• Team Meetings (open to all)o http://bit.ly/RF_Team_Mtgs
![Page 46: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/46.jpg)
Wrap up and Q&A
• http://in.relation.to/Bloggers/Jay• http://twitter.com/tech4j• http://github.com/balunasj• [email protected]
My Contact Info:
![Page 47: RichFaces 4 Component Deep Dive - JAX/JSFSummit](https://reader033.vdocuments.site/reader033/viewer/2022052621/55866030d8b42a9e308b4711/html5/thumbnails/47.jpg)