开发过程时常会出现多选处理的情况:
-
后台数据库方面：往往应用1个容量较大的字符串类型字段存储，其内容则是将多个目标值应用指定分隔符（如“，”）连接在一起的字符串值。
-
前台界面方面：使用多选组件（如：多选列表、复选框等）实现候选数据展现和选取。
-
应用ManagedBean作为转换器，一方面实现收集用户多选结果值，通过连接符连接为一个目标存储值。
本文是基于“ADF Faces 表格应用基础案例一：应用List<Class>填充文本表格”编写的，会省去许多细节部分的介绍。
关于样例工程
本文提供的样例工程将实现的关注点设定为“实现UI组件和对目标值之间的互动”。
实现思路：
-
基于ManagedBean提供候选Map值作为数据源。
-
应用多种组件实现多值选中（如：多选下拉列表，复选框等）
-
应用ManagedBean进行所选中的值的收集和设定。
实现的基本思路：
将样例工程的创建过程分为几个小的阶段，每个阶段实现了不同的目标。
第一阶段
-
应用复选框作为展现组件
-
应用ManagedBean的Map属性填充多选框
-
实现设定和获取其中的值
第二阶段
-
调整layout属性影响UI布局
-
增加至3个多选组件，实现相互间的操作联动
第一阶段：
-
应用复选框作为展现组件
-
应用ManagedBean的Map属性填充多选框
-
实现设定和获取其中的值。
创建工程：DemoMultipleValue1
创建JSP：
拖出1个复选框组件值页面区域内，在弹出框点击“bind”按钮：
创建ADF Managed Bean:bean1
创建Bean的属性：data1，类型是java.util.Map
修改Managed Bean的代码如下：
package demo.multiplevalue.app1.view;
import java.util.Hashtable;
import java.util.Map;
public class MyBean {
private Map data1;//构成多选值的数据源
private String[] selectedvalue;//当前选定项的清单
private String targetvalue;//最终值如value1,value3……
public MyBean() {
data1 = new Hashtable();
data1.put("key1", "value1");
data1.put("key2", "value2");
data1.put("key3", "value3");
data1.put("key4", "value4");
data1.put("key5", "value5");
data1.put("key6", "value6");
//设定初始选中值为value1,value3
targetvalue = "value1,value3,";
selectedvalue = targetvalue.split(",");
}
public void setData1(Map data1) {
this.data1 = data1;
}
public Map getData1() {
return data1;
}
public void setSelectedvalue(String[] selectedvalue) {
//用户更新列表有进行命令行输出。
targetvalue = "";
this.selectedvalue = selectedvalue;
//未选择任何内容则直接返回
if(selectedvalue==null)
return;
for (String v : selectedvalue)
targetvalue += v + ",";
System.out.println("targetvalue:"+targetvalue);
}
public String[] getSelectedvalue() {
return selectedvalue;
}
}
Bean中有3个属性：
-
data1：用于提供填充复选框组件的数据源对象。
-
selectedvalue：用于记录用户选择复选框后产生的值数组。
-
targetvalue：用于存放将复选值连接后的目标值对象，此处设定默认值为“value1,value3”。
在构造函数中初始化Map对象的值内容：
data1.put("key1", "value1");
data1.put("key2", "value2");
data1.put("key3", "value3");
data1.put("key4", "value4");
data1.put("key5", "value5");
data1.put("key6", "value6");
在回写selectedvalue值的方法中收集选中值的数组，并重建目标值（targetvalue）对象。
注意：用户操作取消选中全部候选项的时候，该方法也会被调用，参数值会传入null对象。
public void setSelectedvalue(String[] selectedvalue) {
//用户更新列表有进行命令行输出。
targetvalue = "";
this.selectedvalue = selectedvalue;
//未选择任何内容则直接返回
if(selectedvalue==null)
return;
for (String v : selectedvalue)
targetvalue += v + ",";
System.out.println("targetvalue:"+targetvalue);
}
设定复选框组件的autoSubmit属性值为true，为了方便测试。
修改后的JSP页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <af:document title="DemoMultiple1.jspx.jsp" id="d1"> <af:form id="f1"> <af:selectManyCheckbox label="Label 1" id="smc1" value="#{viewScope.bean1.selectedvalue}" autoSubmit="true"> <f:selectItems id="si1" value="#{viewScope.bean1.data1}" /> </af:selectManyCheckbox> </af:form> </af:document> </f:view>
运行测试页面即可看到下图结果了，用户看到的信息是Map对象的key部分，且默认将key1和key3选中了。当我们调整选项为key3和key5被选中的时候，会同时看到服务端后台命令行中输出了修正后的targetvalue的值。
此时我们发现上图的各项的顺序是乱的：key4,key3,key6,key5,key2,key1。其原因是在Managed Bean中构建的数据源Map对象的实际类型是HashMap，将其调整为Hashtable之后可见列出的序列值即为有序结果了。
至此我们实现了第一阶段的目标
第二阶段：
-
调整layout属性影响UI布局
-
增加至3个多选组件，实现相互间的操作联动。
设定复选框组件的layout值为“horizontal”，将布局修改为横向。
增加2个多选组件：
设定partialTriggers为另2个组件id值实现相互监听。
设定autoSubmit属性为true，实现自动提交
修改后JSP页面的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<af:document title="DemoMultiple1.jspx.jsp" id="d1">
<af:form id="f1">
<af:selectManyCheckbox label="Label 1" id="smc1" partialTriggers="smc2 sml1"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" layout="horizontal">
<f:selectItems id="si1" value="#{viewScope.bean1.data1}" />
</af:selectManyCheckbox>
<af:selectManyChoice label="Label 1" id="smc2" partialTriggers="smc1 sml1"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" >
<f:selectItems value="#{viewScope.bean1.data1}" id="si2"/>
</af:selectManyChoice>
<af:selectManyListbox label="Label 1" id="sml1" partialTriggers="smc1 smc2"
value="#{viewScope.bean1.selectedvalue}" autoSubmit="true" >
<f:selectItems value="#{viewScope.bean1.data1}" id="si3"/>
</af:selectManyListbox>
</af:form>
</af:document>
</f:view>
运行JSP页面即可看到3个多选组件，每当其中任意组件的选中清单被改变的时候，另外2个组件都会同步变化，并且在后台看到修正后的新目标值。
附件：http://down.51cto.com/data/2366533
