Struts2 官方教程：主题（Themes）

介绍

当读者在自己的网页中使用类似s:select的Struts2标记时，Struts2框架生成了HTML，对select规定了样式，控制了布局。特定标记的样式和布局，由被设置用在此标记的Struts2主题所决定。Struts2自带三个内建主题：simple，xhtml，以及css_xhtml。如果希望指定主题，Struts2会使用xhtml主题作为默认选项。
例如：Struts2 的select标记：

Struts2的select标记

<s:select key="personBean.sport" list="sports" />

生成了以下的HTML内容：

由Struts2 select标记生成的HTML

<tr>
    <td class="tdLabel">
        <label for="save_personBean_sport" class="label">Favorite sport:</label>
    </td>
    <td>
        <select name="personBean.sport" id="save_personBean_sport">
            <option value="football">football</option>
            <option value="baseball">baseball</option>
            <option value="basketball" selected="selected">basketball</option>
        </select>
    </td>
</tr>

注意，当前生成的HTML使用table标记来控制标记和select代码的布局。同时也存在一个tdLabel类，应用到表中label标记被渲染的列。因为没有指定对Struts2的select标记，所以默认的xhtml主题被使用。

指定Struts2应当使用的主题

Struts2标记拥有主题（theme）属性，读者可以用来指定在为这些标记创建HTML时，应当被使用的Struts2主题。主题属性的取值有simple，xhtml，css_xhtml以及ajax。访问主题和模板文档以获知更多信息。ajax主题是用于ajax操作的特定主题（具体请看Ajax主题。
读者可以为每个Struts2标记指定主题，或者可以使用以下方法之一来指定Struts2应当使用的主题：
1.特定标记中的theme属性
2.特定标记所在form标记的theme属性
3.作用域为页面的“theme”属性
4.作用于为请求的“theme”属性
5.作用于为会话的“theme”属性
6.作用于为应用的“theme”属性
7.在struts.properties文件中的truts.ui.theme属性（默认是xhtml）
查看选择主题来获知如何使用上述方式设置主题。
在示例应用中，检查edit.jsp。表单form标记的theme属性被设置为xhtml。运行应用，并且在浏览器渲染edit.jsp之后，查看页面源代码。读者将会看到，被table标记所控制的，form的HTML标记布局。
为form的theme属性改变为simple，并且重新运行应用。检查edit.jsp在渲染后的源码。应当看到，没有tables标签控制布局了，文本域也没有label标记。
将form的theme属性改变为css_xhtml并且重新运行应用。检查edit.jsp在渲染后的源码。form标记的布局现在被div标记控制，label标记也再度回归。

指定被Struts2标记使用的CSS

将form标记的主题属性再改回xhtml。注意到，当读者查看edit.jsp渲染后的源码时，会有个名为tdLabel的类，应用到表格列，包含了标签。这个CSS类控制了label在表格列中的位置。tdLabel样式在 /themes/struts/xhtml/styles.css 中定义。当读者添加 s:head 标记到edit.jsp中时，到这个样式表的链接在edit.jsp的head区域中被引入。
在浏览器中加载样式表（本示例中，是访问链接 http://localhost:8080/themes/struts/xhtml/styles.css），将会看到如下信息：

styles.css

.label {font-style:italic; }
.errorLabel {font-style:italic; color:red; }
.errorMessage {font-weight:bold; color:red; }
.checkboxLabel {}
.checkboxErrorLabel {color:red; }
.required {color:red;}
.tdLabel {text-align:right; vertical-align:top; }

那么，.label选择器用italic字体渲染了label标记的文本。.tdLabel 标记指定文本在表格的列中应当居右并居顶。
可以通过在页面的head区域中引入相同的选择器，来重写上述的选择器。例如，将以下代码添加到edit.jsp的head区域：

重写Label样式

<style type="text/css">
    .label {color:blue; font-style:normal; font-weight:bold}
</style>

现在，label标记会用蓝色、加粗、normal样式所渲染。

为Struts2标记创建及应用定制主题

主题模板（simple，xhtml，css_xhtml）可以在Struts2 的核心jar文件中找到。如果将Struts2的core jar文件解压缩，会看到名为template.css_xhtml，template.simple，template.xhtml的路径。这些路径包含了这三个Struts2默认主题的模板。每个路径中，有一个用于每个Struts2标记的文件。例如，如果解压了template.xhtml路径，会看到select.ftl文件。
Struts2框架使用FreeMarker模版引擎来为Struts2标记生成HTML，这是文件扩展名为“.ftl”的原因。可以访问freemarker来获得更多信息。
在temple.xhtml路径下，一样也有styles.css文件。如果读者使用xhtml主题，这就是会被读者应用所加载的样式文件。
在示例应用中，作者已经解压缩了默认的XHTML主题（查看在src/main/resources/template/KUTheme的文件theme.properties）。checkboxlist.ftl主题是XHTML主题的一部分，在每个标签和下一个勾选框之间仅包含了一个空格（查看Struts2 core的template/simple路径下checkboxlist.ftl文件）。这是勾选框随着浏览器窗口宽度显示的原因。对于作者定制的勾选框主题，作者希望在每个label标记之后有一个break标记，这样每个勾选框和它的label会在它们的一行内。
在示例应用中，有一个名为 src/main/resources/template/KUTheme 的路径。在这个路径下有checkboxlist.flt，内容是作者原原本本地从Struts2 core的jar包中，templates.xhtml路径下的checkboxlist.ftl复制而来。随后，作者把KUTheme中的checkboxlist.ftl编辑成如下内容：

编辑后的checkboxlist.ftl

<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" />

<#include "/${parameters.templateDir}/KUTheme_simple/checkboxlist.ftl" />

<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl" /><#nt/>

一定要注意到第二行的变动——路径中使用的“ KUTheme_simple”。
现在，作者在示例应用的 src/main/resources/template下，创建了一个KUTheme_simple路径（读者也可以将它放在 webapp 路径下，例如 src/main/webapp/template）。在这个创建的路径里，作者创建了文件checkboxlist.ftl，并且内容是从template.simple下的checkboxlist.ftl中复制过来的。复制之后，作者编辑了checkboxlist.ftl的内容，让label标记拥有了红色加粗文本样式，并且作者在每个label后添加了一个break标记，这样每个勾选框和对应的label会在自己的行内。
因为XHTML主题是默认主题，并且作者有一个theme.properties文件，定义了parent=xhtml，那么KUTheme会从xhtml继承所有的主题、除了checkboxlist标记，因为作者自己的KUTheme包含了对这个标记的布局定义。在struts.xml 文件（src/main/resources）中，可以看到作者已经指定了默认主题为KUTheme。
在使用了Struts2的网页应用中，Struts2会先在应用的类路径下寻找标记的模板。如果没有找到模板，那么会使用Struts2 core jar包中默认的模板。因为已经添加了一个模板路径到应用的web根路径下，现在Struts2创建显示checkboxlist标记的HTML，会使用在KUTheme路径下的模板（这个文件告诉Struts2使用KUTheme_simple路径下的checkboxlist.ftl来代替template.simpole路径下的checkboxlist.ftl文件）。
在重新启动应用后，勾选框们会变成现在这个样子：（截图略）

总结

读者可以轻松地重写默认被Struts2所使用的主题,来控制Struts2标记的外观和布局。每个Struts2标记有一个关联的模板文件（例如select.ftl），放在名为对应主题的路径下（例如xhtml）。默认地，Struts2框架会在Struts2 core Jar包文件中寻找主题路径和模板。然而，如果读者在webapp/template下（或者在Ant版本WebContent/template）引入了自己的主题路径（例如KUTheme），并且指定路径名（例如KUTheme）作为theme属性的取值，那么Struts2框架会在这个主题路径下寻找标记的模板。
要学习更多关于如何使用Struts2主题以及如何可以重写它们的知识，请访问主题和模板