開發過程時常會出現多選處理的情況:
後臺數據庫方面:往往應用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個組件都會同步變化,並且在後臺看到修正後的新目標值。