HTML and CSS Reference
In-Depth Information
Composing Page Templates
Mega App relies on two templates under
WEB-INF/templates
folder:
1.
simple.xhtml
template, which is used as a template for the public pages in the application
such as the login and registration pages.
2.
main.xhtml
template, which is used as a template for all the protected pages in the
application such as book requests and book search pages.
simple.xhtml
template is a basic template which consists of a header, a content, and a footer. Listing 13-17 shows
simple.xhtml
template.
Listing 13-17.
simple.xhtml Template
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://xmlns.jcp.org/jsf/facelets
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
>
<h:head>
<title><ui:insert name="title">Welcome to the Mega App</ui:insert></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<ui:include src="common/bootstrapCSS.xhtml"/>
</h:head>
<h:body>
<div class="container">
<ui:insert name="header">
<ui:include src="common/header.xhtml"/>
</ui:insert>
<ui:insert name="content"></ui:insert>
<ui:insert name="footer"></ui:insert>
</div>
<ui:include src="common/bootstrapJS.xhtml"/>
</h:body>
</html>
As shown in the template, there are three named content elements:
•
"header"
element, which is currently initialized by
header.xhtml
file under
/WEB-INF/templates/common
folder.
•
"content"
element, which can be defined by the page content.
•
"footer"
element, which can be defined by the page footer.
header.xhtml
contains the navigation bar, which includes links to the home page, contact us page, and About
page. The header pages also contains the header text as shown in Listing 13-18.