JavaEE5學習筆記13JSF集成Facelets使用經驗總結_第1頁
JavaEE5學習筆記13JSF集成Facelets使用經驗總結_第2頁
JavaEE5學習筆記13JSF集成Facelets使用經驗總結_第3頁
JavaEE5學習筆記13JSF集成Facelets使用經驗總結_第4頁
JavaEE5學習筆記13JSF集成Facelets使用經驗總結_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、JavaEE5學習筆記13-JSF集成Facelets使用經驗總結劉巖Email:suhuanzheng77848771. Facelets就像tiles、sitemesh一樣，以為了JSF模板布局而提出的頁面模板框架，使用Facelets，先將項目頁面的整體樣式模板設計好（比如采用一般的上、中、下結構）。之后項目的其他頁面布局只需要聲明采用預先定義好的布局框架即可。使得用了最少的頁面代碼完成了整個系統(tǒng)樣式的統(tǒng)一。2. JSF集成facelets的準備首先下載facelets相關的jar包，jsf-facelets.jar，在就可以得到它。修改web.xml,加入如下內容<context

2、-param><description>指定facelets支持的后綴</description><param-name>javax.faces.DEFAULT_SUFFIX</param-name><param-value>.xhtml</param-value></context-param>就是說，凡是xhtml文件結尾的都支持可以使用定義好的facelets模板。修改JSF配置文件，增加如下內容<!-配置facelets-><application><locale-c

3、onfig><default-locale>zh_CN</default-locale></locale-config><view-handler>com.sun.facelets.FaceletViewHandler</view-handler></application>此處是告訴JSF，采用FaceletViewHandler進行視圖處理器，這個處理器在JSF生命周期的第1階段和第6階段生效。也就是說視圖創(chuàng)建階段和返回響應階段，將布局特效夾雜其中。這樣環(huán)境算是配好了。3. 模板頁面我們先定義一個模板頁面，這個頁

4、面就是所有頁面布局的基礎，其他頁面呈現出來的效果都是基于此模板頁面的。代碼如下：layout.xhtml<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""xmlns:ui=""xmlns:h=""xmlns:f=""><

5、;head><title><ui:insert name="title">Facelets模板</ui:insert></title></head><body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264"vlink="#023264"><table border="0" width="

6、;768px" align="center"><tr><td colspan="2"><ui:insert name="header"><ui:include src="header.xhtml" /></ui:insert></td></tr><tr><td colspan="2"><hr /></td></tr><tr>&

7、lt;td width="140" valign="top"><ui:insert name="menu"><ui:include src="menu.xhtml" /></ui:insert></td><td valign="middle" align="center"><ui:insert name="body"><ui:include src="body.x

8、html" /></ui:insert></td></tr><tr><td colspan="2"><hr /></td></tr><tr><td colspan="2"><ui:insert name="footer"><ui:include src="footer.xhtml" /></ui:insert></td></tr

9、></table></body></html>大致的布局如下效果也就是經典的上、左右、下布局。頁面頭header.xhtml<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><table width="100%" cellpadding="0" cells

10、pacing="0"><tr><td><a href=""> <imgsrc="/JSJDemo/pic/java_logo.bmp" alt="" border="0" height="100"width="100" /> </a></td><td><font size="5" color="red">JSF+Sp

11、ring+JPA</font></td><td><a href=""> <imgsrc="/JSJDemo/pic/sun_logo.bmp" alt="" border="0" height="100"width="100" /> </a></td></tr></table>頁面底部<?xml version="1.0" encoding=&

12、quot;utf-8"?><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><table width="100%" border="0" align="center" cellpadding="1" cellspacing="0"><tr><td height="20" align="cente

13、r"><div align="center"><font color="#023264" size="3">Copyright &copy; 2007-2008,QJYONG All rights reserved.<br /> <a href="#">聯(lián)系我們</a> </font></div></td></tr></table>左頁面menu.xhtml<!DOC

14、TYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""xmlns:ui=""xmlns:h=""xmlns:f=""xmlns:c="" xml:lang="utf-8" lang="utf-8"><body><h:form id="serchFrom"><p&

15、gt;-功能菜單-<br /><br /><h:commandLink action="#teamAction.serchAll" value="【球隊管理】"></h:commandLink><br /><br /><h:commandLink action="#playerAction.serchAll" value="【球員管理】"></h:commandLink><br /><br />&

16、lt;h:commandLink action="#nationalityAction.serchAll" value="【國籍管理】"></h:commandLink></p></h:form></body></html>右內容頁面body.xhtml<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Trans

17、itional/EN" ""><p><em><font size="6" color="gray"><strong>歡迎訪問JSF頁面布局方案</strong></font> </em></p>啟動tomcat顯示模板效果如下以后其他頁面的布局也就是差不多這個樣式。一般有變化的都是中間那個body的內容。4. 自定義一個頁面，套用定義好的faceletsallPlayer.xhtml<?xml version=&quo

18、t;1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""xmlns:ui=""xmlns:h=""xmlns:f=""xmlns:c=""><!- 調用template/layout.xhtml模板 -><ui:composition

19、 template="./layout/layout.xhtml"><ui:define name="title">所有的隊員</ui:define><ui:define name="body"><c:set var="ctxPath"value="#facesContext.externalContext.requestContextPath" /><h:form id="form"><br />

20、<h:outputLink value="#ctxPath/mangerTeam/addPlayer.faces"><h:outputText value="【添加運動員】" /></h:outputLink><h:outputLink value="#ctxPath/mangerTeam/serchPlayer.faces"><h:outputText value="【查詢運動員】" /></h:outputLink><hr style

21、="color: yellow" /><br /><table border="1" cellpadding="1" cellspacing="1"bordercolor="#0000FF"><tr><td width="41"><div align="center">主鍵</div></td><td width="155"><d

22、iv align="center">姓名</div></td><td width="234"><div align="center">操作</div></td></tr><c:forEach items="#playerAction.playersVOList" var="playersVOVar"><tr><td><h:outputText value="

23、;#playersVOVar.id"></h:outputText></td><td><h:commandLink action="#playerAction.detail"value="#playersVOV"><f:param name="id" value="#playersVOVar.id" /></h:commandLink></td><td><h:commandLink a

24、ction="#playerAction.beforUpdate"value="【修改運動員】"><f:param name="id" value="#playersVOVar.id" /></h:commandLink>|<h:commandLink action="#playerAction.delete" value="【刪除運動員】"><f:param name="id" value="#playersVOVar.id" /></h:commandLink></td></tr></c:forEach><tr><td colspan="3"><c:forEach var="nowPage1" begin="1" step="

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論