One of the new features I really like in JSF 2.0 is the resource handling system that has been added. When I first heard about it I wondered why they had bothered but once I’d been using it for a while I realized what a good idea it is.
At it’s simplest the resource handling system lets you, the developer, place resources in a couple of pre-defined places which can then be quickly and efficiently loaded by various JSF elements. The most obvious use of this system is to load stylesheets and JavaScript files but images and other resources can also be loaded. With JSF 1.2 and earlier it was common to load a script file with something like this:
<script type="text/javascript" src="#{request.contextPath}/scripts/myscript.js"/>
Using JSF 2.0 and moving the script into the resources directory the loading is done like this:
<h:outputScript library="scripts" name="myscript.js" target="head"/>
The only requirement for a file to be considered a resource is that it be loacted under a folder called resources that is in the root of the web application (in other words a peer of a WEB-INF folder). There can be any number of sub-folders under resources which are called libraries. A typical example might look something like this:
resources
images
banner.jpg
stylesheets
style.css
scripts
myscript.js
Two tags are commonly used to access resources <h:outputScript/>, and example of which was given above, and <h:outputStylesheet/>. Both take library and name attirbutes which are used to locate the resource. The library attribute corrisponds to the name of the folder under the resources directory in which the resource resides. If there are multiple sub-folders the path elements should be separated with a forward slash like this: scripts/deeply/nested
The <h:outputScript/> tag also supports the target attribute which is used to tell the renderer where the JavaScript should be included in the page, either body or head can be specified. To use this the page must be built with the new <h:head/> and <h:body/> tags like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<h:outputStylesheet library="stylesheets" name="styles.css"/>
<h:outputScript library="scripts" name="myscript.js" target="head"/>
</h:head>
<h:body>
</h:body>
</html>
In the above exaple the JavaScript tag is actually inside the head element but it could just as well have been in the body since it is the target that defines where the JavaScript appears in the final page.
Images, as you would expect, can also be access as resources. The existing <h:graphicImage/> tag has grown new library and name attributes to allow for the loading of images that work in exactly the same way as the stylesheet and script tags.
Finally, if you need to load the resources directly that can be achieved fairly simply using EL since the resources are loaded into a map that is access like this:
<h:graphicImage value="#{resource['images:banner.jpg']}"/>
The section before the colon being the library path the setion after the resource name. At first glance this would appear to be nothing more than an interesting technical aside since all the elements that you would want to load resources in already have library and name attributes which are simpler. There is at least one situation where this EL lookup comes in very useful though. If your CSS is held as a resource it can contain EL that will be processed before the CSS is delivered to the client. This greatly simplifies the inclusion of resources, such as background images, into the CSS as there is no longer any nead to figure out what the relative path to the resource will be from the CSS. A simple example of this is shown below:
div.someBlock{ background: url(#{resource['images:image.png']}) no-repeat 0 0; }