JSF – 28 – Data Tables – 01
Merhaba Arkadaslar
Bu bolumde Data Table konusuna giris yapacagiz. <h:dataTable> tag’i HTML table element’ine donusur. <h:dataTable> icin genel format ;
<h:dataTable value="#{items}" var="item"> <h:column> #{item.aPropertyName} </h:column> <h:column> <!-- next column components --> </h:column> </h:dataTable>
Iteration/tekrarlama icin bir cok veri yapisi kullanabiliriz;
- array
- java.util.List
- java.sql.ResultSet
- javax.faces.model.DataModel
Ornek bir uygulama uzerinde incelemeye baslayalim;
Person.java
Person.java package _34.dataTable; public class Person { private String name; private String surname; private char gender; private int age; //getters and setters
PersonDataBean.java
package _34.dataTable; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean @RequestScoped public class PersonDataBean { private List persons; public List getPersons() { return persons; } public void setPersons(List persons) { this.persons = persons; } @PostConstruct public void initialize() { persons = new ArrayList(); persons.add(new Person("name1", "surname1", 'M', 20)); persons.add(new Person("name2", "surname2", 'F', 25)); persons.add(new Person("name3", "surname3", 'F', 15)); persons.add(new Person("name4", "surname4", 'M', 30)); persons.add(new Person("name5", "surname5", 'M', 35)); } }
DataTableBean sinifinda initialize metodunda dataTable’da gosterecegimiz verileri ayarliyoruz.
dataTable1.xhtml
... <h:dataTable value="#{personDataBean.persons}" var="myPerson"> <h:column>#{myPerson.name}</h:column> <h:column>#{myPerson.surname}</h:column> <h:column>#{myPerson.gender}</h:column> <h:column>#{myPerson.age}</h:column> </h:dataTable> ...
value attribute’te #{dataTableBean.persons} EL ifadesini kullaniyoruz. <h:dataTable> tag’i icerisinde <h:column> tag’ini kullanarak yeni sutun/kolon/column ekleyebiliriz.
Ornegimizi calistirdigimizda ;
h:dataTable da kullanabilecegimiz bir cok attribute yer almaktadir.
bgcolor border captionClass captionStyle styleClass columnClasses rowClasses headerClass cellpadding cellspacing ...
h:column tag’inda kullanabilecegimiz attribute’ler
headerClass footerClass styleClass
Simdi de dataTable’a css kodumuzu ekleyelim.
/resources/css dizini altinda table-style.css dosyamizi olusturalim.
table-style.css
.person-table{ border-collapse:collapse; } .person-table-header{ text-align:center; background:#5d9de4; padding:20px; color: white; } .person-table-oddRow{ text-align:center; background:#eaeaea; border-top:1px solid #BBBBBB; } .person-table-evenRow{ text-align:center; background:#F9F9F9; border-top:1px solid #BBBBBB; }
css dosyamizi xhtml dosyamizda kullanmak icin ;
<h:head>... <h:outputStylesheet library="css" name="table-style.css" /> ... </h:head>
dataTable2.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <h:outputStylesheet library="css" name="table-style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Data Table</title> </h:head> <h:body> <h:form> <h:dataTable value="#{personDataBean.persons}" var="myPerson" captionStyle="font-size:20px" styleClass="person-table" headerClass="person-table-header" rowClasses="person-table-oddRow,person-table-evenRow"> <f:facet name="caption">Person List</f:facet> <h:column> <f:facet name="header">Name</f:facet> #{myPerson.name} </h:column> <h:column> <f:facet name="header">Surname</f:facet> #{myPerson.surname} </h:column> <h:column> <f:facet name="header">Gender</f:facet> #{myPerson.gender} </h:column> <h:column> <f:facet name="header">Age</f:facet> #{myPerson.age} </h:column> </h:dataTable> <br/> <h:dataTable value="#{personDataBean.persons}" var="myPerson" captionStyle="font-size:20px" styleClass="person-table" headerClass="person-table-header" columnClasses="person-table-oddRow,person-table-evenRow, person-table-oddRow,person-table-evenRow"> <!-- columnClasses icin tekrarlama ozelligi rowClasses'ta oldugu gibi yoktur. bu nedenle tum column icin css belirtilmelidir. --> <f:facet name="caption">Person List</f:facet> <h:column> <f:facet name="header">Name</f:facet> #{myPerson.name} </h:column> <h:column> <f:facet name="header">Surname</f:facet> #{myPerson.surname} </h:column> <h:column> <f:facet name="header">Gender</f:facet> #{myPerson.gender} </h:column> <h:column> <f:facet name="header">Age</f:facet> #{myPerson.age} </h:column> </h:dataTable> </h:form> </h:body> </html>
h:dataTable’da kullandigimiz ;
captionStyle ile caption icin css kodu yazabiliriz.
styleClass attribute tum table’da gecerli olacak css kodunu ifade eder.
headerClass , header’larda kullanilacak css kodunu ifade eder.
rowClasses , satirlarda kullanilacak css classlarini tanimlamak icin kullanilir.
columnClasses icin tekrarlama ozelligi rowClasses ‘ta oldugu gibi yoktur.
bu nedenle tum column/kolon icin css sinifi belirtilmelidir.
<h:column> tag’i ile yeni bir kolon/column ekleyebiliriz. <f:facet> tagi ile header’larimizi olusturabiliriz.
Ornegimizi calistirdigimizda ;
Kaynak kodlar : Injavawetrust.jsf
Yazimi burada sonlandiriyorum.
Herkese bol Javali gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer
Leave a Reply