PrimeFaces-Spinner Kullanımı

Merhaba arkadaşlar. Bu yazıda Spinner bileşeninin nasıl kullanıldığını öğreneceğiz.

Spinner bileşeni kullanıcıdan arttırımlı ya da azaltımlı şekilde veri alınmasını sağlar. Bu arttırımlar ve azaltımlar tam sayılar şeklinde olabileceği gibi küsürlü sayılar da olabilir.

Örnek uygulamamızda 5 adet Spinner bileşeni çeşitlerini inceleyeceğiz. Bileşen çeşitleri ile ilgili bug olduğunu düşündüğüm ve çözümlerini bulamadığım bazı sorunlara kodun anlatım kısmında değindim.

Kodlarımız şu şekilde:

index.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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
<title>Spinner Kullanımı</title>
</h:head> 
<h:body> 
<h:form>
<p:outputLabel value="Kullanıcıdan arttırımlı ya da azaltımlı değer alımını sağlar."/>
<h:panelGrid columns="2">

    <h:outputText value="Temel Spinner" />
    <p:spinner value="#{spinner.temelSpinner}"/>
    
    <h:outputText value="İstenen Miktarda Arttırıp Azaltılan Spinner" />
    <p:spinner value="#{spinner.adimliSpinner}" stepFactor="0.50"/>
    
    <h:outputText value="En Az ve En Çok Değerli Spinner" />
    <p:spinner value="#{spinner.minmaxSpinner}" min="10" max="80"/>
    
    <h:outputText for="onek" value="Ön Ekli Spinner" />
    <p:spinner id="onek" value="#{spinner.onekliSpinner}" prefix="₺" >
    </p:spinner>
    
    
    <h:outputText value="Ajax Spinner" />
    <p:outputPanel>
    <p:spinner value="#{spinner.ajaxSpinner}">
         <p:ajax update="ajaxspinner"></p:ajax>
    </p:spinner>
    <h:outputText id="ajaxspinner" value="#{spinner.ajaxSpinner}" />
    </p:outputPanel>
</h:panelGrid>

    <p:commandButton value="Kaydet" update="secilenlergrid" oncomplete="PF('diyalog').show()" />
    <p:dialog header="Seçilen Değerler" widgetVar="diyalog" showEffect="shake" hideEffect="shake">
          <p:panelGrid id="secilenlergrid" columns="2" >
          <h:outputText value="Temel Spinner"/>
          <h:outputText value="#{spinner.temelSpinner}"/>
          <h:outputText value="İstenen Miktarda Arttırıp Azaltılan Spinner"/>
          <h:outputText value="#{spinner.adimliSpinner}"/>
          <h:outputText value="En Az ve En Çok Değerli Spinner"/>
          <h:outputText value="#{spinner.minmaxSpinner}"/>
          <h:outputText value="Önekli Spinner"/>
          <h:outputText value="#{spinner.onekliSpinner}"/>
          <h:outputText value="Ajax Spinner"/>
          <h:outputText value="#{spinner.ajaxSpinner}"/>
          </p:panelGrid>
    </p:dialog>
</h:form>
</h:body> 
</html>

<!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:ui="http://java.sun.com/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<h:head>

<title>Spinner Kullanımı</title>

</h:head>

<h:body>

<h:form>

<p:outputLabel value="Kullanıcıdan arttırımlı ya da azaltımlı değer alımını sağlar."/>

<h:panelGrid columns="2">

<h:outputText value="Temel Spinner" />

<p:spinner value="#{spinner.temelSpinner}"/>

<h:outputText value="İstenen Miktarda Arttırıp Azaltılan Spinner" />

<p:spinner value="#{spinner.adimliSpinner}" stepFactor="0.50"/>

<h:outputText value="En Az ve En Çok Değerli Spinner" />

<p:spinner value="#{spinner.minmaxSpinner}" min="10" max="80"/>

<h:outputText for="onek" value="Ön Ekli Spinner" />

<p:spinner id="onek" value="#{spinner.onekliSpinner}" prefix="₺" >

</p:spinner>

<h:outputText value="Ajax Spinner" />

<p:outputPanel>

<p:spinner value="#{spinner.ajaxSpinner}">

<p:ajax update="ajaxspinner"></p:ajax>

</p:spinner>

<h:outputText id="ajaxspinner" value="#{spinner.ajaxSpinner}" />

</p:outputPanel>

</h:panelGrid>

<p:commandButton value="Kaydet" update="secilenlergrid" oncomplete="PF('diyalog').show()" />

<p:dialog header="Seçilen Değerler" widgetVar="diyalog" showEffect="shake" hideEffect="shake">

<p:panelGrid id="secilenlergrid" columns="2" >

<h:outputText value="Temel Spinner"/>

<h:outputText value="#{spinner.temelSpinner}"/>

<h:outputText value="İstenen Miktarda Arttırıp Azaltılan Spinner"/>

<h:outputText value="#{spinner.adimliSpinner}"/>

<h:outputText value="En Az ve En Çok Değerli Spinner"/>

<h:outputText value="#{spinner.minmaxSpinner}"/>

<h:outputText value="Önekli Spinner"/>

<h:outputText value="#{spinner.onekliSpinner}"/>

<h:outputText value="Ajax Spinner"/>

<h:outputText value="#{spinner.ajaxSpinner}"/>

</p:panelGrid>

</p:dialog>

</h:form>

</h:body>

</html>

Sayfalarımızda spinner bileşenini kullanabilmek için p:spinner etiketini kullanıyoruz. Bu etiketin value bileşenine Java tarafındaki gerekli değişkeni atıyoruz.

Birinci spinner bileşeni temel spinner olur 1,1,1 … şeklinde arttırım ya da azaltım yapmamızı sağlar.

İkinci spinner bileşenini küsürlü arttırım ya azaltım yapmak için kullanabiliriz. Ne kadar artıp azalacağına stepFactor özelliği sayesinde biz karar veririz. Örneğin burada 0.50 artıp azalacak.

Üçüncü spinner bileşeninide kullanıcıdan belli bir değerin altında ve belli bir değerin üstünde değer girememesi için kullanabiliriz. Kısıtlamaları min ve max özellikleri ile yapabiliriz. Ancak burada bir sorun var. Sayfa açıldığı anda en az değer için verilen sayının görünmemesi. En az değer, bilşenin değerini değiştirmek istediğimiz anda beliriyor.

Dördüncü spinner bileşeninde alınan değerin önüne bir işaret koyabiliriz. Örneğin ben burada TL simgesini koydum. Yalnız burada da bir sorun var. Değeri değiştirme sırasında ön ek kayboluyor ve değişim işlemini tamamladığınızda geri geliyor.

Beşinci Spinner bileşeninde değişimi anlık olarak takip edebiliriz.

Spinner.Java Kodu

import javax.faces.bean.*;

@ManagedBean
public class Spinner {
int temelSpinner;
double adimliSpinner;
int minmaxSpinner;
int onekliSpinner;
int ajaxSpinner;
public int getTemelSpinner() {
	return temelSpinner;
}
public void setTemelSpinner(int temelSpinner) {
	this.temelSpinner = temelSpinner;
}
public Double getAdimliSpinner() {
	return adimliSpinner;
}
public void setAdimliSpinner(Double adimliSpinner) {
	this.adimliSpinner = adimliSpinner;
}
public int getMinmaxSpinner() {
	return minmaxSpinner;
}
public void setMinmaxSpinner(int minmaxSpinner) {
	this.minmaxSpinner = minmaxSpinner;
}
public int getOnekliSpinner() {
	return onekliSpinner;
}
public void setOnekliSpinner(int onekliSpinner) {
	this.onekliSpinner = onekliSpinner;
}
public int getAjaxSpinner() {
	return ajaxSpinner;
}
public void setAjaxSpinner(int ajaxSpinner) {
	this.ajaxSpinner = ajaxSpinner;
}

}

import javax.faces.bean.*;

@ManagedBean

public class Spinner {

int temelSpinner;

double adimliSpinner;

int minmaxSpinner;

int onekliSpinner;

int ajaxSpinner;

public int getTemelSpinner() {

return temelSpinner;

}

public void setTemelSpinner(int temelSpinner) {

this.temelSpinner = temelSpinner;

}

public Double getAdimliSpinner() {

return adimliSpinner;

}

public void setAdimliSpinner(Double adimliSpinner) {

this.adimliSpinner = adimliSpinner;

}

public int getMinmaxSpinner() {

return minmaxSpinner;

}

public void setMinmaxSpinner(int minmaxSpinner) {

this.minmaxSpinner = minmaxSpinner;

}

public int getOnekliSpinner() {

return onekliSpinner;

}

public void setOnekliSpinner(int onekliSpinner) {

this.onekliSpinner = onekliSpinner;

}

public int getAjaxSpinner() {

return ajaxSpinner;

}

public void setAjaxSpinner(int ajaxSpinner) {

this.ajaxSpinner = ajaxSpinner;

}

Java kodumuz içinde sadece girilen değerleri tutacak değişkenlerimiz bulunmakta.

Ekran Çıktıları

Sayfa ilk açıldığında bizi şu şekilde karşılıyor:

Değerler girip Kaydet’e tıklıyorum.

Bu yazıda da bu kadar arkadaşlar. Eğer belirttiğim sorunlara bir çözüm bulabilirsem sizinle buradan paylaşacağım. Gelecek yazıda Slider kullanımını öğreneceğiz. Sağlıcakla kalın.

admin

Benzer Yazılar