勿以恶小而为之,勿以善小而不为--------------------------刘备
劝诸君,多行善事积福报,莫作恶
上一章简单介绍了Struts2的控制标签库和数据标签库(六),如果没有看过,请观看上一章
Struts2的UI标签,实际上就是将html中的表单再次增强了一下,html中的表单控件都有在struts2中相应的对照。
struts2标签不但拥有html标签的种种特点,还具有某些特殊的功能。
在介绍ui表单之前,再次讲一下注意点
注意点:
- struts2的UI标签,默认的主题是struts.ui.theme=xhtml, 这样的主题是按照table表格进行处理的,
不如前端boostrap或者layui进行处理,所以将样式改变simple格式。
在struts.xml中:
<!--修改struts中ui的主题,为simple-->
<constant name="struts.ui.theme" value="simple"></constant>
2.在struts中css的样式为cssClass, 普通的html为class
3.在struts2中style的样式为cssStyle,普通的html为style 两者的用法是完全一样的。
4.struts2增加了errorClass和errorStyle的样式。
5.设置标签的显示名称用label
一. OGNL中 #, %,${}的作用与区别
一.一 # 的用法
一.一.一 访问非根对象时使用
如
ActionContext.getContext().put("name","两个蝴蝶飞");
访问时就用#做前缀:
<s:property value="#request.name"/>
<s:property value="#attr.name"/>
第二种常见的情况就是,在<s:set > 或者<s:iterator var="user"> 时,取值时要用#user.属性,#set中的var值来获取值。
一.一.二 用于过滤和投影(projecting)集合
如books.{?#this.price>35}
遍历books集合,取出这个集合里面价钱>35的书本
一.一.三 用于构建Map
如: 构建性别的map
<s:radio list="#{'男':'男','女':'女','保密':'保密'}" name="sex"/>
也可以构建复选框和select框的,见下面标签的使用查看实例。
一.二 %的用法
用于强制转换成 ognl 表达式
当一个标签中的属性被翻译成字符串的时候,用%进行修饰,
告诉标签,这是一个OGNL表达式,让其按照OGNL表达式进行解析。 相当于强制转换。
如:
<%
request.setAttribute("name","两个蝴蝶飞");
%>
<s:textfield name="name" value="#request.name"
label="不用%号的情况:"/> <br/>
<s:textfield name="name" value="%{#request.name}"
label="用%号的情况,强制解析:"/>
特别是在form表单中,后面有value="一个值" 的情况下,都用%{} 进行强制转换。
一.三 $的用法
这个$是ONGL的$,不是EL的,更不是Jquery的。 常用于配置文件中。
一.三.一 在db.properties文件中引用
<property name="driverClass" value="${jdbc.driverClass}"/>
一.三.二 在struts.xml中跳转时传递数据(如id.parentId)使用
<result name="success" type="redirectAction">User_list.action?parentId=${parentId}</result>
一.三.三 在国际化时使用,做占位符
user.success=欢迎${name}登录
##但常用的为下面这种 Java的MessageFormat也是用这种方式
user.success=欢迎{0}登录
一.三.四 在验证Validate框架中使用
<validators>
<field name="age">
<field-validator type="int">
<param name="min">18</param>
<param name="max">58</param>
<message>校验:年龄必须为${min}为${max}之间!</message>
</field-validator>
</field>
</validators>
二 UI 标签库
二.一 < s:form>标签的常用属性
<s:form action="Single_getData"
method="post" namespace="/" enctype="">
</s:form>
这好像都没有什么可以说的,直接看就能明白。
如果要访问的路径是:user/User_add.action, 那么可以写action="/user/User_add.action",namespace="/", 也可以写action="User_add.action",namespace="/user", 建议使用后者。因为有的时候第一种情况,是无法确定是加上/user,还是不加/user。
二.二 <s:hidden> 标签的常用属性
s:hidden学用来表示隐藏域,在修改实体的表单数据中,常将id隐藏起来。
<s:hidden name="id" value="%{id}"/>
有时候,有没有隐藏的id值,是区分添加对象还是修改对象的依据。如果这个id值不为空,那么就是修改,如果为空,那么就是添加。
二.三 <s:textfiled> 普通文本域
姓名:<s:textfield name="name" value="两个蝴蝶飞"
cssClass=".input" cssStyle="100px;" ></s:textfield>
重启启动服务器,便会显示出name了.
二.四 <s:password> 密码隐藏域
<s:password name="password" value="1"></s:password>
二.五 <s:file> 文件上传框
<s:file name="upload" label="文件上传"></s:file>
二.六 <s:textarea> 文本域
<s:textarea name="description" cols="20" rows="3" value="这才是真正显示的数据呢">这是自我描述</s:textarea>
真正显示数据是在value属性中显示的,在中间是不显示的,这一点与html中的textarea标签不一样。
二.七 <s:submit>提交按钮
<s:submit value="提交"/>
二.八 <s:reset> 重置按钮
<s:reset value="重置"></s:reset>
接下来,就是最重要的UI控件,单选框,复选框,选择框了。 说其重要,主要表现在数据回显的角度上看得。
在工作开发中,常常会用到 这三个框的回显。
用JS判断相对来说比较麻烦,用Struts自己封装的UI控制就相对简单了。
三. <s:radio> 单选框的设置与回显
三.一 前端设置
三.一.一 Map 形式前端设置
三.一.一.一 设置展示
<s:radio list="#{'1':'男','0':'女'}" name="sex" />
显示的样式便为:
三.一.一.一 设置默认选中
如果想设置选中的话, 用value值来确定。
<s:radio list="#{'1':'男','0':'女'}" name="sex" value="0"/>
上面是Map形式,也可以用list的形式
三.一.二 List 形式前端 设置
三.一.二.一 设置显示
<s:radio name="sex" list="{'男','女'}"/>
翻译成html为:
其中value与显示的label值是一样的。
三.一.二.二 设置默认选中
默认选择一个性别的话:
<s:radio name="sex" list="{'男','女'}" value="'女'"/>
其中注意,字符串用''进行括起来。
一般来说,性别sex这个数据是由后端来设置和显示的,sex这个字段会被放在一个常量的实体中,这个常量实体一般为:
三.二 后端设置
三.二.一 定义常量 pojo
常量表实体: SystemConn
package com.yjl.pojo;
/**
* @author 两个蝴蝶飞
* @version 创建时间:Aug 24, 2018 10:56:42 PM
* 类说明 常量表实体
*/
public class SystemConn {
/**
* @param id 编号主键
* @param key key值
* @param value 具体的值
* @param description 相关的描述
*/
private Integer id;
private String key;
private String value;
private String description;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public SystemConn() {
super();
}
public SystemConn(Integer id, String key, String value, String description) {
super();
this.id = id;
this.key = key;
this.value = value;
this.description = description;
}
@Override
public String toString() {
return "SystemConn [id=" + id + ", key=" + key + ", value=" + value + ", description=" + description + "]";
}
}
三.二.二 创建Action 获取数据 RadioAction
public class RadioAction extends ActionSupport{
private static final long serialVersionUID = 1L;
public String showData(){
List<SystemConn> sexList=new ArrayList<SystemConn>();
//模拟数据
SystemConn s1=new SystemConn(1,"sex","男","男性");
SystemConn s2=new SystemConn(2,"sex","女","女性");
SystemConn s3=new SystemConn(3,"sex","保密","保密");
//将数据添加到集合中
sexList.add(s1);
sexList.add(s2);
sexList.add(s3);
//将性别的集合放置到Request域中
ActionContext.getContext().put("sexList",sexList);
return "radio";
}
}
三.二.三 struts.xml 文件 配置
<!-- 配置radio 单选按钮显示 -->
<action name="Radio_*" class="com.yjl.web.action.RadioAction" method="{1}">
<result name="radio">/WEB-INF/content/radio.jsp</result>
</action>
三.二.四 前端展示 /content/radio.jsp
<s:radio list="#request.sexList" listKey="id" listValue="value"
name="sex" />
输入网址: http://localhost:8080/Struts_Data/Radio_showData, 进行相应的展示数据
用list,listKey,listValue来进行相应的显示,翻译后的html为:
其中可以发现,listKey代表的是实际的值,listValue为页面显示的值,list自然为要显示的后端数据。
三.二.四 前端显示设置默认选中
其中如果设置默认选中的话,如默认选中第二个女: 只需要添加一个value集合即可。
<s:radio list="#request.sexList" listKey="id" listValue="value"
name="sex" value="#request.sexList[1].id"/>
这样就默认选中第二个了.
也可以使其选中男性,直接用准确的值表示,如:
<s:radio list="#request.sexList" listKey="id" listValue="value"
name="sex" value="2"/>
现在只是在页面上全部显示出来能够选择的属性
三.三 对象配置展示
实际开发中是将User中的sex显示出来,然后选中相应的radio。
需要将User与SystemConn进行相应的关联。(User类中已经存在一个sex普通值了,暂时多添加一个gender来表示.sex仍然不去掉).
三.三.一 User.java 添加对象属性
在User.java中
/**
* @param gender 要演示的性别
*/
private SystemConn gender;
实现它的setter和getter方法。
三.三.二 后端设置
在后端程序中:
public String showData2(){
//存储常量性别的集合
List<SystemConn> sexList=new ArrayList<SystemConn>();
//模拟数据
SystemConn s1=new SystemConn(1,"sex","男","男性");
SystemConn s2=new SystemConn(2,"sex","女","女性");
SystemConn s3=new SystemConn(3,"sex","保密","保密");
//将数据添加到集合中
sexList.add(s1);
sexList.add(s2);
sexList.add(s3);
//将性别的集合放置到Request域中
ActionContext.getContext().put("sexList",sexList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
//设置性别之间的关联gender
user7.setGender(s1);
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "radio";
}
三.三.三 配置struts.xml 文件
不需要改变,不动。
三.三.四 /content/radio 页面编写
在前端jsp页面中:
${name}的性别是:
<s:radio list="#request.sexList" listKey="id" listValue="value"
name="gender" value="%{gender.id}"/>
输入网址: http://localhost:8080/Struts_Data/Radio_showData2, 进行相应的展示数据
有的时候,为了简单开发,会将性别这个字段设置成普通的字符串String sex,而不是SystemConn gender,
也就是并不让User表与SystemConn表外键关联性别。
这个时候,前端的编写成 为:
${name}的性别是:
<s:radio list="#request.sexList" listKey="value" listValue="value"
name="sex" value="%{sex}"/>
四. <s:checkboxlist>复选框的设计与回显
用的是s:checkboxlist, 而不是 s:checkbox
与<s:radio /> 基本相同,这里就简化书写了
四.一 前端形式表达
四.一.一 前端 Map 形式表达
map形式表达:
<s:checkboxlist name="hobbys" list="#{'1':'读书','2':'写小说','3':'编程'}" value="{'2','3'}"></s:checkboxlist>
四.一.二 前端 List 形式表达
list形式表达:
<s:checkboxlist name="hobbys" list="{'读书','写小说','编程'}" value="{'写小说','编程'}"></s:checkboxlist>
其中 value表示选中哪一个。 用value="{}" 集合形式进行表示。
四.二 对象配置展示
从后端向前端传递数据,然后显示在前端。 将上面的SystemConn gender,改改, 只是radio是一个对象,checkboxlist成为一个集合了。(常用于权限的选择和修改)
四.二.一 User.java 类
在User.java中
/**
* @param hobbys 要演示的爱好
*/
private List<SystemConn> hobbys=new ArrayList<SystemConn>();
实现setter和getter方法
四.二.二 CheckBoxListAction
在CheckBoxListAction中
public class CheckBoxListAction extends ActionSupport{
private static final long serialVersionUID = 1L;
public String getData(){
//存储常量爱好的集合
List<SystemConn> hobbysList=new ArrayList<SystemConn>();
//模拟数据
SystemConn s1=new SystemConn(1,"hobbys","读书","读书");
SystemConn s2=new SystemConn(2,"hobbys","写小说","写小说");
SystemConn s3=new SystemConn(3,"hobbys","编程","编程");
SystemConn s4=new SystemConn(4,"hobbys","唱歌","唱歌");
//将数据添加到集合中
hobbysList.add(s1);
hobbysList.add(s2);
hobbysList.add(s3);
hobbysList.add(s4);
//将爱好的集合放置到Request域中
ActionContext.getContext().put("hobbysList",hobbysList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
//设置爱好之间的关联hobbys
user7.getHobbys().add(s2);
user7.getHobbys().add(s3);
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "checkbox";
}
}
四.二.三 配置struts.xml 文件
<!-- 配置checkboxList 多选框显示 -->
<action name="CheckBoxList_*" class="com.yjl.web.action.CheckBoxListAction" method="{1}">
<result name="checkbox">/WEB-INF/content/checkbox.jsp</result>
</action>
四.二.四 编写 /content/checkbox.jsp 页面
在前端界面上显示:
${name}的爱好是:
<s:checkboxlist name="hobbys" list="#request.hobbysList"
listKey="id" listValue="value" value="hobbys.{id}"></s:checkboxlist>
注意此时value的写法: value="hobbys.{id}" 即可。
输入网址: http://localhost:8080/Struts_Data/CheckBoxList_getData
展示数据为:
html解析如下所示。
四.三 设置成字符串集合
有的时候,爱好并不会做成对象关联,很可能只是一个普通的字符串,而且这个字符串是用户自己定义的,这个时候爱好只是一个普通的字符串。
四.三.一 User.java 中扩展
User.java中
/**
* @param loves 要演示的字符串爱好
*/
private List<String> loves=new ArrayList<String>();
四.三.二 CheckBoxListAction 添加方法
Action中
public String getData2(){
///存储常量爱好的集合
List<String> lovesList=new ArrayList<String>();
lovesList.add("读书");
lovesList.add("写小说");
lovesList.add("编程");
lovesList.add("唱歌");
//将爱好的集合放置到Request域中
ActionContext.getContext().put("lovesList",lovesList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
//设置爱好之间的关联hobbys
user7.getLoves().add("写小说");
user7.getLoves().add("编程");
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "checkbox";
}
四.三.三 配置struts.xml 文件
不需要改变
四.三.四 编写 /content/checkbox.jsp 页面
前端界面
<s:checkboxlist name="loves" list="#request.lovesList"></s:checkboxlist>
value不需要写,struts2给封装好了,不写value时,只要保证name="loves" 与User.java中Loves属性名一致,就可以正常相应的回显。
输入网址: http://localhost:8080/Struts_Data/CheckBoxList_getData2 ,
就可以显示:
五. <s:select> </s:select> 选择框
五.一 前端展示
五.一.一 前端map 展示
map类型表示:
<s:select name="education" list="#{'1':'初中','2':'高中','3':'大学','4':'研究生'}"
value="3" headerKey="" headerValue="----请选择学历-------"></s:select>
五.一.二 前端 list 展示
也可以用list类型进行表示
<s:select name="education" list="{'初中','高中','大学','研究生'}"
value="'大学'" headerKey="" headerValue="----请选择学历-------"></s:select>
map时 key表示传递的真实数据,value表示在页面上显示的数据。
list时,key与value的值相同,与<s:radio> <s:checkboxlist> 用法基本一样。
k只是 select选择框也是可以进行多选的,有一个multiple的属性,值为true或者false(默认为false)
<s:select name="education" list="#{'1':'初中','2':'高中','3':'大学','4':'研究生'}"
value="{'1','3'}" headerKey="" headerValue="----请选择学历-------"
multiple="true" size="6"></s:select>
不能用multiple="multiple",这样是显示不出来的,也不能单独一个multiple,会报错的,
必须设置成 multiple="true" 。
size为显示的数目,如果要显示的数目过多,而数据量小,那么下面会用空格进行填充。
从后台传递学历的值来进行显示。
五.二 学历是单个值的普通字段情况
五.二.一 User.java 类
User.java中添加education 学历的属性值
/**
* @param education 学历
*/
private String education;
实现 setter 和 getter 方法
五.二.二 创建SelectAction.java
SelectAction
public class SelectAction extends ActionSupport{
private static final long serialVersionUID = 1L;
public String getData(){
//存储常量学历的集合
List<String> eduList=new ArrayList<String>();
eduList.add("初中");
eduList.add("高中");
eduList.add("大学");
eduList.add("研究生");
//将学历的集合放置到Request域中
ActionContext.getContext().put("eduList",eduList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
user7.setEducation("大学");
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "select";
}
}
五.二.三 配置 struts.xml 文件
<!-- 配置select 多选框显示 -->
<action name="Select_*" class="com.yjl.web.action.SelectAction" method="{1}">
<result name="select">/WEB-INF/content/select.jsp</result>
</action>
五.二.四 编写 /content/select.jsp 页面
在前端界面:
<s:select name="education" list="#request.eduList"
value="%{education}" headerKey="" headerValue="----请选择学历-------"></s:select>
输入网址: http://localhost:8080/Struts_Data/Select_getData
会显示:
五.三 学历是多个普通值的情况,可以多选
五.三.一 User.java 中添加集合属性 educations
User.java
/**
* @param educations 学历多选
*/
private List<String> educations=new ArrayList<String>();
当为集合时,需要在类中就直接实例化,避免出现空指向的问题。
实现setter 和getter 方法
五.三.二 SelectAction 中添加新方法 getData2()
public String getData2(){
List<String> eduList=new ArrayList<String>();
eduList.add("初中");
eduList.add("高中");
eduList.add("大学");
eduList.add("研究生");
//将学历的集合放置到Request域中
ActionContext.getContext().put("eduList",eduList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
user7.getEducations().add("大学");
user7.getEducations().add("研究生");
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "select";
}
五.三.三 配置struts.xml
不需要改变
五.三.四 编写 /content/select.jsp 页面
前端:
<s:select name="educations" list="#request.eduList"
headerKey="" headerValue="----请选择学历-------"
multiple="true" size="%{#request.eduList.size+1}"></s:select>
这个时候,不需要写value="" ,size时用size+1,+1加的是上面的头
输入网址: http://localhost:8080/Struts_Data/Select_getData2
显示:
五.四 学历是单个对象(常用于显示学生所在的专业,班级和学院)
五.四.一 User.java
User.java
/**
* @param education1 学历
*/
private SystemConn education1;
实现setter 和getter 方法
五.四.二 编写 SelectAction,添加 getData3() 方法
Action中
public String getData3(){
List<SystemConn> eduList=new ArrayList<SystemConn>();
//模拟数据
SystemConn s1=new SystemConn(1,"edu","初中","初中");
SystemConn s2=new SystemConn(2,"edu","高中","高中");
SystemConn s3=new SystemConn(3,"edu","大学","大学");
SystemConn s4=new SystemConn(4,"edu","研究生","研究生");
//将数据添加到集合中
eduList.add(s1);
eduList.add(s2);
eduList.add(s3);
eduList.add(s4);
//将学历的集合放置到Request域中
ActionContext.getContext().put("eduList",eduList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
user7.setEducation1(s3);
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "select";
}
五.四.三 配置struts.xml
不需要配置
五.四.四 编写 select.jsp 页面
前端页面:
<s:select name="education1" list="#request.eduList"
listKey="id" listValue="value"
headerKey="" headerValue="----请选择学历-------"
value="%{education1.id}"
></s:select>
其中,添加了两个属性, listKey, listValue, 其中listKey表示的是真正传递的数据,listValue为页面上显示的数据。
五.五 学历是多个List对象(常用于角色的选择)
五.五.一 User.java
User.java
/**
* @param educations 学历
*/
private List<SystemConn> educations1=new ArrayList<SystemConn>();
实现setter 和getter 方法
五.五.二 SelectAction 中添加 getData4() 方法
Action
public String getData4(){
List<SystemConn> eduList=new ArrayList<SystemConn>();
//模拟数据
SystemConn s1=new SystemConn(1,"edu","初中","初中");
SystemConn s2=new SystemConn(2,"edu","高中","高中");
SystemConn s3=new SystemConn(3,"edu","大学","大学");
SystemConn s4=new SystemConn(4,"edu","研究生","研究生");
//将数据添加到集合中
eduList.add(s1);
eduList.add(s2);
eduList.add(s3);
eduList.add(s4);
//将学历的集合放置到Request域中
ActionContext.getContext().put("eduList",eduList);
//设置用户
User user7=new User(7,"两个蝴蝶飞","123","男",24,"在下");
user7.getEducations1().add(s3);
user7.getEducations1().add(s4);
//将user7用户放置到ValueStack的栈顶
ActionContext.getContext().getValueStack().push(user7);
return "select";
}
五.五.三 配置struts.xml 文件
不需要改变
五.五.四 编写 /content/select.jsp 页面
<s:select name="education1" list="#request.eduList"
listKey="id" listValue="value"
headerKey="" headerValue="----请选择学历-------"
value="%{educations1.{id}}" multiple="true" size="%{#request.eduList.size+1}"
></s:select>
注意此时value的写法. educations.{id}
输入网址: http://localhost:8080/Struts_Data/Select_getData4
运行结果:
这就是struts的UI标签的常用用法。
本章节代码链接为:
链接:https://pan.baidu.com/s/1uen9t3Jm2yHfz0Zicr__Vg
提取码:t1jl
谢谢您的观看!!!