如果觉得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!完工
越看这些框架,越觉得这句话在理了:编程之久除了算法和数据结构,什么也不属于我们!