Back in 2008, when I read Ryan Lubke's "JSF 2.0 New Feature Preview Series (Part 2.1): Resources", "JSF 2.0 New Feature Preview Series (Part 2.2): Resources", and "JSF 2.0 New Feature Preview Series (Part 2.3): Resources" articles, I was excited to learn about the new mechanisms for managing resources coming with the JavaServer Faces 2.0 specification. This article guides web application developers with information on how to leverage the JSF 2.0 resource management framework in Cascading Style Sheet definitions.
First and foremost, the 2.0 revision of the JavaServer Faces specification provides two standard locations for resources relative to the context root of your web application.
Which of the locations you intend to use in your web application is really a matter of personal preference. The /resources directory is accessible to users of your web application whereas the /META-INF/resources directory is considered private and is only directly-accessible to your web application.
In developing the new resource management framework, the architects of the JSF 2.0 platform took inspiration from the convention over configuration aspects of some of the more popular web application frameworks available at the time. By doing this, they provide automatic localization and version management as long as developers adhere to the following structural pattern for the files in the /resources directory.
NOTE: The elements surrounded by brackets ( [ ] ) are considered optional. Only the resourceName is required.
In keeping with the "ease-of-use" theme for JSF 2.0, a standardized expression language syntax is provided for accessing resources regardless of which directory in which they reside:
The resource object is explained in greater detail in Ryan Lubke's "JSF 2.0 New Feature Preview Series (Part 2.3): Resources" article.
Shortly after working with the resource management framework in my JSF 2 applications, I wondered how I could leverage this framework for images declared in my CSS stylesheets. Ryan Lbuke's first article on the new resource management framework outlines the following URL pattern which will be used in the HTML generated by the framework.
NOTE: The elements surrounded by brackets ( [ ] ) are considered optional. Only the resource-name element is required.
By leveraging the notation of a Uniform Resource Locator prescribed in section "6.4 URL" of the "Cascading Style Sheets, Level 1" standard and incorporating the URL format shown above, we have the pattern shown below for identifying resources in our CSS files.
NOTE: Web developers should be aware of the fact that per the Cascading Style Sheets, level 1 specification, the following characters should be escaped with a backslash.
In the URL example provided above, it is assumed that you have configured your web application to map the .jsf extension to the Faces Servlet (as shown below).
Should you elect to use some other file extension, you will have to replace .jsf in the example above with the extension defined in your servlet-mapping for the Faces servlet.
The goal for this article is to produce the web page depicted in the screenshot below using standard cascading style sheets and the new resource management capabilities provided by the JavaServer Faces 2.0 web application framework. The image of Duke waving is a scaled down version of wave.png taken from the Duke Images archive found at http://duke.kenai.com/wave/index.html. It has been loaded as the background for the <body> element in the HTML page. The stylesheet tells the browser to place the waving Duke image in the top right corner of the web page. It also tells the browser that the image should NOT be repeated.
The reference page shown above is publicly accessible at the http://jsf2gae.wildstartech.com/resourceManagerCSSExample/resourceManagerCSSExample.jsf URL. The following is the contents of the resourceManagerCSSExample.jsf file.
In the example page above, the following snippet of code is used to instruct the browser to load the resourceManagerCSSExample.css stylesheet.
The <h:outputStylesheet> tag is something Ryan Lubke talks about in his "JSF 2.0 New Feature Preview Series (Part 4) Resource Re-location" article. The official JavaDoc for the <h:outputStylesheet> tag is also available.
The following is the complete content of the resourceManagerCSSExample.css file.
The value used for the background-image style identifies a uniform resource locator (URL) that leverages the JSF 2.0 resource management framework to obtain the wave.png file from the /resources/resourceManagerCSSExample directory of the jsf2gae web application.
The following documents or web sites were referenced in the process of composing this article.