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

<?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://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>DataTable Kullanımı 1</title>
    </h:head>
    <h:body>
        <h:form>
            <p:growl id="msgs" showDetail="true"/>
            
            <h3>Basic (Temel) Kullanım</h3>
            <p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi">
                <p:column headerText="Resim" >
                    <p:graphicImage style="width: 100px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"/>
                </p:column>
                
                <p:column headerText="İsim">
                    <p:outputLabel value="#{isletimSistemleriObjesi.isim}"/>
                </p:column>
                
                <p:column headerText="Açıklama">
                    <p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/>
                </p:column>
                
            </p:dataTable>
            
            <h3>Satır Güncelleme Kullanım</h3>
            <p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi" editable="true">
                <p:ajax event="rowEdit" listener="#{dataTableBean.onRowEdit}" update=":#{p:component('msgs')}" />
                <p:ajax event="rowEditCancel" listener="#{dataTableBean.onRowCancel}" update=":#{p:component('msgs')}" />
                
                <p:column headerText="Resim">
                    <p:graphicImage style="width: 100px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"/>
                </p:column>
                
                <p:column headerText="İsim">
                    <p:cellEditor>
                        <f:facet name="output"><p:outputLabel value="#{isletimSistemleriObjesi.isim}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{isletimSistemleriObjesi.isim}"/></f:facet>
                    </p:cellEditor>
                </p:column>
                
                <p:column headerText="Açıklama">
                    <p:cellEditor>
                        <f:facet name="output"><p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{isletimSistemleriObjesi.aciklama}"/></f:facet>
                    </p:cellEditor>
                </p:column>
                
                <p:column style="width:32px">
                    <p:rowEditor />
                </p:column>
            </p:dataTable>
            
            <h3>Satır Sıralanabilir Kullanım</h3>
            <p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi">
                <p:column headerText="Resim" sortBy="#{isletimSistemleriObjesi.resimAdi}">
                    <p:graphicImage style="width: 100px;" name="#{isletimSistemleriObjesi.resimAdi}" library="images"/>
                </p:column> 
                
                <p:column headerText="İsim" sortBy="#{isletimSistemleriObjesi.isim}">
                    <p:outputLabel value="#{isletimSistemleriObjesi.isim}"/>
                </p:column>
                
                <p:column headerText="Açıklama" sortBy="#{isletimSistemleriObjesi.aciklama}">
                    <p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/>
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

<?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://java.sun.com/jsf/html"

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

xmlns:f="http://java.sun.com/jsf/core">

<h:head>

<title>DataTable Kullanımı 1</title>

</h:head>

<h:body>

<h:form>

<p:growl id="msgs" showDetail="true"/>

<h3>Basic (Temel) Kullanım</h3>

<p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi">

<p:column headerText="Resim" >

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

</p:column>

<p:column headerText="İsim">

<p:outputLabel value="#{isletimSistemleriObjesi.isim}"/>

</p:column>

<p:column headerText="Açıklama">

<p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/>

</p:column>

</p:dataTable>

<h3>Satır Güncelleme Kullanım</h3>

<p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi" editable="true">

<p:ajax event="rowEdit" listener="#{dataTableBean.onRowEdit}" update=":#{p:component('msgs')}" />

<p:ajax event="rowEditCancel" listener="#{dataTableBean.onRowCancel}" update=":#{p:component('msgs')}" />

<p:column headerText="Resim">

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

</p:column>

<p:column headerText="İsim">

<p:cellEditor>

<f:facet name="output"><p:outputLabel value="#{isletimSistemleriObjesi.isim}"/></f:facet>

<f:facet name="input"><p:inputText value="#{isletimSistemleriObjesi.isim}"/></f:facet>

</p:cellEditor>

</p:column>

<p:column headerText="Açıklama">

<p:cellEditor>

<f:facet name="output"><p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/></f:facet>

<f:facet name="input"><p:inputText value="#{isletimSistemleriObjesi.aciklama}"/></f:facet>

</p:cellEditor>

</p:column>

<p:column style="width:32px">

<p:rowEditor />

</p:column>

</p:dataTable>

<h3>Satır Sıralanabilir Kullanım</h3>

<p:dataTable value="#{dataTableBean.isletimSistemleri}" var="isletimSistemleriObjesi">

<p:column headerText="Resim" sortBy="#{isletimSistemleriObjesi.resimAdi}">

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

</p:column>

<p:column headerText="İsim" sortBy="#{isletimSistemleriObjesi.isim}">

<p:outputLabel value="#{isletimSistemleriObjesi.isim}"/>

</p:column>

<p:column headerText="Açıklama" sortBy="#{isletimSistemleriObjesi.aciklama}">

<p:outputLabel value="#{isletimSistemleriObjesi.aciklama}"/>

</p:column>

</p:dataTable>

</h:form>

</h:body>

</html>

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ı

public void onRowEdit(RowEditEvent event) {
        FacesMessage msg = new FacesMessage("İşletim Sistemi Düzenlendi", ((IsletimSistemleri) event.getObject()).getIsim());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
     
    public void onRowCancel(RowEditEvent event) {
        FacesMessage msg = new FacesMessage("Düzenleme İptal Edildi", ((IsletimSistemleri) event.getObject()).getIsim());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

public void onRowEdit(RowEditEvent event) {

FacesMessage msg = new FacesMessage("İşletim Sistemi Düzenlendi", ((IsletimSistemleri) event.getObject()).getIsim());

FacesContext.getCurrentInstance().addMessage(null, msg);

}

public void onRowCancel(RowEditEvent event) {

FacesMessage msg = new FacesMessage("Düzenleme İptal Edildi", ((IsletimSistemleri) event.getObject()).getIsim());

FacesContext.getCurrentInstance().addMessage(null, msg);

}

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

3 Yorum

Ömer dedi ki:

29 Ağustos 2015, 00:29

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.

Cevapla
- İlkay GÜNEL dedi ki:
  
  29 Ağustos 2015, 01:47
  
  Merhaba.
  Ben de teşekkür ederim. Bean kodu bir önceki dersle aynı olduğu için paylaşmamıştım, oradaki kodun aynısını kullandık. Sadece bean sınıfının adı değişti. http://kod5.org/primefaces-dersleri-datascroller-kullanimi/ adresindeki bean ile burdaki bean arasındaki tek fark isim farkıdır.
  Saygılar 🙂
  
  Cevapla
Cumhur Caner Erken dedi ki:

7 Mart 2017, 07:56

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?

Cevapla

Benzer Yazılar

3 Yorum

Yorum Yap X