PrimeFaces

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

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

IsletimSistemleri.java

İ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.