Pemrograman Web Lanjut

© 2016 Niko Ibrahim, MIT

Fakultas Teknologi Informasi

Universitas Kristen Maranatha

Session 3 – JSF Data Table

Tujuan

Mengenal penggunaan <h:dataTable> untuk

menampilkan data dalam bentuk tabular

Pengenalan h:dataTable

Salah satu cara untuk menampilkan informasi adalah dalam bentuk tabular (tabel).

JSF menyediakan komponen <h:dataTable> yang berfungsi untuk merepresentasikan data dalam bentuk tabular

Data yang dapat ditampilkan pada <h:dataTable> dapat merupakan salah satu berikut:◦ Array

◦ List (java.util.List)

◦ ResultSet (java.sql.ResultSet)

◦ Result (javax.servlet.jsp.jstl.sql.Result)

◦ DataModel (javax.faces.model.DataModel)

Template <h:dataTable> pada JSF 2

<h:dataTable value="#{someCollection} " var= " item" >

<h:column>#{item.property1}</h:column>

<h:column>#{item.property2} </h:column>

…

</h:dataTable>

Atribut pada <h:dataTable>

Sintaks: <h:dataTable var="…" value="…" otherAttributes…

</h:dataTable>

Atribut-atribut yang sering dipergunakan:

1. border, bgcolor, cellpadding, cellspacing, width, onclick, ondoubleclick, onmouseover, etc.

2. styleClass, captionClass, headerClass, footerClass

◦ CSS style names for main table, caption, header, and footer.

3. rowClasses, columnClasses

◦ List of CSS style names for each row and column. Will use each name in turn and then repeat.

4. first, rows

◦ First entry in collection to use, total number of rows to show.

5. id, rendered

◦ Same as for all h:elements. Use id for Ajax. Use rendered if you will omit the table in certain situations (e.g., if no rows).

Headers, Footers, & Captions

Source code: Halaman 214

Penggunaan StyleSheet Di dalam aplikasi JSF, kita seringkali memilki beberapa tabel sekaligus

di dalam satu halaman.

Untuk itu, kita juga seringkali membutuhkan beberapa style penyajianyang berbeda dari masing-masing tabel.

Cara mengatasi masalah tersebut adalah dengan menyediakanexternal CSS file.

Berikut ini style yang bisa dipakai:

1. styleClass, captionClass, headerClass, footerClass

◦ CSS name that will apply to table as a whole, caption (if there is one), first row (if it is a header), and last row (if it is a footer)

2. rowClasses

◦ Comma-separated list of names. Apply first name to first nonheader row or column, then next name, etc. When you get to end of list, repeat. For instance, two names will apply to odd/even rows.

3. columnClasses

◦ Comma-separated list of names. Apply until you run out, then stop.Do not repeat as with rowClasses. Thus, you normally supply exactly as many entries as you have columns.

Sintaks Penggunaan StyleSheet

<h:dataTable

var="someVar"

value="#{someValue}"

styleClass="tableStyle"

captionClass="captionStyle "

headerClass="headerStyle "

footerClass="footerStyle "

rowClasses="row1,row2 "

columnClasses="col1,col2,col3">

…

</h:dataTable>

Perhatikan

beda cara

untuk

row/column

Style pada columns dan headers

CSS Code: halaman 215

Style pada rows

CSS Code: halaman 216

The ui:repeatTag

Alternativ dataTable adalah menggunakan

ui:repeat

Contoh:<table>

<ui:repeat value="#{tableData.names}" var="name">

<tr>

<td>#{name.last},</td>

<td>#{name.first}</td>

</tr>

</ui:repeat>

</table>

JSF Components in Tables

Source code: halaman 220

Edit Cell

Halaman 224

Delete

Source Code: halaman 227

Database Table

(select * from Customer) Halaman 229

Sorting & Filtering

Halaman 235

Scrolling

Halaman 242

Contoh Penggunaan <h:dataTable>

Silahkan membuka file Tutorial dan

menyelesaikannya hari ini.

Selamat Mengerjakan…

That’s all for today!

Congratulations! At the end of this

lecture you’ve known:

◦ How to create a JSF 2 application

◦ How to user h:dataTable