Struts 2的Tag的 style and layout的自定义（或是叫做修改吧）

最新推荐文章于 2023-04-27 18:49:30 发布

cmpsky009

最新推荐文章于 2023-04-27 18:49:30 发布

阅读量326

点赞数

分类专栏： Struts 2

本文链接：https://blog.csdn.net/cmpsky009/article/details/47173463

版权

Struts 2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如果觉得Struts 2的Tag不够漂亮怎么办，那就改咯！

提供有两种修改的办法：

第一种，用Tag写好页面之后，在浏览器中打开网页，查看源码可以知道，像form表单中的s:textfield、select等tag页面的外观是由名称为tdLabel、label
的CSS样式决定的，覆盖它们就可以达到我们自己的目的了。比如这样我把字体改成了蓝色：

<style type="text/css">
  .label {color:blue; font-style:normal; font-weight:bold}
</style>

第二种，比较高大上点，修改Tag使用的Theme。Struts自带的Theme有： simple, xhtml, css_xhtml, and ajax四种，当然我也可以创建属于我自己的Theme。

修改Theme有如下几种方法：

The theme attribute on the specific tag
The theme attribute on a tag's surrounding form tag
The page-scoped attribute named "theme"
The request-scoped attribute named "theme"
The session-scoped attribute named "theme"
The application-scoped attribute named "theme"
The struts.ui.theme property in struts.properties (defaults to xhtml) 这个其实更习惯于在Struts.xml文件中定义：<constant name="struts.ui.theme" value="mytheme"/>

主要讲下自定义Theme，主要有这三种实现方式：

Create a new theme from scratch (hard!)
Wrap an existing theme
Extend an existing theme

第一种、就是一个一个Tag的用freemarker去写，这个太有点难，如果你是做一个很大的项目，有钱有时间有需要，可以定制化呀。我什么都没有，就略过了。其实和第二、第三种的原理差不多，只是更彻底，显得更土豪；

第二种、Wrapping一个已有的Theme文件，比如：

 
        <#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" /> 
       
        <#include "/${parameters.templateDir}/simple/xxx.ftl" /> 
       
        <#include "/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl" />

第三种、继承，增加一个 theme.properties文件，然后在里面加上这一句就可以了：parent = xhtml

附上一个例子：

第一步、创建我们的Theme，覆盖想覆盖的Tag。

目录结构：

文件内容

template.mytheme.checkboxlist.ftl:

<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/mytheme_simple/checkboxlist.ftl" />
<#include "/${parameters.templateDir}/${parameters.expandTheme}/controlfooter.ftl" /><#nt/>

template.mytheme.theme.properties文件内容:

parent = mytheme_simple

template.mytheme_simple.checkboxlist.ftl文件内容:

<#assign itemCount = 0/>
<#if parameters.list??>
    <@s.iterator value="parameters.list">
        <#assign itemCount = itemCount + 1/>
        <#if parameters.listKey??>
            <#assign itemKey = stack.findValue(parameters.listKey)/>
        <#else>
            <#assign itemKey = stack.findValue('top')/>
        </#if>
        <#if parameters.listValue??>
            <#assign itemValue = stack.findString(parameters.listValue)?default("")/>
        <#else>
            <#assign itemValue = stack.findString('top')/>
        </#if>
<#assign itemKeyStr=itemKey.toString() />
<input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
        <#if tag.contains(parameters.nameValue, itemKey)>
 checked="checked"<#rt/>
        </#if>
        <#if parameters.disabled?default(false)>
 disabled="disabled"<#rt/>
        </#if>
        <#if parameters.title??>
 title="${parameters.title?html}"<#rt/>
        </#if>
        <#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
        <#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
/>
<label for="${parameters.name?html}-${itemCount}" style="color:red;font-weight:bold">${itemValue?html}</label> <br />
    </@s.iterator>
<#else>
   
</#if>
<input type="hidden" id="__multiselect_${parameters.id?html}" name="__multiselect_${parameters.name?html}" value=""<#rt/>
<#if parameters.disabled?default(false)>
 disabled="disabled"<#rt/>
</#if>
 />

template.mytheme_simple.theme.properties文件内容:

parent=xhtml

还剩很重要的一步：在struts.xml中加上这句：<constant name="struts.ui.theme" value="mytheme"/>，告诉Struts frame我们要用自定义的Theme（“mytheme”）；

theme作用的页面：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>Struts 2 Form Tags - Edit Person</title>
    <style type="text/css">
      /*修改Struts tag的外观：通过查看网页源码可以知道，这个页面的外观是由名称为tdLabel、label
      的CSS样式决定的，覆盖它们就可以达到我们自己的目的了。Struts tag有好几个Theme：simple, xhtml, css_xhtml, and ajax
   也有各种各样的设置方式，比如：<s:set name="theme" value="%{myTheme}" scope="page" />。也可以编写自己的theme来进行全局统一修改。
   这些可以在Struts中自带的HTML版说明文档中找到答案（file:///D:/struts-2.3.24/docs/docs/struts-2-themes.html）*/
	  .label {color:blue; font-style:normal; font-weight:bold}
	</style>
</head>

<body>
<h1>Update Information</h1>

<p>Use the form below to edit your information.</p>

<s:form action="excuteeditTag" method="post">
    <s:textfield key="personBean.firstName"/>
    <s:textfield key="personBean.lastName"/>
    <s:textfield key="personBean.email"/>
    <s:textfield key="personBean.age"/>
    
    <s:select key="personBean.sport" list="sports"/>
	<s:radio key="personBean.gender" list="genders" />
	<s:select key="personBean.residency" list="states" listKey="key" listValue="value" />
	<s:checkbox key="personBean.over21" />
	<s:checkboxlist key="personBean.carModels" list="carModelsAvailable" />
	
	<br/><br/>
    <s:submit key="submit"/>
</s:form>
</body>

</html>

作用后的效果：

作用前的效果：

OK！完工

越看这些框架，越觉得这句话在理了：编程之久除了算法和数据结构，什么也不属于我们！

cmpsky009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Struts 2的Tag的 style and layout的自定义（或是叫做修改吧）

如果觉得Struts 2的Tag不够漂亮怎么办，那就改咯！提供有两种修改的办法：第一种，用Tag写好页面之后，在浏览器中打开网页，查看源码可以知道，像form表单中的s:textfield、select等tag页面的外观是由名称为tdLabel、label 的CSS样式决定的，覆盖它们就可以达到我们自己的目的了。比如这样我把字体改成了蓝色： .label {color:b
复制链接

扫一扫