Struts2 主题和模板

term	描述
tag	a small piece of code executed from within jsp, freemarker, or velocity.
template	a bit of code, usually written in freemarker, that can be rendered by certain tags (html tags).
theme	a collection of templates packaged together to provide common functionality.

我也建议去通过struts2本土化章节，因为我们将采取同样的例子，再次执行我们的练习。

当使用struts 2 标签如<s:submit...>，<s:textfield...>等在网页中，struts 2框架生成html代码与预先设定的样式和布局。 struts 2自带内置的主题有三个：

theme	描述
simple theme	a minimal theme with no "bells and whistles". for example, the textfield tag renders the html <input/> tag without a label, validation, error reporting, or any other formatting or functionality.
xhtml theme	this is the default theme used by struts 2 and provides all the basics that the simple theme provides and adds several features like standard two-column table layout for the html, labels for each of the html, validation and error reporting etc.
css_xhtml theme	this theme provides all the basics that the simple theme provides and adds several features like standard two-column css-based layout, using <div> for the html struts tags, labels for each of the html struts tags, placed according to the css stylesheet.

正如上面所提到的，如果不指定一个主题，然后struts2中会使用默认的xhtml主题。例如struts 2中选择标签：

<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文件中定义动作名称。

选择主题：

可以指定主题struts 2每一个标签的基础上或指定的主题struts 2使用，可以使用下列方法之一：

主题属性的具体标签
主题属性标签的周边表单标签
页面范围的属性，名为“主题”
请求范围属性名为“主题”
会话作用域属性命名为“主题”
应用程序作用域的属性命名为“主题”
在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.ui.theme= xhtml的struts-default.properties文件中，默认情况下，在 struts2-core.xy.z.jar文件，这是由主题。

主题如何工作的？

对于一个给定的主题，每一个struts标签有关联的模板，如：s:textfield -> text.ftl 和 s:password -> password.ftl等，这些模板文件来压缩struts2-core.xy.z.jar文件。这些模板文件保持一个预先定义的html布局为每个标签。所以struts2 框架生成最终的html标记代码使用sturts标签和相关的模板。

struts 2 tags + associated template file = final html markup code.

默认模板已经写在freemarker和他们有扩展名 .ftl。可以设计使用速度或jsp模板，并据此设置配置在使用struts.ui.templatesuffix 和 struts.ui.templatedir struts.properties。

创建新的主题：

最简单的方法来创建一个新的主题是复制现有的任何主题/模板文件，并做必要的修改。所以，让我们开始创建一个文件夹 webcontent/web-inf/classes 名为模板和子文件夹与我们新的主题的名称，例如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文件。然后部署此war在tomcat的webapps目录下。最后，启动tomcat服务器和尝试访问url http://localhost:8080/helloworldstruts2。这会给出以下画面：

xhtml主题复制后的变化，我们做了主题这是一个结果，可以看到一个表单组件周围的边框。 freemarker学习，如果你努力，那么将能够创建或修改主题很容易。至少现在，你必须有一个基本的了解sturts2主题和模板。