PrimeFaces

PrimeFaces-ListBox ve ManyButton Kullanımı

11 yıl önce
Yorum Ekle
admin
426 görüntülenme

Merhaba arkadaşlar. Bu yazıda PrimeFaces’da ListBox ve ManyButton bileşenlerinin nasıl kullanıldığını öğreneceğiz. Bir sonraki yazıda da temalar konusunu anlatmaya çalışacağım. PrimeFaces içinde birbirinden güzel ve çok sayıda tema kullanılmak üzere kod yazanlara sunulmuş. O yazıda bu uygulama üzerinden temaları anlatmaya çalışacağım. Şimdi örneğimize bakalım.

Örnek uygulama kodları ve ekran çıktıları şu şekilde:

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>
            <h:panelGrid columns="2">
                <p:outputLabel value="En çok kullandığınız sosyal medya:"/>
                <p:selectOneListbox value="#{veriler.sosyalmedya}">
                    <f:selectItem itemLabel="Facebook" itemValue="Facebook"/>
                    <f:selectItem itemLabel="Twitter" itemValue="Twitter"/>
                    <f:selectItem itemLabel="Google+" itemValue="Google+"/>
                </p:selectOneListbox>

                <p:outputLabel for="mobiloslar" value="Hangi mobil işletim sistemini destekliyorsunuz:"/>
                <p:selectOneListbox id="mobiloslar" value="#{veriler.mobilosdestek}" filter="true" filterMatchMode="contains">
                    <f:selectItems value="#{veriler.mobilos}"/>
                </p:selectOneListbox>

                <p:outputLabel value="Kullandığınız Sosyal Medya(lar)(Çoklu Buton):"/>
                <p:selectManyButton value="#{veriler.cokluButton}">
                    <f:selectItem itemLabel="Facebook" itemValue="Facebook"/>
                    <f:selectItem itemLabel="Twitter" itemValue="Twitter"/>
                    <f:selectItem itemLabel="Google+" itemValue="Google+"/>
                </p:selectManyButton>

            </h:panelGrid>
            <p:commandButton value="Gönder" update="goster" oncomplete="PF('dlg').show()" icon="ui-icon-check" />
 
    <p:dialog header="Seçimleriniz" modal="true" showEffect="fade" widgetVar="dlg" resizable="false">
        <p:panelGrid columns="2" id="goster">
            <h:outputText value="Sosyal Medya" />
            <h:outputText value="#{veriler.sosyalmedya}" />
 
            <h:outputText value="Mobil İS" />
            <h:outputText value="#{veriler.mobilosdestek}" />
            
            <h:outputText value="Kullanılan Sosyal Medya(Çoklu Buton):"/>
            <p:dataList value="#{veriler.cokluButton}" var="yaz">
                <h:outputText value="#{yaz}"/>
            </p:dataList>
        </p:panelGrid>
    </p:dialog>
        </h:form>
    </h:body>
</html>

Index sayfamız içinde kullanıcıya 3 soru soruyoruz. Bunlardan 2 tanesini ListBox, 1 tanesini de ManyButton ile yapıyoruz.

Birinci ListBox’ı JSF’den hatırlayacaksınız f:selectItem ile doldurduk ve value bileşenine de Java tarafında seçilen değeri kim tutacak ise onu atıyoruz.

İkinci ListBox ise f:selectItems bileşenine Java tarafından döndürülen liste atanarak dolduruldu ve üstteki ListBox’dan farklı olarak arama özelliğine sahip. Bunu filter=”true” ile sağlıyoruz. filterMatchMode=”contains” ile de girdiğimiz harf ya da harflerin olduğu seçenekler listeleniyor.

Üçüncü bileşenimiz olan ManyButton ile de sorunun cevabının butonlara tıklayarak verilebilmesini sağlıyoruz. Butonlara tıklandığında arka planda onun seçili olduğuna dair bir mesaj iletiliyor ve seçili butonun değeri Java sınıfımızdaki listeye yazılıyor.

Veriler.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.*;
import javax.annotation.PostConstruct;
@ManagedBean
@RequestScoped
public class Veriler {
public List<String> mobilos; 
public String sosyalmedya;
public String mobilosdestek;
public List<String> cokluButton;

    public void setCokluButton(List<String> cokluButton) {
        this.cokluButton = cokluButton;
    }

    public List<String> getCokluButton() {
        
        return cokluButton;
    }

    public void setMobilosdestek(String mobilosdestek) {
        this.mobilosdestek = mobilosdestek;
    }

    public String getMobilosdestek() {
        return mobilosdestek;
    }

    public void setSosyalmedya(String sosyalmedya) {
        this.sosyalmedya = sosyalmedya;
    }

    public String getSosyalmedya() {
        return sosyalmedya;
    }

    public List<String> getMobilos() {
        return mobilos;
    }

    public void setMobilos(List<String> mobilos) {
        this.mobilos = mobilos;
    }
    
    @PostConstruct
    public void doldur()
    {
        mobilos=new ArrayList<String>();
        mobilos.add("Android");
        mobilos.add("Windows Phone");
        mobilos.add("IOS");
    }
    
}

Java kodumuz içinde daha önce değinmediğimiz bir nokta yok arkadaşlar. @PostConstruct anotasyonunu daha önce öğrenmiştik. Bilmeyenler buraya tıklayarak öğrenebilirler.

Ekran Çıktıları

İkinci ListBox'ın arama kutusuna 'An' yazdığımda tek Android çıkıyor. Seçimlerimi yapıp Gönder'e tıklıyorum.

İkinci ListBox’ın arama kutusuna ‘An’ yazdığımda tek Android çıkıyor. Seçimlerimi yapıp Gönder’e tıklıyorum.

 

 

 

 

 

 

 

 

Seçimlerim listelendi.

Seçimlerim listelendi.

 

 

 

 

 

 

 

 

 

 

 

 

ListBox ve ManyButton’ın kullanımı bu şekilde arkadaşlar. Gelecek yazıda temalar konusunu işleyeceğiz. Sağlıcakla kalın.

Benzer Yazılar

Yorum Ekle

Yorum Yap