开始本章的内容学习之前，让我们看看http://struts.apache.org给出的几个定义：
| 术语 | 描述 |
|---|---|
| tag（标签） | 从JSP，FreeMarker或Velocity内部执行的一小段代码。 |
| template（模板） | 一些代码，通常是写在FreeMarker上的，可以由某些标签（HTML标签）呈现。 |
| theme（主题） | 封装在一起以提供公共功能的模板集合。 |
我们建议再回顾一下Struts2本地化/国际化（i18n）章节，因为我们将再次使用同样的例子来进行练习。
当你在Web页面中使用Struts2 标签（如<s:submit...>，<s:textfield...>等）时，Struts2 框架会生成具有预配置样式和布局的HTML代码。Struts2 具有三个内置主题：
| Theme（主题） | 描述 |
|---|---|
| simple theme | 没有“bells and whistles”的最小主题。例如，textfield标签呈现HTML<input/>标签无标记、验证、错误报告或任何其他格式或功能。 |
| xhtml theme | 这是Struts 2使用的默认主题，提供了simple theme具备的所有基础，并添加了几个功能，如HTML的标准两列表布局、每个HTML的标记、验证和错误报告等。 |
| css_xhtml theme | 这个主题提供了simple theme具备的所有基础，并添加了几个功能，如基于CSS的标准两列布局，对HTML Struts标签使用<div>，HTML Struts每个标签的标记，根据CSS样式表放置等。 |
如上所述，如果你不指定一个主题，那么Struts2 将默认使用xhtml theme。例如这个Struts2选择标签：
<s:textfield name="name" label="Name" />
生成以下HTML标记：
<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名称。
选择主题
你可以在每个Struts2 标签的基础上指定主题，也可以使用以下方法之一指定Struts2 应使用的主题：
-
特定标签上的theme属性
-
标签的周边表单标签的theme属性
-
名为“theme”的页面作用域属性
-
名为“theme”的请求作用域属性
-
名为“theme”的会话作用域属性
-
名为“theme”的应用程序作用域属性
-
struts.properties中的struts.ui.theme属性（默认为xhtml）
以下是在标签级别指定它们的语法，如果你愿意为不同的标签使用不同的主题：
<s:textfield name="name" label="Name" theme="xhtml"/>
因为在每个标签的基础上使用主题并不是很实用，所以只需使用以下标签就可以在struts.properties文件中指定规则：
# 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
下面是我们从本地化章节中选择的结果，我们在struts-default.properties文件中使用了默认主题，设置为struts.ui.theme=xhtml，该文件默认情况下位于struts2-core.xy.z.jar文件中。
主题是如何工作的？
对于给定的主题，每个struts标签都有一个关联的模板，如s:textfield -> text.ftl和s:password -> password.ftl等。这些模板文件压缩在struts2-core.xy.z.jar文件中，它们为每个标签保留预定义的HTML布局。因此Struts2 框架使用Sturts标签和相关模板生成最终的HTML标记代码。
Struts 2 tags + Associated template file = Final HTML markup code.
默认模板已经写在FreeMarker中，它们有扩展名.ftl。你可以使用velocity或JSP设计你的模板，使用struts.ui.templateSuffix和struts.ui.templateDir在struts.properties中设置配置。
创建新主题
创建新主题的最简单方法是复制任何现有的theme/template文件，并进行必要的修改。那么，让我们在WebContent/WEB-INF/classes中创建一个名为template的文件夹，以及一个以新主题名称命名的子文件夹，例如WebContent/WEB-INF/classes/template/mytheme。从这里，你可以从头开始构建模板，或者你可以从Struts2 现有版本中复制模板，并根据需要修改它们。
出于学习的目的，我们将修改现有的默认模板xhtml。那么现在先将内容从struts2-core-x.y.z.jar/template/xhtml复制到我们的主题目录，并只修改WebContent/WEB-INF/classes/template/mytheme/control.ftl文件。当我们打开control.ftl时它会显示以下几行：
<table class="${parameters.cssClass?default('wwFormTable')?html}"<#rt/>
<#if parameters.cssStyle??> style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
让我们将以下内容修改到上面的control.ftl文件中：
<table style="border:1px solid black;">
如果你查看form.ftl，你会发现它正在使用这个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" />
我们假设你不太了解FreeMarker模板语言，不过你仍可以通过查看.ftl文件得到一个很好的想法。 不管怎样，让我们先保存以上更改，并返回到我们的本地化示例，创建具有以下内容的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
现在在此更改后，右键单击项目名称，然后单击“Export”>“ WAR File”以创建WAR文件。然后在Tomcat的webapps目录中部署WAR文件。最后，启动Tomcat服务器并尝试访问URL http://localhost:8080/HelloWorldStruts2。将显示以下界面：
你可以看到窗体组件周围的边框，这是我们从xhtml主题复制之后在out主题中所做更改的结果。如果你稍微学习一下FreeMarker，那么就能够非常容易地创建或修改你的主题。至少现在，你一定对Sturts2 主题和模板有了基本的了解，是吗？