ADF Faces多值選中處理【附樣例工程】


開發過程時常會出現多選處理的情況:

  • 後臺數據庫方面:往往應用1個容量較大的字符串類型字段存儲,其內容則是將多個目標值應用指定分隔符(如“,”)連接在一起的字符串值。

  • 前臺界面方面:使用多選組件(如:多選列表、複選框等)實現候選數據展現和選取。

  • 應用ManagedBean作爲轉換器,一方面實現收集用戶多選結果值,通過連接符連接爲一個目標存儲值。


本文是基於“ADF Faces 表格應用基礎案例一:應用List<Class>填充文本表格”編寫的,會省去許多細節部分的介紹。


關於樣例工程

    本文提供的樣例工程將實現的關注點設定爲“實現UI組件和對目標值之間的互動”。

實現思路:

  1. 基於ManagedBean提供候選Map值作爲數據源。

  2. 應用多種組件實現多值選中(如:多選下拉列表,複選框等)

  3. 應用ManagedBean進行所選中的值的收集和設定。


實現的基本思路:

將樣例工程的創建過程分爲幾個小的階段,每個階段實現了不同的目標。



第一階段

  • 應用複選框作爲展現組件

  • 應用ManagedBean的Map屬性填充多選框

  • 實現設定和獲取其中的值


第二階段

  • 調整layout屬性影響UI佈局

  • 增加至3個多選組件,實現相互間的操作聯動



第一階段:   

  • 應用複選框作爲展現組件

  • 應用ManagedBean的Map屬性填充多選框

  • 實現設定和獲取其中的值。


創建工程:DemoMultipleValue1

wKioL1jTLyXTwmN1AAC7c3846YY770.png-wh_50


創建JSP:

wKiom1jTM2qjJRUBAAAz0RHCg1U168.png-wh_50


拖出1個複選框組件值頁面區域內,在彈出框點擊“bind”按鈕:

wKiom1jTLybxLr9hAAEill0rJKs347.png-wh_50


創建ADF Managed Bean:bean1

wKioL1jTLyeyIMwEAADSd1EJu98460.png-wh_50


創建Bean的屬性:data1,類型是java.util.Map

wKiom1jTLyiyO8ABAAB1D6xeZKs312.png-wh_50


修改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,爲了方便測試。

wKioL1jTLymxgBFTAAAycvw4Hd0157.png-wh_50

修改後的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的值。

wKiom1jTLyvw07nPAABca9LS1Jw261.png-wh_50


此時我們發現上圖的各項的順序是亂的:key4,key3,key6,key5,key2,key1。其原因是在Managed Bean中構建的數據源Map對象的實際類型是HashMap,將其調整爲Hashtable之後可見列出的序列值即爲有序結果了。

wKioL1jTLyujFm2sAADF9FCTHMk722.png-wh_50



至此我們實現了第一階段的目標




第二階段:

  • 調整layout屬性影響UI佈局

  • 增加至3個多選組件,實現相互間的操作聯動。


設定複選框組件的layout值爲“horizontal”,將佈局修改爲橫向。

增加2個多選組件:

    設定partialTriggers爲另2個組件id值實現相互監聽。

    設定autoSubmit屬性爲true,實現自動提交

wKioL1jTLyzCtzL3AAA9PGVaZLI915.png-wh_50

修改後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個組件都會同步變化,並且在後臺看到修正後的新目標值。

wKiom1jTLyyAsUDoAAEEYOoA2Xs298.png-wh_50




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章