jee6 学习笔记 9: Templating and Primefaces Menubar

jXee

浏览: 99998 次

最近访客更多访客>>

lbyzx123

bincheng123

wangyy

abc123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JEE
JSF
Primefaces

jsf2 template 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...

查看图片附件

分享到：

JSF Action/Event/ValueChange Listeners | Logging Configuration in JBoss 7.1

2012-08-22 10:27
浏览 1565
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论