Belajar JSF (Java Server Face)

31 August 2008 at 20:25 | Posted in Uncategorized | 29 Comments
Tags: java

Ini berawal dari pekerjaan yang sebenarnya harus saya selesaikan beberapa bulan lalu (yang saya pending untuk menyelesaikan S2).  Tidak terlalu diburu deadline tapi harus selesai. Jadi cocok untuk eksperimen hal yang baru

Saya ingin sekali membuat aplikasi web berbasis Java.  Sebelumnya saya belajar PHP, sampai membuat sendiri framework MVC sederhana  (tidak dari nol sih).  Di Java saya pernah mencoba sekilas servlet dan JSP, kemudian men-debug aplikasi web Java yang cukup besar (servlet, JSP, taglib) buatan orang lain.  Yang belum adalah mencoba sendiri salah satu framework.

Berdasarkan pencarian di internet, sepertinya ada dua framework yang paling populer, yaitu Spring dan Struts.  Dari yang saya baca, Struts tampaknya merupakan perbaikan dari Spring, jadi saya tentukan akan menggunakan itu. Saya baca sekilas tutorialnya, tetapi saat saya akan membuat new project di Netbeans saya lihat ada opsi Java Server Face.  Hmm kalau sampai menjadi bagian dari Netbeans pasti lumayan penting nih.  Akhirnya saya coba lihat-lihat tutorial dan …  sepertinya lebih menarik dari Struts .  Struts menurut saya  (dari sudut pandang awam) sekilas seperti MVC biasa, sedangkan pada JSF yang menarik adalah sistemnya yang component based, event based dan statefull.  Saya dulu adalah programmer Delphi (pernah jualan component juga), jadi wajar juga jika saya tertarik dengan konsep JSF ini.

Ada beberapa tutorial, tetapi menurut saya yang paling bagus adalah: http://www.ibm.com/developerworks/library/j-jsf1/ Dia membahas perbandingan JSF dengan Struts plus contoh software pada tutorialnya pas sekali.  Tidak terlalu kompleks tapi juga tidak menggampangkan. Setelah baca tutorial ini Jadi lebih mantap belajar JSF

Berdasarkan apa yang saya baca,  inti JSF mirip dengan dev. tools desktop seperti Delphi atau VB. Kita letakan komponen user interface, kemudian input/outputnya kita hubungkan dengan sumber data, sedangkan  buttonnya kita hubungkan dengan method yang akan menangani event “onclik”.  Saat “button” ditekan, sumber data kita manipulasi dan otomatis komponen di layar yang terhubung dengan sumber data tersebut (Label) akan menampilkan hasilnya.  Bagi pengembang aplikasi dekstop hal ini sangat intuitif ‘kan?

Di JSF, sumber data ini disebut Managed Bean. Jika kita menggunakan  Netbeans meletakan UI-nya  jelas tidak semudah IDE Delphi, menghubungkan komponen dengan sumber data dan event handler juga harus dilakukan secara manual. Tapi ini sudah lebih baik menurut saya.

Untuk selanjutnya saya perlu baca lebih detil lagi, tutorial J2EE di Sun sepertinya bagus. Bab 18-21 membahas JSF secara lebih detil.  Baca dulu ah, nanti akan saya lanjutkan

–update 1 sep 08 — Tutorial Sun ternyata tidak terlalu bagus, sekarang saya sedang mencoba membuat aplikasi guestbook. Kena bug  “Cannot find FacesContext “, ternyata jangan lupa tambahkan path /faces pada saat mengeset URL untuk run. Bug kedua “Target Unreachable”: Disebabkan karena saya me-rename nama bean, walaupun sudah dengan refaktor ternyata tetap harus me-rename secara manual di faces-config.xml  –

– update 2 sep 08 –
Buku tamu saya menggunakan satu page, di atas input dan di bawah adalah daftar tamu beserta komentar berbentuk tabel. Untuk sementara tidak menggunakan database, karena saya pikir beans di JSF persistent. OK, jadi ada dua beans, satu TamuBeans untuk input dan DaftarBeans untuk isi tabel.  Saat user submit, action-nya adalah “DaftarBeans.tambahTamu”. Nah, masalahnya bagaimana DaftarBeans mengambil data TamuBeans? Setelah googling ternyata bisa melalui injected bean. Jadi faces.config.xml-nya dibuat sbb:

    <managed-bean>
        <managed-bean-name>TamuBean</managed-bean-name>
        <managed-bean-class>com.yuliadi.bukutamu.TamuBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>DaftarTamu</managed-bean-name>
        <managed-bean-class>com.yuliadi.bukutamu.DaftarTamu</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
        <managed-property>
            <property-name>currentTamu</property-name>
            <value>#{TamuBean}</value>
        </managed-property>
    </managed-bean>

Scope juga harus dibuat jadi “session”, karena jika menggunakan “request” maka DaftarTamu seperti dicreate ulang untuk setiap submit. Untuk menampilkan info mengenai dataTable tag dapat dilihat di http://www.roseindia.net/jsf/dataTable.shtml,  tapi array di contoh tersebut saya ganti dengan List.  Tahap berikutnya saya akan mencoba koneksi dengan database.

—