PrimeFaces

PrimeFaces Dersleri-DataGrid Kullanımı

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

 

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

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

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.

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.

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.

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.