Facelets 標籤參考

Facelets 標籤參考html

lxm翻譯自《Facelets Essentials: Guide to JavaServer™ Faces View Definition Framework 》java

不當之處歡迎指正。app

 

<ui:component/>

 

<ui:component> 標籤在 JSF 組件樹中插入一個 UIComponet 實例,並做爲全部它所包含的組件或內容片段的根節點。表格 1-4 列出它的屬性。ide

表格 1-4: <ui:component> 標籤屬性post

屬性名稱ui

必需this

描述spa

id翻譯

debug

和全部的組件同樣,能夠這它提供一個 id, 若是沒有設置, Facelets 將按照 JSF 的規則爲它建立一個。

binding

按照 JSF 的規範 , 這個屬性的做用是經過指向 Managed Bean 的一個屬性來引用 UIComponet 的實例 , 若是 Managed Bean 的這個個屬性沒有事先初始化, UIComponet 實例將惰性 (lazily) 被建立 .

 

這個標籤之外的內容將被編譯器忽略 , 所以不會顯示在視圖中。

 

這裏以及這裏之前的內容將被忽略

<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> 標籤屬性

屬性名稱

必需

描述

id

和全部的組件同樣,能夠這它提供一個 id, 若是沒有設置, Facelets 將按照 JSF 的規則爲它建立一個。

binding

按照 JSF 的規範 , 這個屬性的做用是經過指向 Managed Bean 的一個屬性來引用 UIComponet 的實例 , 若是 Managed Bean 的這個個屬性沒有事先初始化, UIComponet 實例將惰性 (lazily) 被建立 .

<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> 標籤屬性

屬性名稱

必需

描述

template

將在標籤開始和結束之間顯示的模板文件所在的路徑

 

<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> 標籤屬性

屬性名稱

必需

描述

template

將在標籤開始和結束之間顯示的模板文件所在的路徑

例子:

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> 標籤屬性

屬性名稱

必需

描述

name

必須和目標模板中 ui:insert 標籤的 name 屬性一致

舉例 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> 標籤屬性

屬性名稱

必需

描述

name

用來和客戶端模板中 ui:define 標籤的 name 屬性相一致 , 若是沒有指定,整個客戶端模板將被插入。

若是模板中某個 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> 標籤屬性

屬性名稱

必需

描述

src

屬性的值能夠是簡單的值或是 EL 表達式,用來指定被包含的 Faclets 文件的位置 , 能夠是相對路徑也能夠是絕對路徑。

舉例:

<div>

<ui:include src="#{backingBean.currentMenu}"/>

</div>

 http://www.javaeye.com/post/628412 hxzon:facelets6個模板標籤,4個非模板標籤,分別爲composition,decorate,define,insert,include,param,,,component,fragment,remove,debug。

相關文章
相關標籤/搜索