Pemrograman Web Lanjut Session 02 JSF Tags. (c) 2016 Niko Ibrahim, S.Kom, MIT Fakultas Teknologi Informasi Universitas Kristen Maranatha

Pemrograman Web Lanjut Session 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:

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 passthrough 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: private String[ ] car; private SelectItem[ ] carList = { Managed Bean: 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

Contoh selectOneListbox

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. 2. 3. 4.

Information Warning Error 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; }

Introduction ... Conclusion ... Table of Contents ...

commandLink 

Sintaks: Text/Image....

graphicImage 

Contoh:



dataTable & Column 

Akan dijelaskan di pertemuan yad.