Jay Balunas | JBoss, By Red HatRichFaces 4.0 Component       Deep Dive
Who am I•   RichFaces Project Lead•   JBoss Core Developer•   JSF 2.2 Expert Group•   Red Hat W3C Member
Presentation Links Pagehttp://bit.ly/rfdeepdive
The Plan...•   Base Info•   RichFaces Client Queue•   Client Side Validation•   RichFaces Push•   JSF & Project Updates
JavaServer Faces (JSF)   JSF 1.2                       Made RichFaces, Seam,     EE5              Facelets, etc...     ...
What Features..Annotation based       Integrated Ajaxconfiguration                       Bean validationFacelets          ...
RichFaces 4.0 Lighting Review• Advanced framework built on top of JSF  o Extends JSF core  o Full set of UI components  o ...
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•   Ca...
<a4j:queue ... >• Logical queue on top of JSF 2• Tuning features    • requestDelay    • ignoreDupResponses    • requestGro...
Request Delay<h:form id="form">  <!-- Queue applied to whole form -->  <a4j:queue requestDelay="500"/>  <h:inputText id="u...
Queue Effectshttp://bit.ly/kKxKGF
Global Queue<context-param>  <param-name>org.richfaces.queue.enabled</param-name>  <param-value>true</param-value></contex...
Named Queues<!-- Checking availability is costly, so send less often --><a4j:queue name="available_queue" requestDelay="20...
AttachQueue Tips• Override settings directly• Skip the named queue         http://bit.ly/ilJu6e
Client-Side Events & API• Events    • complete()    • requestqueue()    • requestdequeued()• API    • queue.getSize()    •...
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...
Bean Validation Samplepublic class User {    @NotEmpty @Size(max=100)    private String name;    @NotEmpty    @Pattern(reg...
RichFaces 4.0 & BV• Introduces client-side validation o JSFvalidators o Bean validation constraints• JavaScript implementa...
BV Constraints & JSF ValidatorsJSF Validation Example:- Demo: http://bit.ly/mJ9qK4- XHTML: http://bit.ly/k7YhG6- Java: htt...
Additional Features• Behavior events• Ajax fallback• Custom constraints* Login: <h:inputText id="login" value="#{user.logi...
GraphValidation• Validate all fields of a model object o Notjust current view values o Adds method validations• In the val...
<h:inputSecret id="pwd1" value="#{regBean.pwd1}"/>...<h:inputsecret id="pwd2" value="#{regBean.pwd2}"/>@Size(min = 5,   ma...
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 PushServer-events can push updates/data         to the the browser
<a4j:push ...>• Integrates with Atmosphere o Comet/WebSockets o Graceful   degradation• Java Messaging Service (JMS) o Rel...
<a4j:push ...> Basic UsageCustomizable subtopic               Topic configured in JMS<a4j:push address="subtopic@twPush"  ...
Getting the Message Out• TopicsContext  – In application  – Handles JMS details• Direct JMS  – Standard JMS messages  – Fr...
Getting the Message Out TopicsContext Publishing - TweetStream: http://bit.ly/itrrbS Standard JMS Message - TweetStream: h...
Client Processing Options• Partial Page Rendering  – No data payload needed  – Use JSF to process rendering• Direct DOM Up...
Client Processing OptionsPartial Page Rendering Example- Demo: http://bit.ly/tweetstream2- XHTML: http://bit.ly/ijIUNS Dir...
<a4j:push ...> Setup• JMS server setup  o JNDI   name: /topic/<topic>• web.xml setup  o JMS    factory & topic namespaces•...
<a4j:push ...> SetupAutomatic JMS configuration with hornetq & JBoss AS    - JMS: http://bit.ly/lNjGgg    - Role: http://bi...
The Plan...•   Base Info•   RichFaces Client Queue•   Client Side Validation•   RichFaces Push•   JSF & Project Updates
JavaServer Faces Futures• JSF 2.0/2.1    • Released & implemented• JSF 2.2    • In JCP now - due end of year    • Prioriti...
RichFaces 3.3.X• JSF 1.2   o EE5• Community  o 3.3.4 SNAPSHOT  o No release plans at this time• Enterprise fully supported...
RichFaces 4.X• 4.0.0.Final Released in March!!  o JSF 2.0/2.1• Community  o 4.1.0 in development now• Enterprise supported...
RichFaces 4.1• Time-boxed 6 month release plan  o Fall 2011                                  Plus of coarse:              ...
Rich Components!
http://richfaces.org/showcase
Getting Started• Project Page: http://richfaces.org• 4.0.0.Final Downloads  o   http://bit.ly/RF_Downloads• Getting Starte...
Getting Involved• Developer Forums & Wiki  o   http://bit.ly/RF_Dev_Space• Development Guide  o   http://bit.ly/RF_Dev_Set...
More Way To Connect• Project Twitter Account  o http://twitter.com/richfaces• Project Calendar  o http://bit.ly/RF_Calenda...
Wrap up and Q&AMy Contact Info:•   http://in.relation.to/Bloggers/Jay•   http://twitter.com/tech4j•   http://github.com/ba...
RichFaces 4 Component Deep Dive - JAX/JSFSummit
Upcoming SlideShare
Loading in …5
×

RichFaces 4 Component Deep Dive - JAX/JSFSummit

1,970 views
1,808 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,970
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

RichFaces 4 Component Deep Dive - JAX/JSFSummit

  1. 1. Jay Balunas | JBoss, By Red HatRichFaces 4.0 Component Deep Dive
  2. 2. Who am I• RichFaces Project Lead• JBoss Core Developer• JSF 2.2 Expert Group• Red Hat W3C Member
  3. 3. Presentation Links Pagehttp://bit.ly/rfdeepdive
  4. 4. The Plan...• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
  5. 5. JavaServer Faces (JSF) JSF 1.2 Made RichFaces, Seam,  EE5 Facelets, etc...  Extensible Possible! JSF 2.0  EE6  Standardized Adv. Features  Still Extensible
  6. 6. What Features..Annotation based Integrated Ajaxconfiguration Bean validationFacelets Event systemComposite components Exception handlingJSP deprecated Implicit navigationBookmark GET support Behaviors frameworkBuilt in resourcehandling Project stages
  7. 7. RichFaces 4.0 Lighting Review• Advanced framework built on top of JSF o Extends JSF core o Full set of UI components o Resource Handling o Component development kit o Skinning• Two tag libraries o a4j: Page level ajax support & utility components o rich: Self contained visual components
  8. 8. The Plan...• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
  9. 9. 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...
  10. 10. <a4j:queue ... >• Logical queue on top of JSF 2• Tuning features • requestDelay • ignoreDupResponses • requestGrouping• Queue scoping• Client side events & API
  11. 11. 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>
  12. 12. Queue Effectshttp://bit.ly/kKxKGF
  13. 13. Global Queue<context-param> <param-name>org.richfaces.queue.enabled</param-name> <param-value>true</param-value></context-param> View Scoped Form Scoped<f:view> <h:form id="form"><!-- Applied to whole view --> <!-- Applied to whole form --><a4j:queue <a4j:queue requestDelay="500"/> requestDelay="1000"/> ... ...
  14. 14. 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>
  15. 15. AttachQueue Tips• Override settings directly• Skip the named queue http://bit.ly/ilJu6e
  16. 16. Client-Side Events & API• Events • complete() • requestqueue() • requestdequeued()• API • queue.getSize() • queue.isEmpty() • queue.set/getQueueOptions()
  17. 17. The Plan...• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
  18. 18. 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*
  19. 19. 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;}
  20. 20. RichFaces 4.0 & BV• Introduces client-side validation o JSFvalidators o Bean validation constraints• JavaScript implementations o Validators o Converters• rich:message(s) enhanced
  21. 21. BV Constraints & JSF ValidatorsJSF Validation Example:- Demo: http://bit.ly/mJ9qK4- XHTML: http://bit.ly/k7YhG6- Java: http://bit.ly/lLw4PZBean Validation Example:- Demo: http://bit.ly/hsCJ16- XHMTL:  http://bit.ly/l7MkLA- Java: http://bit.ly/iQJvGP
  22. 22. Additional Features• Behavior events• Ajax fallback• Custom constraints* Login: <h:inputText id="login" value="#{user.login}"> <rich:validator event="keyup"/> </h:inputText> <rich:message for="login"/>
  23. 23. GraphValidation• Validate all fields of a model object o Notjust current view values o Adds method validations• In the validation phase o Not hijacking the lifecycle
  24. 24. <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="";
  25. 25. Graph Validation Example:- Demo: http://bit.ly/lv6ccS- XHTML: http://bit.ly/jZltn8- Java: http://bit.ly/l6W1U2
  26. 26. The Plan...• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
  27. 27. What Is Server-Side PushServer-events can push updates/data to the the browser
  28. 28. <a4j:push ...>• Integrates with Atmosphere o Comet/WebSockets o Graceful degradation• Java Messaging Service (JMS) o Reliability, flexibility, etc....
  29. 29. <a4j:push ...> Basic UsageCustomizable subtopic Topic configured in JMS<a4j:push address="subtopic@twPush" onerror="alert(event.rf.data)" ondataavailable="processData(event.rf.data)"/> Supports EL as well address="#{twBean.curSearch}@twPush"
  30. 30. Getting the Message Out• TopicsContext – In application – Handles JMS details• Direct JMS – Standard JMS messages – From anywhere
  31. 31. Getting the Message Out TopicsContext Publishing - TweetStream: http://bit.ly/itrrbS Standard JMS Message - TweetStream: http://bit.ly/kQcriB
  32. 32. 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
  33. 33. Client Processing OptionsPartial 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
  34. 34. <a4j:push ...> Setup• JMS server setup o JNDI name: /topic/<topic>• web.xml setup o JMS factory & topic namespaces• Topics Initializer o Binds topic to richfaces
  35. 35. <a4j:push ...> SetupAutomatic JMS configuration with hornetq & JBoss AS    - JMS: http://bit.ly/lNjGgg    - Role: http://bit.ly/mgskTiweb.xml: http://bit.ly/jreH3kTopicsInitializer: http://bit.ly/jDOwzm
  36. 36. The Plan...• Base Info• RichFaces Client Queue• Client Side Validation• RichFaces Push• JSF & Project Updates
  37. 37. JavaServer Faces Futures• 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
  38. 38. RichFaces 3.3.X• JSF 1.2 o EE5• Community o 3.3.4 SNAPSHOT o No release plans at this time• Enterprise fully supported via o Enterprise Application Platform 4/5 (EAP) o Enterprise Portal Platform 4/5 (EPP) o Web Framework Kit 1.X (WFK)
  39. 39. RichFaces 4.X• 4.0.0.Final Released in March!! o JSF 2.0/2.1• Community o 4.1.0 in development now• Enterprise supported via o Enterprise Application Platform 6 (EAP) o Enterprise Portal Platform 6 (EPP) o Web Framework Kit 2 (WFK)
  40. 40. RichFaces 4.1• Time-boxed 6 month release plan o Fall 2011 Plus of coarse: bug fixes &• In the works: stabilization o Git migration o Mobile & HTML5 updates o New components o Seam-forge integration rich:editor rich:notify o Sandbox & CDK process rich:picklist rich:orderedlist o and more... etc....
  41. 41. Rich Components!
  42. 42. http://richfaces.org/showcase
  43. 43. Getting Started• 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
  44. 44. Getting Involved• Developer Forums & Wiki o http://bit.ly/RF_Dev_Space• Development Guide o http://bit.ly/RF_Dev_Setup• GitHub Source o https://github.com/organizations/richfaces• Build Options o http://bit.ly/RF_Build_Options• CI Server o http://bit.ly/RF_Hudson_CI
  45. 45. More Way To Connect• Project Twitter Account o http://twitter.com/richfaces• Project Calendar o http://bit.ly/RF_Calendar• IRC o #richfaces @ irc.freenode.net• Team Meetings (open to all) o http://bit.ly/RF_Team_Mtgs
  46. 46. Wrap up and Q&AMy Contact Info:• http://in.relation.to/Bloggers/Jay• http://twitter.com/tech4j• http://github.com/balunasj• jbalunas@jboss.org

×