ADF Faces多值选中处理【附样例工程】
admin
2023-07-31 04:40:10
0


开发过程时常会出现多选处理的情况:

  • 后台数据库方面:往往应用1个容量较大的字符串类型字段存储,其内容则是将多个目标值应用指定分隔符(如“,”)连接在一起的字符串值。

  • 前台界面方面:使用多选组件(如:多选列表、复选框等)实现候选数据展现和选取。

  • 应用ManagedBean作为转换器,一方面实现收集用户多选结果值,通过连接符连接为一个目标存储值。


本文是基于“ADF Faces 表格应用基础案例一:应用List填充文本表格”编写的,会省去许多细节部分的介绍。


关于样例工程

    本文提供的样例工程将实现的关注点设定为“实现UI组件和对目标值之间的互动”。

实现思路:

  1. 基于ManagedBean提供候选Map值作为数据源。

  2. 应用多种组件实现多值选中(如:多选下拉列表,复选框等)

  3. 应用ManagedBean进行所选中的值的收集和设定。


实现的基本思路:

将样例工程的创建过程分为几个小的阶段,每个阶段实现了不同的目标。



第一阶段

  • 应用复选框作为展现组件

  • 应用ManagedBean的Map属性填充多选框

  • 实现设定和获取其中的值


第二阶段

  • 调整layout属性影响UI布局

  • 增加至3个多选组件,实现相互间的操作联动



第一阶段:   

  • 应用复选框作为展现组件

  • 应用ManagedBean的Map属性填充多选框

  • 实现设定和获取其中的值。


创建工程:DemoMultipleValue1

ADF Faces多值选中处理【附样例工程】


创建JSP:

ADF Faces多值选中处理【附样例工程】


拖出1个复选框组件值页面区域内,在弹出框点击“bind”按钮:

ADF Faces多值选中处理【附样例工程】


创建ADF Managed Bean:bean1

ADF Faces多值选中处理【附样例工程】


创建Bean的属性:data1,类型是java.util.Map

ADF Faces多值选中处理【附样例工程】


修改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,为了方便测试。

ADF Faces多值选中处理【附样例工程】

修改后的JSP页面代码如下:


<%@ 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"%>

    
        
            
                
                
                
            
        
    


运行测试页面即可看到下图结果了,用户看到的信息是Map对象的key部分,且默认将key1和key3选中了。当我们调整选项为key3和key5被选中的时候,会同时看到服务端后台命令行中输出了修正后的targetvalue的值。

ADF Faces多值选中处理【附样例工程】


此时我们发现上图的各项的顺序是乱的:key4,key3,key6,key5,key2,key1。其原因是在Managed Bean中构建的数据源Map对象的实际类型是HashMap,将其调整为Hashtable之后可见列出的序列值即为有序结果了。

ADF Faces多值选中处理【附样例工程】



至此我们实现了第一阶段的目标




第二阶段:

  • 调整layout属性影响UI布局

  • 增加至3个多选组件,实现相互间的操作联动。


设定复选框组件的layout值为“horizontal”,将布局修改为横向。

增加2个多选组件:

    设定partialTriggers为另2个组件id值实现相互监听。

    设定autoSubmit属性为true,实现自动提交

ADF Faces多值选中处理【附样例工程】

修改后JSP页面的代码:


<%@ 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"%>

    
        
                            
                                
              
            
                            
                                
                 
            
                            
                                
            
        
    


运行JSP页面即可看到3个多选组件,每当其中任意组件的选中清单被改变的时候,另外2个组件都会同步变化,并且在后台看到修正后的新目标值。

ADF Faces多值选中处理【附样例工程】




附件:http://down.51cto.com/data/2366533

相关内容

热门资讯

“七七事变”89周年,我们从未... 今天是“七七事变”89周年我们不敢忘,也不能忘驻守宛平城的中国军队奔赴卢沟桥抵抗日军(资料图)我们忘...
神秘的穆杰塔巴,全世界只能看到... 伊朗正在为已故最高领袖哈梅内伊举办为期一周的隆重葬礼,伊朗总统佩泽希齐扬等高级官员,和哈梅内伊的家人...
扛不住了,从4.5%到46%,... 据美国消费者新闻与商业频道网站(CNBC)7月7日报道,随着中国AI模型在性能上缩小与美国领先对手的...
字节跳动申请“我的刀盾”“香蕉... 据中国版权保护中心披露,北京字跳网络技术有限公司集中登记了“咕咕嘎嘎”“刀盾狗”“香蕉猫”等数十个网...
波兰随笔丨克拉科夫:归来的王城... 一、抵达之前,它已在时间深处存在筹划波兰旅游,本来没有克拉科夫,偶然刷到了一条视频,关于克拉科夫。辉...
短时强降水、龙卷风等强对流天气... 近期,我国多地遭遇强对流天气。强对流天气是指出现短时强降水、雷雨大风、龙卷风和冰雹等现象的灾害性天气...
男子婚内转51万给小18岁情人... 李某与小18岁的赵某发生婚外情十余年,累计向赵某转账511157元,其妻孙某起诉至法院要求赵某全部返...
锁定胜局后,比利时队现场跳起特... 据美媒《每日野兽》,当地时间7月6日,比利时队击败了本土作战的美国队,还当众调侃了特朗普一番。此前美...
俄最大国营炼油厂遭无人机空袭,... 据凤凰卫视报道,乌克兰首都基辅的卫星城维什涅沃遭到俄军大规模空袭,受损严重。另一方面,俄罗斯鄂木斯克...
广西洪水致养蛇场蛇逃出,网友称... 受今年第10号台风“美莎克”影响,广西遭遇连续强降雨,南宁横州市多处水库发生险情。7月6日上午,横州...