PrimeFaces-SplitButton Kullanımı

Merhaba arkadaşlar. Bu yazımızda PrimeFaces’ın buton kategorisindeki bileşenlerinden SplitButton’ı işleyip buton kategorisini tamamlayacağız. Akabinde Data kategorisindeki yazılara başlıyacağız.

SplitButton birden fazla butonu bir araya getirebildiğiniz bir buton arkadaşlar. Temel işlemi yapacak bir butonu kullanıcıya gösterip ekstra işlemleri butonun yanındaki ok vasıtası ile açılan yeni butonlarla yapabiliriz. Şimdi örnek uygulamamıza bakalım.

index.xhtml Kodu

<?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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
   <h:head>
       <title>Split Button Kullanımı</title>
   </h:head>

<h:body>
    <h:form>
        <p:growl id="mesajKutusu"/>
        <p:panelGrid columns="2">
            <p:outputLabel value="İsim"/>
            <p:inputText value="#{splitButtonBean.isim}"/>

            <p:outputLabel value="Soyisim"/>
            <p:inputText value="#{splitButtonBean.soyisim}"/>

            <p:splitButton value="Değişiklikleri Kaydet" action="#{splitButtonBean.degisiklikKaydi}" update="mesajKutusu">
                <p:menuitem value="Değişikliği İptal Et" action="#{splitButtonBean.degisiklikIptali}" ajax="false" update="mesajKutusu" />
                <p:menuitem value="KOD5'in Ana Sayfasına Git" url="http://www.kod5.org"/>
            </p:splitButton>
        </p:panelGrid>
    </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:ui="http://xmlns.jcp.org/jsf/facelets"

xmlns:f="http://xmlns.jcp.org/jsf/core"

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

<h:head>

<title>Split Button Kullanımı</title>

</h:head>

<h:body>

<h:form>

<p:growl id="mesajKutusu"/>

<p:panelGrid columns="2">

<p:outputLabel value="İsim"/>

<p:inputText value="#{splitButtonBean.isim}"/>

<p:outputLabel value="Soyisim"/>

<p:inputText value="#{splitButtonBean.soyisim}"/>

<p:splitButton value="Değişiklikleri Kaydet" action="#{splitButtonBean.degisiklikKaydi}" update="mesajKutusu">

<p:menuitem value="Değişikliği İptal Et" action="#{splitButtonBean.degisiklikIptali}" ajax="false" update="mesajKutusu" />

<p:menuitem value="KOD5'in Ana Sayfasına Git" url="http://www.kod5.org"/>

</p:splitButton>

</p:panelGrid>

</h:form>

</h:body>

</html>

Xhtml kodumuz içinde kullanıcıya yaptığı işleme göre geri bildirim yapacak bir Growl bileşenimiz var.

Java kodumuz içindeki isim ve soyisim değişkenleri kullanıya gösteren inputTextlerimiz mevcut.

SplitButton bileşenimiz ön tanımlı olarak Değişikliği Kaydet işlemini kullanıcıya sunuyor. Ekstra işlemler ise Değişikliği İptal Et ve KOD5’in Ana Sayfasına Git şeklinde. Ön tanımlı işlemimizi SplitButton bileşenimizin özelliklerine atıyoruz. Örneğin burada ön tanımlı işlem Değişiklikleri Kaydet ve biz de onunla ilgili yazı, metot ve update özelliklerini direk SplitButton’a verdik. Yaptırmak istediğimiz ekstra işlemleri de p:menuItem etiketi ile <p:splitButton></p:splitButton> etiketlerinin arasına yazıyoruz. Proje dışı bir yere yönlendirme yapmak istediğimizde url özelliğine link atamamız yeterlidir.

SplitButtonBean.java Kodu

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

@ManagedBean
@SessionScoped
public class SplitButtonBean {
    String isim="İlkay",soyisim="Günel";

    public String getIsim() {
        return isim;
    }

    public void setIsim(String isim) {
        this.isim = isim;
    }

    public String getSoyisim() {
        return soyisim;
    }

    public void setSoyisim(String soyisim) {
        this.soyisim = soyisim;
    }

    public void degisiklikKaydi()
    {
        FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Değişiklik Kaydedildi",null);
        FacesContext.getCurrentInstance().addMessage(null,mesaj);
    }

    public void degisiklikIptali()
    {
        setIsim("İlkay");
        setSoyisim("Günel");

        FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Değişiklik İptal Edildi",null);
        FacesContext.getCurrentInstance().addMessage(null,mesaj);
    }
}

import javax.faces.application.FacesMessage;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import javax.faces.context.FacesContext;

@ManagedBean

@SessionScoped

public class SplitButtonBean {

String isim="İlkay",soyisim="Günel";

public String getIsim() {

return isim;

}

public void setIsim(String isim) {

this.isim = isim;

}

public String getSoyisim() {

return soyisim;

}

public void setSoyisim(String soyisim) {

this.soyisim = soyisim;

}

public void degisiklikKaydi()

{

FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Değişiklik Kaydedildi",null);

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

}

public void degisiklikIptali()

{

setIsim("İlkay");

setSoyisim("Günel");

FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Değişiklik İptal Edildi",null);

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

}

Java kodumuz içinde değişkenlerimiz varsayılan olarak İlkay ve Günel’i tutuyorlar. degisiklikKaydi metodu bize değişikliği kaydettiğimiz yönünde bir mesaj döndürüyor. Aynı şekilde iptal metodu iptal edildiğine dair mesaj döndürüyor.

Burada ekrana nasıl mesaj gönderildiği üzerinde duralım arkadaşlar. JSF’de kullanıcıya bir mesaj döndürmek istediğimizde FacesMessage sınıfını kullanmamız gerekiyor. Bir sınıf nesnesi oluşturur gibi new operatörü ile FacesMessage nesnemizi oluşturuyoruz. Daha sonra bu FacesMessage nesnesini FacesContext.getCurrentInstance().addMessage() metoduna parametre olarak veriyoruz. Bu metodu aşağıdaki Faces Context Nedir? kısmında anlatmaya çalışacağım.FacesMessage sınıfı 4 yapılandırıcıya sahiptir. Onlar da şu şekildedir:

new FacesMessage()
new FacesMessage(mesajınÖzeti)
new FacesMessage(mesajınÖzeti,mesajınDetayı)
new FacesMessage(mesajınÖnemi,mesajınÖzeti,mesajınDetayı)

Bizim örneğimizde 4. sıradaki kullanıma ait örnekler mevcuttur. Gönderdiğimiz mesajın önemi INFO yani bilgi seviyesindedir. Özet olarak değişikliğin kaydolup iptal olmasına bakıyoruz. Detay olaraksa bir şey yollamıyoruz. Mesajların önemleri de şu şekildedir:

SEVERITY_INFO: Bilgi mesajları göndermek içindir.
SEVERITY_WARN: Uyarı mesajları göndermek içindir.
SEVERITY_ERROR: Hata mesajları göndermek içindir.
SEVERITY_FATAL: SEVERITY_ERROR’a göre daha ciddi hataları göndermek içindir.

FacesContext Nedir?

JSF’de, request ve response yaklaşımı, bir lifecycle içinde tamamlanır. Bu lifecycle boyunca isteğiniz JSF in bazı FAZLARINDAN geçerek, işlenerek size response olarak döner. Her istek bu lifecycledan geçer.

FacesContext ise, gelen requestin response’u oluşturuluncaya kadarki geçen sürede (lifecycle) JSF tarafından otomatik olarak oluşturulmuş ve bu lifecycle içerisindeki CONTEXT bilgisini barındıran JSF in temel yapısıdır. Lifecycle içerisindeki her FAZ FacesContext bilgilerini günceller. Sizde daha sonra bu yapı ile JSF uygulamanızda çağırıp kullanabilirsiniz. (Kaynak:http://blog.tahagur.com/facescontext-nedir/)

Kullanıcıya mesaj döndürmek istediğimizde yukarıda açıklanan FacesContext yapısına erişmemiz gerekecek. Bunun için getCurrentInstance metodunu kullanıyoruz. Bu metot bize gelen request için bir FacesContext nesnesi oluşturup döndürüyor. getCurrentInstance metodunun da addMessage metodu ile kullanıcıya döndürmek istediğimiz mesajı parametrelerine vererek döndürüyoruz. addMessage iki parametre alır arkadaşlar. Birincisi xhtml kodu içinde request ile ilgili olan bileşenin id bilgisi olabilir ya da null verilebilir. İkincisi ise oluşturduğumuz FacesMessage nesnesidir. addMessage metodundan dönen mesaj da xhtml kodumuz içindeki update özelliği ile growl bileşenine gönderiliyor.

Ekran Çıktıları

Uygulamayı çalıştırdığımızda değişkenlere varsayılan olarak verdiğimiz değerler ekranda görünüyor.

İsim ve soyismi değiştirip kaydediyorum.

Tekrar farklı isim soyisim girdim ve iptal butonuna tıklayacağım.

Değişikliği iptal metodunu çağırıp metot içinde verilen isim ve soyismi atadı.

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda Data kategorisine başlayacağız. Sorularınız olursa yorum kısmından cevaplamaya çalışırım arkadaşlar. Sağlıcakla kalın.

İlkay GÜNEL

Hakkımda sayfam için tıklayınız

http://kod5.org

Benzer Yazılar