On Java Development

All things related to Java development, from the perspective of a caveman.

JSF Resources

without comments


Since the release of JSF 2.0 in July of 2009, JavaScript files, Cascading Style Sheets (CSS), images, and other files are placed into a resources directory in the root of the web application. For a Maven based application, this is the src/main/webapp/ directory. Sub-directories under this directory are referred to as libraries. Any library can be created there, and the libraries for css, images, and javascript are the common ones.

The Resources Directory and Versioning
This section will cover the layout of the resources directory as well as the versioning mechanism.

The directory layout
Shown below at right is the full layout of the resources directory as it is seen in baseproject. The JSF 2.0 specification further supplies some options for how to structure content under the resources directory. This specification looks like this:


(Items in [] are optional.)

  • localePrefix – This allows the developer to associate a resource with a particular locale identifier. If a developer wishes to leverage this feature, they must add a key/value pair:


    The value of localePrefix must match the localePrefix within the resources directory.

  • libraryName – This is a logical identifier that may be used to represent a grouping of resources. This library may be versioned as indicated by libraryVersion.

  • resourceName – This is the name of the physical resource (i.e. mast.jpg or corp.css or js/ajax.js), which can also be versioned.

  • libraryVersion – The naming of the version library can take various forms. They may be 1_1, 1_1_1, 1_1_2_11, etc., and if used, the resource handling mechanism must use the latest version available (be it library or resource). This allows you to update resources at runtime without having to redeploy the application.

The ability to update resources at runtime is supported by the JSF specification. JSF looks for resources within the docroot of the web application. As an example, consider the following scenario. An application uses a component library with resources included within the JAR, say the resource path is /resources/compLib/script/compScript.js. A bug is found in this .js file and no new version of the component library is available. The bug can be fixed locally and placed in /resources/compLib/1.1/script/compScript.js while the app is live and the new version will be sent to the client. The name of the resource is reflected by the library name and the version library contains the resource content.

Library Contents Under Base Project
The directory layout presented by the image above is from baseproject and is discussed here.

The JSF <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> components have a library attribute. For example:

Under baseproject, the common library represents the library for the resources common to the application hence the name. All web pages will reference the resources located there. Under this library are the following resource libraries.

  • components – Facelet components
  • css – Cascading Style Sheets
  • icons – icons for menu items and other page components
  • images – images used by the web page
  • js – JavaScript files

Other libraries can be created for special cases. For example, if the web application is divided into areas of functionality such as the case where the common pages are presented to the end-user and there are pages that are to be presented only to the administrator, the libraries common and admin can be used for this purpose. Under each, the directories listed above would be placed.

Shown below is the wait dialog included in baseproject. Line 8 illustrates how the file medSegmentedBlackCircleLoading00.gif is referenced from the common library.

The JSF resource handling facility removes the need for relative path statements. In addition, it provides the ability to change resource references while the application is running (emergency only!) and provides support for resource versioning.

PACKT Publishing : Integrating Images with JSF, CSS, ….

Leave a Reply

You must be logged in to post a comment.