9.4 UI标签
Struts 2提供了丰富的UI标签，使用这些标签可以实现非常好的显示效果。同时Struts 2的UI标签都是基于主题和模板的，通过使用不同的主题或模板能显示不同的显示效果。
9.4.1 Struts 2内建主题
下面来看Struts 2的UI标，前面已经介绍了许多表单标签和非表单标签，下面来学习其余的标签。首先来重温一下以前写的登录表单，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>默认主题</title>
</head>
<body>
<center>
<h2>用户登录</h2>
<%--登录表单--%>
<s:form action="login">
<s:textfield name="uname" label="用户名"></s:textfield>
<s:password name="upassword" label="密码"></s:password >
<s:submit value="登录"></s:submit>
<s:reset value="重置"></s:reset>
</s:form>
</center>
</body>
</html>
运行该JSP页面，重点观察其显示效果，如图9.30所示。
图9.30 登录页面(1)
在定义表单时，并没有添加换行标签，但是显示出来的却实现了换行。这是因为表单实现了默认的xhtml主题，所以才实现了自动的表格布局。下面来看什么是标签的主题，主题已理解成是一系列的模板，和Windows操作系统一样，使用不同的主题会有不同的显示效果。
Struts 2提供了4种主题，分别为simple、xhtml、css_html和ajax。其中默认使用的是xhtml主题。下面修改表单，使其使用simple主题，代码如下所示。
<%--登录表单--%>
<s:form action="login" theme="simple">
<s:textfield name="uname" label="用户名"></s:textfield>
<s:password name="upassword" label="密码"></s:password >
<s:submit value="登录"></s:submit>
<s:reset value="重置"></s:reset>
</s:form>
运行该JSP页面，重点观察其显示效果，如图9.31所示。
这时发现表格布局没有了。通过查看页面源代码发现程序使用了simple主题，每个UI标签只生成了一个简单的HTML标签，没有以前表格标签等额外的标签。
发现使用simple主题后，UI标签就和普通的HTML类似了。如果使用simple主题，那么就需要手动添加布局标签，还必须手动添加校验错误提示显示标签。如果使用xhtml主题，它将使用表格布局，并且能自动地输出校验错误提示。下面修改表单，使其使用css_xhtml主题，代码如下所示。
<%--登录表单--%>
<s:form action="login" theme="css_xhtml">
<s:textfield name="uname" label="用户名"></s:textfield>
<s:password name="upassword" label="密码"></s:password >
<s:submit value="登录"></s:submit>
<s:reset value="重置"></s:reset>
</s:form>
运行该JSP页面，重点观察其显示效果，如图9.32所示。
图9.31 登录页面(2)
图9.32 登录页面(3)
通过查看页面源代码发现程序使用了css_xhtml主题，页面使用了div布局。css_xhtml主题在原有xhtml主题上进行扩展，并使用css样式控制页面布局。ajax主题同样是在原有的xhtml主题上进行扩展，不是css_xhtml主题。使用ajax主题，将为每个标签提供额外的Ajax支持，如支持Ajax方式的客户端校验。
9.4.2 radio标签
Struts 2提供的radio标签用来生成单选框组。因为UI标签属性较多，所以只看其常用的属性，如表9.15所示。
表9.15 radio标签属性列表
下面来看一个简单的单选框示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio示例</title>
</head>
<body>
<s:form>
<s:radio
name="xueli"
label="请选择你的学历"
list="{’高中及以下’, ’大专’, ’本科’, ’研究生及以上’}"
theme="css_xhtml"
>
</s:radio>
</s:form>
</body>
</html>
运行该JSP页面，页面显示单选框组，如图9.33所示。
图9.33 使用radio标签生成单选框组
也可以通过set标签将选项值设置指定的范围中，然后通过在list属性指定其变量，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio示例</title>
</head>
<body>
<! -- 设置单选框选项List -->
<s:set
name="xueliList"
value="{’高中及以下’, ’大专’, ’本科’, ’研究生及以上’}">
</s:set>
<s:form>
<s:radio
name="xuexi"
label="请选择你的学历"
list="#xueliList"
theme="css_xhtml"
></s:radio>
</s:form>
</body>
</html>
可以通过Map来生成单选框组，指定单选框选项value属性为Map对象的key值，单选框的label属性为Map对象的value值，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>radio示例</title>
</head>
<body>
<! -- 设置单选框选项Map -->
<s:set
name="xueliList"
value="# {'0' :’高中及以下’, '1' :’大专’, '2' :’本科’, '3' :’研究生及以上’}">
</s:set>
<s:form>
<s:radio
name="xuexi"
label="请选择你的学历"
list="#xueliList"
listKey="key"
listValue="value"
theme="css_xhtml">
</s:radio>
</s:form>
</body>
</html>
运行该JSP页面，查看页面源代码，代码如下所示。
<input type="radio" name="xuexi" id="testRadio3_xuexi0" value="0"/><label for=
"testRadio3_xuexi0">高中及以下</label>
<input type="radio" name="xuexi" id="testRadio3_xuexi1" value="1"/><label for=
"testRadio3_xuexi1">大专</label>
<input type="radio" name="xuexi" id="testRadio3_xuexi2" value="2"/><label for=
"testRadio3_xuexi2">本科</label>
<input type="radio" name="xuexi" id="testRadio3_xuexi3" value="3"/><label for=
"testRadio3_xuexi3">研究生及以上</label>
从页面源代码中可以看出，单选框value属性为Map对象的key值，单选框的label属性为Map对象的value值。
9.4.3 select标签
Struts 2提供的select标签用来生成下拉列表框，其包括常用属性如表9.16所示。
表9.16 select标签属性列表
下面来看一个简单的下拉列表框示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Select示例</title>
</head>
<body>
<s:form>
<s:select
name="xueli"
label="请选择你的学历"
list="{’高中及以下’, ’大专’, ’本科’, ’研究生及以上’}"
theme="css_xhtml"
>
</s:select>
</s:form>
</body>
</html>
运行该JSP页面，页面显示下拉列表框用来选择学历，如图9.34所示。
图9.34 使用select标签生成下拉列表
也可以通过set标签将选项值设置到指定的范围中，然后通过在list属性指定其变量，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Select示例</title>
</head>
<body>
<! -- 设置下拉列表框选项List -->
<s:set
name="xueliList"
value="{’高中及以下’, ’大专’, ’本科’, ’研究生及以上’}">
</s:set>
<s:form>
<s:select
name="xuexi"
label="请选择你的学历"
list="#xueliList"
theme="css_xhtml"
></s:select>
</s:form>
</body>
</html>
可以通过Map来生成下拉列表框，指定下拉列表选项value属性为Map对象的key值，单选框的label属性为Map对象的value值，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Select示例</title>
</head>
<body>
<s:set
name="xueliList"
value="# {'0' :’高中及以下’, '1' :’大专’, '2' :’本科’, '3' :’研究生及以上’}">
</s:set>
<s:form>
<s:select
name="xuexi"
label="请选择你的学历"
list="#xueliList"
listKey="key"
listValue="value"
theme="css_xhtml">
</s:select>
</s:form>
</body>
</html>
9.4.4 checkboxlist标签
Struts 2提供的Checkboxlist标签用来生成多选框组，其包括的常用属性如表9.17所示。
表9.17 checkboxlist标签属性列表
下面来看一个简单的多选框示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Checkboxlist示例</title>
</head>
<body>
个人爱好：<s:checkboxlist name="xueli" list="{’打篮球’, ’踢足球’, ’唱歌’, ’看电影’}"></s:checkboxlist>
</body>
</html>
运行该JSP页面，页面显示多选框组用来选择个人爱好，如图9.35所示。
图9.35 使用checkboxlist标签生成多选框组
可以通过Map来生成单选框组，指定单选框选项value属性为Map对象的key值，单选框的label属性为Map对象的value值，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Checkboxlist示例</title>
</head>
<body>
学历：<s:checkboxlist name="xueli" list="# {'0' :’打篮球’, '1' :’踢足球’, '2' :'
唱歌’, '3' :’看电影’}" listKey="key" listValue="value"></s:checkboxlist>
</body>
</html>
前面的代码都是通过OGNL表达式直接生成List集合和Map对象。下面介绍如何取得集合对象中的JavaBean实例。首先创建JavaBean类Aihao，代码如下所示。
package net.hncu.javabean;
public class Aihao {
//爱好名
private String Aihaoname;
//爱好值
private int Aihaovalue;
public Aihao() {
}
public Aihao(String aihaoname, int aihaovalue) {
Aihaoname = aihaoname;
Aihaovalue = aihaovalue;
}
//属性的setter和getter方法
public String getAihaoname() {
return Aihaoname;
}
public void setAihaoname(String aihaoname) {
Aihaoname = aihaoname;
}
public int getAihaovalue() {
return Aihaovalue;
}
public void setAihaovalue(int aihaovalue) {
Aihaovalue = aihaovalue;
}
}
新建AihaoService类，通过其getAihao()方法可以返回一个包含多个爱好的数组，代码如下所示。
package net.hncu.service;
import net.hncu.javabean.Aihao;
public class AihaoService {
//返回包含多个爱好的数组
public Aihao[] getAihao(){
Aihao[] aihaos = new Aihao[4];
aihaos[0] = new Aihao("打篮球",0);
aihaos[1] = new Aihao("踢足球",1);
aihaos[2] = new Aihao("唱歌",2);
aihaos[3] = new Aihao("看电影",3);
return aihaos;
}
}
新建JSP页面，通过bean标签生成一个AihaoService实例，并指定Checkboxlist标签的list属性为AihaoService实例中getAihao方法的返回值，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Checkboxlist示例</title>
</head>
<body>
<! -- 生成AihaoService实例 -->
<s:bean name="net.hncu.service.AihaoService" id="as"></s:bean>
学历：<s:checkboxlist name="xueli" list="#as.xuelis" listKey="aihaovalue" listValue="aihaoname">
</s:checkboxlist>
</body>
</html>
运行该JSP页面，页面显示多选框组用来选择个人爱好，如图9.36所示。
图9.36 使用checkboxlist标签生成多选框组
9.4.5 combobox标签
Struts 2提供的combobox标签用来生成一个单行文本框和下拉列表框的组合，其包括的常用属性如表9.18所示。
表9.18 combobox标签属性列表
下面来看一个简单的combobox标签的示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Combobox示例</title>
</head>
<body>
<s:form>
<s:combobox label="密码保护问题"
list="{’我最喜欢的小学老师’, ’我在哪里读的大学’, ’我家里的电话号码是多少’}"
theme="css_xhtml"
name="password">
</s:combobox>
</s:form>
</body>
</html>
运行该JSP页面，页面显示单行文本框和下拉列表框的组合。通过下拉列表框选择，选项会自动添加到当行文本中，如图9.37所示。
图9.37 使用combobox标签生成组合框
因为combobox标签中生成的下拉列表只是用来辅助输入，所以无需使用combobox标签中的listKey和listValue属性。
9.4.6 datetimepicker标签
Struts 2提供的datetimepicker标签用来生成日期或时间选择器。其包括的常用属性如表9.19所示。
表9.19 datetimepicker标签属性列表
下面来看一个简单的日期选择器的示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>datetimepicker示例</title>
<s:head theme="ajax"/>
</head>
<body>
<s:form>
<s:datetimepicker
label="出生日期"
name="birth"
value="today"
theme="css_xhtml"
>
</s:datetimepicker>
</s:form>
</body>
</html>
运行该JSP页面，页面显示一个单行文本框和一个日期选择按钮，单击该日期选择按钮将出现一个日期选择框，如图9.38所示。
通过指定displayFormat属性能改变其日期的显示格式，代码如下所示。
<s:form>
<s:datetimepicker
label="出生日期"
name="birth"
value="today"
displayFormat="yyyy年MM月dd"
theme="css_xhtml"
>
</s:datetimepicker>
</s:form>
运行该JSP页面，这时日期的显示格式为“yyyy年mm月dd”，如图9.39所示。
图9.38 使用datetimepicker标签生成日期选择器
图9.39 改变其日期的显示格式
通过指定weekStartsOn属性能设定一周的第一天。如现在通过设定weekStartsOn的属性值为1，表示一周的第一天为星期一，代码如下所示。
<s:form>
<s:datetimepicker
label="出生日期"
name="birth"
value="today"
displayFormat="yyyy年MM月dd"
weekStartsOn="1"
theme="css_xhtml"
>
</s:datetimepicker>
</s:form>
运行该JSP页面，这时从日期选择框中可以看出一周的第一天为星期一了，如图9.40所示。
通过指定type属性time可以生成一个时间选择器，代码如下所示。
<s:form>
<s:datetimepicker
label="选择时间"
name="selectTime"
value="13:00"
type="time"
theme="css_xhtml"
>
</s:datetimepicker>
</s:form>
运行该JSP页面，页面显示一个单行文本框和一个时间选择按钮，单击该时间选择按钮将出现一个时间选择框，如图9.41所示。
图9.40 改变一周的第一天
图9.41 使用datetimepicker标签生成时间选择器
9.4.7 doubleselect标签
Struts 2提供的doubleselect标签用来生成关联下拉列表框，其包括的常用属性如表9.20所示。
表9.20 doubleselect标签属性列表
下面来看一个简单的关联下拉列表框的示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>doubleselect示例</title>
</head>
<body>
<s:form action="xxxx">
<s:doubleselect
label="选择你喜欢的食物"
name="menu"
list="{’蔬菜’, ’肉类’}"
doubleName="dishes"
doubleList="top == ’蔬菜’ ? {’萝卜’, ’白菜’, ’西红柿’} : {’猪肉’, ’牛肉’, ’羊肉’}"
theme="css_xhtml"
/>
</s:form>
</body>
</html>
运行该JSP页面，第一个下拉列表框中包含“蔬菜”和“肉类”两个选项，第二个下拉列表框使用一个三目运算符表达式，如果第一个下拉列表框中选择的值为“蔬菜”，那么第二个下拉列表框将包含“蔬菜”和“白菜”以及“西红柿”3个选项；如果第一个下拉列表框中选择的值为“肉类”，那么第二个下拉列表框将包含“猪肉”和“牛肉”以及“羊肉”3个选项，如图9.42所示。
图9.42 使用doubleselect标签生成关联下拉列表框
注意
在使用doubleselect标签时，必须为form标签指定action，而且其action必须在“struts.xml”中配置，否则会出错。
如果第一个下拉列表框中有多个选项，那么就不能用三目运算符表达式来设定第二个下拉列表框中的选项了。这时可以创建一个Map对象，其中key值对应第一个下拉列表框中的选项，value值对应第二个下拉列表框中的选项，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>doubleselect示例</title>
</head>
<body>
<s:form action="xxxx">
<s:set name="citys"
value="# {’湖南省’:{’长沙市’, ’湘潭市’, ’株洲市’ } ,
'湖北省’:{’武汉市’, ’襄樊市’, ’黄冈市’},
'广东省’:{’广州市’, ’深圳市’, ’东莞市’}}">
</s:set>
<s:doubleselect
label="选择你所在城市"
name="menu"
list="#citys.keySet()"
doubleName="dishes"
doubleList="#citys[top] "
theme="css_xhtml" />
</s:form>
</body>
</html>
运行该JSP页面，在第一个下拉列表框中选择相应的省份，第二个下拉列表框中的选项会随之改变，如图9.43所示。
图9.43 使用doubleselect标签生成关联下拉列表框
9.4.8 optiontransferselect标签
Struts 2提供的optiontransferselect标签用来生成可以转移选项的两个下拉列表框，其包括的常用属性如表9.21所示。
表9.21 optiontransferselect标签属性列表
下面来看一个optiontransferselect标签的示例，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>optiontransferselect示例</title>
<s:head theme="ajax"/>
</head>
<body>
<! -- 设置下拉列表选项值 -->
<s:set name="qiuxing" value="{’姚明’, ’麦蒂’, ’乔丹’, ’科比’, ’艾弗森’, '
卡特’, ’詹姆斯’, ’加内特’}"></s:set>
<s:form action="xxxx">
<s:optiontransferselect
label="选择你喜欢的NBA球星"
theme="css_xhtml"
list="#qiuxing"
doubleName="selectqiuxing"
doubleList=""
leftTitle="所有球星"
rightTitle="你喜欢的球星"
>
</s:optiontransferselect>
</s:form>
</body>
</html>
运行该JSP页面，页面包含两个列表框，可以通过左移和右移按钮将第一个列表框中的选项移到和移出第二个列表框，如图9.44所示。可以通过addAllToLeftLabel等标签设置左右移按钮的显示文本，代码如下所示。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>optiontransferselect示例</title>
<s:head theme="ajax"/>
</head>
<body>
<! -- 设置下拉列表选项值 -->
<s:set name="qiuxing" value="{’姚明’, ’麦蒂’, ’乔丹’, ’科比’, ’艾弗森’, '
卡特’, ’詹姆斯’, ’加内特’}"></s:set>
<s:form action="xxxx">
<s:optiontransferselect
label="选择你喜欢的NBA球星"
theme="css_xhtml"
list="#qiuxing"
doubleName="selectqiuxing"
doubleList=""
leftTitle="所有球星"
rightTitle="你喜欢的球星"
addAllToLeftLabel="移除所有球星"
addAllToRightLabel="添加所有球星"
addToLeftLabel="移除球星"
addToRightLabel="添加球星"
>
</s:optiontransferselect>
</s:form>
</body>
</html>
运行该JSP页面，左右移按钮的显示文本已经变成设定值，如图9.45所示。
图9.44 optiontransferselect标签示例
图9.45 修改左右移按钮的显示文本