JavaEE5学习笔记13JSF集成Facelets使用经验总结_第1页
JavaEE5学习笔记13JSF集成Facelets使用经验总结_第2页
JavaEE5学习笔记13JSF集成Facelets使用经验总结_第3页
JavaEE5学习笔记13JSF集成Facelets使用经验总结_第4页
JavaEE5学习笔记13JSF集成Facelets使用经验总结_第5页
已阅读5页,还剩3页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、JavaEE5学习笔记13-JSF集成Facelets使用经验总结刘岩Email:suhuanzheng77848771. Facelets就像tiles、sitemesh一样,以为了JSF模板布局而提出的页面模板框架,使用Facelets,先将项目页面的整体样式模板设计好(比如采用一般的上、中、下结构)。之后项目的其他页面布局只需要声明采用预先定义好的布局框架即可。使得用了最少的页面代码完成了整个系统样式的统一。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阶段生效。也就是说视图创建阶段和返回响应阶段,将布局特效夹杂其中。这样环境算是配好了。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="#">联系我们</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. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论