Pemrograman Web Lanjut - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/311/Session 03...
Transcript of Pemrograman Web Lanjut - si.itmaranatha.orgsi.itmaranatha.org/v2/attachments/article/311/Session 03...
Pemrograman Web Lanjut
© 2016 Niko Ibrahim, MIT
Fakultas Teknologi Informasi
Universitas Kristen Maranatha
Session 3 – JSF Data Table
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).
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
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>
Contoh Penggunaan <h:dataTable>
Silahkan membuka file Tutorial dan
menyelesaikannya hari ini.
Selamat Mengerjakan…