OFBiz對視圖模闆使用裝飾器screen widget。這裡單詞“裝飾器”來它基于的自設計模式——裝飾器模式,這裡裝飾器在要包裝的對象周圍包裝它自己。這種設計模式本身很适合我們模闆的需要,因為一個裝飾器将作為一個帶有“插槽”的模闆,在其中我們能插入(包含,在screen widget術語中)内容。也就是說,裝飾器用内容塊包圍來包裝自己。
1.建立XHTML裝飾器screen
插入一個新的screen widget 名為xhtml-decorator的screen widget到檔案 LearningScreens.xml中:
---------------------------------------------------
<screen name="xhtml-decorator">
<section>
<widgets>
<include-screen name="header"/>
<decorator-section-include name="body"/>
<include-screen name="footer"/>
</widgets>
</section>
</screen>
---------------------------------------------------
注意這跟CompoundedScreen很像,除了所有的内容被 <decorator-section-include>元素替換掉了。 <decorator-section-include>就像一個命名的内容插槽。該元素告訴裝飾器在header和footer之間插入名為body的内容片斷。
實際上内容片斷可被命名意味着:在一個包含不同内容片斷的裝飾器中,我們能有多個插槽。簡而言之,一個裝飾器視窗可指定命名的内容插槽,相同命名的内容片斷可插入包含進其中。現在,在下面的例子中試試一個單一插槽的裝飾器吧。
2.使用XHTML裝飾器screen
在檔案LearningScreens.xml中,編輯screen widget CompoundedScreen來使用screen widget xhtml-decorator:
---------------------------------------------------
<screen name="CompoundedScreen">
<section>
<widgets>
<decorator-screen name="xhtml-decorator">
<decorator-section name="body">
<include-screen name="SimplestScreen" />
<include-screen name="AnotherSimpleScreen" />
</decorator-section>
</decorator-screen>
</widgets>
</section>
</screen>
---------------------------------------------------
<decorator-screen>元素指出:我們想要應用xhtml-decorator裝飾器screen到包含在<decorator-screen>元素中的内容。
為了讓 <decorator-screen>元素擁有任何效果,需要用 <decorator-section> 元素指定命名的内容片斷。盡管上面例子中僅展示一個,但可有多個命名的内容片斷。命名的内容片斷取代裝飾器中命名的内容插槽。
上面例子中的命名内容片斷body是一個兩個簡單screens的複合體。這兩個簡單screens将插入到裝飾器的命名内容插槽body中。
3.檢視結果
發送OFBiz http請求CompoundedScreen到web應用learning http://localhost:8080/learning/control/CompoundedScreen。檢視頁面源代碼來确認和我們在叫做候選模闆的部分中看到的相同的格式良好的XHTML文檔。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#CompoundedScreen -->
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#xhtml-decorator -->
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#header -->
<!-- Begin Template component://learning/webapp/learning/includes/header.ftl -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OFBiz XHTML Document</title>
</head>
<body><!-- End Template component://learning/webapp/learning/includes/header.ftl -->
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#header -->
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#SimplestScreen -->
Simplest Screen possible in OFBiz!
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#SimplestScreen -->
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#AnotherSimpleScreen -->
Just Another Simple Screen.
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#AnotherSimpleScreen -->
<!-- Begin Screen component://learning/widget/learning/LearningScreens.xml#footer -->
<!-- Begin Template component://learning/webapp/learning/includes/footer.ftl -->
</body>
</html><!-- End Template component://learning/webapp/learning/includes/footer.ftl -->
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#footer -->
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#xhtml-decorator -->
<!-- End Screen component://learning/widget/learning/LearningScreens.xml#CompoundedScreen -->
頁面源碼顯示了我們第一個格式良好版本的CompoundedScreen中相同内容。我們使用了一個單一裝飾器(xhtml-decorator)來取代兩個<include-screen>元素,它們負責建立我們的格式良好的XHTML文檔中的頭部和底部。