PrimeFaces

PrimeFaces Dersleri-DataTable Kullanımı

Merhaba arkadaşlar. Bu yazımızda sizlerle PrimeFaces’ın DataTable bileşeninin kullanımını öğreneceğiz.

Konumuza geçmeden söylemek istediğim bir şey var. Bu yazı da dahil olmak üzere 31 adet PrimeFaces dersini PrimeFaces’a giriş yazısında listeledim. O yazıya buradan ulaşabilirsiniz. Şimdi konumuza bakalım.

PrimeFaces’ın veri listeleme amacı ile kullandığımız DataTable bileşeni JSF’deki hali ile oldukça benzer.  PrimeFaces’ın DataTable bileşeninin 22 farklı kullanım şekli var arkadaşlar. Ben bu yazıda sizlere 3 tanesini anlatıp size bir fikir edindirmeye çalışacağım.

Şimdi örnek kodumuza bakalım. Bu yazı için kullandığım Java sınıfları önceki dersteki ile aynı sadece iki metot fazladan yazıldı. Bu yüzden sınıflar yerine sadece o iki metodu göstereceğim.

index.xhtml

index sayfamız içindeki birinci DataTable kullanım örneğinde temel kullanımı görüyoruz. Hiçbir ekstra özelliği olmayan sadece veriyi listeyebilen hali. p:column etiketleri ile ekranda veri için kolon açıyoruz ve bunun headerText özelliği ile kolon başlığını atıyoruz. Etiket arasına da ekranda göstermek itediğimiz veriyi atıyoruz.

İkinci DataTable kullanım örneğinde  satırın DataTable üzerinde güncellenebilirliği gösteriliyor. Bunun için ilk olarak p:dataTable etiketinin editable özelliğine true ataması yapılması gerekiyor. Akabinde DataTable içinde iki adet p:ajax etiketi çağırıyoruz.  Bu etiketlerin event özelliklerine rowEdit ya da rowEditCancel ataması yaparak hangi durumda tetikleneceklerini söylüyoruz.  Bunların tetiklenme işlemini verilerimizin yanında p:rowEditor etiketi ile ekleyeceğimiz kolondaki butonlara yaptırıyoruz. Bu butonlardan edit butonuna tıkladığımızda değişiklik yapabilmemiz için bir kolon içinde p:cellEditor etiketi kullanıyoruz ve içine veriyi gösteren bir outputText ya da outputLabel’i ve bir inputText’i f:facet etiketleri arasında tanımlıyoruz. Bu f:facet etiketleri Ajax tetiklemesi geldiğinde güncellenebilmek için name özelliğine output ya da input atamalarının yapılmasına ihtiyaç duyar. Ajax özelliği sayesinde edit butonuna tıklandığında outputText ya da outputLabel inputText’e dönüşür.

Üçüncü DataTable kullanımı örneğinde satırların sıralanabilmesi özelliğine örnek teşkil ediyor. Temel kullanıma benzeyen bu kullanım şeklinde yapılması gereken p:column özelliğinin sortBy özelliğine atama yapılmasıdır. sortBy özelliğine ilgili kolonu neye göre sıralamak istiyorsan onun atamasını yapıyoruz. Örneğin bu örnekte resim kolonu resmin adına göre, işletim sistemlerinin ismi kolonu isme göre sıralanabilir haldedir.

onRowEdit ve onRowCancel Metotları

İkinci DataTable örneğinde gördüğümüz üzere iki adet ajax çağırımı tanımlamıştık. Bu ajax çaığırımlarının bize mesaj döndürmesi için bean sınıfımız içinde iki metot tanımlıyoruz. Bu FacesMessage ve FacesContext yapılarını da daha önce anlatmıştım. p:ajax’ın update özelliği ilgili listener metodundan dönen mejası growl bileşenine gönderip mesajı ekrana yazdırıyor.

Ekran Çıktıları

Temel kullanımda verilerin listelenmesi dışında bir özellik bulunmuyor.

Satır güncellenebilir DataTable’ın görünümü şöyledir, yanındaki kaleme tıklayarak güncellenebilir hale getiririz:

Kaleme tıkladığımda İsim ve Açıklama kolonları düzenlenebilir hale geliyor.


Düzenleme işlemini yapıp tik şeklindeki butonatıkladığımda bana mesaj döndürülüyor.

 

Satır sıralanabilir DataTable’da da görünüm şu şekildedir, İsim kolonuna tıklayarak isme göre sıralayalım :

 

Sıralanmış Hali: 

 

DataTable kullanımının 3 yöntemi bu şekilde arkadaşlar. Geri kalan 19 yöntemi de ben yeri geldikçe ve fırsat buldukça anlatmaya çalışacağım.

Başka yazılarda görüşmek üzere sağlıcakla kalın arkadaşlar.

  • Ömer

    Merhaba,
    Öncelikle paylaşımınız için teşekkürler. Güzel paylaşımlarda bulunuyorsunuz. Burada xhtml tarafını paylaşmışsınız bean tarafınıda paylaşsanız daha faydalı olacağını düşünüyorum.

  • Cumhur Caner Erken

    Merhaba, Layout içerisinde datatable kullanıyorum ancak alanlarda yaptığım değişiklikler güncellenmiyor. Eski kayıt kalıyor değişmiyor. Ne yapmam gerekiyor?