Struts 2 - 主题和模板

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

Sr.NoTerm&说明
1

TAG

从JSP,FreeMarker或Velocity中执行的一小段代码.

2

TEMPLATE

一些代码,通常用FreeMarker编写,可以通过某些标签(HTML标签)呈现.

3

主题

一组模板打包在一起以提供常用功能.

我还建议您浏览 Struts2本地化章节,因为我们将再次采用相同的例子来执行我们的练习.

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

Sr.No主题&说明
1

SIMPLE主题

一个没有"花里胡哨"的简约主题.例如,textfield标记呈现HTML< input/>没有标签,验证,错误报告或任何其他格式或功能的标签.

2

XHTML主题

这是Struts 2使用的默认主题,它提供了简单主题提供的所有基础知识,并添加了一些功能,如HTML的标准双列表格布局,每个HTML的标签,验证和错误报告等.

3

CSS_XHTML主题

此主题提供了简单主题提供的所有基础知识,并添加了一些功能,如标准双列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">名称:</label> 
</td> 
< td> 
< input type ="text"name ="name"value =""id ="empinfo_name"/> 
</td> 
</tr>

这里 empinfo 是struts.xml文件中定义的动作名称.

选择主题

您可以根据Struts 2,标记基础指定主题,或者您可以使用以下方法之一指定Struts 2应使用的主题和减号;

  • 特定标签上的主题属性

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

  • 名为"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-default.properties 文件中设置 struts.ui.theme = xhtml ,该文件默认位于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.ui.templateSuffix struts.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文件.然后在Tomcat的webapps目录中部署此WAR.最后,启动Tomcat服务器并尝试访问URL http://localhost:8080/HelloWorldStruts2 .这将产生以下屏幕 :

主题和模板

你可以看到表单组件周围的边框,这是我们在从xhtml主题复制后在out主题中所做的更改的结果.如果您花费很少精力学习FreeMarker,那么您将能够非常轻松地创建或修改您的主题.

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