ADF Basic - Partial Page Refresh

Welcome to ADF Basic!

Blog post ADF Basic akan membahas fungsionalitas-fungsionalitas dasar tapi sangat penting untuk dipahami dalam ADF. Hal-hal dasar ini tidak kita sadari tapi ternyata sangat penting dan dapat banyak membantu dalam implementasi project, menghemat waktu maupun memudahkan kita dalam me-reuse sebuah project untuk dikembangkan orang lain dalam sebuah tim.

Akan ada beberapa topik yang akan dibahas, tapi dalam post kali ini, saya akan membahas Partial Page Refresh dan bagaimana cara menggunakannya. Partial Page Refresh (akan kita sebut PPR dalam post ini) digunakan untuk men-trigger sebuah komponen ADF agar me-refresh dirinya sendiri tanpa me-refresh keseluruhan page ketika suatu action dilakukan. Misalnya terdapat dua Input Field A dan B yang berisi angka, kita ingin secara otomatis mengisi value dari Input Field B dengan value (Input A + 5) langsung setelah Input A diisi. Hal ini dapat dicapai dengan melakukan PPR terhadap B dengan trigger-nya adalah A.

Contoh simpel yang akan kita buat adalah sebagai berikut:

1. Terdapat 2 buah komponen input field Label 1 dan Label 2 
2. Kita melakukan input huruf 'hallo' terhadap Label 1
   
3. Setelah dienter, Label 2 akan secara otomatis menangkap value yang kita masukkan di Label 1 dan menggabungkannya dengan string 'concate new value' sehingga menjadi 'halloconcate new value' 
   

Kasus ini dapat digunakan juga untuk permasalahan yang rumit: Misalnya kita memasukkan sebuah string, lalu sistem secara otomatis melakukan searching terhadap string tersebut, dan membuat list hasil pencariannya menjadi sebuah tabel. Konsep PPR yang sama juga dapat dipakai untuk kasus tersebut. Konsep yang simpel dan sederhana, tapi sangat penting untuk dipahami untuk pengembangan sistem yang smooth menggunakan ADF.

Untuk membuat sampel seperti aplikasi diatas. Ikuti langkah-langkah berikut:

1. Buat aplikasi baru yang berupa Fusion Web Application (ADF). Akan terbuat sebuah aplikasi dengan 2 project yaitu Model dan View Controller 
   
2. Tambahkan New -> JSF -> JSF Page di ViewController 
   
3. Jangan lupa untuk mencentang opsi 'Create as .xml document (.jspx)' 
   
4. Tambahkan 2 komponen Input Text ke dalam page .jspx yang telah dibuat di langkah 3 
   
5. Pilih Input Text pertama dan buka Property Inspector, disini kita dapat melakukan konfigurasi dan behaviour dari masing-masing komponen di halaman kita. Di bagian Common - id, periksa dengan seksama ID dari masing-masing komponen.
   
6. Masih di Property Inspector, bagian Advance - Binding kita akan men-specify Binding dari masing-masing komponen. Disini kita akan 'mengikat' komponen kita ke java class, dimana masing-masing komponen ini akan memiliki variabel-nya sendiri dalam java class tersebut. Hal ini akan memudahkan kita dalam melakukan manipulasi value secara programatik, yang mana akan menawarkan opsi yang sangat fleksibel dibandingkan dengan manipulasi dari komponen web.
   
    
   
7. Tentukan Java Bean yang akan di-bind dengan komponen Input Text 1. Karena sebelumnya belum ada java bean yang kita buat, buat New Managed Bean.
   
   
8. Tentukan Java Bean class dan packagenya apabila diperlukan 
   
9. Setelah java bean berhasil dibuat, pilih java bean tersebut sebagai Managed Bean
   
   
10. Tentukan Property Name dari input text pertama (disini kita buat inputText1). Ini akan membuat sebuah variabel di java class yang kita buat di langkah 8 sebagai representasi dari input text pertama 
    
11. Pilih Input Text kedua yang kita buat di halaman .jspx yang kita buat, lalu buka property inspector -> binding -> edit. Pilih managed bean yang kita buat di langkah 8 dan masukkan Property Name (dalam contoh ini inputText2) sebagai representasi input text 2 dalam java class
    
12. Sampai disini, set up dasar sudah selesai. Sudah ada sebuah halaman User Interface dengan dua buah komponen, dan juga sebuah java class yang dibuat untuk merepresentasikan kedua buah komponen di User Interface tersebut. Berikutnya adalah bagaimana membuat behaviour dari komponen kedua. Kita akan membuat komponen kedua akan meng-update dirinya sendiri ketika value dari komponen pertama berubah. Untuk itu, pilih komponen input text kedua -> buka Property Inspector -> Behaviour -> Partial Trigger. Layar Partial Trigger akan terbuka untuk menentukan siapa yang akan men-trigger perubahan dari input text 2. Pilih input text 1. Komponen kedua sudah selesai di-setting, kita akan berpindah ke komponen 1. 
    
13.  Untuk komponen inputText1, kita akan menentukan apa yang akan terjadi ketika komponen ini value-nya berubah. Untuk itu, buka Property Inspector dari komponen pertama -> Behaviour -> ValueChangeListener. Klik New di bagian Method, dan tuliskan nama method yang akan dibuat di java class. Method ini akan dijalankan setiap kali ada terjadi perubahan nilai di komponen pertama. 
    
14. Layar akan langsung berubah ke java class dan method yang baru saya kita buat. Kita dapat membuat java code kita sendiri untuk menentukan perubahan apa yang akan terjadi dalam komponen kita dalam method ini. Untuk contoh ini, kita akan men-set value inputText2 dengan menggabungkan isi dari inputText1 dan "concate new value", sehingga contoh codenya adalah sebagai berikut:
    
    
15. Langkah terakhir adalah membuat input text 1 secara otomatis mensubmit value baru-nya ketika terjadi perubahan nilai. Buka Property Inspector -> Behaviour -> AutoSubmit
    
16. Apa yang kita lakukan dan apa yang terjadi? Yang terjadi adalah: ketika kita mengubah isi dari input text 1, value baru ini akan otomatis di-submit. Ketika value baru dari input text1 di-submit, ini akan otomatis men-trigger method yang kita buat di langkah 14 (valueOnChangeListener). Langkah14 akan men-set value dari inputText2 menjadi value baru. Nah InputText2 juga akan mendeteksi perubahan yang terjadi ketika inputText1 men-submit dirinya karena kita sudah melakukan langkah 12. Ketika perubahan itu terjadi, InputText2 akan me-refresh dirinya dan membaca value baru yang di-assign ke dirinya dari langkah 14. Hal inilah yang membuat komponen InputText2 otomatis ter-update nilainya.  
17. Langkah terakhir adalah melakukan testing dengan menjalankan project kita:
    
    

Selesai sudah! Anda sudah berhasil membuat contoh dasar dari PPR dan diharapkan juga mengerti bagaimana konsep dari PPR ini sendiri.

Dalam post berikutnya kita akan membahas Task Flow, bagaimana membuat Task Flow, mengapa kita menggunakan Task Flow dan juga bagaimana me-reuse Task Flow.

See you in the next post!