Creating header and footer

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:

Creating header and footer

The difference in creating the header and footer pages that in Select XHTML Template, select the Blank JSF Page template shown as follows:

Creating header and footer

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:

Creating header and footer
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset