A strength of JSF is in how it enables you to quickly write applications, providing you with a plethora of components abstracting complex functions.

Skinning, Styling & CSS

But when it comes to skinning and styling those components, JSF is not very helpful. But let’s not malign JSF here – it’s not the fault of JSF.

Rather, we should blame CSS, which lacks the dynamicity that would allow the strong skinning features.

CSS Pre-Processors to the Rescue

That’s exactly where technologies like LESS and SASS come in. They are processors which provide an  alternative syntax similar to CSS, that basically allow you to do magic with your style-sheets and how they are are structured – variables, mixins, functions, etc.

As the RichFaces team is currently working on leveraging Twitter Bootstrap, we want to embrace its beauties completely, and thus adopted its ability to style components in a simple and reusable way, while also enabling style extensions.

Now, you can see this magic in the RichFaces Bootstrap showcase.

What is this magic and how you can achieve it? Let’s see in this demo:

Incredibly fast styling with JSF and LESS from Lukas Fryc on Vimeo.

You can clone the Bootstrap showcase on GitHub repository:

https://github.com/richfaces/sandbox

How does it work?

When the project is imported to the IDE, you can achieve instant turnaround without need to reload (or even re-deploy) anything – you just turn on the Instant LESS functionality using a bookmark with the following URL and the client-side LESS compiler will take care of the rest:

javascript:less.instant.toggle();

Your browser will now constantly watch for changes in the application resources.

We use JRebel to ensure resources are pushed to the server immediately after we save them in the IDE. This isn’t necessary if you use an expanded WAR, but we load LESS resources from JAR projects and that’s where servers usually fall short. Luckily JRebel comes to save our butt, making possible** the hot-reloading of resources** within a JAR that are served using the JSF Resource Handler.

Production Mode

The above method works well while in the Development stage of a project. But with that approach, LESS compiles resources in the browser and thus would slow down your application.

In Production project stage is where built-time compilation comes into play. We use the popular project wro4j - a pre-processor, minifier and optimizer for many alternative syntaxes for web languages.  Specifically we are using the wro4j-maven-plugin and M2E connector for this Maven plugin (written by our fellow Fred Bricon, who wrote a blog about usage of this plugin).

Let’s check the Production Mode out, it is also as awesome as the Development Mode and its instant turnaround feature!