Facelets介绍,第三部分

最新推荐文章于 2024-04-25 14:23:29 发布

leeshaoqun

最新推荐文章于 2024-04-25 14:23:29 发布

阅读量3.4k

点赞数

分类专栏： jsf 文章标签： ui components tree jsf xhtml include

jsf 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

原文：http://www.jsfcentral.com/articles/facelets_3.html

译：JSF-OPENDOC team的巨土无比

这是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属性作为模板中的一个变量来替代。

当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>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中详细描述.

leeshaoqun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Facelets介绍,第三部分

原文：http://www.jsfcentral.com/articles/facelets_3.html译：JSF-OPENDOC team的巨土无比这是Facelets系列文章中的第三部分，是用另外一种视图技术来创建JSF应用。Facelets是一个强大的模板化系统，它能让你用HTML风格的模板来定义JSF视图，并能够减少那些适合于集成在视图中的组件的代码数量，而且不需要web容器。这
复制链接

扫一扫