Thursday, December 18, 2014

ADF - Shuttle Component

Pada kesempatan ini, saya akan membahas tentang Shuttle Component. Shuttle Component sendiri merupakan sebuah komponen untuk memilih lebih dari satu buah pilihan. Pada kesempatan ini, saya ingin mempraktekan cara menginsert value dari shuttle component namun value nya di pisahkan dengan tanda ";" . Untuk mendowload project bisa klik disini. Sebelum nya, saya akan menjelaskan sedikit arsitektur project yang akan saya buat. 

Di dalam project ini, saya menggunakan 2 buah table, table pertama menggunakan table department yang bisa di ambil dari database HR serta 1 lagi menggunakan table yang saya buat sendiri untuk menampung hasil insert dari shuttle. Table Department akan digunakan untuk dijadikan sebagain LOV untuk shuttle component, sedangkan table satu nya untuk menampung hasil insert data dan di tampilkan ke dalam table.

  • Berikut tampilan main.jspx yang terdiri dari table yang saya buat dan 1 buah button untuk membuka popup.

Tampilan main.jspx
  • Berikut tampilan popup untuk insert data, yang terdiri dari 1 buah shuttle component, 1 input text dan 1 buah button. Pada screen ini, kita diminta untuk memasukkan nama, serta nama department yang dimana department bisa dipilih lebih dari 1, jika sudah button insert berfungsi untuk memasukkan data ke dalam table yang sudah kita buat di main screen.

Tampilan Insert Data Pada Pop Up
  • Kita masukkan ActionListener pada button yang ada di dalam popup screen. Jika belum pernah membuat method nya bisa di buat.
ActionListener Pada Button Add
  • Untuk memasukkan Shuttle Component, kita bisa mendrag data control yang ingin kita buat shuttle ke dalam jspx, sebagai contoh saya akan membuat shuttle dari DepartmentView1. Kemudian pilih Multiple Selection dan pilih ADF Select Many Shuttle. Jika sudah, kita pilih Base Attribute nya menjadi DepartmentName & DisplayAttribute nya menjadi DepartmentName.
Cara Add Shuttle Component

Pilihan Ketika Add Shuttle Component

  • Berikut Sample Java Code nya.
 package com.demo.blog.bean;  
 import com.demo.blog.model.TableCreationVoImpl;  
 import com.demo.blog.model.TableCreationVoRowImpl;  
 import com.demo.blog.model.common.AppModule;  
 import javax.el.ELContext;  
 import javax.el.ExpressionFactory;  
 import javax.el.ValueExpression;  
 import javax.faces.application.Application;  
 import javax.faces.context.FacesContext;  
 import javax.faces.event.ActionEvent;  
 import oracle.adf.model.BindingContext;  
 import oracle.adf.model.binding.DCBindingContainer;  
 import oracle.adf.model.binding.DCDataControl;  
 import oracle.adf.model.binding.DCIteratorBinding;  
 import oracle.adf.view.rich.component.rich.input.RichInputText;  
 import oracle.binding.BindingContainer;  
 import oracle.jbo.Row;  
 import oracle.jbo.ViewObject;  
 import oracle.jbo.uicli.binding.JUCtrlListBinding;  
 public class Bean {  
   private final String TABLECREATION_ITERATOR = "TableCreationVo1Iterator";  
   private RichInputText nama;  
   public Bean() {  
   }  
   public BindingContainer getBindings() {  
     return oracle.adf.model.BindingContext.getCurrent().getCurrentBindingsEntry();  
   }  
   public void SaveAndClose(ActionEvent actionEvent) {  
     // Add event code here...  
     oracle.binding.BindingContainer bc = this.getBindings();  
     JUCtrlListBinding listBinding =  
       (JUCtrlListBinding)bc.get("DepartmentView1");  
     BindingContext bindingContext = BindingContext.getCurrent();  
     DCDataControl dc =  
       bindingContext.findDataControl("AppModuleDataControl");  
     AppModule appM = (AppModule)dc.getDataProvider();  
     String departmentVar = "";  
     Object[] str = listBinding.getSelectedValues();  
     if (str != null && str.length > 0) {  
       for (int i = 0; i < str.length; i++) {  
         if (i == 0) {  
           departmentVar = str[i].toString();  
         } else {  
           departmentVar = departmentVar + " ; " + str[i];  
         }  
       }  
       listBinding.clearSelectedIndices();  
     }  
     String name = getNama().getValue().toString();  
     AppModule appModule = getAppModuleDataControl();  
     TableCreationVoImpl vo =  
       (TableCreationVoImpl)this.getViewObjectByIterator(TABLECREATION_ITERATOR);  
     Row newRecord = vo.createRow();  
     newRecord.setAttribute(TableCreationVoRowImpl.DEPARTMENT,  
                 departmentVar);  
     newRecord.setAttribute(TableCreationVoRowImpl.NAME, name);  
     vo.insertRow(newRecord);  
   }  
   private ViewObject getViewObjectByIterator(String iteratorName) {  
     DCBindingContainer bindings2 =  
       (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();  
     DCIteratorBinding dcItteratorBindings =  
       bindings2.findIteratorBinding(iteratorName);  
     // Get an object representing the table and what may be selected within it  
     ViewObject vo = dcItteratorBindings.getViewObject();  
     return vo;  
   }  
   public static AppModule getAppModuleDataControl() {  
     FacesContext fc = FacesContext.getCurrentInstance();  
     Application app = fc.getApplication();  
     ExpressionFactory elFactory = app.getExpressionFactory();  
     ELContext elContext = fc.getELContext();  
     ValueExpression valueExp =  
       elFactory.createValueExpression(elContext, "#{data.AppModuleDataControl.dataProvider}",  
                       AppModule.class);  
     return (AppModule)valueExp.getValue(elContext);  
   }  
   public void setNama(RichInputText nama) {  
     this.nama = nama;  
   }  
   public RichInputText getNama() {  
     return nama;  
   }  
 }  
  • Berikut hasil nya jika main.jspx nya di run.
Tampilan Ketika Page Dijalankan Pertama Kali
Tampilan Ketika Button Insert Data Di Klik
Cara Isi Insert Data yang dilanjutkan dengan mengklik Add
Tampilan Table Setelah Data Di Add
Contoh Add data sebanyak yang di pilih
Tampilan Akhir Page
Semoga bermanfaat !
Terima Kasih.



No comments:

Post a Comment