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" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <h:outputStylesheetlibrary="css"name="style.css"/> <title>Hello</title> </h:head> <h:body> <h1>Real Madrid, Champion!</h1> <h:graphicImagelibrary="images"name="image01.png"/> </h:body> </html>
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” />.
Really good material. Thanks very much…
Tugrul, thanks for the support! =D
Thank you very much !!!
You’re welcome [=
This Post is Awesome. Followed every things and applied on my project.
Hello surajtamang,
Thank you for your support.
very usefull material, Keep up the good work
Hello, John
Thanks for the support. [=
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!
Hello Thabita, good morning.
I will try to create the PDF, but I will not promise it! =D
Thanks for the support. [=
This is awesome! Could you post the entire article as a PDF for download??
Hello Tim.
I will try, I am really short of time. =/
Thanks for your support. [=