JSF provides a mechanism for easy access from JSF pages to the following
types of resources.
-
Images
-
Styles: using Cascading Style Sheets (CSS), see the section
on Styling
-
Scripts: using Javascript, for example
The use of styles and images is commonplace in JSF web applications and
they are relatively easy to use.
Scripts are executed from the browser rather than the server.
This can be useful for improving performance, but is not essential
except for complex web applications.
They are not described here.
To use the JSF resource access mechanism a web programmer needs to know
how do two things:
- Place the resources in special folders
- Access the resources from JSF pages
Resources should be placed in a folder named
resources,
created as a subfolder of the application's
Web Pages folder.
The
resources folder should have subfolders for the different
types of resources.
Their names are typically
-
css — for style sheets
-
images — for images
-
javascript — for scripts
This section describes the JSF tags that access resources.
Style sheets and scripts are information about a JSF page that is used
by the browser.
The browser is informed of these resources using the tags:
- h:outputStyleSheet
- h:outputScript
in the
h:head tag of the JSF page.
Use the
library attribute to specify the folder where the
resourse is found. Examples:
<h:outputStylesheet library="css" name="styles.css"/>
accesses a stylesheet named
styles.css in the
css
subfolder of the
resources folder.
<h:outputScript library="javascript" name="script.js"/>
accesses a script named
script.js in the
javascript subfolder of the
resources folder.
Images are content to be displayed in a JSF page.
If the
images subfolder of the
resources folder
contains an image file named
image-file-name then the
following tag will display the image.
<h:graphicImage library="images" name="image-file-name"/>