Thursday, November 29, 2012
Polyglot widgets demo
Some key points of the demo to call out:
CDI Programming model
In the demo, we use the pickList component to make a selection on one of the demo pages, then click the submit button. On navigation to one of the other demo pages, you’ll notice the state persisted. This demonstrates how we can leverage CDI to provide a common programming model across all our web frameworks.
Integrated Ajax Push
Open each page of the demo in a separate window to witness selection updates synchronizing the pages in real time. Taking advantage of RichFaces push, the Errai CDI bus, and HTML 5 Server-Sent-Events (via the Atmosphere project) in each of the respective frameworks provides incredible power in keeping our “polyglot” web-apps in a coherent state.
I created a screencast of the demo, to make it easier to see the above points in action. Watch the screencast below, then head off to play with the demo yourself. Even better, fork the demo on github, and see what cool things you can do with it.
I put this demo together as a proof-of-concept to help me illustrate what I mean when I talk about “standalone widgets” and polyglot/poly-framework applications. The RichFaces team will ramp up development on these new standalone widgets as we wrap up our RichFaces 4.3 effort and shift gears into RichFaces 5. So stay tuned for further development in this area!
Friday, October 12, 2012
I’m excited about the buzz the RichFaces Bootstrap sandbox initiative is generating. It’s also exciting to see other projects offer a bootstrap style/theme. This can only help inter-op and component compatibility, marking life easier for all JSF developers. This post is meant to help those looking to build a custom application using the RichFaces Bootstrap components.
Along with the new approach we are taking in the development of these new components, the RichFaces project is incorporating a new LESS based approach to style/themes. With LESS we can take advantage of dynamic features such as variables, mixins, operations and functions. However, this requires us to make some changes to how we serve resources and is still in active development as we work through various prototypes in the RichFaces Sandbox.
The RichFaces Bootstrap Quickstart
We’ve added a RichFaces Bootstrap Quickstart project that you can use to build an application to test-drive these new components. This quickstart application has the sole intention of being a starting point, and is much simpler to grok than the demo application we’ve been providing that is more of a component showcase. As an added bonus, creating this quickstart served as a good driver to simplify the RichFaces bootstrap-ui project, making it easier to consume. Simplicity for-the-win!
Rest assured the complexity of this approach will ultimately disappear and usage of these components will become transparent as we move out of the prototyping stage and include these components in “RichFaces proper”.
A walk-through the Quickstart
The RichFaces Bootstrap quickstart is a maven project available on github in the RichFaces Sandbox repository. It includes the appropriate configuration in the web.xml deployment descriptor that, when coupled with a resource mapping file, allows us to activate the client-side LESS styling of the RichFaces Bootstrap components.
If you are not interested in working with the client-side LESS styling, but rather the CSS compiled at build time, then simply build the quickstart project as is:
mvn clean install
However, should you wish to work with the LESS approach to styling, change the
org.richfaces.clientSideStyle context-param in the web.xml to
<!-- Note this will be overridden by PROJECT_STAGE = Production -->
You can then include your own
.less files and they will be converted to CSS on the client-side with the provided less.js library. You will then want to convert your LESS files to CSS (at build time) when you go to production, but that will be the topic of another blog (or look at how we’ve done it with wro4j in the bootstrap-ui project).
We’re planning on pushing heavily on LESS/JSF integration in the coming few months, looking to simplify the process, and enable you to take advantage of the many LESS/Bootstrap themes available and apply them to your application. We’ll keep the “README” of the quickstart up-to-date with any changes required to consume the components in your own projects.
Disclaimer: RichFaces Bootstrap is a Sandbox project, and not yet meant for production use. API’s and component implementations will change.
Friday, May 4, 2012
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:
The buttonDropdown can be used to provide alternate actions for a button on your page:
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!