6.5 模板和主題的原理與方法

前文已經介紹過關于模板和主題的概念，本節中將討論模板和主題的原理與方法，以及如何開發自己的模板和主題。

6.5.1 模板裝載

Struts2的模板默認情況下總是FreeMarker模板（在以前的WebWork中是Velocity）。標簽模板裝載方式：首先搜索Web應用程序，然后搜索classpath。這和其他FreeMarker文件的加載方式一樣，例如在result中可以配置使用FreeMarker作為結果頁面。

模板是基于主題和模板目錄來裝載的。模板目錄使用struts.ui.templateDir屬性，在struts.properties里來定義（默認是_template_）。這意味著，如果一個標簽使用了ajax主題，下面的兩個位置將會被搜索（按照順序）：

1）在Web應用中：/template/ajax/template.ftl。

2）在classpath里：/template/ajax/template.ftl。

Struts2自帶的模板都包含在Struts2的jar (classpath) 中，可能會發現有些情況需要覆蓋（override）特定的模板來為應用提供獨特的功能。例如，可能希望改變select標簽的輸出，與其創建一個全新的模板并改變每個使用那個模板的標簽，可以覆蓋內置的select.ftl模板，只要從jar文件里面復制這個文件到一個新的/template/xhtml/select.ftl目錄中，在此基礎上修改就可以了。

Struts2提供3種模板引擎，可以通過struts.properties中的struts.ui.templateSuffix屬性控制：

?ftl（默認）：基于FreeMarker的模板引擎。

?vm：基于Velocity的模板引擎。

?jsp：基于JSP的模板引擎。

如果選擇了使用vm或者JSP ，必須自己完全實現模板和主題，這是很大量的工作，參考圖6.8。

6.5.2 選擇主題

主題可以使用不同的規則來選擇，按照下面的順序：

1）特定標簽上的主題屬性。例如：

<s:textfield label="%{getText("state.label")}" name="state" theme="sample"/>

2）一個標簽外圍的form標簽的主題屬性。

可以簡單地改變form的theme屬性來覆蓋整個表單的主題設置。這可以輕松地在幾個選擇的地方使用ajax主題。

3）page會話范圍內的以theme為名稱的屬性。

4）request會話范圍內的命名為theme的屬性。可以基于用戶的request來改變主題。如果根據請求的不同而改變結果頁面的風格，這可能很有用。

5）session會話范圍內的命名為theme的屬性。可以基于用戶的session來改變theme。如果需要用戶能個性化他們的界面感觀時，每個用戶可以自定義自己的風格，這可能很有用。

6）application會話范圍內的命名為theme的屬性。

7）struts.properties內的struts.ui.theme屬性（默認是xhtml）。

如果想要改變整個應用的主題，調整struts.properties。主題的選擇可參考圖6.14所示。

6.5.3 Struts2自帶主題

Struts2自帶了4種主題，可以根據需要來選擇不同的主題，甚至同一個網頁中使用多個主題。

1. simple主題

simple主題提供了“不加渲染”的HTML元素支持，被認為是底層的結構，可以用來構建附加的功能或者行為。例如，textfield標簽輸出HTML<input/>標簽，不帶額外的label，校驗錯誤報告或者其他東西。如果需要額外的行為，請瀏覽xhtml主題。

2. xhtml主題

xhtml主題是Struts2的默認主題。它提供了所有simple主題提供的基本要素，xhtml主題使用了包裝技術，還加上一些附加的特性：

? 標準的兩列表格布局，針對HTML Tags（form、textfield、select等）。

? 每個HTML Tags的label，可以在左邊或者上邊，依賴labelposition屬性的設置。

? 校驗錯誤報告。

? 純JavaScript客戶端校驗在瀏覽器上使用100%的JavaScript。

3. css_xhtml主題

css_xhtml主題除了提供所有simple主題提供的所有基本元素外，還提供了這些額外的特性：

? 標準的兩列基于CSS的布局，使用<div>方式來設置HTML標簽（form、textfield、select等）。

? 為每個HTML標簽設置label，根據CSS的設置決定位置。

? 校驗錯誤報告。

? 純JavaScript客戶端校驗在瀏覽器上使用100%的JavaScript。

4. AJAX主題

AJAX主題擴展了xhtml主題，在它的父主題提供的每件事情之上提供了AJAX特性。這個主題使用了兩個流行的AJAX/JavaScript庫：Dojo和DWR。

Dojo是一個非常強大的、面向對象的、開源的JavaScript工具箱。它為開發Web胖客戶端程序提供了一套完整的Widget和一些特效操作。

DWR全稱Direct Web Remoting，是一個Web遠程調用框架。利用這個框架可以讓AJAX開發變得很簡單。利用DWR可以在客戶端利用JavaScript直接調用服務端的Java方法并返回值給JavaScript，就好像直接由本地客戶端調用一樣。

AJAX主題帶來的AJAX特性包括：

? AJAX客戶端校驗。

? Remote form提交支持（最好和submit標簽一起工作）。

? 一個高級的div模板提供了動態裝載部分HTML的功能。

? 一個高級的a模板提供了加載并執行遠端的JavaScript的能力。

? 一個僅支持AJAX的tabbedPanel實現。

? 一個“富”的pub-sub事件模型。

這4種主題的關系如圖6.15所示。

6.5.4 自定義主題

有時可能想要在一個已存在的主題里簡單地覆蓋一個模板，如前面講述的模板裝載介紹的或者創建一個可選的模板。然而其他時候可能想要創建自己的整個主題，特別是計劃為組織構建一個豐富的、唯一的并且可復用的一套模板時。

有3種方法來創建一個新的主題：

? 白手起家，從頭創建一個新的主題（困難）。

? 擴展一個已存在的主題。

? 包裝一個已存在的主題。

（1）包裝一個存在的主題

xhtml主題中廣泛引用了wrapping (包裝)技術。例如，一個模板可能是這樣的：

<#include "/${parameters.templateDir}/xhtml/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/xxx.ftl" />
<#include "/${parameters.templateDir}/xhtml/controlfooter.ftl" />

這個模板簡單地使用一個header和一個footer包裝了simple主題的已存在的模板。這是一種強大的方法，在simple主題提供的基本的HTML元素外圍增加額外的行為。

（2）擴展一個存在的主題

Struts2提供的主題基礎設施也允許主題來擴展一個存在的主題。這意味著一個主題可以包含一個theme.properties，其中有一個parent設置，包含了想要擴展的主題的名字。例如，AJAX主題就是用這種方式擴展xhtml主題的。

擴展一個主題，不需要實現Ta g s里用到的每個模板。也就是說，只需要實現希望覆蓋的模板，其他的模板將從parent模板中裝載。