JSF Mini Book – Tips, concepts and good practices

How to import CSS/Images/JavaScript as Library

After the application receives a request from the user a response will be prepared and sent back to him.

In the response that the application sends to the users it might contain texts, images, gifs, JavaScript codes that are “translated” by the user web browser; the images, gifs and JavaScript are knew as resources. The JSF works with a component named ResourceHandler to make easier the access to the resources.

The ResourceHandler is nothing more than a directory structure definition to make easier the resource localization. To map the resources the JSF will map every folder created under the directory: “/WebContent/resources”. Each folder under the “resources” folder will be handled as a library. If you have the following folder “WebContent/resources/myjavascript” the JSF map to you a library named “myjavascript”.

The ResourceHandler is capable of managing versions of your libraries. You could create the “WebContent/resources/myjavascript” folder and create a versioning like “WebContent/resources/myjavascript/1_0”, “WebContent/resources/myjavascript/1_1”. The newest version found will be used by the JSF.

To use the library resource in the application created in this post, inside the folder “/WebContent” create a folder named “resources”; inside the “resources” folder create a folder named “css” and put a file name style.css in it; create a folder named “images” and put an image named “image01” inside (it can be any image you like). The image bellow shows how the files/folders structure should be:

The code of the file “style.css” bellow will define only the properties of the HTML <h1> tag:

h1 {
	color: blue;
	text-align: left;

To use a mapped library by the ResourceHandler let us create a folder named “index.xhtml” inside the folder “/WebContent”. With the JSF tag “h:outputStylesheet” it is possible to access the css file from the page without the need of writing the full/relative file path. Take a look in the code bellow to see how to use the tag. Notice that is used the tag graphicImage to display an image from the library without the file path. In the code bellow was not necessary to write the css file path or the jpg file path:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	<h1>Real Madrid, Champion!</h1>

In the Eclipse go to the “Servers” tab and start the application. You will be able to access the project by the URL: http://localhost:8080/ProjectJSF/faces/index.xhtml. A text with the style defined in the style.css file and the image found in the images folder will be displayed. Notice that in the index.xhtml file we do not find any file path like “/WebContent/resources/css/style.css”.

To import a javascript file the concept is the same. Create a folder “/WebContent/resources/js” and inside it put your javascript file. To import your file use your tag like: <h:outputScript name= “yourFile.js” library= “js” />.

18 thoughts on “JSF Mini Book – Tips, concepts and good practices

  1. Really cool material! I agree with Tim. If this could be distributed in pdf format, you will become a little more famous. :) Thanks, good job!

  2. I’m not able to see this library applied in my program.
    Output is: Real Madrid, Champion!!! (No image and style)

    Please let me know what I’m missing.

  3. I was trying to learn Spring MVC for last 2 months, Every time i try to start, i get stuck somewhere. 2 Months passed, and i did not learn anything. I purchased two books for spring. Finally i quit Java web programming. One day I thought to give a try to JSF. and found some tutorials online, worked on them and I loved it. Your tutorials are going to help me a lot.
    Thank you so much.
    I would like to tell people here, don’t go near spring, It’s a piece of crap.

    • Arslan,

      Thanks for the feedback.

      My next post will be a full web application with Spring MVC.

      Maybe this application will help you understanding better the Spring, it is a good tool! =D

      See you later.

  4. With your code lines


    eclipse was giving error that:

    Multiple annotations found at this line:
    – Invalid location of text (“) in tag ().
    – Invalid location of text (=”) in tag ().
    – Element type “h:outputStylesheetlibrary” must be followed by either attribute specifications, “>”
    or “/>”.

    So I’ve corrected it by changing lines to

    But I think as you mentioned in case of versions of resources, it will automatically picks up latest version. but the code I’m using will not control the version. It looks like hard-coded.

    What you say about it?

    Moreover, You wrote:
    “To use a mapped library by the ResourceHandler let us create a folder named “index.xhtml” inside the folder “/WebContent”.”

    I think you have not created a folder name “index.xhtml” but you have created a file named “index.xhtml”. If I’m right then you need to correct it. :)

    • Hello Arslan, how are you?

      Unfortunately the xml are not displayed here. =/

      Could you send me an email with the code and the texts that you wrote?

      Thanks for your support and passing by.

      My email is contato (at] uaihebert (d0T) com


Leave a Comment