PrimeFaces-Button&CommandButton

Merhaba arkadaşlar. Bu yazı ve gelecek 2 yazıda PrimeFaces’ın Button bileşenlerini öğreneceğiz. Bu yazıda aynı kod içinde Button ve CommandButton bileşenlerinin kullanımı öğrenceğiz.

Button ve CommandButton bileşenlerinin JSF Dersleri’nde görüğümüz butondan pek bir farkı yok. PrimeFaces geliştiricileri bu bileşenlere gelişmiş arayüz özelliği eklemişler. Şimdi kod ile nasıl kullanıldıklarına 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:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
        <p:growl id="mesaj" life="1000"/>
        <h3>Button Kullanımı</h3>
        
        <p:button outcome="gidisSayfasi" value="İkon Ve Yazı" icon="ui-icon-star">
            <f:param name="sayfaKodu" value="1" />
        </p:button>
        
        <p:button outcome="gidisSayfasi" title="Sadece İkon" icon="ui-icon-star">
            <f:param name="sayfaKodu" value="2"/>
        </p:button>
        
        <p:button outcome="gidisSayfasi" value="Devre Dışı" disabled="true">
            <f:param name="sayfaKodu" value="3"/>
        </p:button>
        
        <h3>CommandButton Kullanımı</h3>
        
        <p:commandButton value="Ajax İle Kullanımı" id="ajax" update="mesaj" actionListener="#{sayfaBilgisi.mesajVer}"/>
        <p:commandButton value="Ajax Olmadan Kullanım" id="nonajax" update="mesaj" actionListener="#{sayfaBilgisi.mesajVer}" ajax="false"/>   
        <p:commandButton value="İkon Ve Yazı" id="ikonveyazi"  update="mesaj" icon="ui-icon-star" actionListener="#{sayfaBilgisi.mesajVer}"/>
        <p:commandButton id="sadeceikon" update="mesaj" icon="ui-icon-star" actionListener="#{sayfaBilgisi.mesajVer}"/>
        <p:commandButton value="Devre Dışı" disabled="true"/>
        </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"

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

<h:head>

<title>Facelet Title</title>

</h:head>

<h:body>

<h:form>

<p:growl id="mesaj" life="1000"/>

<h3>Button Kullanımı</h3>

<p:button outcome="gidisSayfasi" value="İkon Ve Yazı" icon="ui-icon-star">

<f:param name="sayfaKodu" value="1" />

</p:button>

<p:button outcome="gidisSayfasi" title="Sadece İkon" icon="ui-icon-star">

<f:param name="sayfaKodu" value="2"/>

</p:button>

<p:button outcome="gidisSayfasi" value="Devre Dışı" disabled="true">

<f:param name="sayfaKodu" value="3"/>

</p:button>

<h3>CommandButton Kullanımı</h3>

<p:commandButton value="Ajax İle Kullanımı" id="ajax" update="mesaj" actionListener="#{sayfaBilgisi.mesajVer}"/>

<p:commandButton value="Ajax Olmadan Kullanım" id="nonajax" update="mesaj" actionListener="#{sayfaBilgisi.mesajVer}" ajax="false"/>

<p:commandButton value="İkon Ve Yazı" id="ikonveyazi" update="mesaj" icon="ui-icon-star" actionListener="#{sayfaBilgisi.mesajVer}"/>

<p:commandButton id="sadeceikon" update="mesaj" icon="ui-icon-star" actionListener="#{sayfaBilgisi.mesajVer}"/>

<p:commandButton value="Devre Dışı" disabled="true"/>

</h:form>

</h:body>

</html>

Kodumuzun ilk kısmında Button kullanımına ait örnekler var. outcome özelliği ile butona tıklanınca hangi sayfaya gideceğini söylüyoruz. value özelliği butonda gözükecek yazıyı belirlememizi sağlıyor. icon özelliği butonda hangi ikonun gösterileceğini belirtmememizi sağlıyor. icon meselesi ile ilgili ayrı bir yazı yacağım daha sonra. f:param etiketi ile de gideceği sayfaya parametre geçiriyoruz.

Kodun ikinci kısmında CommandButton bileşenine ait örnekler yer alıyor. Bu bileşen Ajax ile ya da Ajax olmadan sayfa yenileme usülü ile kullanılabilen bir bileşen. Bileşenin actionListener özelliğine verdiğimiz metotdan dönen FacesMessage bileşinin update özelliği ile ekranda mesaj olarak yayınlanıyor. Bileşenin ajax ile kullanılmasını istersek ajax=true aksi takdirde ajax=false dememiz yeterli.

gidisSayfasi.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:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Gidiş Sayfası</title>
    </h:head>
    <h:body>
        <f:metadata>
            <f:viewParam name="sayfaKodu" value="#{sayfaBilgisi.sayfaKodu}" />
        </f:metadata>
        
        <h:outputText value="Gidiş Sayfasına Geldiniz! Geldiğiniz Sayfa Kod:#{sayfaBilgisi.sayfaKodu}"/>
    </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:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>Gidiş Sayfası</title>

</h:head>

<h:body>

<f:metadata>

<f:viewParam name="sayfaKodu" value="#{sayfaBilgisi.sayfaKodu}" />

</f:metadata>

<h:outputText value="Gidiş Sayfasına Geldiniz! Geldiğiniz Sayfa Kod:#{sayfaBilgisi.sayfaKodu}"/>

</h:body>

</html>

Bu sayfa içinde index sayfasından gelen parametre Java sınıfına kaydediliyor ve daha sonra bize gösteriliyor.

SayfaBilgisi.java Kodu

import javax.faces.event.ActionEvent;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean; 
import javax.faces.context.FacesContext;
@ManagedBean
public class SayfaBilgisi {
     
    private String sayfaKodu; 
 
    public String getSayfaKodu() {
        return productId;
    }
 
    public void setSayfaKodu(String sayfaKodu) {
        this.sayfaKodu = sayfaKodu;
    }
    
    public void mesajVer(ActionEvent e)
    {
        String buttonId=e.getComponent().getId();
        System.out.println(buttonId);
        if(buttonId.equals("nonajax"))
        {
        FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Ajax Olmadan Tetkleme Yaptınız",null);
        FacesContext.getCurrentInstance().addMessage(null, mesaj);
        }
        else
        {
        FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Ajax Tetiklemesi Yaptınız",null);
        FacesContext.getCurrentInstance().addMessage(null, mesaj);
        }
    }
}

import javax.faces.event.ActionEvent;

import javax.faces.application.FacesMessage;

import javax.faces.bean.ManagedBean;

import javax.faces.context.FacesContext;

@ManagedBean

public class SayfaBilgisi {

private String sayfaKodu;

public String getSayfaKodu() {

return productId;

}

public void setSayfaKodu(String sayfaKodu) {

this.sayfaKodu = sayfaKodu;

}

public void mesajVer(ActionEvent e)

{

String buttonId=e.getComponent().getId();

System.out.println(buttonId);

if(buttonId.equals("nonajax"))

{

FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Ajax Olmadan Tetkleme Yaptınız",null);

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

}

else

{

FacesMessage mesaj=new FacesMessage(FacesMessage.SEVERITY_INFO,"Ajax Tetiklemesi Yaptınız",null);

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

}

Bu kod içerisinde gidisSayfasi.xhtml içerisinden gelen parametre sayfaKodu değişkenine kaydediliyor.

mesajVer metodunun içinde tıklanan butonun id’si alınıyor ve id’sinden ajax olup olmadığına bakılıyor ve ekrana bununla ilgili bir çıktı veriliyor. Burda mesaj verdirme işlemini FacesMessage ve FacesContext özellikleri ile yapıyoruz. İsteyen olursa bu konu ile ilgili de bir yazı yazarım.

Ekran Çıktısı

Projeyi çalıştırıp İkon Ve Yazı butonuna tıklıyorum.

Gelen sayfanın URL’ine dikkat edelim. Parametreler URL’e geçirilmiş gördüğünüz gibi.

Geri gelip Ajax İle Kullanım butonuna tıklıyorum,Ajax Tetiklemesi Yaptınız mesajı beni karşılıyor.

Ajax özelliğinin false olduğu ikinci butona tıkladığımda da Ajax Olmadan Tetikleme Yaptınız mesajı beni karşılıyor.

Butonların genel kullanımı bu şekilde arkadaşlar. JSF konuları içerisinde yer alan butonların kullanımından fazla bir farkı olmadığı için size tanıdık gelmiştir diye tahmin ediyorum. Sorularınız ve eleştirileriniz için yorum kısmını kullanabilir ya da [email protected] adresine mail atabilirsiniz. Gelecek yazıda CommandLink ve Link bileşenlerinin kullanımı öğreneceğiz. Sağlıcakla kalın.

2 Yorum

rıdvan dedi ki:

16 Ekim 2015, 12:23

iyi Günler ya bu java kodlarında hata var gibi getSayfaKodu metodunda ve mesajver metodundaki getComponent() u nasıl yazdınız merak ettim yardımcı olabilirmisiniz. teşekkürler.

Cevapla
- İlkay GÜNEL dedi ki:
  
  19 Ekim 2015, 22:52
  
  Merhabalar.
  getSayfaKodu zaten Managed Bean içindeki değişkeni xhtml ile ilişkilendirmek için şart bir metot.
  getComponent metoduna gelince o metot ActionEvent’dan bize sağlanan bir metot. Orada dikkat etmeniz gereken nokta hangi ActionEvent’ı import ettiğinizdir. JSF mimarisi içinde ActionEvent için javax.faces.event.ActionEvent kullanılır.
  Başka sorunuz varsa ya da tam izah edemedi isem lütfen yazınız.
  SAYGILARIMLA
  
  Cevapla

Benzer Yazılar

2 Yorum

İlkay GÜNEL için bir cevap yazın X