Struts 2 简明教程

Struts 2 - Themes & Templates

在开始针对本章节的实际教程之前，让我们研究 https://struts.apache.org 提供的一些定义−

Sr.No

Term & Description

1

TAG 从 JSP、FreeMarker 或 Velocity 内部执行的一小段代码。

2

TEMPLATE 一小段代码，通常以 FreeMarker 编写，可以通过某些标记（HTML 标记）呈现。

3

THEME 一组打包在一起的模板，共同提供常用功能。

我还会建议通读 Struts2 Localization 章节，因为我们将再次采用相同的示例来执行练习。

在网页中使用 Struts 2 标记（例如 <s:submit…​>、<s:textfield…​> 等）时，Struts 2 框架会生成具有预配置样式和布局的 HTML 代码。Struts 2 附带三个内置主题−

Sr.No

Theme & Description

1

SIMPLE theme 最小主题，没有“花里胡哨”。例如，textfield 标记会呈现 HTML <input/> 标记，没有标签、验证、错误报告或任何其他格式化或功能。

2

XHTML theme 这是 Struts 2 使用的默认主题，它提供simple主题提供的所有基本功能，并添加了多项特性，例如 HTML 的标准双列表格布局、每个 HTML 的标签、验证和错误报告等。

3

CSS_XHTML theme 该主题提供simple主题提供的所有基本功能，并添加了多项特性，例如标准双列基于 CSS 的布局、对 HTML Struts 标记使用 <div>、与 CSS 样式表对应的每个 HTML Struts 标记的标签。

如上所述，如果您未指定主题，则 Struts 2 将默认使用 xhtml 主题。例如，下面的 Struts 2 select 标记−

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

Selecting Themes

您可以根据 Struts 2 标记指定主题，或者可以使用以下方法之一指定 Struts 2 应使用哪个主题−

  1. 具体标记上的 theme 属性

  2. 标记周围的 form 标记上的 theme 属性

  3. 名为“theme”的页面作用域属性

  4. 名为“theme”的请求作用域属性

  5. 名为“主题”的会话范围属性

  6. 名为“主题”的应用程序范围属性

  7. 配置文件“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 文件中。

helloworldstruts14

How a Theme Works?

对于给定的主题，每个struts标签都有一个关联的模板，例如 s:textfield → text.ftl 、 s:password → password.ftl 等。

这些模板文件以压缩包的形式包含在 struts2-core.xy.z.jar 文件中。这些模板文件针对每个标签保留预定义 HTML 布局。

通过这种方式， Struts 2 框架使用 Sturts 标签和关联的模板生成最终 HTML 标记代码。

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

默认模板以 FreeMarker 编写，它们具有 .ftl 扩展名。

您还可以使用 Velocity 或 JSP 设计模板，并使用 struts.ui.templateSuffix 和 struts.ui.templateDir 在 struts.properties 中相应地设置配置。

Creating New Themes

创建新主题最简单的方法是复制任何现有主题/模板文件，并进行所需的修改。

让我们从在 WebContent/WEBINF/classes 中创建一个名为 template 的文件夹，以及一个以新主题命名的子文件夹开始。例如，WebContent/WEB-INF/classes/template/mytheme。

从这里，您可以从头开始构建模板，或者也可以从 Struts2 distribution 复制模板。在未来，您可以在那里根据需要修改它们。

我们准备修改现有默认模板 xhtml ，以达到学习的目的。现在，让我们将 struts2-core-x.y.z.jar/template/xhtml 中的内容复制到我们的主题目录，并且仅修改 WebContent/WEBINF/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 。这将生成以下屏幕 −

helloworldstruts19

您可以看到窗体组件周围存在边框，这是我们在从 xhtml 主题中复制主题后对主题进行更改的结果。如果您努力学习 FreeMarker，那么您将能够很容易地创建或修改您的主题。

我希望你现在对 Sturts 2 主题和模板有基本的了解了吗？