JSF Web Resources

JSF Facelets Web Resources example for beginners and professionals with examples on life cycle, managed beans, ui components, ui tags, validation, bean validation, datatable, converters, facelets etc.

JSF Web Resources

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

  1. <h:body>  
  2. <h:form id="user-form" enctype="multipart/form-data">  
  3. <h:graphicImage value="#{resource['images:hello.gif']}"/>  
  4. <h:graphicImage library="images" name="hello.gif"/>  
  5. </h:form>  
  6. </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.

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

  1. <html xmlns="http://www.w3.org/1999/xhtml"  
  2. xmlns:h="http://xmlns.jcp.org/jsf/html">  
  3. <h:head>  
  4. <title>Web Resources Example</title>  
  5. <h:outputStylesheet library="css" name="test.css"/>  
  6. </h:head>  
  7. <h:body>  
  8. <h1>Welcome to The hpnmaratt!</h1>  
  9. </h:body>  
  10. </html>  

// test.css

  1. h1 {  
  2. color: red;  
  3. text-align: center;  

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

  1. <html xmlns="http://www.w3.org/1999/xhtml"  
  2. xmlns:h="http://xmlns.jcp.org/jsf/html">  
  3. <h:head>  
  4. <title>Web Resources Example</title>  
  5. <h:outputScript  library="js" name="test.js"/>  
  6. </h:head>  
  7. <h:body>  
  8. </h:body>  
  9. </html>  

// test.js

  1. window.onload = function(){  
  2. alert("Welcome to The JavaScript");  
  3.