HTML and CSS Reference
In-Depth Information
Listing 13-18.
header.xhtml Page
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://xmlns.jcp.org/jsf/facelets
"
>
<ui:composition>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#{request.contextPath}/protected/pages/bookSearch.xhtml">Mega App</a>
<ul class="nav">
<li><a href="#{request.contextPath}/public/pages/contactUs.xhtml">Contact Us</a></li>
<li><a href="#{request.contextPath}/public/pages/about.xhtml">About</a></li>
</ul>
</div>
</div>
<div class="page-header">
<h1><ui:insert name="headerText">Welcome to the online library</ui:insert></h1>
</div>
</ui:composition>
</html>
■
the navigation bar htMl fragment is simplified and converted to a JSF composite component, check
"Composing JSF Components"
section.
Note
bootstrapCSS.xhtml
file contains the bootstrap CSS files include which is shown in Listing 13-19.
Listing 13-19.
bootstrapCSS.xhtml File
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://xmlns.jcp.org/jsf/facelets
"
>
<ui:composition>
<!-- Bootstrap CSS -->
<link href="#{request.contextPath}/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
<link href="#{request.contextPath}/css/bootstrap-responsive.css" rel="stylesheet"></link>
<link href="#{request.contextPath}/css/megaapp.css" rel="stylesheet"></link>
</ui:composition>
</html>
bootstrapJS.xhtml
file contains the bootstrap JavaScript files include which is shown in Listing 13-20.
Listing 13-20.
bootstrapJS.xhtml File
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://xmlns.jcp.org/jsf/facelets
"
>
<ui:composition>
<!-- Bootstrap JS -->
<script src="#{request.contextPath}/js/jquery.js"></script>
<script src="#{request.contextPath}/js/bootstrap.js"></script>
</ui:composition>
</html>
