JSF provides a mechanism for easy access from JSF pages to the following types of resources.

The use of styles and images is commonplace in JSF web applications and they are relatively easy to use.

Scripts are executed from the browser rather than the server. This can be useful for improving performance, but it is not essential except for complex web applications.

To use the JSF resource access mechanism a web programmer needs to know how do two things:

The javascript example contains both a CSS resource (styles.css) and a JavaScript resource (checkPassword.js). The flags example demonstrates the use of graphics resources.

Resource Folders Access from JSF Styling javascript Example flags Example

Resources should be placed in a folder named resources, created as a subfolder of the application's Web Pages folder. The resources folder should have subfolders for the different types of resources. Their names are typically

This section describes the JSF tags that access resources.
Styles and Scripts Images javascript Example
Style sheets and scripts are information about a JSF page that is used by the browser.

The browser is informed of these resources using the tags:

in the h:head tag of the JSF page.

Use the library attribute to specify the folder where the resource is found. Examples: 

     <h:outputStylesheet library="css" name="styles.css"/>
accesses a stylesheet named styles.css in the css subfolder of the resources folder. 

     <h:outputScript library="javascript" name="script.js"/>
accesses a script named script.js in the javascript subfolder of the resources folder.
Images are content to be displayed in a JSF page.

If the images subfolder of the resources folder contains an image file named image-file-name then the following tag will display the image. 

     <h:graphicImage library="images" name="image-file-name"/>