jee6 学习笔记 9: Templating and Primefaces Menubar
Templating can reuse some common code. This example discusses the simplest JSF2 templating with facelet tags.
To define a template, one can use facelet tag <ui:insert name="title"></ui:insert>. This creates a placeholder to insert real content to generate the final jsf pages. To insert the content, one can use tag <ui:composition/> to wrap the whole page and then use tag <ui:define/> to insert the real stuff.
When creating the template, one can use tag <ui:include/> to include common stuff into the template, like a menu bar etc.
Here's the simple template used in the example project "/template/template1.xhtml":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>
<ui:insert name="title">Title</ui:insert>
</title>
</h:head>
<h:body>
<ui:insert name="menu">
<ui:include src="/menubar.xhtml"/>
</ui:insert>
<p:spacer height="20"/>
<ui:insert name="content"/>
</h:body>
</html>
Page /tst/testSingleton.xhtml after using the template (template defined in tag "composition"):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/template/template1.xhtml">
<ui:define name="title">Test EJB3.1 @Singleton</ui:define>
<ui:define name="content">
<h:form>
<p:panel header="Test EJB3.1 @Singleton" toggleable="true" style="width:60%">
<h:panelGrid columns="1">
Click "Test" to see if it's the same instance:
<h:outputText id="out" value="#{st.message}" escape="false"/>
</h:panelGrid>
<p:separator/>
<p:commandButton value="Test" action="#{st.test}" update="out"/>
<p:spacer width="7"/>
<p:commandButton value="Clear" actionListener="#{st.reset}" update="out"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Here's the same page before using the template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Test EJB3.1 @Singleton</title>
</h:head>
<h:body>
<h:form>
<p:panel header="Test EJB3.1 @Singleton" toggleable="true" style="width:60%">
<h:panelGrid columns="1">
Click "Test" to see if it's the same instance:
<h:outputText id="out" value="#{st.message}" escape="false"/>
</h:panelGrid>
<p:separator/>
<p:commandButton value="Test" action="#{st.test}" update="out"/>
<p:spacer width="7"/>
<p:commandButton value="Clear" actionListener="#{st.reset}" update="out"/>
</p:panel>
</h:form>
</h:body>
</html>
Here's the Primefaces 3.1 menubar , which is included in the template, "/menubar.xhtml":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form>
<p:menubar style="width:60%">
<p:submenu label="Student">
<p:menuitem value="Search Student" url="/student/studentSearch.jsf" />
<p:menuitem value="New Student" url="/student/studentDetails.jsf" />
<p:separator/>
<p:menuitem value="blah balh" url="#"/>
</p:submenu>
<p:submenu label="Test">
<p:menuitem value="ajax test" url="/tst/jsfajaxtst.jsf"/>
<p:menuitem value="Get param test" url="/tst/testGetParam.jsf"/>
<p:submenu label="ejb test">
<p:menuitem value="async ejb test" url="/tst/testAsync.jsf"/>
<p:menuitem value="singleton ejb test" url="/tst/testSingleton.jsf"/>
</p:submenu>
</p:submenu>
<p:submenu label="Logout">
<p:menuitem value="logout" action="#{loginBean.logout}" />
</p:submenu>
</p:menubar>
</h:form>
</html>
Here's a screen shot of the pages, with the menu bar added:
Next, lets take a look at Internationalization of the web app...