InputHidden ve Çoklu CheckBox

Merhabalar. Bu makalemizde JSF içerisinde yer alan etiketlere (tags) giriş yapacağız. Daha önce JSF ile form oluşturma makalesinde bir takım etiketlere değinmiştik. O etiketlere
burada değinmeyeceğiz. Makaleyi okumak isteyenler buradan ulaşabilirler.

Bu makalede inputHidden ve checkbox yapılarını inceleyeceğiz.

InputHidden

InputHidden ile biz bir pop-up işlemi yapabiliriz. Kullanıcıya yaptığı işlem sonunda işlem sonucuna göre açılacak bir ekranla bilgi verebiliriz.

Örnek bir inputHidden yapısı için index.xhtml kodu şu şekilde olabilir:

<?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:f="http://java.sun.com/jsf/core"     
	  xmlns:h="http://java.sun.com/jsf/html">
	<h:head>
		<script type="text/javascript">
			function uyari()
			{
				alert(document.getElementById('form:bilgi').value);
			}
		</script>
	</h:head>
	<h:body>
		<h:form id="form">
			<h:inputHidden value="TIKLADINIZ" id="bilgi"/>
			<h:commandButton value="Pop-up için tıklayın" onclick="uyari()"/>
		</h:form>
	</h:body>
</html>

Bu kodda sadece xhtml sayfası kullanılarak bir pop-up yapısı çıkarılmıştır. Siz managed bean’lerdeki bilgiyi çekerek ya da işlemin sonucuna göre bir değer atıyarak pop-up içeriğine istediğiniz şekli verebilirsiniz.

Kodumuzun Açıklaması:

Bu kodda bir script yapısı ile pop-up kullanmamızı sağladık. CommanButton nesnesine dikkat ederseniz bir action yapısına sahip değil. Burada action işlevini bizim için onclick yapısı görmektedir ve ekrana yeni bir pencerede bilgi vermektedir.

Ekrana ne bilgi yazılacağı id ifadesi ile belirlenmektedir. Script içerisinde yer alan uyari fonksiyonunda bulunan alert ekrana pop-up yapısının çıkmasını sağladı. document.getElementById ifadesi ise butona tıklandığında hangi formdan ve hangi verinin alınmasını belirleyen yapıdır. Bizim formumuzun id’si form ve ekrana verdirmek istediğimiz mesajın id’si bilgi. Böylece form.bilgi ile form id’li formdan bilgi id’li nesneyi çek demiş olduk. İfadenin sonundaki value ifadesi ise o id’ye sahip nesnenin değerini bize vermektedir.

Butona basıldığında ekran çıktımız şöyle olacaktır.

ÇOKLU CHECKBOX

Çoklu checkbox ifadesi ile anlatmak istediğim sayfada istediğiniz kadar checkbox yapısını kullanmanızı sağlamak ve bunu yaparken nesneleri tek tek değil bir dizi ya da liste kullanarak girmektir. Şimdi bir örnek yapalım. Örneğimizde tik koyabildiğimiz checkbox nesnelerini bir kez elle, bir kez dizi ile, bir kez de liste yapısı ile oluşturalı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:f="http://java.sun.com/jsf/core"     
	  xmlns:h="http://java.sun.com/jsf/html">
	<h:head>
	</h:head>
	<h:body>
		<h:form id="form">
			<h3>Elle veri girerek:</h3>
			<h:selectManyCheckbox>
				<f:selectItem itemLabel="AVCILAR" itemValue="1"/>
				<f:selectItem itemLabel="ÜSKÜDAR" itemValue="2"/>
				<f:selectItem itemLabel="FATİH" itemValue="3"/>
			</h:selectManyCheckbox>
			<h3>Dizi vasıtası ile girerek:</h3>
			<h:selectManyCheckbox value="#{ilceler.ilceler}">
				<f:selectItems value="#{ilceler.listeyiDoldur}"/>
			</h:selectManyCheckbox>
			<h3>Liste vasıtası ile girerek</h3>
			<h:selectManyCheckbox value="#{ilceler.ilceler1}">
				<f:selectItems value="#{ilceler.listeyidoldur1}"/>
			</h:selectManyCheckbox>
		</h:form>
	</h:body>
</html>

Ilceler.java Kodu:

import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.List;
@ManagedBean(name="ilceler")
@RequestScoped
public class Ilceler {
    String[] ilceler;
    String[] ilceler1;
    
    public String[] getIlceler() {   
        return ilceler;
    }

    public String[] getListeyiDoldur()
    {
        ilceler=new String[3];
        ilceler[0]="SULTANBEYLİ";
        ilceler[1]="EDİRNEKAPI";
        ilceler[2]="ATAŞEHİR";
        return ilceler;
    }

    public String getilcelerstring()
    {
        return Arrays.toString(ilceler);
    }

    public String[] getIlceler1() {
        return ilceler1;
    }

    public void setIlceler1(String[] ilceler1) {
        this.ilceler1 = ilceler1;
    }

    public static ArrayList<String> listeyidoldur1;
    static {
        listeyidoldur1=new ArrayList<String>();
        listeyidoldur1.add("PENDİK");
        listeyidoldur1.add("KARTAL");
        listeyidoldur1.add("SAMANDIRA");
    }
    public ArrayList<String> getListeyidoldur1() {
        return listeyidoldur1;
    }
    
    public String getListeyiStringeDonustur()
    {
        return Arrays.toString(ilceler1);
    }
}

Kodların Açıklaması:

index.xhtml sayfasında checkboxlar’ın value kısmına managed bean içinde yer alan dizileri atıyoruz ki seçilen değerler kayıt altına alınsın.

SelectItems kısmındaki value kısımlarına ise eğer dizi kullanıyorsak dizinin değerlerini atadğımız metodu, eğer liste kullanıyorsak oluşturduğumuz liste nesnesini atamalıyız.

Managed Bean yapısı içerisinde ise iki dizi ve bir liste tanımladık. Verileri diziden almak istediğimizde dizimizin get ve set metodları dışında dizimize değer atadığımız bir fonksiyon ve dizimizi String tipine çeviren bir metod kullandık.

Verileri eğer listeden almak istersek tanımladığımız listeye elemanlarımızı put metodu ile ekledikten sonra listeyi de String tipine çeviriyoruz. Listeyi static tanımlamamızın ve bir static yapı ile değer ataması yapmamızın nedeni class çağrıldığı anda değerlerin hazır edilip kullanılır hale getirilmesidir.

Bir de ekran çıktımıza bakalım.

Basitçe inputHidden ve selectManyCheckBox yapıları bu şekilde kullanılıp kullanıcıdan çoklu seçim alabilirsiniz ve pop-up yapısını kullanabilirsiniz.

Bir sonraki yazımızıda selectOneRadio kullanımına değineceğiz. Sağlıcakla esen kalın.