PrimeFaces Dersleri-DataList Kullanımı

Merhaba arkadaşlar. DataGrid kullanımı dersimizin ardından bu dersimizde DataList kullanımını öğreneceğiz. DataGrid bileşenimizden farklı olarak bu bileşen verileri listeleme yolu ile kullanıcıya bildirmemiz sağlıyor.

Örnek projemiz üzerinden kullanımına bakalım.

index.xhtml Kodu

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
	<title>PrimeFaces-DataList Kullanımı</title>
</h:head> 
<h:body> 
	<h:form>
		<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" type="ordered">
			<f:facet name="header">
				Temel Kullanım
			</f:facet>
			
			<h:outputText value="İlçe Kodu:#{dataListBeanObject.ilceKodu} " />
			<h:outputText value=" İlçe Adı:#{dataListBeanObject.adi}" />
		</p:dataList>
		
		<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" type="definition">
			<f:facet name="header">
				Tanımla Özelliği İle Kullanım
			</f:facet>
			
			<h:outputText value="İlçe Kodu:#{dataListBeanObject.ilceKodu} " />
			<h:outputText value=" İlçe Adı:#{dataListBeanObject.adi}" />
			
			<f:facet name="description">
				<p:graphicImage name="#{dataListBeanObject.resimAdi}" library="images"/>
			</f:facet>
		</p:dataList>
		
		<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" paginator="true" rows="3" styleClass="paginated">
			<f:facet name="header">
				Sayfalama Özelliği İle Kullanım
			</f:facet>
			
			<p:commandLink update=":#{p:component('ilcePanel')}" oncomplete="PF('ilceDialog').show()" title="Detayları Görüntüle" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
	            <f:setPropertyActionListener value="#{dataListBeanObject}" target="#{dataListBean.secilenIlce}" />
	        </p:commandLink>
	        <h:outputText value="#{dataListBeanObject.adi}" style="display:inline-block"/>
		</p:dataList>
		
		<p:dialog widgetVar="ilceDialog">
			<p:outputPanel id="ilcePanel" style="text-align:center;">
				<p:panelGrid columns="2" rendered="#{not empty dataListBean.secilenIlce}" columnClasses="label,value">
					<f:facet name="header">
						<p:graphicImage name="#{dataListBean.secilenIlce.resimAdi}" library="images"/>
					</f:facet>
					
					<h:outputText value="İlçe Kodu" />
					<h:outputText value="#{dataListBean.secilenIlce.ilceKodu}"/>
					
					<h:outputText value="İlçe Adı" />
					<h:outputText value="#{dataListBean.secilenIlce.adi}"/>
					
				</p:panelGrid>
			</p:outputPanel>
		</p:dialog>
	</h:form>
</h:body> 
</html>

<!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:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:p="http://primefaces.org/ui">

<h:head>

<title>PrimeFaces-DataList Kullanımı</title>

</h:head>

<h:body>

<h:form>

<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" type="ordered">

<f:facet name="header">

Temel Kullanım

</f:facet>

<h:outputText value="İlçe Kodu:#{dataListBeanObject.ilceKodu} " />

<h:outputText value=" İlçe Adı:#{dataListBeanObject.adi}" />

</p:dataList>

<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" type="definition">

<f:facet name="header">

Tanımla Özelliği İle Kullanım

</f:facet>

<h:outputText value="İlçe Kodu:#{dataListBeanObject.ilceKodu} " />

<h:outputText value=" İlçe Adı:#{dataListBeanObject.adi}" />

<f:facet name="description">

<p:graphicImage name="#{dataListBeanObject.resimAdi}" library="images"/>

</f:facet>

</p:dataList>

<p:dataList value="#{dataListBean.ilcelerListesi}" var="dataListBeanObject" paginator="true" rows="3" styleClass="paginated">

<f:facet name="header">

Sayfalama Özelliği İle Kullanım

</f:facet>

<p:commandLink update=":#{p:component('ilcePanel')}" oncomplete="PF('ilceDialog').show()" title="Detayları Görüntüle" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">

<f:setPropertyActionListener value="#{dataListBeanObject}" target="#{dataListBean.secilenIlce}" />

</p:commandLink>

<h:outputText value="#{dataListBeanObject.adi}" style="display:inline-block"/>

</p:dataList>

<p:dialog widgetVar="ilceDialog">

<p:outputPanel id="ilcePanel" style="text-align:center;">

<p:panelGrid columns="2" rendered="#{not empty dataListBean.secilenIlce}" columnClasses="label,value">

<f:facet name="header">

<p:graphicImage name="#{dataListBean.secilenIlce.resimAdi}" library="images"/>

</f:facet>

<h:outputText value="İlçe Kodu" />

<h:outputText value="#{dataListBean.secilenIlce.ilceKodu}"/>

<h:outputText value="İlçe Adı" />

<h:outputText value="#{dataListBean.secilenIlce.adi}"/>

</p:panelGrid>

</p:outputPanel>

</p:dialog>

</h:form>

</h:body>

</html>

Index kodumuz içersinde DataList bileşenimizi p:dataList etiketi ile kullanıyoruz. DataList’in 3 farklı kullanım yöntemi ulunmakta: Temel, Tanımlama ve Sayfalama

Kod içinde birinci DataList temel kullanıma örnek. DataList’in value özelliğine Java kodumuz içindeki verileri tutan listeyi atıyoruz. Artık alışkın hale geldiğimiz üzre bir de var özelliğine ihtiyacımız var. Type özelliğine ordered ataması yaparak html’deki <li> <ol> </ol> </li> yapısına benzer şekilde sıralanmış şekilde verileri ekrana yazdırıyoruz. Sıralanmamış şekilde isterseniz unordered yazmanız yeterli. Etiketin içinde f:facet name=”header” ifadesini kullanarak bu DataList’e bir başlık atıyoruz. Akabinde h:outputText bileşenleri ile ekrana yazdırmak istediğimiz verileri yazdırıyoruz.

İkinci DataList kullanımı ise bir tanımlama özelliği ile kullanıma örnek. Temel kullanımdan farklı olarak type özelliğine definition ataması yapıyoruz. Akabinde içeride ikinci bir f:facet etiketi açıyoruz ve bunun name özelliğine description atamasını yapıyoruz. Sonra bu f:facet etiketinin içine tanımlayıcı olarak ne kullanmak istiyorsak onu yazıyoruz. Bu örnek için tanımlayıcı bir resim olacak.

Üçüncü DataList kullanımı da sayfalama özelliği ile kullanıma örnek. Yapmamız gereken paginator özelliğine true ataması yapmak ve rows özelliğine sayfa açıldığında kaç kayıt görünmesini istediğimizi yazmak. Onun dışında burada bir commandLink’imiz var ve dialog penceresi açıp içerisini güncelleyebiliyor. Daha önce anlattığım için buraya girip yazıyı uzatmıyayım 🙂

DataListBean.java Kodu

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 DataListBean {
	List<Ilceler> ilcelerListesi;
	Ilceler secilenIlce;
	public List<Ilceler> getIlcelerListesi() {
		return ilcelerListesi;
	}
	
	public void setIlcelerListesi(List<Ilceler> ilcelerListesi) {
		this.ilcelerListesi = ilcelerListesi;
	}
	
	public Ilceler getSecilenIlce() {
			return secilenIlce;
	}
	
	public void setSecilenIlce(Ilceler secilenIlce) {
		this.secilenIlce = secilenIlce;
	}
	
	@PostConstruct
	public void listeyiDoldur()
	{
		ilcelerListesi=new ArrayList<Ilceler>();
		Ilceler uskudar=new Ilceler(1, "Üsküdar", "uskudar.jpg");
		Ilceler sultanbeyli=new Ilceler(2, "Sultanbeyli", "sultanbeyli.jpeg");
		Ilceler eyup=new Ilceler(3, "Eyüp", "eyup.jpg");
		Ilceler fatih=new Ilceler(4, "Fatih", "fatih.jpg");
		Ilceler gaziosmanpasa=new Ilceler(5, "Gaziosmanpaşa", "gop.jpg");
		Ilceler sisli=new Ilceler(6, "Şişli", "sisli.png");
		ilcelerListesi.add(uskudar);
		ilcelerListesi.add(sultanbeyli);
		ilcelerListesi.add(eyup);
		ilcelerListesi.add(fatih);
		ilcelerListesi.add(gaziosmanpasa);
		ilcelerListesi.add(sisli);
	}
}

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

List<Ilceler> ilcelerListesi;

Ilceler secilenIlce;

public List<Ilceler> getIlcelerListesi() {

return ilcelerListesi;

}

public void setIlcelerListesi(List<Ilceler> ilcelerListesi) {

this.ilcelerListesi = ilcelerListesi;

}

public Ilceler getSecilenIlce() {

return secilenIlce;

}

public void setSecilenIlce(Ilceler secilenIlce) {

this.secilenIlce = secilenIlce;

}

@PostConstruct

public void listeyiDoldur()

{

ilcelerListesi=new ArrayList<Ilceler>();

Ilceler uskudar=new Ilceler(1, "Üsküdar", "uskudar.jpg");

Ilceler sultanbeyli=new Ilceler(2, "Sultanbeyli", "sultanbeyli.jpeg");

Ilceler eyup=new Ilceler(3, "Eyüp", "eyup.jpg");

Ilceler fatih=new Ilceler(4, "Fatih", "fatih.jpg");

Ilceler gaziosmanpasa=new Ilceler(5, "Gaziosmanpaşa", "gop.jpg");

Ilceler sisli=new Ilceler(6, "Şişli", "sisli.png");

ilcelerListesi.add(uskudar);

ilcelerListesi.add(sultanbeyli);

ilcelerListesi.add(eyup);

ilcelerListesi.add(fatih);

ilcelerListesi.add(gaziosmanpasa);

ilcelerListesi.add(sisli);

}

DataListBean sınıfımız içersinde verilerimizi tutacak listemizi dolduruyoruz. Bunun yanında bir de dialog penceresinde görünecek bilgileri tutan secilenIlce adında bir değişkenimiz var.

Ilceler.java Kodu

public class Ilceler {
	
	public  Ilceler( int ilceKodu,String adi,String resimAdi) {
		this.ilceKodu=ilceKodu;
		this.adi=adi;
		this.resimAdi=resimAdi;
	}
	
	private int ilceKodu;
	private String adi="";
	private String resimAdi="";
	
	public int getIlceKodu() {
		return ilceKodu;
	}
	
	public void setIlceKodu(int ilceKodu) {
		this.ilceKodu = ilceKodu;
	}
	
	public String getAdi() {
		return adi;
	}
	public void setAdi(String adi) {
		this.adi = adi;
	}
	public String getResimAdi() {
		return resimAdi;
	}
	public void setResimAdi(String resimAdi) {
		this.resimAdi = resimAdi;
	}
}

public class Ilceler {

public Ilceler( int ilceKodu,String adi,String resimAdi) {

this.ilceKodu=ilceKodu;

this.adi=adi;

this.resimAdi=resimAdi;

}

private int ilceKodu;

private String adi="";

private String resimAdi="";

public int getIlceKodu() {

return ilceKodu;

}

public void setIlceKodu(int ilceKodu) {

this.ilceKodu = ilceKodu;

}

public String getAdi() {

return adi;

}

public void setAdi(String adi) {

this.adi = adi;

}

public String getResimAdi() {

return resimAdi;

}

public void setResimAdi(String resimAdi) {

this.resimAdi = resimAdi;

}

Kendine has özellikleri olan Ilceler sınıfımız.

Ekran Çıktıları

Bazı ekran çıktılarını WordPress kabul etmediği için hızlı resim ile koydum.

Temel kullanımda sıralı liste şeklinde ekrana bastık.

Tanımlama özelliği ile kullanımda tanımlayıcı olarak verdiğimiz resimler de gözükmekte.

Sayfalama özelliği ile kullanımda da ekranda 3 kayıt görünmesini istediğimiz için 3 kayıt göründü ve toplamda 6 kayıt olduğu için 2 sayfa halinde oldu.

Büyüteç’e tıkladığımda dialog penceresi açıldı ve başka bilgiler de göründü.

Bu yazıda da bu kadar arkadaşlar. Anlayamadığınız yer olursa yorum kısmına yazın lütfen. Elimden geldiğince yardımcı olmaya çalışacağım size. Gelecek yazımızda DataScroller bileşenini öğreneceğiz. Sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X