PrimeFaces-ManyMenu ve ManyCheckBox Kullanımı

Merhaba arkadaşlar. Bu yazıda bize sunulan seçeneklerden birden fazlasını seçmemizi sağlayan ManyMenu ve ManyCheckBox bileşenlerinin nasıl kullanıldığını öğreneceğiz.

ManyMenu kullanıcının önündeki listeden birden fazla seçenek seçebilmesini sağlayan bilşendir. ManyCheckBox’da da durum aynıdır. Aralarındaki fark ManyMenu ile birden fazla seçim yapmak için “Ctrl” tuşuna basmanız gerekliliğidir. Örnek uygulmamızda kullanıcıdan ManyMenu’den bildiği ya da öğrenmekte olduğu programlama dillerini seçmesini ve ManyCheckBox’dan bildiği ya da öğrenmekte olduğu Java teknolojilerini seçmesini isteyeceğiz. Bu arada kod verme sırasında bir değişikliğe gideceğim ve ManagedBean kodlarını Xhtml kodlarından önce vereceğim. Şimdi örneğimize bakalım. Kodlar şu şekilde:

Bean.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.*;
import javax.annotation.PostConstruct;
@ManagedBean
@RequestScoped
public class Bean {
private List<String> diller;
private List<String> bilinenDiller;
private List<String> teknolojiler;
private List<String> bilinenTeknolojiler;

    public List<String> getTeknolojiler() {
        return teknolojiler;
    }

    public List<String> getBilinenTeknolojiler() {
        return bilinenTeknolojiler;
    }

    public void setBilinenTeknolojiler(List<String> bilinenTeknolojiler) {
        this.bilinenTeknolojiler = bilinenTeknolojiler;
    }

    public List<String> getDiller() {
        return diller;
    }

    @PostConstruct
    public void init()
    {
        diller=new ArrayList<String>();
        diller.add("Java");
        diller.add("C#");
        diller.add("Python");
        
        teknolojiler=new ArrayList<String>();
        teknolojiler.add("Java ME");
        teknolojiler.add("Java Embedded");
        teknolojiler.add("JSP&JSF");
        teknolojiler.add("Hibernate&JPA");
    }

    public List<String> getBilinenDiller() {
        return bilinenDiller;
    }

    public void setBilinenDiller(List<String> bilinenDiller) {
        this.bilinenDiller = bilinenDiller;
    }

}

Java kodumuzda sayfamızda görünecek öğeleri ve gelen bilgileri tutacak listeler yer alıyor. Kullanıcıdan alınan verileri tutacak olan bilinenDiller ve bilinenTeknolojiler listelerinin get-set metotlarının ikisi de yazılı. Fakat sayfada görünecek seçenekleri tutan listelerin sadece get metotları yazılı çünkü set işlemini @PostCostruct anotasyonu koyduğumuz metot sayesinde uygulama çalışır çalışmaz yaptırıyoruz.

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:outputText value="Çoklu Seçimlerde Windows ve Linux İçin Ctrl Mac İçin Command Tuşlarını Kullanabilirsiniz."/>
            <h:panelGrid columns="2">
                <p:outputLabel value="Bildiğiniz Dilleri Listeden Seçiniz"/>
            <p:selectManyMenu value="#{bean.bilinenDiller}" filter="true" filterMatchMode="contains" showCheckbox="true">
                <f:selectItems value="#{bean.diller}"/>
            </p:selectManyMenu>
            <p:outputLabel value="Bildiğiniz Java Teknolojilerini Seçiniz"/>
            <p:selectManyCheckbox value="#{bean.bilinenTeknolojiler}">
                <f:selectItems value="#{bean.teknolojiler}"/>
            </p:selectManyCheckbox>
            </h:panelGrid>
            
            <p:commandButton value="GÖNDER" update="goster" icon="ui-icon-check" oncomplete="PF('dlg').show()"/>
            
            <p:dialog header="Seçilen Bilgiler" widgetVar="dlg" showEffect="clip">
                <p:outputPanel id="goster">
                    <p:dataList value="#{bean.bilinenDiller}" var="yaz">
                        <p:outputLabel value="#{yaz}"/>
                </p:dataList>
                    <p:dataList value="#{bean.bilinenTeknolojiler}" var="yaz1">
                        <p:outputLabel value="#{yaz1}"/>
                    </p:dataList>
                </p:outputPanel>
            </p:dialog>
        </h:form>
    </h:body>
</html>

Sayfa kodumuz içinde gördüğünüz gibi daha önce selectManyMenu ve selectManyCheckbox bileşenlerinde yaptığımız işlemleri yapıyoruz. Seçilen değerlerin tutulması için bean kodu içindeki listeyi value bileşenine atıyoruz, ekrana basılcak değerleri tutan listeyi de f:selectItems’ın value bilşenine veriyoruz.

Seçilen değerlerin ekrana basılması işleminde bean tarafından liste döneceği için ekrana yazılırken var kullanıyoruz.

Ekran Çıktısı

Bu yazıda da bu kadar arkadaşlar. Yazılarımda beğenmediğiniz ya da iyileştirilmesini istediğiniz kısımları yorum kısmına yazabilirsiniz. Gelecek yazıda görüşmek üzere. Sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X