HTML and CSS Reference
In-Depth Information
<ui:composition>
<projsfhtml5:navbar label="Mega App"
value="#{request.contextPath}/protected/pages/bookSearch.xhtml">
<projsfhtml5:navitem label="Contact Us"
value="#{request.contextPath}/public/pages/contactUs.xhtml"/>
<projsfhtml5:navitem label="About"
value="#{request.contextPath}/public/pages/about.xhtml"/>
</projsfhtml5:navbar>
<div class="page-header">
<h1><ui:insert name="headerText">Welcome to the online library</ui:insert></h1>
</div>
</ui:composition>
</html>
<projsfhtml5:navbar>
is the navigation bar element; it has two main attributes that represent the label and the
value of the navigation bar, while
<projsfhtml5:navitem>
represents the navigation item element and has two similar
attributes for defining the navigation item value and label.
Listing 13-39 shows
navbar.xhtml
, which is located under
resources/projsfhtml5
folder.
Listing 13-39.
navbar.xhtml under resources/projsfhtml5 Folder
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://java.sun.com/jsf/composite
"
>
<cc:interface>
<cc:attribute name="label" type="java.lang.String" default="Mega App" />
<cc:attribute name="value" type="java.lang.String" default="#" />
</cc:interface>
<cc:implementation>
<div id="#{cc.clientId}" class="navbar">
<div class="navbar-inner">
<a class="brand" href="#{cc.attrs.value}">#{cc.attrs.label}</a>
<ul class="nav">
<cc:insertChildren />
</ul>
</div>
</div>
</cc:implementation>
</html>
Listing 13-40 shows
navitem.xhtml
, which is located under
resources/projsfhtml5
folder.
Listing 13-40.
navitem.xhtml under resources/projsfhtml5 Folder
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://java.sun.com/jsf/composite
"
>
