PrimeFaces – Accordion & Fieldset Bileşenleri

Merhabalar arkadaşlar. Bu yazı ile birlikte PrimeFaces’ın Panel kategorisine başlıyoruz. Panel kategorisindeki ilk yazımız Accordion ve Fieldset üzerine olacak. Başalamadan önce şunu belirteyim bu yazı ile beraber 36 PrimeFaces yazısı oldu. Tüm yazıları sıralı bir şekilde PrimeFaces’a giriş yazımda yayınlıyorum. Oradan sıralı şekilde ulaşabilirsiniz: http://www.kod5.net/jsfprimefaces-dersleri-primefacesa-giris/

Accordion bileşeni ile başlayalım.

Accordion bileşeni birkaç tabdan bir araya gelmiş istenirse aynı anda sadece bir tabın açılmasına istenirse de aynı anda tüm tabların açılabilmesine izin verilebilen bir bileşendir. Şimdi basit bir kullanımına bakalım.

accordion.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">
<h:head>
   <title>Accordion Bileşeni</title>
</h:head>
<h:body>
   <h:form>
      <p:accordionPanel multiple="true" dynamic="true" cache="true">
         <p:tab title="İsa Aytimur">
            <h:panelGrid columns="2" cellpadding="10">
               <h:graphicImage library="images" name="Aytimur.jpg" height="200" width="200"/>
               <h:outputText value="Adana- Çukurova Üniversitesi Bilgisayar Mühendisliği Öğrencisi"/>
            </h:panelGrid>
         </p:tab>
         <p:tab title="Alican Akkuş">
            <h:panelGrid columns="2" cellpadding="10">
               <h:graphicImage  library="images" name="Akkus.jpg" height="200" width="200"/>
               <h:outputText value="İstanbul - Kocaeli Üniversitesi Bilgisayar Mühendisliği Öğrencisi Ve 32Bit Bilgisayar Hizmetleri Çalışanı"/>
            </h:panelGrid>
         </p:tab>
         <p:tab title="İlkay Günel">
            <h:panelGrid columns="2" cellpadding="10">
               <h:graphicImage library="images" name="Gunel.jpg" height="200" width="200"/>
               <h:outputText
                       value="İstanbul - İstanbul Üniversitesi Bilgisayar Mühendisliği Öğrencisi" />
            </h:panelGrid>
         </p:tab>
      </p:accordionPanel>
   </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">

<h:head>

<title>Accordion Bileşeni</title>

</h:head>

<h:body>

<h:form>

<p:accordionPanel multiple="true" dynamic="true" cache="true">

<p:tab title="İsa Aytimur">

<h:panelGrid columns="2" cellpadding="10">

<h:graphicImage library="images" name="Aytimur.jpg" height="200" width="200"/>

<h:outputText value="Adana- Çukurova Üniversitesi Bilgisayar Mühendisliği Öğrencisi"/>

</h:panelGrid>

</p:tab>

<p:tab title="Alican Akkuş">

<h:panelGrid columns="2" cellpadding="10">

<h:graphicImage library="images" name="Akkus.jpg" height="200" width="200"/>

<h:outputText value="İstanbul - Kocaeli Üniversitesi Bilgisayar Mühendisliği Öğrencisi Ve 32Bit Bilgisayar Hizmetleri Çalışanı"/>

</h:panelGrid>

</p:tab>

<p:tab title="İlkay Günel">

<h:panelGrid columns="2" cellpadding="10">

<h:graphicImage library="images" name="Gunel.jpg" height="200" width="200"/>

<h:outputText

value="İstanbul - İstanbul Üniversitesi Bilgisayar Mühendisliği Öğrencisi" />

</h:panelGrid>

</p:tab>

</p:accordionPanel>

</h:form>

</h:body>

</html>

Accordion sayfamız içerisinde accordion bileşenimizi p:accordionPanel etiketimiz ile kullanıyoruz. Kod içerisinde etiketin 3 özelliğinin kullanıldığını görüyoruz. Bunlardan birincisi olan multiple özelliği aynı birden çok tabın açılabilmesini sağlıyor. Bu özelliğe true ataması yapılmazsa bileşen varsayılan olarak aynı anda sadece 1 tabın açık olmasına izin veriyor. İkinci özelliğimiz olan dynamic özelliği tabların Ajax istekleri ile yüklenmesine işaret ediyor. True ataması yapılırsa safa yüklenirken tüm tablar yüklenmiyor ve onun yerine siz tabı açma isteği yaptığınızda tab içeriği yükleniyor. Üçüncü özelliğimiz olan Cache özelliği de Ajax isteği ile doldurulup sonra kapatılan tabı tekrar açmak istediğimizde tekrar Ajax isteiği yapılıp yapılmayacığına bakıyor. Cache özelliğine true atanırsa yeniden istek yapılmıyor ve alınan bilgiler saklanıyor.

p:accordionPanel etiketimizin p:tab etiketini kullanarak kullanıcıya bilgileri gösterecek olan tabları yazıyoruz. p:tab’ın title özelliği ile tab’a bir başlık atamış oluyoruz. Bu tab içinde bilgileri kullanıcıya nasıl göstereceğimiz bize kalmış. Örneğimizde PanelGrid ile gösteriyoruz.

Üstteki kodun ekran çıktıları şu şekildedir:

Bir tab açılmış hali:

Multiple özelliği true olduğu için aynı anda birden fazla tab açabiliyorum

Örneğimizde gördüğünüz üzere bir managed bean kullanmadık ve içerdeki tabları kendimiz yazdık. Ancak istersek otomatik tab ürettirerek DataTable’daki kolonların otomatik dolması gibi bir işlem yapabiliriz. Şimdi onunla ilgili bir örnek yapalım.

accordion.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">
<h:head>
   <title>Accordion Bileşeni</title>
</h:head>
<h:body>
   <h:form>
      <p:accordionPanel value="#{accordionBean.technologies}" var="technology">
         <p:tab title="#{technology.technologyName}">
            <h:outputText value="#{technology.technologyBirthDate}"/>
         </p:tab>
      </p:accordionPanel>
   </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">

<h:head>

<title>Accordion Bileşeni</title>

</h:head>

<h:body>

<h:form>

<p:accordionPanel value="#{accordionBean.technologies}" var="technology">

<p:tab title="#{technology.technologyName}">

<h:outputText value="#{technology.technologyBirthDate}"/>

</p:tab>

</p:accordionPanel>

</h:form>

</h:body>

</html>

XHTML kodumuz içerisinde accordion bileşenimizi managed bean’den alınacak verilerle dolduracak Java kodumuz içerisinde oluşturduğumuz listeyi accordion’un value özelliğine atıyoruz. Liste içindeki değerleri ekrana yazdırabilmek için de var özelliğini kullanıyoruz.

AccordionBean.java

package accordion;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.util.ArrayList;
import java.util.List;

@ManagedBean
@SessionScoped
public class AccordionBean {
    private List<TechnologyPojo> technologies;

    @PostConstruct
    public void init()
    {
        technologies = new ArrayList<TechnologyPojo>();
        technologies.add(new TechnologyPojo("Java","1995"));
        technologies.add(new TechnologyPojo(".NET","2002"));
        technologies.add(new TechnologyPojo("Python","1991"));
    }

    public List<TechnologyPojo> getTechnologies() {
        return technologies;
    }
}

package accordion;

import javax.annotation.PostConstruct;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import java.util.ArrayList;

import java.util.List;

@ManagedBean

@SessionScoped

public class AccordionBean {

private List<TechnologyPojo> technologies;

@PostConstruct

public void init()

{

technologies = new ArrayList<TechnologyPojo>();

technologies.add(new TechnologyPojo("Java","1995"));

technologies.add(new TechnologyPojo(".NET","2002"));

technologies.add(new TechnologyPojo("Python","1991"));

}

public List<TechnologyPojo> getTechnologies() {

return technologies;

}

AccordionBean sınıfımız içerisinde ekrana yazdıracaklarımızı tutan bir liste tanımlıyoruz ve @PostConstruct ile işaretlenmiş metot içerisinde listeyi oluşturuyoruz ve içinde TechnologyPojo nesneleri koyuyoruz.

TechnologyPojo.java

package accordion;

public class TechnologyPojo {
    public TechnologyPojo(String technologyName, String technologyBirthDate)
    {
        this.technologyName = technologyName;
        this.technologyBirthDate = technologyBirthDate;
    }
    String technologyName;
    String technologyBirthDate;

    public String getTechnologyBirthDate() {
        return technologyBirthDate;
    }

    public void setTechnologyBirthDate(String technologyBirthDate) {
        this.technologyBirthDate = technologyBirthDate;
    }

    public String getTechnologyName() {
        return technologyName;
    }

    public void setTechnologyName(String technologyName) {
        this.technologyName = technologyName;
    }
}

package accordion;

public class TechnologyPojo {

public TechnologyPojo(String technologyName, String technologyBirthDate)

{

this.technologyName = technologyName;

this.technologyBirthDate = technologyBirthDate;

}

String technologyName;

String technologyBirthDate;

public String getTechnologyBirthDate() {

return technologyBirthDate;

}

public void setTechnologyBirthDate(String technologyBirthDate) {

this.technologyBirthDate = technologyBirthDate;

}

public String getTechnologyName() {

return technologyName;

}

public void setTechnologyName(String technologyName) {

this.technologyName = technologyName;

}

POJO olarak kullandığımız sınıf.

Kodun ekran çıktısı şu şekildedir:

Fieldset Bileşeni

Fieldset bileşeni Accordion bileşenine benzer bileşendir. Yalnız onun gibi tablardan meydana gelmez. Tek bir dikdötgen kutusu içerisinde kullanıcıya bilgi vermek için tasarlanmıştır. Toggleable denilen açılma-kapanma özelliğine sahiptir. Örnek kodumuza bakalım:

fieldset.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://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Fieldset Bileşeni</title>
</h:head>
<h:body>
    <h:form>
        <p:growl id="msgs" showDetail="true"/>

        <p:fieldset legend="Mustafa Demir" toggleable="true" toggleSpeed="500">
            <p:ajax event="toggle" listener="#{fieldsetBean.handleToggle}" update="msgs" />
            <h:panelGrid columns="2" cellpadding="5">
                <p:graphicImage library="images" name="Demir.jpg" height="200" width="200" />
                <h:outputText value="Mustafa Demir- Süleyman Demirel Üniversitesi Bilgisayar Mühendisliği"/></h:panelGrid>
        </p:fieldset>
    </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://xmlns.jcp.org/jsf/html"

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

<h:head>

<title>Fieldset Bileşeni</title>

</h:head>

<h:body>

<h:form>

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

<p:fieldset legend="Mustafa Demir" toggleable="true" toggleSpeed="500">

<p:ajax event="toggle" listener="#{fieldsetBean.handleToggle}" update="msgs" />

<h:panelGrid columns="2" cellpadding="5">

<p:graphicImage library="images" name="Demir.jpg" height="200" width="200" />

<h:outputText value="Mustafa Demir- Süleyman Demirel Üniversitesi Bilgisayar Mühendisliği"/></h:panelGrid>

</p:fieldset>

</h:form>

</h:body>

</html>

Fieldset bileşenini p:fielset etiketi ile kullanıyoruz. legend özelliği bu noktada ekranda görünen Fieldset bileşeninin başlığı özelliğini temsil eder. Açılıp kapanma özelliğini kazandıran olay ise toggleable özelliğidir. Bu özelliğe true ataması yapılırsa bileşen açılıp kapanabilir.

p:fieldset etiketi içerisinde p:ajax etiketi ile bileşenin açılma kapanma olayları yakalanmakta, msgs id’li mesaj vermek için kullanılan Growl bileşeni ile durum kullanıcıya bildirilmektedir. Burada event’ın toggle olduğuna dikkat etmek gerekir. Listener özelliğine atanmış metodun FacesContext’e koyduğu mesaj Growl bileşenine aktarılmaktadır. Growl bileşeninde showDetail=”true” olmasına dikkat etmeliyiz. Aksi takdirde 3 parametreli FacesMessage yapılandırıcısını kullanırsak mesaj detayını temsil eden son parametre Growl içerisinde gösterilemeyecektir. (FacesMessage hakkında bir takım bilgilere buradaki yazımdan ulaşabilirsiniz.)

PanelGrid içerisinde de kullanıcıya gerekli bilgileri aktarıyoruz.

FieldsetBean.java

package fieldset;

import org.primefaces.event.ToggleEvent;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped
public class FieldsetBean {
    public void handleToggle(ToggleEvent event)
    {
        String durum="";
        if(event.getVisibility().toString().equals("HIDDEN"))
        {
            durum = "GİZLENDİ";
        }
        else if (event.getVisibility().toString().equals("VISIBLE"))
        {
            durum = "AÇILDI";
        }
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,"Açma Kapama Yapıldı","Durum:"+durum);
        FacesContext.getCurrentInstance().addMessage(null,message);
    }
}

package fieldset;

import org.primefaces.event.ToggleEvent;

import javax.faces.application.FacesMessage;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import javax.faces.context.FacesContext;

@ManagedBean

@SessionScoped

public class FieldsetBean {

public void handleToggle(ToggleEvent event)

{

String durum="";

if(event.getVisibility().toString().equals("HIDDEN"))

{

durum = "GİZLENDİ";

}

else if (event.getVisibility().toString().equals("VISIBLE"))

{

durum = "AÇILDI";

}

FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,"Açma Kapama Yapıldı","Durum:"+durum);

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

}

FieldsetBean kodu içerisinde tek yaptığımız işlem Fieldset bileşeninin açılma kapanma olayını yakalamaktır. handleToggle metodu aldığı ToggleEvent parametresi sayesinde açılma kapanma durumunu öğrenmektedir. Metot içinde bizim yaptığımız verilecek mesajın Türkçe’leştirme işlemidir. Fieldset bileşeni HIDDEN ya da VISIBLE olabilir. Biz de if-else ile hangi durumda ise ona göre durum String değişkenini ayarlamaktayız ve FacesContext’e koyacağımız FacesMessage nesnesini oluştururken kullanmaktayız.

Fieldset bileşenimizin örnek kodlarının çalıştırılması sonucu ekran çıktımız şu şekildedir:

Mustafa Demir yazılı butona tıkladığımızda Toggleable özelliği ile Fieldset açılacak ya da kapanacaktır. Resimde kapalı halden açık hale geçme sırasında verilen mesajı görmekteyiz.

Bu yazıda da bu kadar arkadaşlar. Accordion ve Fieldset bileşenlerinin kullanımını öğrenmiş olduk. Gelecek yazıda görüşene kadar sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X