上一节:
下一节:

  Struts - 主题和模板

  • 简述

    在开始本章的实际教程之前，让我们看看https://struts.apache.org给出的几个定义-
    序号 术语和描述
    1
    TAG
    从 JSP、FreeMarker 或 Velocity 中执行的一小段代码。
    2
    TEMPLATE
    一些代码，通常用 FreeMarker 编写，可以由某些标签（HTML 标签）呈现。
    3
    THEME
    打包在一起以提供通用功能的模板集合。
    我还建议阅读Struts2 本地化章节，因为我们将再次使用相同的示例来执行我们的练习。
    当你使用一个 Struts 2在您的网页中使用诸如 <s:submit...>、<s:textfield...> 等标记，Struts 2 框架生成具有预配置样式和布局的 HTML 代码。Struts 2 带有三个内置主题 -
    序号 主题和描述
    1
    SIMPLE theme
    一个没有“花里胡哨”的最小主题。例如， textfield 标签呈现 HTML <input/> 标签，没有标签、验证、错误报告或任何其他格式或功能。
    2
    XHTML theme
    这是 Struts 2 使用的默认主题，它提供了简单主题提供的所有基础知识，并添加了一些功能，例如 HTML 的标准两列表格布局、每个 HTML 的标签、验证和错误报告等。
    3
    CSS_XHTML theme
    这个主题提供了简单主题提供的所有基础知识，并添加了一些功能，如标准的两列基于 CSS 的布局，使用 <div> 作为 HTML Struts 标签，每个 HTML Struts 标签的标签，根据 CSS 样式表放置.
    如上所述，如果不指定主题，那么Struts 2 将默认使用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 应使用的主题 -
    • 特定标签上的主题属性
    • 标签周围的表单标签上的主题属性
    • 名为“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.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 布局。
    通过这种方式， Struts 2 框架使用 Sturts 标签和相关模板生成最终的 HTML 标记代码。 
    
Struts 2 tags + Associated template file = Final HTML markup code.
    默认模板是用 FreeMarker 编写的，它们有一个扩展 .ftl.
    您还可以使用velocity 或JSP 设计模板，并使用相应的方法在struts.properties 中设置配置 struts.ui.templateSuffix 和 struts.ui.templateDir.

  • 创建新主题

    创建新主题的最简单方法是复制任何现有的主题/模板文件并进行必要的修改。
    让我们从创建一个名为的文件夹开始 template在WebContent/WEBINF/classes和一个带有我们新主题名称的子文件夹中。例如，WebContent/WEB-INF/classes/template/mytheme。
    从这里开始，您可以从头开始构建模板，也可以从 Struts2 distribution 您可以在将来根据需要修改它们。
    我们将修改现有的默认模板 xhtml为学习目的。现在，让我们将内容从struts2-core-xyzjar/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 部署到 Tomcat 的 webapps 目录中。最后，启动Tomcat服务器并尝试访问URLhttp://localhost:8080/HelloWorldStruts2. 这将产生以下屏幕 -
    主题和模板
    您可以在表单组件周围看到一个边框，这是我们从 xhtml 主题复制后在 out 主题中所做更改的结果。如果您在学习 FreeMarker 上付出很少的努力，那么您将能够非常轻松地创建或修改您的主题。
    我希望你现在对 Sturts 2 主题和模板，不是吗？
上一节:
下一节: