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.

1. Rapid JSF Component
Development RichFaces CDK

2. JSF
Component
Libraries
“...are essential part of
JSF ecosystem, delivering
great user experience”

3. “Components encapsulates complex
logic, which is exposed with easy to use
interface”
Proper
Level of
Abstraction

4. Building
Blocks
“Components inter-cooperates
in order to build complex application
logic.”

5. “But what to do when is same
component missing in your favorite
component library?”

6. “Fortunately there are many JavaScript widget
libraries, which can be simply
used just for your needs”
Bootstrap

7. Only for JavaScript kiddies?

8. “It's very simply to use these widgets,
they have as accessible API as JSF components”

9. “It is like going to library and choosing
book which best fit in your mood -
you can go and reuse JS widget”

10. 4
ways
of reusing
JavaScript
widgets

11. #1 Direct JavaScript
#2 JSF Component
#3 JSF Composite Component
#4 RichFaces CDK

12. #1 Direct JavaScript

13. “Imagine big JSF application where you started
incorporating JavaScript widgets:
looks inconsistent and hardly readable.”

14. #2 JSF Component

15. “Let's build custom JSF component...”

16. What is component?

17. What is component?
 Tag

18. “Tag is representation of the component
in the page template code”

19. What is component?
 Tag
 Component Interface

20. “The component provides interface
for changing its configuration”
Component

21. “This is source code of JSF component
a4j:commandLink”

22. “This is source code of JSF component
a4j:commandLink.”
“Let's look at the fragment.”

23. “The component is interface with list attributes,
Represented as getters/setters of the component
class”
“Each getter and setter just delegates to StateHelper
to keep the state of the component between subsequent
requests”

24. What is component?
 Tag
 Component Interface
 Renderer

25. “A renderer is responsible for translating
the component to the page representation
and then encoding the user input back to the
component instance”
Component
Renderer

26. “A renderer is as verbose as
component code,
let's look at the sample of
h:dataTable component's
code”

27. “The renderer uses ResponseWriter
to add elements, attributes and text
content to the page.”
“The Java representation of the
renderer is very verbose, which leads
to readability and maintainability
concerns.”

28. What is component?
 Tag
 Component interface
 Renderer
 XML descriptors
● taglib.xml

29. “taglib.xml descriptor is responsible for binding
the component from the page template
to the component class”
Component
Renderer

31. What is component?
 Tag
 Component interface
 Renderer
 XML descriptors
● taglib.xml
● faces-config.xml

32. “Faces-config.xml registers component into JSF ecosystem”
JSF
Component
Renderer

34. What is component?
 Tag
 Component interface
 Renderer
 XML descriptors
● faces-config.xml
● taglib.xml
 Documentation

35. “Documentation is necessary for easiness of reuse of the components.”

36. But developing and maintaining all of these informations
is not really the way how to develop components
in the big scale.

37. #2 Composite Components

38. Composite Components
● JSF2 feature
● Provides XML representation
● Allowing to write
● HTML directly
● Or compose JSF components
● Developer needs to provide
● Interface
● Implementation

39. Rapid Turnaround
● In the Development stage of the project
● The composite component can be reloaded
● Just with change of the source

40. But...

41. Immature / Incomplete
● CC have still issues:
● Partial state saving
– JAVASERVERFACES-2040
● AJAX
– JAVASERVERFACES-1825
● Submitted UIInput gets lost
– JAVASERVERFACES-1991

42. CC works great for composition of components

43. But they don't replace full-fledged component
development

44. 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?”

45. What we actually need?
 Tag
 XML descriptors
● faces-config.xml
● taglib.xml
 Component interface
 Renderer (XML)
 Documentation
“Let's imagine that the most of the informations
are duplicates, which are actually expressed
by Component interface”

46. “And at this point, you recognize that some toolkit
may be needed to do the job!”

47. “Which is exactly what RichFaces CDK offers!”
RichFaces CDK
Component Development Kit

48. RichFaces CDK
● Renderer
● XML Templates
● with syntax very close to Composite Components
● Generated in the build-time
● with Convention-over-Configuration in mind

49. But it is build-time tool, right?
Is it not too heavy-weight to use in development?

50. Rapid Turnaround
● You can just use your IDE
● And let Java Hot Deployment solutions to do
the job
● JRebel works very nice here

51. Resource Development
● But Resources are as needed to develop
rapidly as component/renderer code
● JavaScript
● CSS
● Hot Deployment
● using JSF application Development stage

52. Development Demo

53. Bootstrap
“Nothing prevents you to wrap all those libraries!”

54. Date-picker
Development Demo

55. Let's wrap those widgets!

56. Right level of abstraction
● Let's take
● favorite UI widget
● or favorite widget set
● Expose it to JSF

57. Don't reinvent a wheel!
● When you want RichFaces component bend to
use for your needs...
● Take the component from GitHub
● Fork the component
● It's just matter of one click with GitHub!
● Make it work as you need

58. Publish Your Work
● Let others
● review it
● find bugs
● Cooperate with others
● More knowledge
● Get bugs fixed

59. “And when you want to be part of the successful
community, you can go and open the source!”
The Open Source Way
RichFaces Sandbox
“That's exactly how RichFaces Sandbox works.”

60. “The community contributions are hosted on the GitHub.
You can reuse them for your needs!”

61. “RichFaces team is investigating integration
In direction of several of open-source
JavaScript UI widgets.”
Bootstrap
“The RichFaces Sandbox is used as part of this effort.”

62. References
bit.ly/rf-cdk
bit.ly/rf-planet
bit.ly/rf-forums
@RichFaces, #RichFaces, @LFryc
#richfaces – irc.freenode.net

63. Enjoy the Rich User Experience

64. THANK YOU!
@LFRYC
BIT.LY/RF-PLANET

65. “Photographs used in presentation
have been authored by various authors,
published under Creative Commons license”
http://www.flickr.com/photos/lonelyplanetexchange/2416006280/
http://www.flickr.com/photos/davidbolton/4454944721/
http://www.flickr.com/photos/bjvs/4283146424/
http://www.flickr.com/photos/egansnow/288478628/
http://www.flickr.com/photos/negativz/74267002/
http://www.flickr.com/photos/kyknoord/5333012356/
http://www.flickr.com/photos/wilhei/109403306/
http://www.flickr.com/photos/kalmyket/691478431/
http://www.flickr.com/photos/friarsbalsam/4609210182/
http://www.flickr.com/photos/paul_lowry/2266388742/
http://www.flickr.com/photos/breatheindigital/4689159475/
http://www.flickr.com/photos/eschipul/206714304/