JSF 2.0 Resources Concept

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..

<h:graphicImage library="images" name="spacer.png" width="100px" height="100px" />

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" />

2 thoughts on “JSF 2.0 Resources Concept

  1. Pingback: Composite Spacer Component for RichFaces 4 | Super Compiler

  2. Pingback: Richfaces migration diaries | Super Compiler

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s