RichFaces CDK: Rapid JSF Component Development


Published on

JSF component libraries provide you with a solid basis for building enterprise UIs as they are covering most common use cases. But what can you do in a case that no existing component fits your project requirements?
There are many JavaScript component projects which offer together nearly infinite possibilities. But it might not be evident that leveraging these JavaScript frameworks is as easy as writing plain old HTML code, separating component and page development efforts. But how to wrap these components to fit into JSF eco-system?

That’s exactly where RichFaces CDK comes into play.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

RichFaces CDK: Rapid JSF Component Development

  1. 1. Rapid JSF Component Development RichFaces CDK
  2. 2. JSFComponentLibraries “...are essential part of JSF ecosystem, delivering great user experience”
  3. 3. “Components encapsulates complex logic, which is exposed with easy to use interface”ProperLevel ofAbstraction
  4. 4. BuildingBlocks “Components inter-cooperates in order to build complex application logic.”
  5. 5. “But what to do when is samecomponent missing in your favoritecomponent library?”
  6. 6. “Fortunately there are many JavaScript widgetlibraries, which can be simplyused just for your needs” Bootstrap
  7. 7. Only for JavaScript kiddies?
  8. 8. “Its very simply to use these widgets,they have as accessible API as JSF components”
  9. 9. “It is like going to library and choosingbook which best fit in your mood -you can go and reuse JS widget”
  10. 10. 4waysof reusingJavaScriptwidgets
  11. 11. #1 Direct JavaScript#2 JSF Component#3 JSF Composite Component#4 RichFaces CDK
  12. 12. #1 Direct JavaScript
  13. 13. “Imagine big JSF application where you startedincorporating JavaScript widgets:looks inconsistent and hardly readable.”
  14. 14. #2 JSF Component
  15. 15. “Lets build custom JSF component...”
  16. 16. What is component?
  17. 17. What is component? Tag
  18. 18. “Tag is representation of the componentin the page template code”
  19. 19. What is component? Tag Component Interface
  20. 20. “The component provides interfacefor changing its configuration” Component
  21. 21. “This is source code of JSF componenta4j:commandLink”
  22. 22. “This is source code of JSF componenta4j:commandLink.”“Lets look at the fragment.”
  23. 23. “The component is interface with list attributes, Represented as getters/setters of the component class”“Each getter and setter just delegates to StateHelperto keep the state of the component between subsequentrequests”
  24. 24. What is component? Tag Component Interface Renderer
  25. 25. “A renderer is responsible for translating the component to the page representation and then encoding the user input back to the component instance”ComponentRenderer
  26. 26. “A renderer is as verbose ascomponent code,lets look at the sample ofh:dataTable componentscode”
  27. 27. “The renderer uses ResponseWriterto add elements, attributes and textcontent to the page.”“The Java representation of therenderer is very verbose, which leadsto readability and maintainabilityconcerns.”
  28. 28. What is component? Tag Component interface Renderer XML descriptors ● taglib.xml
  29. 29. “taglib.xml descriptor is responsible for bindingthe component from the page templateto the component class” Component Renderer
  30. 30. What is component? Tag Component interface Renderer XML descriptors ● taglib.xml ● faces-config.xml
  31. 31. “Faces-config.xml registers component into JSF ecosystem”JSF Component Renderer
  32. 32. What is component? Tag Component interface Renderer XML descriptors ● faces-config.xml ● taglib.xml Documentation
  33. 33. “Documentation is necessary for easiness of reuse of the components.”
  34. 34. But developing and maintaining all of these informationsis not really the way how to develop componentsin the big scale.
  35. 35. #2 Composite Components
  36. 36. Composite Components● JSF2 feature● Provides XML representation● Allowing to write ● HTML directly ● Or compose JSF components● Developer needs to provide ● Interface ● Implementation
  37. 37. Rapid Turnaround● In the Development stage of the project ● The composite component can be reloaded ● Just with change of the source
  38. 38. But...
  39. 39. Immature / Incomplete● CC have still issues: ● Partial state saving – JAVASERVERFACES-2040 ● AJAX – JAVASERVERFACES-1825 ● Submitted UIInput gets lost – JAVASERVERFACES-1991
  40. 40. CC works great for composition of components
  41. 41. But they dont replace full-fledged component development
  42. 42. Full-Fledged Development? Tag XML descriptors ● faces-config.xml ● taglib.xml Component interface Renderer Documentation “So it means we need to get stuck with full-fledged component development?”
  43. 43. What we actually need? Tag XML descriptors ● faces-config.xml ● taglib.xml Component interface Renderer (XML) Documentation “Lets imagine that the most of the informations are duplicates, which are actually expressed by Component interface”
  44. 44. “And at this point, you recognize that some toolkitmay be needed to do the job!”
  45. 45. “Which is exactly what RichFaces CDK offers!” RichFaces CDK Component Development Kit
  46. 46. RichFaces CDK● Renderer ● XML Templates ● with syntax very close to Composite Components● Generated in the build-time● with Convention-over-Configuration in mind
  47. 47. But it is build-time tool, right?Is it not too heavy-weight to use in development?
  48. 48. Rapid Turnaround● You can just use your IDE● And let Java Hot Deployment solutions to do the job ● JRebel works very nice here
  49. 49. Resource Development● But Resources are as needed to develop rapidly as component/renderer code ● JavaScript ● CSS● Hot Deployment ● using JSF application Development stage
  50. 50. Development Demo
  51. 51. Bootstrap“Nothing prevents you to wrap all those libraries!”
  52. 52. Date-pickerDevelopment Demo
  53. 53. Lets wrap those widgets!
  54. 54. Right level of abstraction● Lets take ● favorite UI widget ● or favorite widget set● Expose it to JSF
  55. 55. Dont reinvent a wheel!● When you want RichFaces component bend to use for your needs... ● Take the component from GitHub● Fork the component ● Its just matter of one click with GitHub!● Make it work as you need
  56. 56. Publish Your Work● Let others ● review it ● find bugs● Cooperate with others ● More knowledge ● Get bugs fixed
  57. 57. “And when you want to be part of the successfulcommunity, you can go and open the source!” The Open Source Way RichFaces Sandbox “Thats exactly how RichFaces Sandbox works.”
  58. 58. “The community contributions are hosted on the GitHub.You can reuse them for your needs!”
  59. 59. “RichFaces team is investigating integrationIn direction of several of open-sourceJavaScript UI widgets.” Bootstrap “The RichFaces Sandbox is used as part of this effort.”
  60. 60., #RichFaces, @LFryc#richfaces –
  61. 61. Enjoy the Rich User Experience
  63. 63. “Photographs used in presentationhave been authored by various authors,published under Creative Commons license”