pemrograman web lanjutsi.itmaranatha.org/v2/attachments/article/302/session 02 - jsf tags...tujuan...
TRANSCRIPT
![Page 1: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/1.jpg)
Pemrograman Web LanjutSession 02 – JSF Tags
(c) 2016 Niko Ibrahim, S.Kom, MIT
Fakultas Teknologi Informasi
Universitas Kristen Maranatha
![Page 2: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/2.jpg)
Tujuan Perkuliahan
Mahasiswa semakin memahami
penggunaan berbagai JSF Tags
Mahasiswa mampu memahami dan
menggunakan mekanisme validasi dan
konversi data pada form JSF
![Page 3: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/3.jpg)
Materi Hari Ini
JSF Tag Library
JSF Core Tags
JSF HTML Tags
Some Examples:
◦ Selection
◦ Messages
◦ Panel
◦ Command link
◦ dll.
![Page 4: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/4.jpg)
Referensi:
Core JSF 3rd Edition - Ebook
DZone JSF Reference Card
Exadel JavaServer Faces HTML Tags
Reference
![Page 5: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/5.jpg)
JSF TAG LIBRARY JSF 2.0 memiliki 6 library, terdiri atas sekitar100 tags
Berikut ini library JSF:
![Page 6: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/6.jpg)
1. An Overview of the JSF Core Tags
The core library contains the tags that are independent of HTML rendering.
![Page 7: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/7.jpg)
Core tags represent objects
Most of the core tags represent objects you add to components,
such as the following:
◦ Attributes
◦ Parameters
◦ Facets
◦ Listeners
◦ Converters
◦ Validators
◦ Selection items
Example:
<h:outputText value="#{payment.card}">
<f:attribute name="separator" value="-" />
</h:outputText>
![Page 8: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/8.jpg)
2. An Overview of the JSF HTML Tags
We can group these tags in the following categories:
Inputs (input...)
Outputs (output..., graphicImage)
Commands (commandButton and commandLink)
GET Requests (button, link, outputLink)
Selections (checkbox, listbox, menu, radio)
HTML pages (head, body, form, outputStylesheet, outputScript)
Layouts (panelGrid, panelGroup)
Data table (dataTable and column)
Errors and messages (message, messages)
The JSF HTML tags share common attributes, HTML pass-through attributes, and attributes that support dynamic HTML.
![Page 9: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/9.jpg)
JSF HTML TAGS
![Page 10: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/10.jpg)
2a. JSF HTML Selection Tag
![Page 11: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/11.jpg)
Attribut untuk JSF HTML Selection Tag
Basic
![Page 12: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/12.jpg)
Contoh
selectBooleanCheckbox
Managed Bean: private boolean wantsEmailUpdates;
public void setWantsEmailUpdates(boolean newValue)
{
wantEmailUpdates = newValue;
}
public boolean getWantsEmailUpdates() {
return wantsEmailUpdates;
}
![Page 13: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/13.jpg)
Contoh
selectManyCheckboxlist
Managed Bean:
Managed Bean:
private String[ ] car;
private SelectItem[ ] carList = {
new SelectItem(“Hond Accord"),
new SelectItem(“Toyota 4Runner"),
new SelectItem(“Nisan Z350"),
};
Cont..
public String[ ] getCar() {
return car;
}
public void setCar(String[ ] car) {
this.car = car;
}
public SelectItem[ ] getCarList() {
return carList
}
public void setCarList (SelectItem[ ] carList) {
this. carList = carList;
}
![Page 14: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/14.jpg)
Contoh
selectManyMenu
Contoh
selectManyListbox
Note: Managed Bean sama dengan di contoh selectManyCheckboxlist
![Page 15: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/15.jpg)
Contoh
selectOneRadio
Managed Bean:private String currentCar;
private SelectItem[ ] carList = {
new SelectItem(“Hond Accord"),
new SelectItem(“Toyota 4Runner"),
new SelectItem(“Nisan Z350"),
};
Cont..
public String getCurrentCar() {
return currentCar;
}
public void setCurrentCar(String currentCar) {
this. currentCar = currentCar;
}
public SelectItem[ ] getCarList() {
return carList;
}
public void setCarList (SelectItem[ ] carList) {
this. carList = carList;
}
![Page 16: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/16.jpg)
Contoh
selectOneMenu
ContohselectOneListbox
Note: Managed Bean sama dengan di contoh selectOneRadio
![Page 17: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/17.jpg)
javax.faces.model.SelectItem
Ada 4 constructors dari SelectItem yang dapat kita gunakan sesuai kebutuhan program:
1. SelectItem(Object value)
Creates a SelectItem with a value. The item label is obtained by applying toString() to the value.
2. SelectItem(Object value, String label)
Creates a SelectItem with a value and a label.
3. SelectItem(Object value, String label, String description)
Creates a SelectItem with a value, label, and description.
4. SelectItem(Object value, String label, String description, boolean disabled)
Creates a SelectItem with a value, label, description, and disabled state.
![Page 18: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/18.jpg)
Atribut “value” pada SelectItems
Atribut value pada SelectItems dapat berupa:
A single SelectItem instance
A collection of SelectItem instances
An array of SelectItem instances
A map whose entries represent SelectItem
labels and values
![Page 19: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/19.jpg)
2b. JSF Panel Grid dan Group
Fungsi panelGrid:
Untuk men-generate HTML Table
Fungsi paneGroup:
Untuk mengelompokan dua atau
lebih komponen sehingga akan
dianggap sebagai satu komponen
![Page 20: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/20.jpg)
Contoh panelGrid dan panelGroup
4 kolom
![Page 21: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/21.jpg)
2c. JSF Message
Komponen JSF dapat memiliki message yang
berhubungan dengan proses validasi dan konversi data.
Message dapat dibagi menjadi 4 jenis:
1. Information
2. Warning
3. Error
4. Fatal
![Page 22: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/22.jpg)
Attribute
Message
![Page 23: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/23.jpg)
Contoh Penggunaan Message
Attribut “for” harus berisikan “id” dari komponen yang
akan mengeluarkan pesan
![Page 24: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/24.jpg)
Komponen standard lain
outputLink
commandLink
graphicImage
dataTable (akan dipelajari di pertemuan yad)
column
![Page 25: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/25.jpg)
outputLink
h:outputLink generates an HTML anchor element. But
unlike h:commandLink, h:outputLink does not generate
JavaScript to make the link act like a submit button.
Example:
private String welcomeURL = "/outputLinks/faces/welcome.jsp";
public String getWelcomeURL() {
return welcomeURL;
}
private String welcomeLinkText = "go to welcome page";
public String getWelcomeLinkText() {
return welcomeLinkText;
}
<a name="introduction">Introduction</a>
...
<a name="conclusion">Conclusion</a>
...
<a name="toc">Table of Contents</a>
...
![Page 26: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/26.jpg)
commandLink
Sintaks:<h:commandLink action="#{BeanName.ActionName}">
Text/Image....
</h:commandLink>
![Page 27: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/27.jpg)
graphicImage
Contoh:<h:commandLink action="#{localeChanger.englishAction}">
<h:graphicImage library="images" name="en_flag.gif" style="border: 0px" />
</h:commandLink>
![Page 28: Pemrograman Web Lanjutsi.itmaranatha.org/v2/attachments/article/302/Session 02 - JSF Tags...Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu](https://reader031.vdocuments.pub/reader031/viewer/2022022117/5c9feb6e88c99317188c3ac1/html5/thumbnails/28.jpg)
dataTable & Column
Akan dijelaskan di pertemuan yad.