Dalam post kali ini, kita akan membahas bagaimana caranya memanggil sebuah function, baik Javascript maupun Java method ketika sebuah page di-load. Well, kedengarannya memang mudah, terutama untuk Javascript. Mungkin dalam pikiran anda terlintas 'yah, itu mah kalau di JQuery tinggal $(document).ready(function() {}) atau di javascript tinggal <body onload="function()"> aja beres'.
Yap, 2 pilihan mungkin ini bisa dilakukan terutama untuk test case mudah seperti 'alert()' dsb.
Bagaimana kalau anda mencoba dengan beberapa test case yang kompleks seperti menggunakan ajax dalam page onLoad()? Dalam banyak kasus ini akan membuat page ADF kita freeze dan tidak melakukan apa-apa. Padahal bisa jadi tidak ada yang salah dalam code dan function yang kita eksekusi.
Lalu, bagaimana caranya memanggil function dalam Java Bean atau javascript kita?
Ikuti langkah-langkah berikut untuk test case dalam javascript:
1. Buat sebuah project ADF di JDeveloper
2. Buat sebuah page .jspx
3. Dari Component Palette, masukkan sebuah component ADF Resource dengan type=javascript. Setelah men-drop komponen ini, page kita nantinya akan memiliki tag sebagai berikut: <af:resource type="javascript" />
4. Buat function javascript yang kita inginkan dalam tag <af:resource> pada langkah sebelumnya. Dalam contoh ini, javascript yang dibuat akan membuka sebuah pop-up dengan ID=popUP1 yang berisi text 'test'. Hasilnya nanti misalnya adalah sebagai berikut:
5. Langkah terakhir adalah membuat ADF component (client listener) yang akan mengeksekusi method yang kita buat di step langkah 4 ketika page di-load. Source code dalam page kita nantinya adalah sebagai berikut: <af:clientListener method="nama_method_dalam_step_4" type="load"/>. Perhatikan 'type' dari 'clientListener' ini adalah 'load' agar method ini dieksekusi ketika page di-load. Jangan lupa untuk memastikan bahwa <af:clientListener> berada didalam tag <af:document> </af:document>.
6. Jalankan program, maka ketika page pertama kali di-load, maka akan muncul pop up yang berisi 'test' yang kita buat dalam langkah 4.
That's it, anda berhasil membuat sebuah method onLoad dalam JavaScript.
Berikutnya adalah bagaimana membuat method onLoad untuk sebuah Java method dalam Java Bean. Tujuannya adalah agar kita bisa mengexecute sebuah method dalam java bean ketika sebuah page diload.
- Buat sebuah java bean misalnya BeanTest.name. Dalam contoh ini saya hanya akan membuat sebuah class dengan sebuah method simple 'onLoadExecute' untuk print out. Kita akan membuat method ini eksekusi ketika page dirender, sehingga kita dapat menjalankan java method ketika page di-load.
- Right click class yang telah dibuat tadi, lalu kemudian pilih 'Create Data Control'.
- Perhatikan bahwa untuk class yang tadi kita buat data control-nya, akan ada pasangan DataControl.dcx dan xml yang terbentuk.
- Di tab Data Control JDeveloper, anda dapat melihat bahwa sudah terbentuk sebuah data control berdasarkan java class, serta semua method public yang dapat dipakai sebagai data control.
- Drag method yang ingin diexecute ketika page di-load (dalam contoh ini 'OnLoadExecute') ke dalam page yang diinginkan misalnya ke dalam bentuk button.
- Ketika selesai, buka page yang ada di step nomor 5. Anda dapat melihat di tab Data Control -> Binding bahwa method OnLoadExecute sudah ada dalam page binding.
- Masih di tab Binding, klik tanda + di bagian executable, maka anda akan diminta untuk membuat sebuah page binding baru. Pilih Generic Binding -> invokeAction.
- Setelah anda memilih invokeAction, anda akan diminta untuk memasukkan ID untuk binding ini, dan ke method mana binding ini akan diikat. Masukkan nama unik sebagai ID dan pilih OnLoadExecute sebagai method, anda berhasil membuat sebuah binding dan method yang akan dieksekusi oleh binding ini.
- Here comes the magic. Bagaimana anda mengexecute method dan binding ini ketika page diload? Buka property inspector untuk binding yang anda buat di langkah nomor 8. Di property 'Refresh', pilih 'prepareModel'.
- Run page anda, dan perhatikan log. Anda akan melihat bahwa method anda berhasil dieksekusi ketika page pertama kali dibuat. Ketika anda me-refresh halaman ini, method ini juga akan dieksekusi pertama kali. Ini dapat anda manfaatkan ketika anda misalnya ingin menginisialisasi beberapa value sebelum page dibuat.
Selamat! Anda berhasil menguasai bagaimana caranya menginisiasi/mengeksekusi sebuah fungsi di page, baik melalui javascript maupun java method. Semoga bermanfaat :)
No comments:
Post a Comment