Pemrograman Web LanjutSession 02 – JSF Tags

(c) 2016 Niko Ibrahim, S.Kom, MIT

Fakultas Teknologi Informasi

Universitas Kristen Maranatha

Tujuan Perkuliahan

Mahasiswa semakin memahami

penggunaan berbagai JSF Tags

Mahasiswa mampu memahami dan

menggunakan mekanisme validasi dan

konversi data pada form JSF

Materi Hari Ini

JSF Tag Library

JSF Core Tags

JSF HTML Tags

Some Examples:

◦ Selection

◦ Messages

◦ Panel

◦ Command link

◦ dll.

Referensi:

Core JSF 3rd Edition - Ebook

DZone JSF Reference Card

Exadel JavaServer Faces HTML Tags

Reference

JSF TAG LIBRARY JSF 2.0 memiliki 6 library, terdiri atas sekitar100 tags

Berikut ini library JSF:

1. An Overview of the JSF Core Tags

The core library contains the tags that are independent of HTML rendering.

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>

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.

JSF HTML TAGS

2a. JSF HTML Selection Tag

Attribut untuk JSF HTML Selection Tag

Basic

Contoh

selectBooleanCheckbox

Managed Bean: private boolean wantsEmailUpdates;

public void setWantsEmailUpdates(boolean newValue)

{

wantEmailUpdates = newValue;

}

public boolean getWantsEmailUpdates() {

return wantsEmailUpdates;

}

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;

}

Contoh

selectManyMenu

Contoh

selectManyListbox

Note: Managed Bean sama dengan di contoh selectManyCheckboxlist

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;

}

Contoh

selectOneMenu

ContohselectOneListbox

Note: Managed Bean sama dengan di contoh selectOneRadio

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.

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

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

Contoh panelGrid dan panelGroup

4 kolom

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

Attribute

Message

Contoh Penggunaan Message

Attribut “for” harus berisikan “id” dari komponen yang

akan mengeluarkan pesan

Komponen standard lain

outputLink

commandLink

graphicImage

dataTable (akan dipelajari di pertemuan yad)

column

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>

...

commandLink

Sintaks:<h:commandLink action="#{BeanName.ActionName}">

Text/Image....

</h:commandLink>

graphicImage

Contoh:<h:commandLink action="#{localeChanger.englishAction}">

<h:graphicImage library="images" name="en_flag.gif" style="border: 0px" />

</h:commandLink>

dataTable & Column

Akan dijelaskan di pertemuan yad.