Struts2的标签之UI标签

1：UI标签分为分为以下几种：

*Form Tags：表单标签，包含所有可以用在Form表单里面的标签

*Non-Form UI Tags：非表单标签，主要包含错误展示，组件等。

*Ajax Tags：用来支持Ajax的标签。

2：模板和主题

*模板(Template)

就是一些代码，在Struts2中是由FreeMarker来编写的，标签使用这些代码能渲染生成相应的HTML代码

一个标签需要知道自己显示什么数据，以及最终生成什么样的HTML代码，其中，显示什么数据往往是通过用户指定的OGNL表达式去值栈取，而最终生成什么样的HTML代码，就是由一组FreeMarker的模板来定义，每个标签都会有自己对应的FreeMarker模板，这组模板在Struts2核心jar包的template包中。

*主题(Theme)

就是一系列模板的集合。通常情况下，这一系列模板会有相同或者类似的风格，这样能保证功能或者视觉效果的一致性。

Strut2标签是使用一个模板来生成最终的HTML代码，这也意味着，如果使用不同的模板，那么同一个标签所生成的HTML代码并不一样，也意味着不同的标签所生成的HTML代码的风格也可能不一样。

每一个主题包含一系列的模板，这些模板就会有相同或者类似的风格，从而解决上面的问题，这也意味着，在Struts2中，可以通过切换主题来切换标签的HTML风格。

*Struts2的内建主题：

*simple：只生成最基本的HTML元素，没有任何附加功能。

*xhtml：在simple的基础上提供附加功能，提供布局功能，Label显示名称，以及验证框架和国际化框架的集成。

*css_html: 在xhtml的基础上，添加对CSS的支持和控制。

*Ajax：继承自xhtml, 提供Ajax的支持。

其中，xhtml为默认的主题，但是，xhtml主题有一定的局限性，因为它使用表格进行布局，只支持每一行放一个表单项，这样一来，要是有复杂的页面布局，不好弄了。

修改默认的主题：

在struts.xml中，<constant name="struts.ui.theme" value="simple" />

在struts.properties中，struts.ui.theme = simple

3：表单标签的通用属性

*与css相关的属性

cssClass, cssStyle, cssErrorClass, cssErrorStyle

*与触发事件相关的属性

onblur, onchange, onclick, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,

onselect

*与悬浮提示相关的属性

jsTooltipEnabled: 是否允许用javascript来生成悬浮提示

tooltip：悬浮提示的内容

tooltipDelay:悬浮提示出现的延迟时间，以ms为单位

tooltipIcon：悬浮提示使用图标的URL路径

*其他来源于HTML的属性

accesskey：指定快捷键，如果设置这个属性为x，按Alt+xz组合键就可以快速定位到这个生成的HTML组件

disabled, id, tabindex, title

*与提示文本相关的属性

label：用来显示在HTML组件前的文本

key：同label一样，也是用来显示在HTML组件前的文本，但是其内容取自国际化信息

labelposition：标签文本显示的位置，可以选择top或者left

*与模板和主题相关的属性

template, templateDir, theme

*是否为必填的属性

required：指定此生成的HTML组件是否为必填项

requiredposition：指定此生成的HTML组件是必填项时提示信息显示的位置，可以是left或者right

4：Struts2标签和一般的HTML表单便签的不同

*

<form action="/helloworld/ognlAction.action" method="post"></form>

<s:form action="/ognlAction.action" method="post"></s:form>

<s:form action="/ognlAction.action" method="post" namespace="/testNamespace"></s:form>

<s:form>的action属性不用带应用上下文，如/helloworld, 可以使用namespace属性来指定使用到的命名空间。

*

<textarea>默认值</textarea>

<s:textarea value="默认值"/>

指定默认值的方式不一样

*单选框radio

常见的属性：

list：用于生成单选框的集合，必须配置

listKey: 生成的radio的value属性

listValue: 生成的radio后面显示的文字

简单示例：

Action的内容

private List<User> userList = new ArrayList();

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

userList.add(user2);
userList.add(user1);

return SUCCESS;
}

页面jsp的内容：

<s:radio name="radio1" list="userList" listKey="name" listValue="age"/>

输出结果：



*复选框checkboxlist:

*action的内容

private List<User> userList = new ArrayList();

public String[] getCheckbox1() {
String[] checkbox1 = new String[2];
checkbox1[0] = "zhangsan";
checkbox1[1] = "lisi";
return checkbox1;
}

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

User user3 = new User();
user3.setName("wangwu");
user3.setAge(30);

userList.add(user2);
userList.add(user1);
userList.add(user3);

return SUCCESS;
}

*页面jsp的内容：

<s:checkboxlist name="checkbox1" list="userList"  listKey="name" listValue="age"></s:checkboxlist>

*输出结果：



通过action的getCheckbox1方法为checkbox赋值

*下拉框

属性：list，listKey，listValue

headerKey: 在所有的选项前再添加额外的一个选项作为其标题的value属性

headerValue: 在所有的选项前再添加额外的一个选项作为其标题的显示文字

emptyOption: 是否在标题和真实的选项之间加一个空选项

multiple: 用户是否可以同时选择多项

size:下拉框的高度，即最多可以同时显示多少个选项

简单示例：

action的内容：

private List<User> userList = new ArrayList();

public String[] getSelect1() {
String[] select1 = new String[2];
select1[0] = "zhangsan";
select1[1] = "lisi";
return select1;
}

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

User user3 = new User();
user3.setName("wangwu");
user3.setAge(30);

userList.add(user2);
userList.add(user1);
userList.add(user3);

return SUCCESS;
}

页面jsp的内容：

<s:select name="select1" list="userList" listKey="name" listValue="age" multiple="true" size="5"></s:select>

输出结果：



5：复杂操作标签

*head标签

仅仅把head标签放到页面内，没有任何的参数，它可以自动识别页面需要的Struts2的哪些辅助性文件，并帮助用户自动导入，比如某些Struts2的标签需要使用Struts2提供的某些js文件，那么head标签就可以自动发现并导入这些js文件

<s:head>

*combobox标签

combobox标签用于生成一个文本框和一个下拉框，下拉框出现在文本框的下面，在最终提高的时候只提交文本框的输入值，下拉框用于在其选项改变时，也就是onchange事件被触发时，把自身的被选中项的值赋到文本框上

与文本框有关的属性： maxlength size readonly

与下拉框有关的属性：list, listKey, listValue

简单示例：

private List<User> userList = new ArrayList();

public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

User user3 = new User();
user3.setName("wangwu");
user3.setAge(30);

userList.add(user2);
userList.add(user1);
userList.add(user3);

return SUCCESS;
}

页面内容：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>comboboxlist用法</title>
<s:head/>
</head>
<body>
<s:form action="" method="post" theme="simple">

<s:combobox name="select1" list="userList" listKey="age" listValue="name" size="20">
</s:combobox>

</s:form>
</body>
</html>

注意要引用<s:head>标签

输出效果图：



*uploadselect标签

*生成一个可以自由上下移动选项的下拉框。

*allowMoveUp: 是否显示“上移”按钮，默认为显示

allowMovoDown: 是否显示“下移”按钮，默认为显示

allowSelectAll: 是否显示“全选”按钮，默认为显示

moveUpLabel: 上移按钮显示的文本

moveDownLabel: 下移按钮显示的文本

selectAllLabel: 全选按钮显示的文本

简单示例：

action的内容：

private List<User> userList = new ArrayList();

public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

User user3 = new User();
user3.setName("wangwu");
user3.setAge(30);

userList.add(user2);
userList.add(user1);
userList.add(user3);

return SUCCESS;
}

页面jsp的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>updownselect用法</title>
<s:head/>
</head>
<body>
<s:form action="" method="post" theme="simple">
<s:updownselect list="userList" name="select1" listKey="age" listValue="name"
allowMoveUp="true" moveUpLabel="上移" allowMoveDown="true" allowSelectAll="true"
moveDownLabel="下移" selectAllLabel="全选"  />
</s:form>
</body>
</html>

输出效果如下图：



*optiontransferselect标签

它用来生成两个下拉框，这两个下拉框左右放置，有按钮可以控制将选项在两个下拉框之间转移，在每个下拉框还有按钮可以像updownselect标签那样控制选项上下移动

主要属性可以分为四组：

*控制左下拉框名字以及数据来源

*name, list, listKey, listValue, headerKey, headerValue

*控制右下拉框名字以及数据源

*doubleName, doubleList, doubleListKey, doubleListValue, doubleHeaderKey, doubleHeaderValue

*控制两个下拉框之间的左右移动按钮

*allowAddAllToLeft, allowAddToLeft, allowAddToRight, allowAddAllToRight, addAllToLeftLabel, addAllToRightLabel, addToLeftLabel, addToRightLabel

*控制两个下拉框之间的上下移按钮

*allowUpDownOnLeft, allowUpDownOnRight, leftDownLabel, leftUpLabel, rightUpLabel, rightDownLabel, allowSelectAll

简单示例：

action内容：

private List<User> userList = new ArrayList();

public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public String execute() {

User user1 = new User();
user1.setName("zhangsan");
user1.setAge(20);

User user2 = new User();
user2.setName("lisi");
user2.setAge(22);

User user3 = new User();
user3.setName("wangwu");
user3.setAge(30);

userList.add(user2);
userList.add(user1);
userList.add(user3);

return SUCCESS;
}

页面jsp：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>optiontransferselect用法</title>
<s:head/>
</head>
<body>
<s:form action="" method="post" theme="simple">
<s:optiontransferselect name="select1" doubleList="userList2" list="userList" listKey="age" listValue="name" doubleName="select2"
headerKey="" headerValue="请选择" doubleListKey="age" doubleListValue="name" doubleHeaderKey=""
doubleHeaderValue="请选择" addAllToLeftLabel="全部左移" addAllToRightLabel="全部右移" addToLeftLabel="左移"
addToRightLabel="右移" allowAddAllToLeft="true" allowAddToLeft="true" allowAddToRight="true"
allowAddAllToRight="true" allowUpDownOnLeft="true" allowUpDownOnRight="true" leftUpLabel="上移"
leftDownLabel="下移" rightUpLabel="上移" rightDownLabel="下移" allowSelectAll="false"
/>
</s:form>
</body>
</html>

输出结果：