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 <h:commandbutton value="...".../> <h:commandbutton image="...".../> <h:commandlink.../> Secara otomatis men-submit form 2. ValueChangeListener Dijalankan melalui combo box, checkbox, radio button, texfields, dll <h:selectonemenu.../> <h:selectbooleancheckbox.../> <h:selectoneradio.../> <h:inputtext.../> 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 Gunakan <h:commandbutton action="..."...> 2. Tombol yang hanya mempengaruhi UI Gunakan <h:commandbutton actionlistener="...".../> 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: <h:commandbutton actionlistener="... immediate="true".../>
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 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: a. Mintalah input berupa nama dan pekerjaan untuk menampilkan resume b. Buatlah comboboxes untuk memilih warna foreground dan background <h:selectonemenu value="..." disabled="..."...> <f:selectitems value="..."/> </h:selectonemenu> c. Nilai untuk f:selectitems merupakan array SelectItem d. Buatlah tombol untuk meng-enable atau disable combobox
Hasil Akhir
Langkah-langkah Tutorial 1. Buatlah Managed Bean a. Siapkan properties untuk data pada form b. Buatlah methods untuk action controller dan event listener c. Siapkan variabel untuk menyimpan data hasil 2. Buat form input pada JSF a. Field input mengacu kepada properties pada managed bean b. Tombol yang berisi method action controller yang akan me-return suatu kondisi c. Tombol yang berisi method event listener 3. Edit faces-config.xml (jsf 1.2) a. Deklarasikan managed bean b. Tentukan navigation rules 4. 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) Properties untuk data form b) Buat methods Action controller dan event listener c) Placeholders untuk data result 2. Buatlah input form a) Input fields mengacu pada bean properties b) Tombol akan memanggil method action controller c) Tombol atau komponen lain akan memanggil method event listener 3. Edit faces-config.xml (jsf 1.2) a) Deklarasikan bean b) Tentukan navigation rules 4. 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