Scribd
Unggah
46 tayangan20 halaman

Session 01 - Pengenalan JavaServer Faces

Dokumen ini membahas pengenalan JavaServer Faces (JSF) yang merupakan framework untuk membangun antarmuka pengguna berbasis web menggunakan bahasa pemrograman Java. Dokumen ini menjelaskan komponen-komponen utama JSF seperti halaman JSF, managed bean, dan konfigurasi JSF.

Diunggah oleh

Leo Pamungkas Nasution
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
46 tayangan20 halaman

Session 01 - Pengenalan JavaServer Faces

Dokumen ini membahas pengenalan JavaServer Faces (JSF) yang merupakan framework untuk membangun antarmuka pengguna berbasis web menggunakan bahasa pemrograman Java. Dokumen ini menjelaskan komponen-komponen utama JSF seperti halaman JSF, managed bean, dan konfigurasi JSF.

Diunggah oleh

Leo Pamungkas Nasution
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

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 JSF
Cara 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 third-
party 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)
Navigation rule
Pendefinisian managed bean, dll.
4. 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/>
12. Name: <h:inputText value="#{HelloBean.name}"/> <br/> Field input
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. xmlns:h="http://java.sun.com/jsf/html">
3. <h:head>
4. <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 public class
Semua 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

1. package com.pwl; Nama package


2.
Nama Bean
3. public class HelloBean {
4. private String name; Property
5. private String password;
6.
7. // PROPERTY: name
getter/setter methods:
8. public String getName() { return name; }
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 programming model
Component model
Aplikasi standar JSF terdiri dari:
Halaman JSF
Java/Managed Bean
File 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

Anda mungkin juga menyukai