Struts2主题和模板


在开始本章的实际教程之前,让我们看看https://struts.apache.org给出的一些定义

Sr.No 期限和说明
1 TAG
在JSP,FreeMarker或Velocity中执行的一小段代码。
2 TEMPLATE
一些代码,通常写在FreeMarker中,可以通过某些标签(HTML标签)来呈现。
3 THEME
打包在一起以提供通用功能的模板集合。

我还建议通过Struts2本地化章节,因为我们将再次采用相同的示例来执行我​​们的练习。

当你在你的网页中使用诸如<s:submit ...><s:textfield ...>之类的 Struts 2 标签时,Struts 2框架将生成具有预配置样式和布局的HTML代码。Struts 2带有三个内置主题 -

Sr.No 主题和描述
1 简单的主题
没有“花里胡哨”的最小主题。例如,textfield标记呈现HTML 标记时没有标签,验证,错误报告或任何其他格式或功能。
2 XHTML主题
这是Struts 2使用的默认主题,并提供了简单主题提供的所有基础知识,并添加了一些功能,如HTML的标准两列表格布局,HTML,验证和错误报告等各种标签。
3 CSS_XHTML主题
此主题提供了简单主题提供的所有基础知识,并添加了多个功能,如标准的两列CSS布局,对于HTML Struts标记使用
,根据CSS样式表放置每个HTML Struts标记的标签。

如上所述,如果您不指定主题,则默认情况下,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应该使用的主题 -

  • 特定标签上的主题属性

  • 标签周围表单标签上的主题属性

  • 名为“主题”的页面范围属性

  • 名为“主题”的请求范围属性

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

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

  • 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- core.xy.z.jar 文件中默认出现的struts- default.properties文件中设置 struts.ui.theme = xhtml**

英文输出

主题如何运作?

对于给定的主题,每个struts标签都有一个关联的模板,如 s:textfield→text.ftls: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.templateSuffixstruts.ui.templateDir 在struts.properties中设置配置。

创建新主题

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

让我们开始在 _WebContent/WEBINF/classes_ 创建一个名为 template 的文件夹,并使用我们新主题的名称创建一个子文件夹。例如,_WebContent/WEB-INF/classes/template/ mytheme_

从这里开始,您可以从头开始构建模板,也可以从 Struts2发行版 中复制模板,以便将来根据需要修改它们。

为了学习的目的,我们将修改现有的默认模板 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

在更改之后,右键单击项目名称,然后单击 导出 > WAR文件以创建一个 WAR 文件。然后将这个WAR部署到Tomcat的webapps目录中。最后,启动Tomcat服务器并尝试访问URL http:// localhost:8080 / HelloWorldStruts2 。这将产生以下屏幕 -

主题和模板

您可以在表单组件周围看到一个边框,这是我们在从xhtml主题中复制主题后所做的更改的结果。如果您在学习FreeMarker方面付出很少的努力,那么您将能够非常轻松地创建或修改主题。

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