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.

JSF Web resources 1

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


<h:body>
<h:form id="user-form" enctype="multipart/form-data">
<h:graphicImage value="#{resource['images:hello.gif']}"/>
<h:graphicImage library="images" name="hello.gif"/>
</h:form>
</h:body>

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 2

# 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.

JSF Web resources 3

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

// index.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Web Resources Example</title>
<h:outputStylesheet library="css" name="test.css"/>
</h:head>
<h:body>
<h1>Welcome to The JavaTPoint!</h1>
</h:body>
</html>

// test.css


h1 {
color: red;
text-align: center;
}

Output:

JSF Web resources 4

# 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.

JSF Web resources 5

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

// index.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Web Resources Example</title>
<h:outputScript  library="js" name="test.js"/>
</h:head>
<h:body>
</h:body>
</html>

// test.js


window.onload = function(){
alert("Welcome to The JavaScript");
}

Output:

JSF Web resources 6