HTML and CSS Reference
In-Depth Information
main.xhtml
template consists mainly of a metadata section, a header, a side menu, a content, and a footer.
Listing 13-21 shows
main.xhtml
template.
Listing 13-21.
main.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
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
>
<f:view contentType="text/html">
<ui:insert name="metadata"/>
<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>
<div class="row-fluid">
<div class="span3">
<ui:insert name="menu"/>
</div>
<div class="span9">
<ui:insert name="content"/>
</div>
</div>
<ui:insert name="footer"></ui:insert>
</div>
<ui:include src="common/bootstrapJS.xhtml"/>
</h:body>
</f:view>
</html>
As shown in the template, there are mainly five named content elements:
"metadata"
element, which can be defined by the page in order to declare <f:metadata> with
its children elements if needed.
•
"header"
element, which is currently initialized by the
header.xhtml
file.
•
"menu"
element, which can be defined by the page's side menu.
•
"content"
element, which can be defined by the page content.
•
"footer"
element, which can be defined by the page footer.
•
