JSF Web Resources

JSF web resources are the resources which are required for proper rendering in the web application. It includes images, script files, and any user-created component libraries.

JSF provides a standard way to store your web resources. You can use any one of the following to store your resources.

• It must be stored in a subdirectory of a resources directory at the web application root: resources/resource-identifier.
• A resource packaged in the web application's classpath must be in a subdirectory of the META-INF/resources directory within a web application: META-INF/resources/resource-identifier. You can use this file structure to package resources in a JAR file bundled in the web application.

The JavaServer Faces runtime will look for the resources in the preceding listed locations, in that order.

JSF Web Resources Example: Accessing Image File

JSF provides <h:graphicImage /> tag to access Image in web application. In the following example, first we have created a resources and a sub folder named images. After creating the folders our application structure looks like the below.

Now, you can write your code like below. The <h:graphicImage> tag specifies that the image named hello.gif is in the directory web pages/resources/images.

// index.xhtml

In this code, we are accessing image by using two ways. One is by using resource array in expression language. Second, by specifying library attribute.

Output:

both image tag produce the same output.

JSF Web Resources Example: Accessing CSS File

The <h:outputStylesheet> tag is used to access CSS resource in the web application. You must create a subdirectory inside the resources folder as given below.

In the following example, we are accessing test.css file in our web page.

// index.xhtml

// test.css

Output:

JSF Web Resources Example: Accessing JavaScript File

The <h:outputScript> tag is used to access JavaScript file in the web application. The following screenshot shows the place of JavaScript file in the project.

Here, we are accessing JavaScript file with the help of tag.

// index.xhtml

// test.js

Output: