Merhaba arkadaşlar. Bu yazımızda sizlerle PrimeFaces’ın bir başka güzel ve kullanışlı bileşeni olan DataGrid‘in kullanımını öğreneceğiz.
DataGrid daha önce kullanıdğımız PanelGrid bileşeni gibi ekranda bir Grid yerleşim düzeni uyarlıyor ve biz DataGrid’i DataTable ve PanelGrid bileşenlerinin gelişmiş versiyonu olarak düşünebiliriz DataGrid’i.
Örnek uygulamamızla kullanımına bakalım.
index.xhtml Kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?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://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>PrimeFaces Data Grid Kullanımı</title> </h:head> <h:body> <h:form> <p:dataGrid value="#{dataGridBean.dillerListesi}" var="dillerObjesi" columns="2" layout="grid" rows="4" paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="2,4,6"> <f:facet name="header"> KOD5.ORG'da Anlatılan Teknolojiler </f:facet> <p:panel header="#{dillerObjesi.adi}"> <p:panelGrid columns="1"> <h:outputText value="#{dillerObjesi.kod5dekiYazari}"/> <p:commandLink update=":#{p:component('dilGrid')}" oncomplete="PF('dialogPenceresi').show()" title="Detayları Göster"> <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" /> <f:setPropertyActionListener value="#{dillerObjesi}" target="#{dataGridBean.secilenDil}" /> </p:commandLink> </p:panelGrid> </p:panel> </p:dataGrid> <p:dialog header="Dil Hakkında Bilgi" widgetVar="dialogPenceresi" modal='true' showEffect="fade" hideEffect="fade" resizable="false"> <p:outputPanel id="dilGrid"> <p:panelGrid rendered="#{not empty dataGridBean.secilenDil }" columns="2"> <h:outputText value="Dilin Adı"/> <h:outputText value="#{dataGridBean.secilenDil.adi}"/> <h:outputText value="Dil Hakkında Açıklama"/> <h:outputText value="#{dataGridBean.secilenDil.aciklama}"/> <h:outputText value="KOD5'teki Yazarı"/> <h:outputText value="#{dataGridBean.secilenDil.kod5dekiYazari}"/> <h:outputText value="Yazarın Okulu"/> <h:outputText value="#{dataGridBean.secilenDil.yazarinOkulu}"/> </p:panelGrid> </p:outputPanel> </p:dialog> </h:form> </h:body> </html> |
DataGrid bileşenini p:dataGrid etiketi ile kullanıyoruz ve ekranda görünmesini istediğimiz bilgilerin barındığı listeyi bu etiketin value özelliğine atıyoruz. Ekranda bilgileri kolon kolon göstermek istediğimizden bir de var kullanıyoruz. columns özelliği bilgileri kaç kolonda vereceğimizi bildiriyoruz. Bu örnek için ekranda 2 kolon mevcut olacak. layout özelliği ekrandaki yerleşim düzenini bildiriyor, bu örnekte grid yerleşim düzeni kullanıyoruz. rows özelliği ile uygulama açılıp sayfa geldiğinde ekranda varsayılan olarak kaç kayıt belirsin diye belirliyoruz. paginator özelliği ile sayfalama yapılıp yapılmamasına karar veriyoruz. paginatorTemplate özelliği sayfalar arası geçişte kullanılacak şablon yapıyı belirliyoruz. Bu örneğimizdeki şablon 7 elemente sahip. Güncel sayfayı, ilk ve son sayfaya giden butonları, önceki ve sonraki sayfaya giden butonları ve sayfada görünecek kayıt sayısını değiştiren dropDown elementlerine sahip. rowsPerPageTemplate özelliği ile sayda gösterilecek kayıt sayısını değiştirecek drowDown’da görünecek sayıları belirliyoruz.
DataTable bileşeninden hatırlayacağınız üzere kolonların başlığı oluyordu. Burada da tüm DataGrid’in başlığını f:facet name=”header” diyerek tanımlayabiliyoruz.
p:panel etiketi ile ekranda göstereceğimiz veriyi bir panel bileşenin içine koyuyoruz. Verimizi de bir panelGrid bileşenin içinde sunuyoruz. Panel bileşenini bir başlık kullanabilmek için kullanıyoruz. PanelGrid bileşenimiz içinde göstermek istediğimiz verileri yazdırıyoruz. Bunun yanında bir CommandLink vasıtası ile de yeni bir dialog penceresinde daha fazla bilgi verebiliriz. Bizim örneğimizde CommandLink oncomplete özelliğine atanmış olan dialog penceresini çağırıyor. Normalde buton ya da linkin ekranda hangi yazı ile görüleceğini value özelliğine atayıp kullanabilirdik ama alternatif olarak bileşenin içine outputText etiketi açarak da yazdırabiliriz. Örneğimizdeki linkin başka bir özelliği de tıklandığında parametre geçişi yapması. JSF derslerini anlatırken f:setPropertyActionListener etiketini de anlatmıştım.
Dialog penceresi üzerinde de anlatılacak bir kısım bulunmamakta zira daha önce öğrenmiştik. Yalnız bir noktaya değineyim. Biz dialog içindeki PanelGrid’i güncellemek istiyoruz fakat onu bir outputPanel içine koyduk çünkü direk dialog penceresinin içindeki PanelGrid güncellenmiyor arkadaşlar DataGrid bileşeni içinde. Bu nedenle onu bir outputPanel içine koymanızda fayda var.
DataGridBean.java Kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ import java.io.Serializable; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; /** * * @author ilkaygunel */ @ManagedBean @RequestScoped public class DataGridBean implements Serializable{ List<Diller> dillerListesi; Diller secilenDil; public List<Diller> getDillerListesi() { return dillerListesi; } public Diller getSecilenDil() { return secilenDil; } public void setSecilenDil(Diller secilenDil) { this.secilenDil = secilenDil; } @PostConstruct public void listeyiDoldur() { dillerListesi=new ArrayList<>(); Diller swiftNesnesi=new Diller("Swift", "iPhone Uygulama Yazma Dili", "Muhammet Özdemir","Doğuş Üniversitesi"); Diller javaNesnesi=new Diller("Java", "En Güçlü Ve Yaygın Açık Kaynak Dil", "Muhammed Murat Tutar","Boğaziçi Üniversitesi"); Diller androidNesnesi=new Diller("Android","Akıllı Telefon İşletim Sistemi","Mürşid Yazar","Yıldız Teknik Üniversitesi"); Diller jsfNesnesi=new Diller("JSF", "Java'nın Standart Web Çatısı", "İlkay Günel","İstanbul Teknik Üniversitesi"); Diller jspNesnesi=new Diller("JSP", "Java'nın Yaygın Kullanılan Başka Bir Web Teknolojisi", "Abdullah Onur Özcan","Sakarya Üniversitesi"); Diller phpNesnesi=new Diller("PHP", "Açık Kaynak Web Script Dili", "Fatih Çal","Kocaeli Üniversitesi"); dillerListesi.add(swiftNesnesi); dillerListesi.add(javaNesnesi); dillerListesi.add(jsfNesnesi); dillerListesi.add(jspNesnesi); dillerListesi.add(phpNesnesi); dillerListesi.add(androidNesnesi); } } |
Java sınıfımız içinde de ekranda göstereceğimiz veriyi barındıran liste ve seçilen dili tutan bir değişken var. PostConstruct notasyonu ile işaretlenmiş metodumuz da uygulama çalışıtğında listeyi dolduruyor. Aslında hepsi bildiğimiz şeyler 🙂
Diller.java Kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import java.io.Serializable; /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * * @author ilkaygunel */ public class Diller implements Serializable{ private String adi; private String aciklama; private String kod5dekiYazari; private String yazarinOkulu; public Diller(String adi,String aciklama,String kod5dekiYazari,String yazarinOkulu) { this.adi=adi; this.aciklama=aciklama; this.kod5dekiYazari=kod5dekiYazari; this.yazarinOkulu=yazarinOkulu; } public String getAdi() { return adi; } public void setAdi(String adi) { this.adi = adi; } public String getAciklama() { return aciklama; } public void setAciklama(String aciklama) { this.aciklama = aciklama; } public String getKod5dekiYazari() { return kod5dekiYazari; } public void setKod5dekiYazari(String kod5dekiYazari) { this.kod5dekiYazari = kod5dekiYazari; } public String getYazarinOkulu() { return yazarinOkulu; } public void setYazarinOkulu(String yazarinOkulu) { this.yazarinOkulu = yazarinOkulu; } } |
POJO sınıfı olarak tabir edebileceğimiz Diller sınıfımız kendine has özellikleri barındırıyor.
Ekran Çıktıları
Sayfa ilk açıldığında rows=4 olduğundan 4 kayıt 2 sütuna yayılarak verildi.
DropDown’dan ekranda 6 kayıt görünmesini istiyorum ve o da 2 sütuna 6 kaydı yayarak veriyor.
JSF panelindeki büyüteç şeklindeki butona tıklıyorum ve daha fazla bilgi veren dialog penceresi açılıyor.
Bu yazıda da bu kadar arkadaşlar. DataGrid bileşeninin de kullanımını öğrenmiş olduk. Gelecek derste DataList bileşeninin kullanımını öğreneceğiz. Sağlıcakla kalın.
