锁定老帖子 主题:Facelets 标签参考1
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
作者 | 正文 | ||||||||||||||||||||||||||||||||||||||||||||||||
发表时间:2008-08-11
Facelets 标签参考 lxm翻译自《Facelets Essentials: Guide to JavaServer™ Faces View Definition Framework 》 不当之处欢迎指正。
<ui:component/>
<ui:component> 标签在 JSF 组件树中插入一个 UIComponet 实例,并作为所有它所包含的组件或内容片断的根节点。表格 1-4 列出它的属性。 表格 1-4: <ui:component> 标签属性
这个标签以外的内容将被编译器忽略 , 因此不会显示在视图中。
这里以及这里以前的内容将被忽略 <ui:component binding="#{backingBean.myComponent}"> <div>The directory contains #{totalBirds} birds!</div> </ui:component> 这里以及这里后的内容将被忽略
产生的 Html 输出为: The directory contains #{totalBirds} birds!
<ui:fragment/><ui:fragment> 标签相似,不同的是 <ui:fragment> 标签外部的内容不会被忽略。下列表格列出它的属性。 表格 : <ui:fragment> 标签属性
<ui:component> 标签在 JSF 组件树中插入一个 UIComponet 实例,并作为标签内部所有它所包含的组件或内容片断的根节点 , 标签外部的内容编译时会被包含进来。 举例: This will not be ignored <ui:fragment> <div> <h:outputText value="I want #{eagle.total} eagles."/> </div> </ui:fragment> This will not be ignored 产生输出: This will not be ignored <div>I want 3 eagles.</div> This will not be ignored
<ui:composition/><ui:composition> 标签是一个模板标签,它将一些可以被其它 Facelets 页面所包含的内容封装起来。表格 1-5 列出它的属性。 表格 1-5: <ui:component> 标签属性
<ui:composition> 指定使用哪个模版文件,然后通过 <ui:define> 对模版文件中每个可供插入的“ <ui:insert> 锚点”进行定义。 在运行期,具体的内容将会被插入到 <ui:composition> 中定义的锚点位置。 和 ui:component 一样,这个标签以外的内容将被编译器忽略 , 不会显示在视图中 , 和 ui:component 不同的是, ui:composition 不会在组件树上创建节点。
这里以及这里以前的内容将被忽略 <ui:composition> <h:outputText value="#{bird.lifeExpectancy}" /> </ui:composition> 这里以及这里后的内容将被忽略
例如 : <ui:composition template="bird-template.xhtml"> <ui:define name="title">Input Name</ui:define> <ui:define name="summary"> <h:panelGrid columns="2"> <h:outputText value="Bird Name"/> <h:outputText value="#{bird.name}"/> 34 Facelets Essentials <h:outputText value="Life expectancy"/> <h:outputText value="#{bird.lifeExpectancy}"/> </h:panelGrid> </ui:define> </ui:composition>
这样 composition 标签内的内容按 bird-template.xhtml 模板文件的定义显示 , 模板文件中中必须有 <ui:insert name="title"> 和 <ui:insert name="summary"> 的定义。 创建一个组合视图主要使用 ui:composition, ui:define 和 ui:insert 标签。
<ui:decorate/><ui:decorate> 标签和 <ui:composition> 标签相似,唯一不同的是它不忽略标签外部的内容。 表格 1-6 列出它的属性。 表格 1-6: <ui:decorate> 标签属性
例子: Listing 1-10. box-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"> 36 Facelets Essentials <body> <ui:composition> <div style="border: 1px solid black; display:block"> <ui:insert name="header"/> </div> <div style="border: 1px solid black; display:block"> <ui:insert name="content"/> </div> </ui:composition> </body> </html>
Listing 1-11. decorate-example.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" xmlns:h="http://java.sun.com/jsf/html"> <head> <title>Decorate example</title> </head> <body> <p>These are the birds in today's menu:</p> <ui:decorate template="box-template.xhtml"> <ui:define name="header"> Happy Parrot </ui:define> <ui:define name="content"> How many parrots do you want? <h:inputText value="3"/> </ui:define> </ui:decorate> <br/> <ui:decorate template="box-template.xhtml"> <ui:define name="header"> Mighty Eagle </ui:define> <ui:define name="content"> Eagles are not available now. </ui:define> </ui:decorate> </body> </html>
html 输出内容 : <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Decorate example</title> </head> <body> <p>These are the birds in today's menu:</p> <div style="border: 1px solid black; display:block"> Happy Parrot </div> <div style="border: 1px solid black; display:block"> How many parrots do you want? <input id="_id6" name="_id6" type="text" value="3" /> </div> <br/> <div style="border: 1px solid black; display:block"> Mighty Eagle </div> <div style="border: 1px solid black; display:block"> Eagles are not available now. </div> </body> </html>
<ui:define/>ui:define 标签用于将命名的内容插入到模板中 , 它在模板标签(如 composition 和 decorate )的内部使用。 Define 的 name 属性必须和目标模板中 ui:insert 标签的 name 属性一致。表格 1-7 列出它的属性。 表格 1-7: <ui:define> 标签属性
举例 1: <ui:decorate template="box-template.xhtml"> <ui:define name="header"> Happy Parrot </ui:define> this will be removed <ui:define name="content"> How many parrots do you want? </ui:define> </ui:decorate> define 标签内部的内容将被插入到目标模板中 name 相同的 insert 标签处。 define 标签外部的内容将被忽略。 举例 2: Listing 1-12. define-template.xhtml <h:outputText value="Which bird sings like this? "/> <ui:insert name="song"/> define-example.xhtml This will be ignored <ui:composition template="define-template.xhtml"> <ui:define name="song"> <h:outputText value="cock-a-doodle-doo"/> </ui:define> </ui:composition> 这个例子输出 : Which bird sings like this? cock-a-doodle-doo <ui:insert/>ui:insert 标签用来在模板中指定一个插入点,可以被客户端模板中 ui:define 定义的内容所代替。 表格 1-8 列出它的属性。 表格 1-8: <ui:insert> 标签属性
如果模板中某个 insert 标签在客户端模板中没有定义对应的 define ,则使用模板中的默认值。 Listing 1-13. insert-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"> <body> <h1> <ui:insert name="title"> No title </ui:insert> </h1> <div> <ui:insert name="content"> No content is defined </ui:insert> </div> </body> </html> 我们需要一个客户端模板 , 如下: Listing 1-14. insert-client.xhtml <ui:composition template="insert-template.xhtml"> <ui:define name="title"> The Parrot Quest </ui:define> </ui:composition> 我们只定义了 title 的内容,所以 content 使用默认值。输出如下: <h1> The Parrot Quest </h1> <div> No content is defined </div> name 属性是可选的,如果没有被指定,整个客户端模板将被插入。也没必须要客户端模板定义 define 。如下: Listing 1-15. insert-template2.xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD ¬ HTML 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"> <body> <div> <h1>One story of Birds</h1> <ui:insert/> </div> </body> </html> Listing 1-16. insert-client2.xhtml <ui:composition template="insert-template2.xhtml"> One day I decided to start counting the number of parrots in the world, just to find that... <br/> <h:inputTextarea value="#{backingBean.story}"/> </ui:composition> 输出如下: <div> <h1>One story of Birds</h1> One day I decided to start counting the number of parrots in the world, just to find that... <br /> <textarea name="_id3"></textarea> </div>
<ui:include/><ui:include/> 标签用来在文件中包含另外一个 Facelets 文件 , 它只需要指定被包含文件的位置。它可以包含任何拥有 ui:component 或 ui:composition 等标签或是简单的 XHTML 或 XML 代码片断的文件。下列表格列出它的属性。 表格 : <ui:include> 标签属性
举例: <div> <ui:include src="#{backingBean.currentMenu}"/> </div>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|||||||||||||||||||||||||||||||||||||||||||||||||
返回顶楼 | |||||||||||||||||||||||||||||||||||||||||||||||||
浏览 5022 次