Struts2 主題和模板

開始本章的內(nèi)容學(xué)習(xí)之前，讓我們看看http://struts.apache.org給出的幾個(gè)定義：

術(shù)語	描述
tag（標(biāo)簽）	從JSP，F(xiàn)reeMarker或Velocity內(nèi)部執(zhí)行的一小段代碼。
template（模板）	一些代碼，通常是寫在FreeMarker上的，可以由某些標(biāo)簽（HTML標(biāo)簽）呈現(xiàn)。
theme（主題）	封裝在一起以提供公共功能的模板集合。

我們建議再回顧一下Struts2本地化/國(guó)際化（i18n）章節(jié)，因?yàn)槲覀儗⒃俅问褂猛瑯拥睦觼磉M(jìn)行練習(xí)。

當(dāng)你在Web頁面中使用Struts2 標(biāo)簽（如<s:submit...>，<s:textfield...>等）時(shí)，Struts2 框架會(huì)生成具有預(yù)配置樣式和布局的HTML代碼。Struts2 具有三個(gè)內(nèi)置主題：

Theme（主題）	描述
simple theme	沒有“bells and whistles”的最小主題。例如，textfield標(biāo)簽呈現(xiàn)HTML<input/>標(biāo)簽無標(biāo)記、驗(yàn)證、錯(cuò)誤報(bào)告或任何其他格式或功能。
xhtml theme	這是Struts 2使用的默認(rèn)主題，提供了simple theme具備的所有基礎(chǔ)，并添加了幾個(gè)功能，如HTML的標(biāo)準(zhǔn)兩列表布局、每個(gè)HTML的標(biāo)記、驗(yàn)證和錯(cuò)誤報(bào)告等。
css_xhtml theme	這個(gè)主題提供了simple theme具備的所有基礎(chǔ)，并添加了幾個(gè)功能，如基于CSS的標(biāo)準(zhǔn)兩列布局，對(duì)HTML Struts標(biāo)簽使用<div>，HTML Struts每個(gè)標(biāo)簽的標(biāo)記，根據(jù)CSS樣式表放置等。

如上所述，如果你不指定一個(gè)主題，那么Struts2 將默認(rèn)使用xhtml theme。例如這個(gè)Struts2選擇標(biāo)簽：

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

生成以下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文件中定義的action名稱。

選擇主題

你可以在每個(gè)Struts2 標(biāo)簽的基礎(chǔ)上指定主題，也可以使用以下方法之一指定Struts2 應(yīng)使用的主題：

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

• 標(biāo)簽的周邊表單標(biāo)簽的theme屬性

• 名為“theme”的頁面作用域?qū)傩?

• 名為“theme”的請(qǐng)求作用域?qū)傩?

• 名為“theme”的會(huì)話作用域?qū)傩?

• 名為“theme”的應(yīng)用程序作用域?qū)傩?

• struts.properties中的struts.ui.theme屬性（默認(rèn)為xhtml）

以下是在標(biāo)簽級(jí)別指定它們的語法，如果你愿意為不同的標(biāo)簽使用不同的主題：

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

因?yàn)樵诿總€(gè)標(biāo)簽的基礎(chǔ)上使用主題并不是很實(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é)果，我們?cè)?strong>struts-default.properties文件中使用了默認(rèn)主題，設(shè)置為struts.ui.theme=xhtml，該文件默認(rèn)情況下位于struts2-core.xy.z.jar文件中。

主題是如何工作的？

對(duì)于給定的主題，每個(gè)struts標(biāo)簽都有一個(gè)關(guān)聯(lián)的模板，如s:textfield -> text.ftl和s:password -> password.ftl等。這些模板文件壓縮在struts2-core.xy.z.jar文件中，它們?yōu)槊總€(gè)標(biāo)簽保留預(yù)定義的HTML布局。因此Struts2 框架使用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)建新主題的最簡(jiǎn)單方法是復(fù)制任何現(xiàn)有的theme/template文件，并進(jìn)行必要的修改。那么，讓我們?cè)赪ebContent/WEB-INF/classes中創(chuàng)建一個(gè)名為template的文件夾，以及一個(gè)以新主題名稱命名的子文件夾，例如WebContent/WEB-INF/classes/template/mytheme。從這里，你可以從頭開始構(gòu)建模板，或者你可以從Struts2 現(xiàn)有版本中復(fù)制模板，并根據(jù)需要修改它們。
出于學(xué)習(xí)的目的，我們將修改現(xiàn)有的默認(rèn)模板xhtml。那么現(xiàn)在先將內(nèi)容從struts2-core-x.y.z.jar/template/xhtml復(fù)制到我們的主題目錄，并只修改WebContent/WEB-INF/classes/template/mytheme/control.ftl文件。當(dāng)我們打開control.ftl時(shí)它會(huì)顯示以下幾行：

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

讓我們將以下內(nèi)容修改到上面的control.ftl文件中：

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

如果你查看form.ftl，你會(huì)發(fā)現(xiàn)它正在使用這個(gè)control.ftl文件，但form.ftl是從xhtml主題中引用這個(gè)文件。那么讓我們把它做如下修改：

<#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文件得到一個(gè)很好的想法。 不管怎樣，讓我們先保存以上更改，并返回到我們的本地化示例，創(chuàng)建具有以下內(nèi)容的WebContent/WEB-INF/classes/struts.properties文件：

# 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)在在此更改后，右鍵單擊項(xiàng)目名稱，然后單擊“Export”>“ WAR File”以創(chuàng)建WAR文件。然后在Tomcat的webapps目錄中部署WAR文件。最后，啟動(dòng)Tomcat服務(wù)器并嘗試訪問URL http://localhost:8080/HelloWorldStruts2。將顯示以下界面：

你可以看到窗體組件周圍的邊框，這是我們從xhtml主題復(fù)制之后在out主題中所做更改的結(jié)果。如果你稍微學(xué)習(xí)一下FreeMarker，那么就能夠非常容易地創(chuàng)建或修改你的主題。至少現(xiàn)在，你一定對(duì)Sturts2 主題和模板有了基本的了解，是嗎？