Inside Facelets - Part 3: Templating and Re-Use 深入Facelets-第三部分:创建模板和重用 by JavaFeng |
这是Facelets系列文章中的第三部分,是用另外一种视图技术来创建JSF应用。Facelets是一个强大的模板化系统,它能让你用HTML风格的模板来定义JSF视图,并能够减少那些适合于集成在视图中的组件的代码数量,而且不需要web容器。这篇文章解释了你如何能够用Facelets在你的JSF工程里面创建模板。
对任何一种想要成功的视图技术来说,它必须拥有一些创建模板和重用的功能,而且必须好用又易懂。对于JSF来说,Facelets技术完美的解决了这个问题,并且延续了传统的、基于标签的UI风格。这篇文章包括了一些增加重用和简化维护JSF工程的方法。
当人们第一次开始创建网页的时候,他们经常发现自己在多个文件中重复相同的内容。作为一个开发人员来说,当你开始用面向对象的思想来开发的时候,这样的重复劳动会让人很灰心丧气。难道把这些内容简单地维护在一个地方不是更漂亮吗?
开始
模板化和重用的第一步是创建一个模板。一个网页通常由一些基本的部分组成:header,body,和footer。用Facelets,你能把这些通用的元素放在一个单独的页面里,并创建一个带有可编辑区的模板,如下面的模板所示:
<!-- template.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:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Template</title>
</head>
<body>
<h1>#{title}</h1>
<div><ui:insert name="menu"/></div>
<p><ui:insert name="body"/></p>
</body>
</html>
对于menu和body来说,<ui:insert/>标签用来标记这块地方的内容会根据每一页变化。你可以用这个模板来创建其他的页面,并给menu和body区域提供不同的内容。
<!-- template-client.xhtml -->
<!-- content above will be trimmed -->
<ui:composition template="template.xhtml">
<ui:param name="title" value="Here's my Title"/>
<ui:define name="menu">Here's My Menu</ui:define>
<ui:define name="body">Here's My Body</ui:define>
</ui:composition>
<!-- content below will be trimmed -->
这个例子介绍了另外一个标签<ui:composition/>。该标签提供了一对特征。它删掉了它外面的任何内容,就是说,你可以写一些普通的HTML页面,而Facelets将只是用或者显示出现在<ui:composition/>标签里面的内容。使用这个标签,你同样可以选择提供一个模板的属性,该属性将定义内容如何或在哪里显示。
为了把内容和模板配对,<ui:define/>标签的name属性和模板中的<ui:insert/>标签的name属性一致的就可以替换。为了简便地传递变量或者文字,你可以使用<ui:param/>标签,该标签把其value属性作为模板中的一个变量来替代。
<!-- template.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:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Template</title>
</head>
<body>
<h1>Here's my Title</h1>
<div>Here's My Menu</div>
<p>Here's My Body</p>
</body>
</html>
前面的这个例子能够被更加简化,如果在模板中只有一个地方是可变的。
<!-- simple-template.xhtml -->
...
<body>
<h1>Title</h1>
<!-- editable body -->
<p><ui:insert/></p>
</body>
...
想要用上面模板的页面就可以简化成下面:
<!-- simple-template-client.xhtml -->
<ui:composition template="simple-template.xhtml">
Here's My Simple Body
</ui:composition>
使用Includes
页面中的位置这个概念在页面中定义可重用的内容是相当强大的。上面几个例子展示了如何使用模板中的位置来显示内容。但是如果你想从另一个页面中包含进来一些东西该如何做呢?可能这里有一系列的表单控件或者一个复杂的菜单,以至于你宁愿把它们分离到一个不同的文件中,以便重用或者单独管理而不用散乱在页面布局的各个角落。
总的来说,Facelets提供了两种包含位置或者其他页面的方法。第一种是用<ui:include/>标签,对于web开发人员来说,该标签应该是相当熟悉的:
<!-- include.xhtml -->
...
<span id="leftNav">
<ui:include src="/WEB-INF/siteNav.xhtml"/>
</span>
...
<!-- siteNav.xhtml -->
..
<ui:composition>
<!-- myfaces tomahawk components -->
<t:tree2 value="#{backingBean.options}" var="opt">
...
</t:tree2>
</ui:composition>
...
当Facelets处理include.xhtml时,siteNav.xhtml的所有<ui:composition/>中的内容
将被包含进include.xhtml:
<!-- include.xhtml -->
...
<span id="leftNav">
<!-- myfaces tomahawk components -->
<t:tree2 value="#{backingBean.options}" var="opt">
...
</t:tree2>
</span>
...
如果你愿意给siteNav.xhtml传递变量,这些变量供tree组件使用,那么你可以使用<ui:param/>标签:
<!-- include.xhtml -->
...
<span id="leftNav">
<ui:include src="/WEB-INF/siteNav.xhtml">
<ui:param name="menuBean" value="#{backingBean.options}"/>
</ui:include>
</span>
...
<!-- siteNav.xhtml -->
...
<ui:composition>
<!-- myfaces tomahawk components -->
<t:tree2 value="#{menuBean}" var="opt">
...
</t:tree2>
</ui:composition>
...
你能够看到现在siteNav.xhtml可以使用变量menuBean并且menuBean是通过<ui:include/>标签来传递的。这样使一些灵活的可重用的通用组件和内容成为了可能。
对于<ui:include/>
和<ui:param/>,
Facelets提供了一个更加简洁的解决方案,通过支持自定义标签。别急,你不需要自己写任何一点java代码。为了给siteNav.xhtml定制一个可重用的标签,你必须创建一个简单的XML标签库文件。
<facelet-taglib>
<namespace>">http://www.mycompany.com/jsf</namespace>
<tag>
<tag-name>siteNav.xhtml</tag-name>
<source>/WEB-INF/tags/siteNav.xhtml</source>
</tag>
</facelet-taglib>
除了在你的新标签库XML文件中制定Facelets外,你可能需要添加尽可能多的标签到新的标签库中。通过指定http://www.mycompany.com/jsf
作为命名空间
,你可以这样写:
<!-- include-tag.xhtml -->
...
<span id="leftNav">
<my:siteNav menuBean="#{backingBean.options}"/>
</span>
...
这个include-tag.xhtml例子和前面的include.xhtml例子效果一样。MenuBean的属性作为siteNav.xhtml的一个属性将生效,就像<ui:param/>传递的那样。
你的工程可能包括了一个jar文件,其中包括了所有的自定义标签库,或者只是简单的把自定义标签库放到了一个文件加里。更多的标签在Facelets Developer Documentation中详细描述。
分享到:
相关推荐
jsf-facelets-1.1.15.B1.jar
Facelets 非常适合 专为 JSF 设计的视图技术
在 JavaServer Faces (JSF) 2.0 中,Facelets 取代 JavaServer Pages (JSP) 成为默认的视图声明语言 (VDL)。有了 Facelets,您不需要像以前...在 Web 应用程序中使用 Facelets 的部分好处包括模板化、重用和易于开发。
Facelets模板语言是一种功能强大的模板语言,由Jakob Hookom于2005年开发,用于替代Java Server Pages(JSP)。 它非常适合将HTML片段包装为自定义标签并在以后重用。 今天,这个美丽的宝石隐藏在J2EE堆栈的深处。 ...
Facelets Essentials - APRESS
jar包,官方版本,自测可用
jsf-area-checker 网络第三功课(2门课程) :shushing_face: 基于JavaServer Faces框架的Web应用程序。 包含facelets-页面,管理bean和数据库。
jsf-facelets.jar 下载 希望对您有用
jsf-facelets1.1.9 目前最高版本 时间:2012年9月
jsf-facelets.jar 1.1.15.B1
Facelets ,very good
tomahawk-facelets Facelets 支持 Apache MyFaces Tomahawk 注意:从 1.1.7 版开始,Facelets 支持已集成到 Tomahawk 中。 我们建议您至少升级到此版本的 Tomahawk。 该库将不再积极维护。 但是,如果有人仍在使用它...
应用程序存档dddsample-1.0.0.war是在项目的根目录下创建的。 部署和运行 要将 Web 应用程序存档部署到 WildFly,首先将.war文件复制到目录: wildfly-10.1.0.Final/standalone/deployments 然后使用以下命令启动 ...
Aspect4Facelets扩展了facelets框架,使其能够AOP开发可插拔组件。
emacs和vim的按键绑定 将Ace会话保留到JSF支持bean: 代码折叠 滚动 设定选项 支持 用法 在facelets页面中,导入名称空间https://www.webarity.com/custom-comps/aceui 。 例如: <! DOCTYPE html PUBLIC "-//W3C...
Facelets 非常适合 JSF 最后,专为 JSF 设计的视图技术!...在这篇文章中,JSF 的热心支持者 Rick Hightower 介绍了关于 Facelets 他最喜欢的内容:容易的 HTML 样式的模板化和可重用的复合组件。
jsf_facelets 1.0.10版本
JavaEE5学习笔记13-JSF集成Facelets使用经验总结.
facelets中文初级+高级教程,另有facelets标签
facelets 简单教程,相信你一定会受益非浅。