In this section, we will create header and footer JSF pages. Similar to creating the BasicTemplate.xhtml
Facelet template, create header.xhtml
and footer.xhtml
in the WEB-INF/templates
folder. For example, for the header JSF page, specify header.xhtml
, as shown here:
The difference in creating the header and footer pages that in Select XHTML Template, select the Blank JSF Page template shown as follows:
We will include graphic JPEG
files for the header and footer sections. In the header.xhtml
, include a JPEG
file using the h:graphicImage
tag enclosed in a h:panelGrid
tag. First, copy the graphic JPEG files FaceletsHeader.jpg
and FaceletsFooter.jpg
to the //jboss-jsf2/src/main/webapp
directory. The header.xhtml
JSF page is listed as follows:
<?xml version="1.0" encoding="ISO-8859-1" ?> <!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"> <f:view> <h:form> <h:panelGrid columns="1"> <h:graphicImage value="FaceletsHeader.jpg" /> </h:panelGrid> </h:form> </f:view> </html>
Similarly, in the footer.xhtml
JSF page, include a FaceletsFooter.jpg
image file with the h:graphicImage
tag enclosed in the h:panelGrid
tag. The footer.xhtml
page is listed as follows:
<?xml version="1.0" encoding="ISO-8859-1" ?> <!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"> <f:view> <h:form> <h:panelGrid columns="1"> <h:graphicImage value="FaceletsFooter.jpg" /> </h:panelGrid> </h:form> </f:view> </html>
The directory structure of the jboss-jsf2
project is shown in the following screenshot: