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ım, InputHidden İ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
import javax.faces.bean.*;
@ManagedBean
@RequestScoped
public class Slider {
int inputTextSlider;
int inputHiddenSlider;
int arttirimliSlider;
int dikeySlider;
int aralikAlt=30;
int aralikUst=80;
public void setAralikAlt(int aralikAlt) {
this.aralikAlt = aralikAlt;
}
public void setAralikUst(int aralikUst) {
this.aralikUst = aralikUst;
}
public int getAralikAlt() {
return aralikAlt;
}
public int getAralikUst() {
return aralikUst;
}
public int getDikeySlider() {
return dikeySlider;
}
public void setDikeySlider(int dikeySlider) {
this.dikeySlider = dikeySlider;
}
public int getArttirimliSlider() {
return arttirimliSlider;
}
public void setArttirimliSlider(int arttirimliSlider) {
this.arttirimliSlider = arttirimliSlider;
}
public int getInputHiddenSlider() {
return inputHiddenSlider;
}
public void setInputHiddenSlider(int inputHiddenSlider) {
this.inputHiddenSlider = inputHiddenSlider;
}
public int getInputTextSlider() {
return inputTextSlider;
}
public void setInputTextSlider(int inputTextSlider) {
this.inputTextSlider = inputTextSlider;
}
}
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
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Slider Kullanımı</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1">
<h:outputText value="InputText İle Kullanım"></h:outputText>
<p:inputText id="inputTextSlider" value="#{slider.inputTextSlider}" />
<p:slider for="inputTextSlider"/>
<h:outputText id="inputHiddenSlider" value="InputHidden İle Kullanım-Değer: %#{slider.inputHiddenSlider}" />
<h:inputHidden id="hiddenInputSlider" value="#{slider.inputHiddenSlider}" />
<p:slider for="hiddenInputSlider" display="inputHiddenSlider" style="width: 200px" displayTemplate="Belirlenen Değer: %{value}" />
<h:outputText value="Belirli Miktar Arttırımlı Kullanım" />
<p:inputText id="adimadim" value="#{slider.arttirimliSlider}"/>
<p:slider for="adimadim" step="10"/>
<h:outputText value="Dikey Kullnım" />
<h:inputText id="dikey" value="#{slider.dikeySlider}"/>
<p:slider for="dikey" type="vertical"/>
<h:outputText id="aralikYazi" value="Aralıklı Kullanım:#{slider.aralikAlt}-#{slider.aralikUst}" />
<h:inputHidden id="alt" value="#{slider.aralikAlt}" />
<h:inputHidden id="ust" value="#{slider.aralikUst}" />
<p:slider for="alt,ust" display="aralikYazi" range="true" displayTemplate="Aralık:{min}-{max}"/>
</h:panelGrid>
<p:commandButton value="KAYDET" icon="ui-icon-check" update="goster" oncomplete="PF('sonuclar').show()"/>
<p:dialog header="Sonuçlar" widgetVar="sonuclar" showEffect="shake" hideEffect="shake" resizable="false">
<h:panelGrid id="goster" columns="2">
<p:outputLabel value="InputText İle Kullanım"/>
<p:outputLabel value="#{slider.inputTextSlider}"/>
<p:outputLabel value="InputHidden İle Kullanım"/>
<p:outputLabel value="#{slider.inputHiddenSlider}"/>
<p:outputLabel value="Belirli Miktar Arttırımlı Kullanım"/>
<p:outputLabel value="#{slider.arttirimliSlider}"/>
<p:outputLabel value="Dikey Kullanım"/>
<p:outputLabel value="#{slider.dikeySlider}"/>
<p:outputLabel value="Aralıklı Kullanım"/>
<p:outputLabel value="#{slider.aralikAlt}-#{slider.aralikUst}"/>
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
</html>
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.
[…] arkadaşlar. Slider Kullanımı yazımızın ardından bu yazımızda Switch bileşeninin kullanımı […]