Jay Balunas | JBoss, By Red Hat RichFaces 4.0 Component Deep Dive
Jun 21, 2015
Jay Balunas | JBoss, By Red Hat
RichFaces 4.0 Component Deep Dive
• RichFaces Project Lead• JBoss Core Developer• JSF 2.2 Expert Group• Red Hat W3C Member
Who am I
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
JavaServer Faces (JSF) JSF 1.2
EE5 Extensible
JSF 2.0 EE6 Standardized Adv. Features Still Extensible
Made RichFaces, Seam, Facelets, etc...Possible!
What Features..Annotation based configurationFaceletsComposite componentsJSP deprecatedBookmark GET supportBuilt in resource handling
Integrated AjaxBean validation Event systemException handlingImplicit navigationBehaviors frameworkProject stages
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
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
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...
<a4j:queue ... >• Logical queue on top of JSF 2• Tuning features
• requestDelay• ignoreDupResponses• requestGrouping
• Queue scoping • Client side events & API
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>
<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>
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>
AttachQueue Tips
• Override settings directly• Skip the named queue
http://bit.ly/ilJu6e
Client-Side Events & API• Events
• complete()• requestqueue()• requestdequeued()
• API• queue.getSize()• queue.isEmpty()• queue.set/getQueueOptions()
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
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*
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;}
RichFaces 4.0 & BV
• Introduces client-side validationoJSF validatorsoBean validation constraints
• JavaScript implementationsoValidatorsoConverters
• rich:message(s) enhanced
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
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*
GraphValidation
• Validate all fields of a model objectoNot just current view valuesoAdds method validations
• In the validation phaseoNot hijacking the lifecycle
<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="";
Graph Validation Example:- Demo: http://bit.ly/lv6ccS- XHTML: http://bit.ly/jZltn8- Java: http://bit.ly/l6W1U2
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
What Is Server-Side Push
Server-events can push updates/datato the the browser
• Integrates with AtmosphereoComet/WebSocketsoGraceful degradation
• Java Messaging Service (JMS)oReliability, flexibility, etc....
<a4j:push ...>
<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
Getting the Message Out• TopicsContext
– In application–Handles JMS details
• Direct JMS–Standard JMS messages–From anywhere
Getting the Message Out
TopicsContext Publishing- TweetStream: http://bit.ly/itrrbS
Standard JMS Message- TweetStream: http://bit.ly/kQcriB
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
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
<a4j:push ...> Setup
• JMS server setupo JNDI name: /topic/<topic>
• web.xml setupo JMS factory & topic namespaces
• Topics InitializeroBinds topic to richfaces
<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
The Plan...
• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
• 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
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)
• 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
• 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
Rich Components!
• 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
• 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
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
Wrap up and Q&A
• http://in.relation.to/Bloggers/Jay• http://twitter.com/tech4j• http://github.com/balunasj• [email protected]
My Contact Info: