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中,
在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表单便签的不同
*
Action的内容
private List userList = new ArrayList();
public List getUserList() {
return userList;
}
public void setUserList(List 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;
}
*复选框checkboxlist:
*action的内容
private List userList = new ArrayList();
public String[] getCheckbox1() {
String[] checkbox1 = new String[2];
checkbox1[0] = "zhangsan";
checkbox1[1] = "lisi";
return checkbox1;
}
public List getUserList() {
return userList;
}
public void setUserList(List 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;
}
通过action的getCheckbox1方法为checkbox赋值
*下拉框
属性:list,listKey,listValue
headerKey: 在所有的选项前再添加额外的一个选项作为其标题的value属性
headerValue: 在所有的选项前再添加额外的一个选项作为其标题的显示文字
emptyOption: 是否在标题和真实的选项之间加一个空选项
multiple: 用户是否可以同时选择多项
size:下拉框的高度,即最多可以同时显示多少个选项
简单示例:
action的内容:
private List userList = new ArrayList();
public String[] getSelect1() {
String[] select1 = new String[2];
select1[0] = "zhangsan";
select1[1] = "lisi";
return select1;
}
public List getUserList() {
return userList;
}
public void setUserList(List 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的内容:
输出结果:
5:复杂操作标签
*head标签
仅仅把head标签放到页面内,没有任何的参数,它可以自动识别页面需要的Struts2的哪些辅助性文件,并帮助用户自动导入,比如某些Struts2的标签需要使用Struts2提供的某些js文件,那么head标签就可以自动发现并导入这些js文件
*combobox标签
combobox标签用于生成一个文本框和一个下拉框,下拉框出现在文本框的下面,在最终提高的时候只提交文本框的输入值,下拉框用于在其选项改变时,也就是onchange事件被触发时,把自身的被选中项的值赋到文本框上
与文本框有关的属性: maxlength size readonly
与下拉框有关的属性:list, listKey, listValue
简单示例:
private List userList = new ArrayList();
public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}
public List getUserList() {
return userList;
}
public void setUserList(List 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" %>
comboboxlist用法
输出效果图:
*uploadselect标签
*生成一个可以自由上下移动选项的下拉框。
*allowMoveUp: 是否显示“上移”按钮,默认为显示
allowMovoDown: 是否显示“下移”按钮,默认为显示
allowSelectAll: 是否显示“全选”按钮,默认为显示
moveUpLabel: 上移按钮显示的文本
moveDownLabel: 下移按钮显示的文本
selectAllLabel: 全选按钮显示的文本
简单示例:
action的内容:
private List userList = new ArrayList();
public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}
public List getUserList() {
return userList;
}
public void setUserList(List 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的内容:
updownselect用法
输出效果如下图:
*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 userList = new ArrayList();
public Integer[] getSelect1() {
Integer[] select1 = new Integer[1];
select1[0] = 20;
return select1;
}
public List getUserList() {
return userList;
}
public void setUserList(List 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;
}
optiontransferselect用法