Thursday, November 29, 2012

Polyglot Widgets

JBoss Developer Framework

The JBoss JDF project shows Java EE developers how to build state-of-the-art applications using the JBoss implementations of the Java EE stack. Specifically, the JDF View Frameworks section identifies a number of alternative approaches one can take when developing the view layer of your application. We in the RichFaces project have been working towards better supporting this effort by redesigning our JSF component architecture to allow the javascript part of our components (what we call our “widgets”) to be used independent of JSF, either in a standalone manner or coupled with another web framework.

By isolating the client-behaviour into widgets, we are able to achieve both a faster turnaround on new JSF component development, while at the same time enabling users to achieve a uniform look and feel in their heterogeneous application environments. To demonstrate the impact of this, I’ve prepared a demo application that demonstrates using our standalone javascript widgets in JSF with RichFaces, GWT with Errai, and a plain HTML 5 page with Aerogear.

Polyglot widgets demo

polyglot-widgets

The polyglot-widgets demo takes the RichFaces Sandbox pickList component and builds a GWT and plain HTML5 application using the standalone javascript pickList widget.

Some key points of the demo to call out:

Consistent L&F

Imagine writing “polyglot” web applications with both a consistent Look & Feel, and access to the rich set of enterprise-grade widgets that you’ve come to expect from the RichFaces project. In the demo, the same RichFaces Sandbox pickList widget is used in a JSF, GWT and HTML 5 application. The widget and the demo pages themselves use the Bootstrap project for styling, which is what enables us to achieve a consistent L&F across the pages backed by different web technologies. This common L&F is taken one step further to deliver a consistent user experience by using the same javascript widget implementation across all the demo pages.

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.

Screencast

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.

Next Steps…

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

RichFaces Bootstrap Quickstart

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 true:

<context-param>
        <param-name>org.richfaces.clientSideStyle</param-name>
        <param-value>true</param-value>
        <!-- Note this will be overridden by PROJECT_STAGE = Production -->
    </context-param>

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

RichFaces Bootstrap

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:

  1. RFSBOX-7 Finish wrapping the remaining bootstrap components
  2. RFSBOX-8 Flesh out the attributes of the already wrapped components
  3. RFSBOX-9 Couple the widget events into the RichFaces/JSF event subsytem (eg. for enabling JSF behaviours)
  4. 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!