Struts 2 简明教程

Struts 2 - Themes & Templates

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

Before starting actual tutorial for this chapter, let us look into few definition as given by https://struts.apache.org−

Sr.No

Term & Description

1

TAG A small piece of code executed from within JSP, FreeMarker, or Velocity.

2

TEMPLATE A bit of code, usually written in FreeMarker, that can be rendered by certain tags (HTML tags).

3

THEME A collection of templates packaged together to provide common functionality.

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

I would also suggest going through the Struts2 Localization chapter because we will take same example once again to perform our excercise.

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

When you use a Struts 2 tag such as <s:submit…​>, <s:textfield…​> etc in your web page, the Struts 2 framework generates HTML code with a preconfigured style and layout. Struts 2 comes with three built-in themes −

Sr.No

Theme & Description

1

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.

2

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.

3

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.

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

As mentioned above, if you don’t specify a theme, then Struts 2 will use the xhtml theme by default. For example, this Struts 2 select tag −

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

会生成如下 HTML 标记−

generates following HTML markup −

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

Here empinfo is the action name defined in struts.xml file.

Selecting Themes

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

You can specify the theme on as per Struts 2, tag basis or you can use one of the following methods to specify what theme Struts 2 should use −

  1. The theme attribute on the specific tag

  2. The theme attribute on a tag’s surrounding form tag

  3. The page-scoped attribute named "theme"

  4. The request-scoped attribute named "theme"

  5. The session-scoped attribute named "theme"

  6. The application-scoped attribute named "theme"

  7. The struts.ui.theme property in struts.properties (defaults to xhtml)

如果您希望针对不同标签使用不同主题，则以下方法可在标签级别指定这些主题 −

Following is the syntax to specify them at tag level if you are willing to use different themes for different tags −

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

由于按标签使用主题并不是非常实用，因此我们只需使用以下标签在 struts.properties 文件中指定规则 −

Because it is not very much practical to use themes on per tag basis, so simply we can specify the rule in struts.properties file using the following tags −

# 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 文件中。

Following is the result we picked up from localization chapter where we used the default theme with a setting struts.ui.theme = xhtml in struts-default.properties file which comes by default in struts2-core.xy.z.jar file.

helloworldstruts14

How a Theme Works?

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

For a given theme, every struts tag has an associated template like s:textfield → text.ftl and s:password → password.ftl etc.

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

These template files come zipped in struts2-core.xy.z.jar file. These template files keep a pre-defined HTML layout for each tag.

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

In this way, Struts 2 framework generates final HTML markup code using Sturts tags and associated templates.

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

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

Default templates are written in FreeMarker and they have an extension .ftl.

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

You can also design your templates using velocity or JSP and accordingly set the configuration in struts.properties using struts.ui.templateSuffix and struts.ui.templateDir.

Creating New Themes

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

The simplest way to create a new theme is to copy any of the existing theme/template files and do required modifications.

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

Let us start with creating a folder called template in WebContent/WEBINF/classes and a sub-folder with the name of our new theme. For example, WebContent/WEB-INF/classes/template/mytheme.

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

From here, you can start building templates from scratch, or you can also copy the templates from the Struts2 distribution where you can modify them as required in future.

我们准备修改现有默认模板 xhtml ，以达到学习的目的。现在，让我们将 struts2-core-x.y.z.jar/template/xhtml 中的内容复制到我们的主题目录，并且仅修改 WebContent/WEBINF/classes/template/mytheme/control.ftl 文件。打开 control.ftl 后，它将包含以下几行 −

We are going to modify existing default template xhtml for learning purpose. Now, let us copy the content from struts2-core-x.y.z.jar/template/xhtml to our theme directory and modify only WebContent/WEBINF/classes/template/mytheme/control.ftl file. When we open control.ftl which will have the following lines −

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

让我们将以上 control.ftl 文件更改为包含以下内容 −

Let us change above file control.ftl to have the following content −

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

如果您将检查 form.ftl ，您会发现 control.ftl 在此文件中被使用，但是 form.ftl 从 xhtml 主题引用此文件。因此，让我们按如下方式进行更改 −

If you will check form.ftl then you will find that control.ftl is used in this file, but form.ftl is referring this file from xhtml theme. So let us change it as follows −

<#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 文件，您仍然可以很好地了解要执行的操作。

I assume that, you would not have much understanding of the FreeMarker template language, still you can get a good idea of what is to be done by looking at the .ftl files.

但是，让我们保存上述更改，返回到本地化示例，并使用以下内容创建 WebContent/WEB-INF/classes/struts.properties 文件

However, let us save above changes, and go back to our localization example and create the WebContent/WEB-INF/classes/struts.properties file with the following content

# 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 。这将生成以下屏幕 −

Now after this change, right click on the project name and click Export > WAR File to create a War file. Then deploy this WAR in the Tomcat’s webapps directory. Finally, start Tomcat server and try to access URL http://localhost:8080/HelloWorldStruts2. This will produce the following screen −

helloworldstruts19

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

You can see a border around the form component which is a result of the change we did in out theme after copying it from xhtml theme. If you put little effort in learning FreeMarker, then you will be able to create or modify your themes very easily.

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

I hope that now you have a basic understanding on Sturts 2 themes and templates, isn’t it?