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