主題/模板

在開始本章教程之前，讓我們看幾個(gè) http://struts.apache.org 給出的定義：

我還建議瀏覽 Struts 2 本地化 章節(jié)，因?yàn)槲覀儠俅尾捎孟嗤睦觼硗瓿晌覀兊膶?shí)踐。

當(dāng)你在你的 web 頁面上使用一個(gè) Struts 2 標(biāo)簽時(shí)，如 ， 等，Struts 2 框架會生成 HTML 代碼和預(yù)配置的樣式及布局。Struts 2 有三種內(nèi)置的主題：

正如上面提到的，如果你沒有指定一個(gè)主題，那么 Struts 2 會使用默認(rèn)的 xhtml 主題。例如這個(gè) Struts 2 選擇標(biāo)簽：

<s:textfield name="name" label="Name" />

產(chǎn)生如下所示的 HTML 標(biāo)記：

<tr>
<td class="tdLabel">
   <label for="empinfo_name" class="label">Name:</label>
</td><td>
   <input type="text" name="name" value="" id="empinfo_name"/>
</td>
</tr>

這里 empinfo 是在 struts.xml 文件中定義的操作名。

選擇主題

你可以在每個(gè) Struts 2 標(biāo)簽基礎(chǔ)上選擇主題或者你可以使用下述方法中的一個(gè)來指定 Struts 2 要用的主題：

• 特定標(biāo)簽上的主題屬性

• 在標(biāo)簽的環(huán)繞表單標(biāo)簽上的主題屬性

• 命名為“主題”的限定頁面范圍的屬性

• 命名為“主題”的限定請求范圍的屬性

• 命名為“主題”的限定會話范圍的屬性

• 命名為“主題”的限定應(yīng)用范圍的屬性

• 在 struts.properties 中的 struts.ui.theme 屬性 (xhtml 的默認(rèn)值)

如果你不想為不同的標(biāo)簽使用不同的主題，以下是在標(biāo)簽級別指定一個(gè)主題的語法：

<s:textfield name="name" label="Name" theme="xhtml"/>

由于在每個(gè)標(biāo)簽上都使用主題是不太實(shí)際的，所以簡單來說，我們可以使用下列標(biāo)簽在 struts.properties 文件中指定規(guī)則：

# Standard UI theme
struts.ui.theme=xhtml
# Directory where theme template resides
struts.ui.templateDir=template
# Sets the default template type. Either ftl, vm, or jsp
struts.ui.templateSuffix=ftl

以下是我們從本地化章節(jié)中選取的結(jié)果，我們使用了默認(rèn)的主題并設(shè)置了 struts-default.properties 文件中的 struts.ui.theme=xhtml，該文件是 struts2-core.xy.z.jar 文件中默認(rèn)的。

http://wiki.jikexueyuan.com/project/struts-2/images/helloworldstruts14.gif" alt="" />

主題怎樣工作？

對于一個(gè)給定的主題，每一個(gè) struts 標(biāo)簽都有一個(gè)相關(guān)的模板，如 s:textfield -> text.ftl 和 s:password -> password.ftl 等。這些模板文件壓縮到 struts2-core.xy.z.jar 文件中。這些模板文件為每個(gè)標(biāo)簽保存一個(gè)預(yù)定義的 HTML 布局。所以 Struts 2 框架用 Sturts 標(biāo)簽和相關(guān)的模板生成最終的 HTML 標(biāo)記代碼。

Struts 2 tags + Associated template file = Final HTML markup code.

默認(rèn)的模板已經(jīng)被寫入 FreeMarker 中并且它們有擴(kuò)展版本 .ftl。你可以使用 velocity 或 JSP 來設(shè)計(jì)自己的模板，因此可以使用 struts.ui.templateSuffix 和 struts.ui.templateDir 在 struts.properties 中設(shè)置配置。

創(chuàng)建新的主題

創(chuàng)建新主題的最簡單的方式是復(fù)制任何現(xiàn)存的主題/模板文件并做一些必需的修改。所以讓我們以在 WebContent/WEB-INF/classes 中創(chuàng)建一個(gè)命名為 template 的文件夾開始，并創(chuàng)建一個(gè)我們的新的主題命名的子文件夾，如 WebContent/WEB-INF/classes/template/mytheme。從這里開始，你可以構(gòu)建模板，或者你可以從 Struts2 發(fā)行版中復(fù)制模板并根據(jù)需要修改它們。

處于學(xué)習(xí)的目的，我們要修改一些現(xiàn)存的默認(rèn)的模板 xhtml。所以現(xiàn)在讓我們復(fù)制 struts2-core-x.y.z.jar/template/xhtml 的內(nèi)容到我們的主題目錄中并只修改 WebContent/WEB-INF/classes/template/mytheme/control.ftl 文件。當(dāng)我們打開 control.ftl 時(shí)，它會有如下所示的行：

<table class="${parameters.cssClass?default('wwFormTable')?html}"<#rt/>
<#if parameters.cssStyle??> style="${parameters.cssStyle?html}"<#rt/>
</#if>
>

讓我們修改上述文件 control.ftl，使得它包含以下內(nèi)容：

<table style="border:1px solid black;">

如果你檢查 form.ftl，你會發(fā)現(xiàn) control.ftl 正在該文件中使用，而 form.ftl 文件正在從 xhtml 主題引用該文件。所以讓我們做出如下所示的修改：

<#include "/${parameters.templateDir}/xhtml/form-validate.ftl" />
<#include "/${parameters.templateDir}/simple/form-common.ftl" />
<#if (parameters.validate?default(false))>
  onreset="${parameters.onreset?default('clearErrorMessages(this);\
  clearErrorLabels(this);')}"
<#else>
  <#if parameters.onreset??>
  onreset="${parameters.onreset?html}"
  </#if>
</#if>
>
<#include "/${parameters.templateDir}/mytheme/control.ftl" />

我假設(shè)你不太理解 FreeMarker 模板語言，但是你仍然能知道通過瀏覽 .ftl 文件需要做什么。但是，讓我們保存上述改變，然后回到我們的本地化實(shí)例中，并創(chuàng)建 WebContent/WEB-INF/classes/struts.properties 文件，其內(nèi)容如下所示：

# Customized them
struts.ui.theme=mytheme
# Directory where theme template resides
struts.ui.templateDir=template
# Sets the template type to ftl.
struts.ui.templateSuffix=ftl

現(xiàn)在，做出改變之后，鼠標(biāo)右鍵單擊項(xiàng)目名，點(diǎn)擊 Export > WAR File 來創(chuàng)建一個(gè) War 文件。然后將這個(gè) WAR 文件部署到 Tomcat 的 web 應(yīng)用程序目錄中。最后，啟動 Tomcat 服務(wù)器并嘗試訪問 URL http://localhost:8080/HelloWorldStruts2。這將顯示如下所示的畫面：

http://wiki.jikexueyuan.com/project/struts-2/images/helloworldstruts19.gif" alt="" />

你可以在表單組件的周圍看到一個(gè)邊界，這是從 xhtml 主題中復(fù)制主題并做出改變的結(jié)果。如果你沒有學(xué)習(xí) FreeMarker，那么你可以很容易的創(chuàng)建或修改你的主題。至少現(xiàn)在你對 Sturts 2 主題和模板有一個(gè)基本的了解，不是嗎？