struts2官方 中文教程 系列十四：主题Theme

时间：2023-12-13 17:15:20

介绍

当您使用一个Struts 2标签时，例如 <s:select ..../>  在您的web页面中，Struts 2框架会生成HTML，它会显示外观并控制select控件的布局。样式和布局取决于为标签们设置的Struts 2主题。Struts 2有三个内置的主题:简单、xhtml和cssxhtml。如果您没有指定主题，那么Struts 2将默认使用xhtml主题。

本帖地址 struts2官方 中文教程 系列十四：主题Theme 即 http://www.cnblogs.com/linghaoxinpian/p/7047347.html

先看一段代码

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

生成

<tr>

    <td class="tdLabel">

        <label for="save_personBean_sport" class="label">最喜欢的运动:</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是如何使用表格标签来控制布局和选择HTML的。还有一个类tdLabel，应用于显示表的列。由于没有为Struts 2选择标签指定任何主题，因此使用了默认的xhmtl主题。

指定Struts2应使用的主题

Struts 2标记有一个主题属性，您可以使用它来指定在为该标签创建HTML时应该使用哪个Struts 2主题。主题属性的值很简单，xhtml, css_xhtml, and ajax。可以参见  Themes and Templates Documentation 了解更多信息。本章将了解 xhtml, css_xhtml, 和 the simple themes ，ajax主题应在进行ajax操作时使用（可以参见  Ajax Theme in the documentation）。

您可以在每个Struts 2标签上指定主题，或者您可以使用下列方法之一指定主题Struts 2应该使用什么：

  1. 在标签上使用 theme属性

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

  3. 在page域内有名为“theme”的属性（The page-scoped attribute named “theme”）

  4. 在request域中有名为“theme”属性（The request-scoped attribute named “theme”）

  5. 在session域中有名为“theme”属性（The session-scoped attribute named “theme”）

  6. 在application域中有名为“theme”属性（The application-scoped attribute named “theme”）

  7. 在 struts.properties中的struts.ui.theme属性（默认为xhtml）

有关如何使用上述方法设置主题的主题，请参考 Selecting Themes

将表单标签的主题属性更改为xhtml。当您查看edit.jsp的源代码时，请注意在浏览器显示了jsp之后，有一个名为tdLabel的类被应用到包含标签的表列中(<td class="tdLabel">)。这个CSS类控制表列中标签的位置。tdLabel样式是在/theme/struts/xhtml/styles.css中定义的。

将表单的主题属性更改为 simple ，并重新部署应用程序。检查源代码 edit.jsp在浏览器中呈现之后。您应该看到没有Form标签控制布局，而且也没有用于文本字段的Label 标签。

当你将  <s:head /> 标签添加进jsp页面时，这个css样式将会被引进。将表单的主题属性更改为 cssxhtml，并重新部署应用程序。检查源代码 edit.jsp 在浏览器中呈现之后。表单标签的布局现在由div标签控制，Label 标签又回来了。

可以通过访问 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; }

当然你也可以覆盖默认的一些样式

<style type="text/css">

    .label {color:blue; font-style:normal; font-weight:bold}

</style>

创建自己的主题

在 Struts 2 core jar 文件中我们可以看见 名为 template.css_xhtml, template.simple, and template.xhtml 三个文件夹，这三个文件夹包含了struts2的三个默认主题，每一个文件夹都是一个struts2的标签。例如你打开  template.xhtml 文件夹，将会看到select.ftl 文件，注意后缀为  .ftl

Struts 2框架使用FreeMarker模板引擎为Struts 2标签生成HTML。这就是为什么文件扩展名是 “ftl” 。您可以通过访问http://freemarker.sourceforge.net/.来了解更多关于FreeMarker的信息。

后面是自定义主题模版，估计不怎么用，若题主有幸在项目中用到的话，再来补上吧。

总结

我们可以很容易的重写struts2的默认主题样式，以便控制struts2标签的外观。每一个struts2标签都与一个模板文件相关联（如  select.ftl ），它位于一个以主题命名的文件夹中。默认情况下，struts2框架将会在struts core jar文件中寻找主题文件和模板。更多信息可以参见 Themes and Templates Documentation .

相关文章