I’m happy to share the news that the RichFaces community has started an effort to wrap Twitter Bootstrap with the RichFaces CDK. If you haven’t yet heard, Twitter’s Bootstrap project is a set of HTML/CSS/js “widgets” that you can use for building a website/web application with an emphasis on a fluid layouts that adapt well to mobile devices. The RichFaces community effort centres around providing a set of first-class JSF components built using these Bootstrap widgets via the RichFaces CDK.

This is still early days for the effort, consider what we have so far as a Proof of Concept. The work is being done in the RichFaces Sandbox, where new ideas/components are explored and proven before migrating in the the framework core. We’ll explore how to bring these Bootstrap components into the framework proper when the effort is complete. The reason for this blog post is to let people know what the community is doing and invite people to get involved!

Take a look at the RichFaces bootstrap demo to see what the components look like. Keep in mind we used the RichFaces bootstrap JSF components to build the demo itself, (a dogfood demo if you will!). So far we’ve stubbed out a number of bootstrap components with the CDK, and we have a bootstrap “enabled” commandButton component (build on top of the robust a4j:commandButton).

Some example bootstrap components that I particularly like are:

b:buttonDropdown

The buttonDropdown can be used to provide alternate actions for a button on your page:

b:gridContainer

The bootstrap grid components (gridContainer/gridRow/gridColumn) provide a powerful means to layout your page. Being proper JSF components, they are also valid JSF execute/render targets.

I’ll blog more about the individual components as they get fleshed out. There’s a ton of blog material here!

RichFaces Bootstrap Roadmap

Our roadmap for these bootstrap components moving forward involves:

• RFSBOX-7 Finish wrapping the remaining bootstrap components
• RFSBOX-8 Flesh out the attributes of the already wrapped components
• RFSBOX-9 Couple the widget events into the RichFaces/JSF event subsytem (eg. for enabling JSF behaviours)
• Migrate/wrap (or re-implement if required) the existing RF 4 components

The task is big, and we could use your commits! So if you are interested in either RichFaces, Bootstrap, or both - be sure to drop by #richfaces on IRC (freenode.net) to discuss how you can get involved and influence how these components will shape up!

Concurrent to the work we do in our sandbox, we are still very much focused on improving the current set of RichFaces 4 components. We have another 4.2 micro release coming out soon, and are planning the Milestone releases for the 4.3 release train.

Lastly, I’d like to close with a big shoutout to Paul Dijou, a Richfaces community member who has been instrumental in getting this effort off the ground! Thanks Paul, and keep those pull request coming!