PrimeFaces

PrimeFaces-Slider Kullanımı

Merhaba arkadaşlar. Bu yazıda PrimeFaces içinde kaydırarak değer seçmeyi sağlayan Slider bileşeninin kullanımını öğreneceğiz.

Bu yazıda slider bileşeninin 5 adet kullanım şeklini anlatmaya çalışacağım. Bunlar sırası ile InputText İle KullanımInputHidden İle Kullanım, Belirli Değer Arttırımı İle Kullanım, Dikey Olarak Kullanım ve Aralıklı Kullanım şeklinde olacak.

Bildiğiniz gibi JSF&PrimeFaces’da kullanıcıdan bir veri ya da bilgi input bileşenleri ile alınır. Bu nedenle biz de Slider bileşenini input bileşenleri üzerine oturtarak işlemlerimizi yapmaya çalışacağız.

Şimdi bileşenin kullanımını öğrenmek için örnek uygulamamıza bakalım.

Slider.java Kodu

Java kodumuz içinde xhtml sayfalarından gelen bilgileri tutacak değişkenler ve onlara ait get-set metodları yer alıyor. aralikAlt ve aralikUst değişkenlerine başlangıç değeri atamamızın sebebi uygulama çalıştığında varsayılan bazı değerlerle gelmesini istememizdir.

anasayfa.xhtml Kodu

p:slider etiketi ile kullandığımız Slider bileşenimizi input bileşenleri üstüne oturtacağımızı söylemiştik. Bunu for-id ilişkisi ile yapıyoruz. Kod içerisinde dikkat ederseniz her bir InputText ya da InputHidden bileşenine verilmiş olan id değeri Slider bileşeninde  for değerine verilmiş değer ile aynı. Örneğin InputText İle Kullanım‘da inputText bileşeninin id özelliğinin değeri Slider bileşeninin for özelliğinin değeri ile aynı. Bu şekilde Slider’dan seçilen değer inputText bileşeni vasıtası ile sınıfımız içindeki değişkene atanmakta.

InputHidden İle Kullanım‘da ise yukarıda söylediğimiz işlemi aynen yaptık fakat burada InputHidden kullandığımız için ve değer değişimini anlık görmek istediğimizden ekrana bunu yazdırmamız gerekmekte. Bunun için h:outputText bileşenine başvuruyoruz. Dikkat ederseniz bu kullanımda Slider bileşenine 2 tane özellik ekledik. Display ve displayTemplate. Display özelliğine OutputText’in id özelliğinin değerini displayTemplate özelliğine ise OutputText’in value özelliğinin değerini veriyoruz ancak bir farkla. #{slider.inputHiddenSlider} ifadesinin yerine {value} yazıyoruz. Bu sayede değer değişimini yine anlık olarak takip edebiliyoruz.

Belirli Miktar Arttırımlı Kullanım‘da yapmamız gereken tek şey Slider bileşeninin step özelliğini kullanmak.

Dikey Kullanım‘da Belirli Miktar Arttırımlı Kullanım’da olduğu gibi tek yapmamız gereken type özelliğini kullanmak.

Aralıklı Kullanım‘da ise yukarıdakilerden farklı olarak 2 input bileşenine ihtiyacımız var ve range özelliğine true atamasını yapmamız gerekiyor.

Ekran Çıktıları

Ekran çıktılarımız da aşağıda yer almaktadır. Bu yazıda da bu kadar arkadaşlar. Sorularınız için yorum kısmını kullanabilirsiniz. Gelecek yazıda görüşmek üzere sağlıcakla kalın.

Ekran Resmi 2014-12-09 15.40.28

Ekran Resmi 2014-12-09 15.44.10