PrimeFaces-Switch Kullanımı

Merhaba arkadaşlar. Slider Kullanımı yazımızın ardından bu yazımızda Switch bileşeninin kullanımı öğreneceğiz.

Switch bileşeni arka planda checkBox’lar gibi true-false ilişkisine dayanan bir bileşendir. Bu bileşen ile kullanıcıya sorduğumuz ve cevabı sadece evet ya da hayır olabilen bir sorunun cevabını kullanıcının sadece evet’e ya da hayır’a tıklayarak verebilmesini sağlayabiliriz.

Örneğin bu bileşeni istersek herhangi bir form doldurtturduktan sonra checkBox yerine kullanabiliriz. Ya da bir kişinin herhangi bir şeye sahip olup olmadığına dair soru içeren bir formda da kullanabiliriz.

Şimdi örnek uygulamamıza bakalım.Kodlarımız şu şekilde:

SwitchKullanimi.java Kodu

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
@ManagedBean(name="switchKullanimi")
@RequestScoped
public class SwitchKullanimi {
private boolean temelSecim;
private boolean ajaxSecim;
public String temelSecimCevabi;
public String ajaxSecimCevabi;

    public String getTemelSecimCevabi() {
	return temelSecimCevabi;
}


public String getAjaxSecimCevabi() {
	return ajaxSecimCevabi;
}


	public void setTemelSecim(boolean temelSecim) {
        this.temelSecim = temelSecim;
        if(temelSecim)
        	temelSecimCevabi="Şartları Kabul Ettiniz";
        else
        	temelSecimCevabi="Şartları Kabul Etmediniz";
    }

    public void setAjaxSecim(boolean ajaxSecim) {
        this.ajaxSecim = ajaxSecim;
        if(ajaxSecim)
        	ajaxSecimCevabi="Şartları Kabul Ettiniz";
        else
        	ajaxSecimCevabi="Şartları Kabul Etmediniz";
    }

    public boolean isTemelSecim() {
        return temelSecim;
    }

    public boolean isAjaxSecim() {
        return ajaxSecim;
    }

    public void mesajDondur()
    {
        String mesaj=ajaxSecim?"Şartları Kabul Ettiniz":"Şartları Kabul Etmediniz";
        FacesContext.getCurrentInstance().addMessage(null,new FacesMessage(mesaj));
    }
}

Java kodumuz içindeki temelSecim ve ajaxSecim boolean değişkenleri önyüzde seçilen eveti ya da hayırı true-false olarak tutacaklar. temelSecimCevabi ve ajaxSecimCevabi değişkenleri ise kullanıcıya butona tıkladığında hangisini seçtiğini söylemek için var. Bu değişkenlere gerekli değerler setTemelSecim ve setAjaxSecim metodlari içinde atılıyor. mesajDondur() metodu ise ekrandaki ikinci Switch bileşeninin değişimini anlık olarak bize bildirmek için var.

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">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
        <p:growl id="mesaj"/>
        <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
            <h:outputText value="Şartları Kabul Ediyor musunuz?(Temel Kullanım)"/>
            <p:inputSwitch value="#{switchKullanimi.temelSecim}" onLabel="Evet" offLabel="Hayır"/>
            
            <h:outputText value="Şartları Kabul Ediyor musunuz?(Ajax ile Kullanım)"/>
            <p:inputSwitch value="#{switchKullanimi.ajaxSecim}" onLabel="Evet" offLabel="Hayır">
            <p:ajax listener="#{switchKullanimi.mesajDondur()}" update="mesaj"></p:ajax>
            </p:inputSwitch>
            
        </h:panelGrid>
        <p:commandButton value="SEÇ" oncomplete="PF('diyalog').show()" update="goster" icon="ui-icon-check"/>
        
        <p:dialog header="Seçilenler" showEffect="fade" widgetVar="diyalog">
            <p:panelGrid columns="2" id="goster">
                <h:outputText value="Temel Kullanım'ın Seçim Sonucu:"/>
                <p:outputLabel value="#{switchKullanimi.temelSecimCevabi}"/>
                
                <h:outputText value="Ajax ile Kullanım'ın Seçim Sonucu:"/>
                <p:outputLabel value="#{switchKullanimi.ajaxSecimCevabi}"/>
            </p:panelGrid>
        </p:dialog>
        </h:form>
    </h:body>
</html>

Seçimin yapıldığı anda sağ üste bir mesaj görünmesi için p:growl etiketi ile Growl bileşenini kullanıyoruz.

p:inputSwitch ile kullandığımız Switch bileşeninin value özelliğine bir boolean değişken atıyoruz. onLabel ve offLabel özelliklerine değer ataması yapmazsak varsayılan olarak İngilizce yazılar bizi karşılar.

İkinci Switch bileşeninde p:ajax etiketi ile tanımladığımız ajax bileşeninin listener özellğine Java sınıfımız içinde yazdığımız mesaj döndürücü metodu atıyoruz. Update özelliğine ise Growl bileşenin id’sini veriyoruz. Biz herhangi bir işlem yapmadan listener’dan dönen sonuç growl’a aktarılıyor.

Geri kalan yerler daha önce işlediğimiz konular.

Ekran Çıktıları

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda PrimeFaces’ın kullanıcıdan şifre alma ile ilgili bileşeni olan Password bileşenini öğreneceğiz. Sorularınızı yorum bölümüne yazabilirsiniz. Sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X