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

Transkripsi

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

2 Tujuan Perkuliahan Mahasiswa semakin memahami penggunaan berbagai JSF Tags Mahasiswa mampu memahami dan menggunakan mekanisme validasi dan konversi data pada form JSF

3 Materi Hari Ini JSF Tag Library JSF Core Tags JSF HTML Tags Some Examples: Selection Messages Panel Command link dll.

4 Referensi: Core JSF 3rd Edition - Ebook DZone JSF Reference Card Exadel JavaServer Faces HTML Tags Reference

5 JSF TAG LIBRARY JSF 2.0 memiliki 6 library, terdiri atas sekitar100 tags Berikut ini library JSF:

6 1. An Overview of the JSF Core Tags The core library contains the tags that are independent of HTML rendering.

7 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>

8 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.

9 JSF HTML TAGS

10 2a. JSF HTML Selection Tag

11 Attribut untuk JSF HTML Selection Tag Basic

12 Contoh selectbooleancheckbox Managed Bean: private boolean wants updates; public void setwants updates(boolean newvalue) { want updates = newvalue; } public boolean getwants updates() { return wants updates; }

13 Contoh selectmanycheckboxlist private String[ ] car; private SelectItem[ ] carlist = { Managed Bean: new SelectItem( Hond Accord"), new SelectItem( Toyota 4Runner"), new SelectItem( Nisan Z350"), }; Managed Bean: public String[ ] getcar() { return car; } public void setcar(string[ ] car) { this.car = car; } Cont.. public SelectItem[ ] getcarlist() { return carlist } public void setcarlist (SelectItem[ ] carlist) { this. carlist = carlist; }

14 Contoh selectmanymenu Contoh selectmanylistbox Note: Managed Bean sama dengan di contoh selectmanycheckboxlist

15 Contoh selectoneradio private String currentcar; private SelectItem[ ] carlist = { new SelectItem( Hond Accord"), new SelectItem( Toyota 4Runner"), new SelectItem( Nisan Z350"), }; Managed Bean: public String getcurrentcar() { return currentcar; } public void setcurrentcar(string currentcar) { this. currentcar = currentcar; } Cont.. public SelectItem[ ] getcarlist() { return carlist; } public void setcarlist (SelectItem[ ] carlist) { this. carlist = carlist; }

16 Contoh selectonemenu Contoh selectonelistbox Note: Managed Bean sama dengan di contoh selectoneradio

17 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.

18 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

19 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

20 Contoh panelgrid dan panelgroup 4 kolom

21 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

22 Attribute Message

23 Contoh Penggunaan Message Attribut for harus berisikan id dari komponen yang akan mengeluarkan pesan

24 Komponen standard lain outputlink commandlink graphicimage datatable (akan dipelajari di pertemuan yad) column

25 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>...

26 commandlink Sintaks: <h:commandlink action="#{beanname.actionname}"> Text/Image... </h:commandlink>

27 graphicimage Contoh: <h:commandlink action="#{localechanger.englishaction}"> <h:graphicimage library="images" name="en_flag.gif" style="border: 0px" /> </h:commandlink>

28 datatable & Column Akan dijelaskan di pertemuan yad.