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 :)
