ADF Faces多值选中处理【附样例工程】
开发过程时常会出现多选处理的情况:
后台数据库方面:往往应用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的代码如下:
packagedemo.multiplevalue.app1.view;importjava.util.Hashtable;importjava.util.Map;publicclassMyBean{privateMapdata1;//构成多选值的数据源privateString[]selectedvalue;//当前选定项的清单privateStringtargetvalue;//最终值如value1,value3……publicMyBean(){data1=newHashtable();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,value3targetvalue="value1,value3,";selectedvalue=targetvalue.split(",");}publicvoidsetData1(Mapdata1){this.data1=data1;}publicMapgetData1(){returndata1;}publicvoidsetSelectedvalue(String[]selectedvalue){//用户更新列表有进行命令行输出。targetvalue="";this.selectedvalue=selectedvalue;//未选择任何内容则直接返回if(selectedvalue==null)return;for(Stringv:selectedvalue)targetvalue+=v+",";System.out.println("targetvalue:"+targetvalue);}publicString[]getSelectedvalue(){returnselectedvalue;}}
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对象。
publicvoidsetSelectedvalue(String[]selectedvalue){//用户更新列表有进行命令行输出。targetvalue="";this.selectedvalue=selectedvalue;//未选择任何内容则直接返回if(selectedvalue==null)return;for(Stringv:selectedvalue)targetvalue+=v+",";System.out.println("targetvalue:"+targetvalue);}
设定复选框组件的autoSubmit属性值为true,为了方便测试。
修改后的JSP页面代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><%@pagecontentType="text/html;charset=UTF-8"%><%@tagliburi="http://xmlns.oracle.com/adf/faces/rich"prefix="af"%><%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%><f:view><af:documenttitle="DemoMultiple1.jspx.jsp"id="d1"><af:formid="f1"><af:selectManyCheckboxlabel="Label1"id="smc1"value="#{viewScope.bean1.selectedvalue}"autoSubmit="true"><f:selectItemsid="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页面的代码:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><%@pagecontentType="text/html;charset=UTF-8"%><%@tagliburi="http://xmlns.oracle.com/adf/faces/rich"prefix="af"%><%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%><f:view><af:documenttitle="DemoMultiple1.jspx.jsp"id="d1"><af:formid="f1"><af:selectManyCheckboxlabel="Label1"id="smc1"partialTriggers="smc2sml1"value="#{viewScope.bean1.selectedvalue}"autoSubmit="true"layout="horizontal"><f:selectItemsid="si1"value="#{viewScope.bean1.data1}"/></af:selectManyCheckbox><af:selectManyChoicelabel="Label1"id="smc2"partialTriggers="smc1sml1"value="#{viewScope.bean1.selectedvalue}"autoSubmit="true"><f:selectItemsvalue="#{viewScope.bean1.data1}"id="si2"/></af:selectManyChoice><af:selectManyListboxlabel="Label1"id="sml1"partialTriggers="smc1smc2"value="#{viewScope.bean1.selectedvalue}"autoSubmit="true"><f:selectItemsvalue="#{viewScope.bean1.data1}"id="si3"/></af:selectManyListbox></af:form></af:document></f:view>
运行JSP页面即可看到3个多选组件,每当其中任意组件的选中清单被改变的时候,另外2个组件都会同步变化,并且在后台看到修正后的新目标值。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。