Session 04 – JSF Event Handling
Pemrograman Web Lanjut
© 2015 Niko Ibrahim, MIT Fakultas Teknologi Informasi Universitas Kristen Maranatha
Tujuan Mahasiswa memahami jenis-jenis event handling yang ada pada JSF Mahasiswa memahami bagaimana cara kerja event handling pada JSF Mahasiswa memahami cara menggunakan parameter
Latar Belakang Event Setiap aplikasi pasti perlu melakukan respon terhadap suatu aksi yang dilakukan oleh user Misalnya: memilih item dari sebuah menu, menekan sebuah tombol, meng-klik sebuah link
Events
Pada dasarnya ada dua jenis event, yaitu: ◦ Event yang menjalankan pemrosesan di back-end aplikasi ◦ Event yang hanya mempengaruhi format user interface
JSF mengenal kedua event ini sebagai: ◦ Action Controllers ◦ Event Listeners
Action Controllers vs Event Listener
Action Controllers menangani pengiriman form ◦ Event dijalankan setelah managed bean diisi datanya (populated) ◦ Event dijalankan setelah terjadi validasi ◦ Me-return String yang secara langsung mempengaruhi navigasi halaman
Event Listener menangani event di User Interface ◦ Event seringkali dijalankan sebelum managed bean diisi datanya ◦ Seringkali mem-bypass validasi ◦ Tidak pernah secara langsung mempengaruhi navigasi halaman
Jenis-jenis event listener 1.
ActionListener ◦ Dijalankan melalui submit button, image maps, dan hyperlink ◦
◦
◦
◦ Secara otomatis men-submit form
2.
ValueChangeListener ◦ Dijalankan melalui combo box, checkbox, radio button, texfields, dll ◦
◦
◦
◦
◦ Tidak secara otomatis men-submit form
1. Cara Penggunaan ActionListener pada JSF Untuk ActionListener di sini, kita bagi menjadi 2: 1. Tombol yang meng-submit form dan memulai pemrosesan di backend ◦ 2.
Gunakan
Tombol yang hanya mempengaruhi UI ◦ Gunakan ◦ Kita biasanya menginginkan actionListener terjadi sebelum beans diisi dan sebelum validasi terjadi ◦ Karena form biasanya belum diisi oleh user pada saat UI diformat ulang oleh actionListener, maka gunakanlah “immediate = true” sebagai perintah unguk menjalankan listener terlebih dahulu sebelum bean di-populated atau sebelum validasi dijalankan ◦ Contoh:
Implementasi ActionListener di dalam kode Java
Listener biasanya berada di dalam managed bean class ◦ Namun, kita bisa menyimpannya di dalam class terpisah apabila menggunakan FacesContext untuk mengambil object request atau session dan memanggil bean secara ekplisit
Method dari action listener akan menerima ActionEvent sebagai argument (seperti listener di JavaSwing) ◦ Return type: void (bukan String seperti di action controllers) ◦ ActionEvent berada di dalam package javax.faces.event ◦ ActionEvent memiliki method getComponent yang memperbolehkan kita untuk mendapatkan reference dari UIComponent ◦ Dari UIComponent inilah, kita dapat mendapatkan componenID, renderer, dan info2 lainnya
Contoh method actionListener: public void someMethod(ActionEvent event) { lakukanSesuatuDiUserInterface(); }
Praktikum 05 – Contoh Kasus Event Handling
Penggunaan ‘disabled’ pada komponen JSF
a. b.
Setiap kontrol UI memiliki property ‘disabled’ yang berisi ‘false’ secara default Kita dapat menggunakan tombol yang disertai ActionListener untuk men-disable atau enable kontrol UI tertentu Contoh Kasus Tutorial: Mintalah input berupa nama dan pekerjaan untuk menampilkan resume Buatlah comboboxes untuk memilih warna foreground dan background
c. d.
Nilai untuk f:selectItems merupakan array SelectItem Buatlah tombol untuk meng-enable atau disable combobox
Hasil Akhir
Langkah-langkah Tutorial Buatlah Managed Bean
1.
a. b.
Siapkan properties untuk data pada form Buatlah methods untuk action controller dan event listener Siapkan variabel untuk menyimpan data hasil
c.
Buat form input pada JSF
2.
a. b. c.
Edit faces-config.xml (jsf 1.2)
3.
a. b. 4.
Field input mengacu kepada properties pada managed bean Tombol yang berisi method action controller yang akan me-return suatu kondisi Tombol yang berisi method event listener Deklarasikan managed bean Tentukan navigation rules
Buatlah halaman hasil ◦ Berisi data output menggunakan h:outputText
Lihat file PDF yang disertakan. Waktu: 30 menit.
2. Penggunaan Value Changed Listener pada JSF
ValueChangeListener diberikan kepada komponen combobox, listbox, radio button, checkbox, textfield, etc. Pada saat ada perubahan value pada komponen, form tidak disubmit secara otomatis Kita memerlukan JavaScript untuk men-submit form, sbb: onclick="submit()" atau onchange="submit()" Ada satu kekurangan dari JavaScript yaitu seringkali terjadi incompatibility antar browser. ◦ Firefox, Netscape, dan Opera menjalankan event onchange pada saat pilihan combobox berubah, radio button dipilih, atau checkbox di-check/uncheck ◦ Internet Explorer menjalankan event setelah pilihan berubah, namun hanya pada saat komponen lain menerima fokus input
Coba lakukan pengujian pada beberapa browser!
Implementasi ValueChangeListener pada JavaBean
Listener disimpan pada managed bean seperti pada ActionListener Listener meminta argumen ValueChangeEvent ◦ Beberapa methods ValueChangeEvent yang sering digunakan: getComponent (seperti pada ActionEvent) getOldValue (previous value of GUI element) getNewValue (current value of GUI element) Dibutuhkan karena bean mungkin belum diisi datanya (belum dipopulated) Tipe value untuk checkbox adalah Boolean Value untuk radio button atau textfield berkorespondensi dengan request parameter
Contoh: public void someMethod(ValueChangeEvent event) { boolean flag = ((Boolean)event.getNewValue()).booleanValue(); takeActionBasedOn(flag); }
Contoh Kasus: Mengubah warna yang ditampilkan untuk FG dan BG
h:selectOneMenu menggunakan f:selectItems untuk mendapatkan nilai-nilai pada combobox Kita akan menggunakan checkbox untuk memanggil ValueChangeListener Buatlah listener sedemikian rupa agar melakukan toggle isi list untuk: ◦ Nama-nama Warna ◦ Nilai RGB
Langkah-langkah Pembuatan 1.
Buatlah Managed Bean a) b) c)
2.
Buatlah input form a) b) c)
3.
Input fields mengacu pada bean properties Tombol akan memanggil method action controller Tombol atau komponen lain akan memanggil method event listener
Edit faces-config.xml (jsf 1.2) a) b)
4.
Properties untuk data form Buat methods Action controller dan event listener Placeholders untuk data result
Deklarasikan bean Tentukan navigation rules
Buat halaman hasil/output a)
Tampilkan output dengan menggunakan tag h:outputText
Praktikum 05 bagian 2 Bukalah Praktikum 5 Event Handling Bagi yang sudah menyelesaikan bagian pertama, lanjutkan langsung ke halaman 7 Waktu: 15 menit
That’s all for today!
Congratulations! At the end of this lecture you’ve known how to create: ◦ Event Handling: ActionListener ◦ Event Handling: ValueChangeListener
