Rapid JSF Component Development RichFaces CDK

JSFComponentLibraries

“...are essential part of JSF ecosystem, deliveringgreat user experience”

ProperLevel ofAbstraction

“Components encapsulates complexlogic, which is exposed with easy to useinterface”

BuildingBlocks

“Components inter-cooperatesin order to build complex applicationlogic.”

“But what to do when is same component missing in your favoritecomponent library?”

Bootstrap

“Fortunately there are many JavaScript widgetlibraries, which can be simplyused just for your needs”

Only for JavaScript kiddies?

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

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

4waysof reusingJavaScriptwidgets

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

#1 Direct JavaScript

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

#2 JSF Component

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

What is component?

What is component?

Tag

““Tag is representation of the componentTag is representation of the componentin the page template code”in the page template code”

What is component?

Tag Component Interface

Component

““The component provides interfaceThe component provides interfacefor changing its configuration”for changing its configuration”

““This is source code of JSF componentThis is source code of JSF componenta4j:commandLink”a4j:commandLink”

““This is source code of JSF componentThis is source code of JSF componenta4j:commandLink.”a4j:commandLink.”

““Let's look at the fragment.”Let's look at the fragment.”

““The component is interface with list attributes,The component is interface with list attributes,Represented as getters/setters of the componentRepresented as getters/setters of the componentclass”class”

““Each getter and setter just delegates to StateHelperEach getter and setter just delegates to StateHelperto keep the state of the component between subsequentto keep the state of the component between subsequentrequests”requests”

What is component?

Tag Component Interface Renderer

Component

Renderer

““A renderer is responsible for translatingA renderer is responsible for translatingthe component to the page representationthe component to the page representationand then encoding the user input back to theand then encoding the user input back to thecomponent instance”component instance”

““A renderer is as verbose asA renderer is as verbose ascomponent code,component code,let's look at the sample oflet's look at the sample ofh:dataTable component'sh:dataTable component'scode”code”

““The renderer uses ResponseWriterThe renderer uses ResponseWriterto add elements, attributes and textto add elements, attributes and textcontent to the page.”content to the page.”

“The Java representation of the“The Java representation of therenderer is very verbose, which leadsrenderer is very verbose, which leadsto readability and maintainabilityto readability and maintainabilityconcerns.”concerns.”

What is component?

Tag Component interface Renderer XML descriptors

● taglib.xml

Component

Renderer

““taglib.xml descriptor is responsible for bindingtaglib.xml descriptor is responsible for bindingthe component from the page templatethe component from the page templateto the component class”to the component class”

What is component?

Tag Component interface Renderer XML descriptors

● taglib.xml● faces-config.xml

Component

Renderer

JSF

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

What is component?

Tag Component interface Renderer XML descriptors

● faces-config.xml● taglib.xml

Documentation

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

But developing and maintaining all of these informationsBut developing and maintaining all of these informationsis not really the way how to develop componentsis not really the way how to develop componentsin the big scale.in the big scale.

#2 Composite Components

Composite Components

● JSF2 feature● Provides XML representation● Allowing to write

● HTML directly● Or compose JSF components

● Developer needs to provide● Interface● Implementation

Rapid Turnaround

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

But...

Immature / Incomplete

● CC have still issues:● Partial state saving

– JAVASERVERFACES-2040● AJAX

– JAVASERVERFACES-1825● Submitted UIInput gets lost

– JAVASERVERFACES-1991

CC works great for composition of components

But they don't replace full-fledged component development

Full-Fledged Development?

Tag XML descriptors

● faces-config.xml● taglib.xml

Component interface Renderer Documentation

“So it means we need to get stuck withfull-fledged component development?”

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 informationsare duplicates, which are actually expressedby Component interface”

““And at this point, you recognize that some toolkitAnd at this point, you recognize that some toolkitmay be needed to do the job!”may be needed to do the job!”

RichFaces CDKComponent Development Kit

““Which is exactly what RichFaces CDK offers!”Which is exactly what RichFaces CDK offers!”

RichFaces CDK

● Renderer● XML Templates● with syntax very close to Composite Components

● Generated in the build-time● with Convention-over-Configuration in mind

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

Rapid Turnaround

● You can just use your IDE● And let Java Hot Deployment solutions to do

the job● JRebel works very nice here

Resource Development

● But Resources are as needed to develop rapidly as component/renderer code● JavaScript● CSS

● Hot Deployment● using JSF application Development stage

Development Demo

Bootstrap

“Nothing prevents you to wrap all those libraries!”

Date-picker Development Demo

Let's wrap those widgets!

Right level of abstraction

● Let's take● favorite UI widget● or favorite widget set

● Expose it to JSF

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

Publish Your Work

● Let others● review it● find bugs

● Cooperate with others● More knowledge● Get bugs fixed

The Open Source WayRichFaces Sandbox

““And when you want to be part of the successfulAnd when you want to be part of the successfulcommunity, you can go and open the source!”community, you can go and open the source!”

““That's exactly how RichFaces Sandbox works.”That's exactly how RichFaces Sandbox works.”

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

Bootstrap

“RichFaces team is investigating integrationIn direction of several of open-sourceJavaScript UI widgets.”

“The RichFaces Sandbox is used as part of this effort.”

References

bit.ly/rf-cdk

bit.ly/rf-planet

bit.ly/rf-forums

@RichFaces, #RichFaces, @LFryc

#richfaces – irc.freenode.net

Enjoy the Rich User Experience

@LFRYCBIT.LY/RF-PLANET

THANK YOU!

““Photographs used in presentationPhotographs used in presentationhave been authored by various authors,have been authored by various authors,published under Creative Commons license”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/