jee6 学习笔记 9: Templating and Primefaces Menubar

程序员文章站 2022-07-15 16:57:49

...

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:

jee6 学习笔记 9: Templating and Primefaces Menubar

博客分类： JEEJSFPrimefaces jsf2templateprimefacesmenubar