Baiklah, Java Server Faces (JSF) adalah framework untuk membangun User Interface sebuah aplikasi web. Lebih lengkap lagi, coba tengok penjelasan dosen saya Bapak Yudi Wibisono di artikel berikut “Belajar JSF (Java Server Face)”. Sedangkan Primefaces adalah component suite untuk Java Server Faces. Dengan Primefaces, fitur-fitur dan kemudahan pembuatan komponen pun jadi lebih mudah.

Sebelum memulai, mari kita siapkan bahan-bahan yang saya gunakan:

-Netbeans 6.9 + GlassFish V3 

-Library Primefaces –>  1. Buka netbeans, klik new project, pilih Categories Java Web, lalu pilih projects Web Application, klik next.

2. Isi nama projectnya. Jika ingin menyertakan JAR files yang kita pakai di folder project, ceklis “use dedicated …”. Pilih Java EE version Java EE 6 Web. Klik next.

3. Pilih Glass Fish server v3 dan Java EE 6. Klik next.

3. Pilih framework Java Server Faces lalu pastikan di tab configuration di bawah Preferred Page Language-nya adalah Facelets. Lalu klik finish.

Voila, a new web application project with Java Server Faces is ready to launch. Tapi kan belum sama Primefaces-nya ya. Ok, sekarang project ini sudah bisa dijalankan dan begitu klik run, netbeans akan membuka default browser untuk menampilkan aplikasi web yang kita buat. Untuk mengintegrasikan primefaces ke project aplikasi web kita sangatlah mudah adanya.

1. Klik kanan di project, klik properties. Lalu muncul jendela berikut:

2. Klik tombol Add JAR/Folder,  lalu pilih lokasi library primefaces yang sudah didownload sebelumnya.

3. Sekarang mari kita tengok bagaimana primefaces “ikut campur” dalam JSF, isi index.xhtml berdasarkan yang ada di link berikut.

Perhatikan bahwa di tag <html>harus ditambahkan xmlns:p="http://primefaces.prime.com.tr/ui" .

4. Jika sudah selesai dengan file index.xhtml, selanjutnya klik run.

Jika berhasil, maka aplikasi web kita sudah bisa di akses dari lokal dengan mengakses http://localhost:8080/namaProject/ dan hasilnya bisa dilihat di screenshot di atas.

Untuk referensi demo komponen primefaces yang lain, sila kunjungi: primefaces ui showcase

Sekian,semoga berguna.

Advertisement