JSF 2.0 has introduced a wonderful concept for easy storage and easy retrieval of resources for a particular project.

The project resources like css stylesheets, images and JavaScripts can be stored under a folder named ‘resources’ in the root of the web application.

See the example below.

The resources can be accessed using the library keyword.

The above figure depicts the resources I used to create a custom spacer component.

The spacer.png file can be accessed via..

[sourcecode language=”r”]
<h:graphicImage library=”images” name=”spacer.png” width=”100px” height=”100px” />
[/sourcecode]

This is as easy as it gets. The folders immediately below the resources folder should be specified as the library property, and in the above case images.

This resource concept provides an easy mechanism to provide themes to the application. Consider the example below.

There are three different folders under resources..

• Cobalt
• Lime
• Ruby

We have already seen that the folders immediately below the resources folder can be accessed via the library property. So, these three folders are libraries on their own. In other words themes.

Each theme is minimal and has only one image. Based on the theme selected, the image can be loaded ..

<h:graphicImage library="#{backingBean.theme}" name="images/bg_img.png" width="100px" height="100px" />