Membuat ComboBox group di ADF

Pada tulisan kali ini saya akan membahas tentang cara pembuatan group-option combo box (select item) di web application ADF.

Group option combobox maksudnya, combo box atau select item tetapi isi itemnya dikelompokkan berdasarkan kategori tertentu.
Kalau di HTML menggunakan tag <optgroup>

Berikut ini contohnya di code HTML :

 <select id="selectTypeProduct" size="1" name="selectTypeProduct">  
 <optgroup label="Computer">  
 <option value="1">Intel</option>  
 <option value="2">AMD</option>  
 </optgroup>  
 <optgroup label="Smartphone">  
 <option value="3">Samsung</option>  
 <option value="4">Iphone</option>  
 <option value="5">Sony</option>  
 <option value="6">Motorola</option>  
 </optgroup>  
 <optgroup label="Game">  
 <option value="7">Xbox</option>  
 <option value="8">PS4</option>  
 </optgroup>  
 </select>  

Nah bagaimana kalau kita membuatnya di aplikasi ADF.
Kita buat dulu projectnya. Buka IDE Jdeveloper.
Pilih new Application -> Fusion Web Application (ADF).
Kemudian kita buat halaman JSF dan class Backing bean nya.

Kemudian dari tab source kita drag element : SelectOneMenu dari component pallete. Ingat component yang kita pilih harus component JSF.

Berikut ini contoh source nya :

 <af:form id="f1" binding="#{backingBeanScope.backing_sample.f1}">  
     <af:outputText value="SAMPLE"  
             binding="#{backingBeanScope.backing_sample.txtTitle}"  
             id="txtTitle"/>  
     <af:panelLabelAndMessage label="Type Product : "  
                  binding="#{backingBeanScope.backing_sample.plam1}"  
                  id="plam1">  
     <h:selectOneMenu label="Type"  
              binding="#{backingBeanScope.backing_sample.selectTypeProduct}"  
              id="selectTypeProduct">  
      <f:selectItems value="#{backingBeanScope.backing_sample.optionsNamaProduct}"  
              binding="#{backingBeanScope.backing_sample.selectItemTypeProduct}"  
              id="selectItemTypeProduct"/>  
     </h:selectOneMenu>  
     </af:panelLabelAndMessage>  
    </af:form>  
   </af:document>  

di class backing bean nya kita buat property List<SelectItem>, tetapi jangan lupa dibuat juga getter nya.

 ............  
 private List<SelectItem> optionsNamaProduct;  
   public List<SelectItem> getOptionsNamaProduct() {  
     return optionsNamaProduct;  
   }  
 .............  

Kemudian di Constructor backing beannya kita akan mengisi List selectItem nya :

 public SampleComboBox(){  
     this.optionsNamaProduct = new ArrayList<SelectItem>();  
     SelectItemGroup groupComputer = new SelectItemGroup("Computer");  
     SelectItem[] itemComputers = new SelectItem[]{  
         new SelectItem(1,"Intel") ,  
         new SelectItem(2,"AMD") };  
     groupComputer.setSelectItems(itemComputers);  
     SelectItemGroup groupPhone = new SelectItemGroup("Smartphone");  
     SelectItem[] itemPhones = new SelectItem[]{  
         new SelectItem(3,"Samsung") ,  
         new SelectItem(4,"Iphone"),  
         new SelectItem(5,"Sony") ,  
         new SelectItem(6,"Motorola") };  
     groupPhone.setSelectItems(itemPhones);  
     SelectItemGroup groupGame = new SelectItemGroup("Game");  
     SelectItem[] itemGames = new SelectItem[]{  
         new SelectItem(7,"Xbox") ,  
         new SelectItem(8,"PS4") };  
     groupGame.setSelectItems(itemGames);  
     this.optionsNamaProduct.add(groupComputer);  
     this.optionsNamaProduct.add(groupPhone);  
     this.optionsNamaProduct.add(groupGame);  
   }  

List<SelectItem> diisi dengan SelectItemGroup yang dibuat berdasarkan kategori name nya.
Setiap SelectItemGroup diisi array SelectItem yang merupakan list item dari masing masing kategori.

<f:selectItems valuenya kita binding dengan List<SelectItem> tadi.
<f:selectItems value="#{backingBeanScope.backing_sample.optionsNamaProduct}" ..
       
Kemudian run halaman jspx nya dengan integrated weblogic di JDev.
Tampilannya kurang lebih seperti ini.

Selamat mencoba :)