Pengenalan JavaServer Faces
advertisement
Pertemuan 01: Pengenalan JavaServer Faces
BS 503 – PEMROGRAMAN WEB LANJUT
Program Studi Sistem Informasi
Universitas Kristen Maranatha
© 2016 – Niko Ibrahim, MIT
Tujuan Perkuliahan
Mahasiswa memahami dasar-dasar JSF
Tag-tag
Cara
JSF
kerja Managed Bean
Konfigurasi
JSF (faces-config.xml)
Konfigurasi
aplikasi web (web.xml)
Mahasiswa mampu membuat aplikasi
sederhana menggunakan JSF
Materi Pembahasan
Latar belakang lahirnya JSF
Struktur aplikasi JSF
Tutorial sederhana
Referensi:
Core JAVASERVER™ FACES 3rd Edition, David Geary,
Cay Horstmann, Prentice Hall, 2010
Easy development vs Attractive
Platform
Microsoft ASP.NET menyediakan fasilitas
RAD (Rapid Application Development)
melalui visual studio
Java EE terkenal sebagai platform yang high
scalable, multiplatform, lots of vendor
support. Namun, masih menganut style
“hard-core coding”
The promise of JSF
Menyediakan pengembangan user interface
secarra cepat untuk aplikasi Java berbasis
server.
JSF dapat dianalogikan sebagai “Swing untuk
aplikasi web”
JSF menyediakan suatu framework untuk
melakukan page-navigation, validasi data,
konversi data, dll
JSF memungkinkan developer untuk
menggunakan tools (IDE) dalam mendesain
secara visual maupun coding biasa.
JSF merupakan bagian standar dari Java EE
3 Bagian Utama dari JSF
Berbagai komponen user interface siap pakai
(button, panel, data grid, tree, menu, dll)
Event-driven programming model
Component model yang memungkinkan thirdparty developer menyediakan komponen
tambahan
Tools & Library required
JDK 7.0 or higher
Library JSF 2
GlassFish Application Server
NetBeans 8 IDE
Struktur Direktori applikasi JSF
Aplikasi JSF dideploy sebagai file WAR (zip file
dengan ekstensi .war) dan memiliki struktur
standar sbb:
Bagian Dasar Aplikasi JSF
1.
Halaman JSF (file dengan ekstensi .xhtml)
2.
Managed Bean (file .java, biasanya
dipakai untuk sinkronisasi data
input/output)
3.
Konfigurasi JSF (faces-config.xml)
4.
Navigation rule
Pendefinisian managed bean, dll.
Konfigurasi Servlet (web.xml)
PEMBAHASAN BAGIAN-BAGIAN JSF
1. Halaman JSF
Halaman JSF berfungsi sebagai antarmuka aplikasi (frontend).
Biasanya memiliki ekstensi .jsp atau .jsf atau .xhtml
Harus memiliki deklarasi tag yang akan digunakan pada halaman JSF tsb.
Contoh:
<html
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
Contoh Halaman JSF (index.xhtml)
1. <html xmlns=http://www.w3.org/1999/xhtml
Deklarasi Tag
2.
xmlns:h="http://java.sun.com/jsf/html"
3.
xmlns:f="http://java.sun.com/jsf/core">
4.
5. <f:view>
Merender
6. <head>
tampilan/view
7. <title>Hello JSF!</title>
8. </head>
9. <body>
10. <h:form>
HTML Form
11.
Please enter your name and password here <br/>
Field input
12.
Name: <h:inputText value="#{HelloBean.name}"/> <br/>
13.
Password: <h:inputSecret value="#{HelloBean.password}"/> <br/>
14.
<h:commandButton value="Login" action=“output"/>
Button
15. </h:form>
16. </body>
17. </f:view>
18. </html>
Halaman JSF (continue)
Name: <h:inputText value="#{HelloBean.name}"/>
<br/>
#{HelloBean.name}
menyambungkan halaman JSF
ke sebuah objek Java yaitu: objek HelloBean, dan
property name
<h:commandButton value="Login" action=“output"/>
action=“output”
menyatakan bahwa apabila
tombol ini diklik maka akan memanggil response
page yaitu “output.xhtml”
Halaman JSF (output.xhtml)
1. <html xmlns="http://www.w3.org/1999/xhtml"
2.
3.
4.
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
5.
</h:head>
6.
<h:body>
7.
Selamat Anda telah berhasil membuat aplikasi Web menggunakan JSF<br/>
8.
Berikut data Anda: <br/>
9.
Name: <h:outputText value="#{HelloBean.name}"/> <br/>
10.
Password: <h:outputText value="#{HelloBean.password}"/> <br/>
11.
</h:body>
12. </html>
Java Bean & Managed Bean
Java Bean adalah suatu class Java biasa yang
memiliki aturan penulisan tertentu/baku, di
antaranya yaitu:
Merupakan
Semua
public class
property memiliki private scope
Akses
terhadap property dilakukan melalui
getter/setter method
Managed Bean adalah suatu class Java Bean
yang digunakan untuk me-manage data
input/output yang ada di dalam halaman JSF
Contoh Managed Bean: HelloBean.java
Nama package
1. package com.pwl;
2.
Nama Bean
3. public class HelloBean {
4. private String name;
Property
5. private String password;
6.
7. // PROPERTY: name
8. public String getName() { return name; }
getter/setter methods:
9. public void setName(String newValue) { name = newValue; }
10.
11. // PROPERTY: password
12. public String getPassword() { return password; }
13. public void setPassword(String newValue) { password = newValue; }
14. }
Pendefinisian Managed Bean
@ManagedBean (name="HelloBean")
public class HelloBean {….}
Pemanggilan managed bean pada index.xhtml:
Name: <h:inputText value="#{HelloBean.name}"/> <br/>
Password: <h:inputSecret value="#{HelloBean.password}"/> <br/>
Penggunaan Tools / IDE
JSF didesain sedemikian rupa agar kita dapat
memanfaatkan tools/IDE dalam men-develop
aplikasi.
Dengan menggunakan IDE, kita dapat
mendesain secara visual maupun coding biasa
Beberapa tools yang dapat digunakan:
NetBeans
Eclipse
Exadel Studio
JBoss Developer Studio
IntelliJ IDEA, dll.
Library JSF – third party
RichFaces: http://www.richfaces.org
IceFaces: http://www.icefaces.org
PrimeFaces: http://www.primefaces.org
MyFaces: http://myfaces.apache.org
Kesimpulan
Dengan menggunakan JSF, kita dapat memadukan
antara kemudahan dalam membuat aplikasi dan
kehandalan Java EE
JSF merupakan framework pengembangan aplikasi
Web yang menyediakan:
Sekumpulan
komponen user interface
Event-driven
Component
programming model
model
Aplikasi standar JSF terdiri dari:
Halaman
JSF
Java/Managed
File
Bean
konfigurasi (optional)
What Next ?
Mengerjakan tutorial membuat aplikasi JSF
sederhana menggunakan NetBeans
Tutorial ini menggunakan JSF versi 2
Ikuti: Tutorial JSF Bagian 1.pdf
Waktu: 30 menit
