PrimeFaces Dersleri-DataScroller Kullanımı

Merhaba arkadaşlar. Bu yazımızda PrimeFaces’ın DataScroller billeşeninin kullanımını öğreneceğiz.

Bazı web sitelerinde dikkat ederseniz siz sayfayı aşağı kaydırdıkça yeni veriler ekleni ya da bir buton vasıtası ile mevcut bilgilere yenilerini ekleterek sayfayı uzatabilirsiniz. İşte PrimeFaces geliştiricileri de bunu DataScroller bileşeni ile bizim kullanımımıza sunmuşlar. Şimdi nasıl kullanıldığına bakalım.

index.xhtml

<!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://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
	<h:head>
	
	</h:head>
	
	<h:body>
		<h:form>
			<p:dataScroller value="#{dataScrollerBean.isletimSistemleri}" scrollHeight="300" var="isletimSistemleriObjesi" chunkSize="3" mode="inline">
				<h:panelGrid columns="3">
					<p:graphicImage style="width:200px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"></p:graphicImage>
					<h:outputText value="#{isletimSistemleriObjesi.isim}"></h:outputText>
					<h:outputText value="#{isletimSistemleriObjesi.aciklama}"></h:outputText>
				</h:panelGrid>
			</p:dataScroller>
			
			<br/>
			<br/>
			
			<p:dataScroller value="#{dataScrollerBean.isletimSistemleri}"  var="isletimSistemleriObjesi" chunkSize="3">
				<f:facet name="loader">
					<p:commandButton type="button" value="Daha Fazla" icon="ui-icon-circle-triangle-s"></p:commandButton>
				</f:facet>
				
				<h:panelGrid columns="3">
					<p:graphicImage style="width:200px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"></p:graphicImage>
					<h:outputText value="#{isletimSistemleriObjesi.isim}"></h:outputText>
					<h:outputText value="#{isletimSistemleriObjesi.aciklama}"></h:outputText>
				</h:panelGrid>
			</p:dataScroller>
		</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://xmlns.jcp.org/jsf/facelets"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:f="http://xmlns.jcp.org/jsf/core"

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

<h:head>

</h:head>

<h:body>

<h:form>

<p:dataScroller value="#{dataScrollerBean.isletimSistemleri}" scrollHeight="300" var="isletimSistemleriObjesi" chunkSize="3" mode="inline">

<h:panelGrid columns="3">

<p:graphicImage style="width:200px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"></p:graphicImage>

<h:outputText value="#{isletimSistemleriObjesi.isim}"></h:outputText>

<h:outputText value="#{isletimSistemleriObjesi.aciklama}"></h:outputText>

</h:panelGrid>

</p:dataScroller>

<br/>

<p:dataScroller value="#{dataScrollerBean.isletimSistemleri}" var="isletimSistemleriObjesi" chunkSize="3">

<f:facet name="loader">

<p:commandButton type="button" value="Daha Fazla" icon="ui-icon-circle-triangle-s"></p:commandButton>

</f:facet>

<h:panelGrid columns="3">

<p:graphicImage style="width:200px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"></p:graphicImage>

<h:outputText value="#{isletimSistemleriObjesi.isim}"></h:outputText>

<h:outputText value="#{isletimSistemleriObjesi.aciklama}"></h:outputText>

</h:panelGrid>

</p:dataScroller>

</h:form>

</h:body>

</html>

DataScroller bileşenimizi p:dataScroller etiketi ile kullanıyoruz. Bu etiketin value özelliğine ekranda gösterilemek verileri tutan listeyi atıyoruz. var özelliğine istediğimiz isimde bir atama yaparak her objeyi tek tek ayırt edebilecek şekilde ekrana yolluyoruz. scrollHeight ile kaç piksel’de bir yeni veri ekleneceğini söylüyoruz. Bu örnek için 300 piksel aşağı kaydırınca yeni veri eklenecek. chunkSize ile her bir scroll için kaç veri gösterileceğini söylüyoruz. Bu örnek için sayfa ilk açıldığında 3 ve sonraki her bir scroll için 3 kayıt daha gösterilecek. mode özelliğine eğer inline ataması yaparsak biz fareyi kaydırdığımızda veri eklenecek. Eğer buton vasıtası ile veri getirtmek istersek mode özelliğine atama yapmayıp f:facet kullanacağız. İkinci DataScroller kullanımı da buna örnek. f:facet name=”loader” ataması yapılıp içine de bir buton koyulduğunda artık ilave veri yükleme işlemi buton vasıtası ile olacak. Burada butonumuzun type özelliğine button ataması yapılmış. Bu durumda PrimeFaces butonun ajax özelliği devre dışı kalır ve biraz daha hızlı çalışabilir. Sadece p:commdanButton yazarak da kullanabiliriz.

İki kullanım arasındaki tek fark gördüğünüz gibi mode özelliği ya da f:facet kullanımından anlaşılıyor. İçerdeki panelGrid vb. elemanların kullanımını önceki derslerimizden biliyoruz.

DataScrollerBean.java

package com.DataScroller;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.util.List;
import java.util.ArrayList;

@ManagedBean
@SessionScoped
public class DataScrollerBean {
	
	List<IsletimSistemleri> isletimSistemleri;
	
	public List<IsletimSistemleri> getIsletimSistemleri() {
		return isletimSistemleri;
	}
	
	public void setIsletimSistemleri(List<IsletimSistemleri> isletimSistemleri) {
		this.isletimSistemleri = isletimSistemleri;
	}
	
	@PostConstruct
	public void listeyiDoldur()
	{
		isletimSistemleri=new ArrayList<>();
		IsletimSistemleri osx=new IsletimSistemleri("Mac OS X","Mac Bilgisayarlara Özel İşletim Sistemi","osx.png");
		IsletimSistemleri ubuntu=new IsletimSistemleri("Arc Linux","Belirli Düzeyde Linux Bilgisi Olanları Hedefleyen Dağıtım","arch.png");
		IsletimSistemleri fedora=new IsletimSistemleri("Fedora","Red Hat Ticari Linux'un Ücretsiz Dağıtımı","fedora.png");
		IsletimSistemleri arch=new IsletimSistemleri("Linux Mint","Son Kullanıcı Hedefli Kullanımı Kolay Dağıtım","linuxmint.png");
		IsletimSistemleri mint=new IsletimSistemleri("Manjaro","Arch Linux'un Son Kullanıcı Hedeflenmiş Hali","manjaro.png");
		IsletimSistemleri manjaro=new IsletimSistemleri("Ubuntu","Mint İle Beraber Son Kullanıcı Odaklı En Popüler Dağıtımlardan Biri","ubuntu.jpg");
		
		isletimSistemleri.add(osx);
		isletimSistemleri.add(ubuntu);
		isletimSistemleri.add(fedora);
		isletimSistemleri.add(arch);
		isletimSistemleri.add(mint);
		isletimSistemleri.add(manjaro);
		
	}
}

package com.DataScroller;

import javax.annotation.PostConstruct;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import java.util.List;

import java.util.ArrayList;

@ManagedBean

@SessionScoped

public class DataScrollerBean {

List<IsletimSistemleri> isletimSistemleri;

public List<IsletimSistemleri> getIsletimSistemleri() {

return isletimSistemleri;

}

public void setIsletimSistemleri(List<IsletimSistemleri> isletimSistemleri) {

this.isletimSistemleri = isletimSistemleri;

}

@PostConstruct

public void listeyiDoldur()

{

isletimSistemleri=new ArrayList<>();

IsletimSistemleri osx=new IsletimSistemleri("Mac OS X","Mac Bilgisayarlara Özel İşletim Sistemi","osx.png");

IsletimSistemleri ubuntu=new IsletimSistemleri("Arc Linux","Belirli Düzeyde Linux Bilgisi Olanları Hedefleyen Dağıtım","arch.png");

IsletimSistemleri fedora=new IsletimSistemleri("Fedora","Red Hat Ticari Linux'un Ücretsiz Dağıtımı","fedora.png");

IsletimSistemleri arch=new IsletimSistemleri("Linux Mint","Son Kullanıcı Hedefli Kullanımı Kolay Dağıtım","linuxmint.png");

IsletimSistemleri mint=new IsletimSistemleri("Manjaro","Arch Linux'un Son Kullanıcı Hedeflenmiş Hali","manjaro.png");

IsletimSistemleri manjaro=new IsletimSistemleri("Ubuntu","Mint İle Beraber Son Kullanıcı Odaklı En Popüler Dağıtımlardan Biri","ubuntu.jpg");

isletimSistemleri.add(osx);

isletimSistemleri.add(ubuntu);

isletimSistemleri.add(fedora);

isletimSistemleri.add(arch);

isletimSistemleri.add(mint);

isletimSistemleri.add(manjaro);

}

IsletimSistemleri.java

package com.DataScroller;

public class IsletimSistemleri {
	
	public IsletimSistemleri(String isim,String aciklama,String resimAdi)
	{
		this.isim= isim;
		this.aciklama= aciklama;
		this.resimAdi= resimAdi;
	}
	
	String isim;
	String aciklama;
	String resimAdi;
	
	public String getIsim() {
		return isim;
	}
	public void setIsim(String isim) {
		this.isim = isim;
	}
	public String getAciklama() {
		return aciklama;
	}
	public void setAciklama(String aciklama) {
		this.aciklama = aciklama;
	}
	public String getResimAdi() {
		return resimAdi;
	}
	public void setResimAdi(String resimAdi) {
		this.resimAdi = resimAdi;
	}
	
}

package com.DataScroller;

public class IsletimSistemleri {

public IsletimSistemleri(String isim,String aciklama,String resimAdi)

{

this.isim= isim;

this.aciklama= aciklama;

this.resimAdi= resimAdi;

}

String isim;

String aciklama;

String resimAdi;

public String getIsim() {

return isim;

}

public void setIsim(String isim) {

this.isim = isim;

}

public String getAciklama() {

return aciklama;

}

public void setAciklama(String aciklama) {

this.aciklama = aciklama;

}

public String getResimAdi() {

return resimAdi;

}

public void setResimAdi(String resimAdi) {

this.resimAdi = resimAdi;

}

İki Java sınıfımızda da herşey gördüğünüz gibi bildiğimiz şeyler. Sormak istediğiniz, anlamadığınız yer olursa yorum kısmına yazabilirsiniz.

Ekran Çıktıları

Üstteki DataScroller bileşeninin kaydırma çubuğuna dikkat edin.

Fareyi üstteki DataScroller’ın içine getirip aşağı kaydırdığımda otomatik olarak verileri ekledi ve scroll çubuğu küçüldü.

Alttaki DataSroller’da da scroll çubuğunu kaydırınca bir buton karşımıza çıkıyor ve o butona tıklıyoruz.

Butona tıklayınca ekranda daha fazla veri göründü.

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda görüşmek üzere sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X