Facelets 標簽參考 1 -grule lxm翻譯自《Facelets Essentials: Guide to JavaServer? Faces View Definition Framework 》 不當之處歡迎指正。 <ui:component/><ui:component> 標簽在 JSF 組件樹(shù)中插入一個(gè) UIComponet 實(shí)例,并作為所有它所包含的組件或內容片斷的根節點(diǎn)。表格 1-4 列出它的屬性。 表格 1-4: <ui:component> 標簽屬性
這個(gè)標簽以外的內容將被編譯器忽略 , 因此不會(huì )顯示在視圖中。 這里以及這里以前的內容將被忽略 <ui:component binding="#{backingBean.myComponent}"> <div>The directory contains #{totalBirds} birds!</div> </ui:component> 這里以及這里后的內容將被忽略 產(chǎn)生的 Html 輸出為: The directory contains #{totalBirds} birds! <ui:fragment/><ui:fragment> 標簽相似,不同的是 <ui:fragment> 標簽外部的內容不會(huì )被忽略。下列表格列出它的屬性。 表格 : <ui:fragment> 標簽屬性
<ui:component> 標簽在 JSF 組件樹(shù)中插入一個(gè) UIComponet 實(shí)例,并作為標簽內部所有它所包含的組件或內容片斷的根節點(diǎn) , 標簽外部的內容編譯時(shí)會(huì )被包含進(jìn)來(lái)。 舉例: This will not be ignored <ui:fragment> <div> <h:outputText value="I want #{eagle.total} eagles."/> </div> </ui:fragment> This will not be ignored 產(chǎn)生輸出: This will not be ignored <div>I want 3 eagles.</div> This will not be ignored <ui:composition/><ui:composition> 標簽是一個(gè)模板標簽,它將一些可以被其它 Facelets 頁(yè)面所包含的內容封裝起來(lái)。表格 1-5 列出它的屬性。 表格 1-5: <ui:component> 標簽屬性
<ui:composition> 指定使用哪個(gè)模版文件,然后通過(guò) <ui:define> 對模版文件中每個(gè)可供插入的“ <ui:insert> 錨點(diǎn)”進(jìn)行定義。 在運行期,具體的內容將會(huì )被插入到 <ui:composition> 中定義的錨點(diǎn)位置。 和 ui:component 一樣,這個(gè)標簽以外的內容將被編譯器忽略 , 不會(huì )顯示在視圖中 , 和 ui:component 不同的是, ui:composition 不會(huì )在組件樹(shù)上創(chuàng )建節點(diǎn)。 這里以及這里以前的內容將被忽略 <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"> 的定義。 創(chuàng )建一個(gè)組合視圖主要使用 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> 這個(gè)例子輸出 : Which bird sings like this? cock-a-doodle-doo <ui:insert/>ui:insert 標簽用來(lái)在模板中指定一個(gè)插入點(diǎn),可以被客戶(hù)端模板中 ui:define 定義的內容所代替。 表格 1-8 列出它的屬性。 表格 1-8: <ui:insert> 標簽屬性
如果模板中某個(gè) insert 標簽在客戶(hù)端模板中沒(méi)有定義對應的 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> 我們需要一個(gè)客戶(hù)端模板 , 如下: 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 屬性是可選的,如果沒(méi)有被指定,整個(gè)客戶(hù)端模板將被插入。也沒(méi)必須要客戶(hù)端模板定義 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/> 標簽用來(lái)在文件中包含另外一個(gè) Facelets 文件 , 它只需要指定被包含文件的位置。它可以包含任何擁有 ui:component 或 ui:composition 等標簽或是簡(jiǎn)單的 XHTML 或 XML 代碼片斷的文件。下列表格列出它的屬性。 表格 : <ui:include> 標簽屬性
舉例: <div> <ui:include src="#{backingBean.currentMenu}"/> </div> http://www.javaeye.com/post/628412 原文 |
聯(lián)系客服