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.
 
Search WWH ::




Custom Search