使用Struts 2主题和模板

下载它– Struts2-Theme-Example.zip

在Struts2中，当您在HTML页面中放置“ s：textfield ” UI标记时

<s:textfield key="global.username" name="username" />

以下2列HTML表格布局设计将自动生成

<tr>
<td class="tdLabel">
  <label for="validateUser_username" class="label">Username:</label>
</td>
<td>
  <input type="text" name="username" value="" id="validateUser_username"/>
</td>
</tr>

Struts 2使用“主题和模板”功能来为您生成预先设计的表格布局。

让我们看一下序列：

1. Struts 2看到一个“ s：textfield ”标签。
2. 搜索声明的主题（如果未声明任何主题，则将选择默认的xhtml主题）。
3. 搜索相应主题的模板，例如“ s：textfield-> text.ftl ”，“ s：password-> password.ftl ”。 所有预定义的HTML布局都在ftl文件中定义。
4. 将值绑定到模板文件。
5. 显示最终的HTML标记。

Struts 2标签+主题模板文件（ftl）=最终HTML标记代码。

Struts 2使用freemaker框架作为默认模板引擎，所有ftl文件均以freemaker脚本编写。 不用担心，freemarker语法几乎是人为解释的单词，非常容易学习。

使用Struts 2主题和模板

在本文中，您将创建一个新主题以自定义错误消息的位置。 在默认的“ xhtml”主题中，错误消息将出现在字段名称上方。

在新主题下，错误消息将显示在输入字段旁边，并以红色突出显示。

1.提取主题

所有主题和模板文件都位于struts2-core.jar模板文件夹中。 将其解压缩到本地驱动器。

FTL文件只是一个普通的文本文件，您可以使用任何喜欢的文本编辑器打开它。

2.创建一个新主题

创建一个新文件夹，复制所有现有的xhtml模板文件（ftl）并将新文件夹放入项目资源文件夹。

要了解Struts 2如何找到主题模板文件夹，请阅读Struts 2模板目录选择以获取更多详细信息。

通常，除非有理由，否则您只需要复制和修改现有的“ xhtml”主题。

3.定义一个新主题

定义“ struts.ui.theme ”和“ struts.ui.templateDir ”，以告诉Struts 2在哪里可以找到新主题和模板文件夹。

struts.xml

<struts>
    ...
 	<constant name="struts.ui.theme" value="mkyong" />
	<constant name="struts.ui.templateDir" value="template" />
	...
</struts>

现在，当Struts 2看到“ s：textfield ”时，它将找到“ mkyong”主题，而不是默认的“ xhtml”主题。 阅读Struts 2选择主题以获取更多详细信息。

4.修改主题

要修改现有模板（ftl）文件，您可能需要了解一点freemarker语法 。

1.创建一个新的error-message.ftl文件以显示错误消息。

错误消息.ftl

<#--
	Only show message if errors are available.
	This will be done if ActionSupport is used.
-->
<#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/>
<#if hasFieldErrors>
<#list fieldErrors[parameters.name] as error>
   <span class="errorMessage" errorFor="${parameters.id}">${error?html}</span><#t/>
</#list>
</#if>

2.如果存在错误， 则通过向“ td”标签添加新的“ errorsBg”类来修改controlheader.ftl 。

控制头文件

<#include "/${parameters.templateDir}/mkyong/controlheader-core.ftl" />
    <td
<#if hasFieldErrors>
    class="errorsBg" <#t/>
</#if>
<#if parameters.align??>
    align="${parameters.align?html}"<#t/>
</#if>
><#t/>

3.通过删除许多不必要的标签来修改controlheader-core.ftl ，如果存在错误，则在“ td”标签上添加一个新的“ errorsBg”类。

controlheader-core.ftl

<#--
	Only show message if errors are available.
	This will be done if ActionSupport is used.
-->
<#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/>
<#--
	if the label position is top,
	then give the label its own row in the table
-->
<tr>

<td class="tdLabel <#t/>
<#--
<#if hasFieldErrors>
errorsBg"<#t/>
</#if>
-->
><#rt/>

<#if parameters.label??>
    <label <#t/>
<#if parameters.id??>
        for="${parameters.id?html}" <#t/>
</#if>
<#if hasFieldErrors>
        class="errorLabel"<#t/>
<#else>
        class="label"<#t/>
</#if>
 ><#t/>

<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
    <span class="required">*</span><#t/>
</#if>
${parameters.label?html}<#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
 	<span class="required">*</span><#t/>
</#if>

</label><#t/>
</#if>

</td><#lt/>

4.修改text.ftl由“ 简单/ text.ftl“后添加一个新的模板文件“ 的错误message.ftl”。

text.ftl

<#include "/${parameters.templateDir}/${parameters.theme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/text.ftl" />
<#include "/${parameters.templateDir}/mkyong/error-message.ftl" />
<#include "/${parameters.templateDir}/xhtml/controlfooter.ftl" />

5.将CSS放入视图页面以格式化错误消息。

<style type="text/css">
.errorsBg{
	background-color:#fdd;
	color:red;	
	border: 1px solid;
}

.errorMessage{
	padding:0px 8px;
}

table{
	border-spacing: 4px;
}
td{
	padding:4px;
}
</style>

5.完成并保存，现在错误消息将显示在输入字段旁边，并以红色突出显示。

希望本文能够为您提供有关如何在Struts2中创建或修改主题的一般概念。

参考

1. http://freemarker.sourceforge.net/
2. http://www.vitarara.org/cms/struts_2_cookbook/creating_a_theme
3. http://struts.apache.org/2.0.14/docs/themes-and-templates.html
4. http://www.packtpub.com/article/themes-and-templates-with-apache-struts2

标签： struts2 模板 主题

翻译自: https://mkyong.com/struts2/working-with-struts-2-theme-template/