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>
输出结果：
