PrimeFaces-InputMask Nasıl Kullanılır?

Merhaba arkadaşlar. TextEditör Kullanımı yazımızın ardından bu yazımızda InputMask yapısının nasıl kullanıldığını öğreneceğiz.

Kısıca InputMask’ı InputText’lere sadece rakam ya da sadece harf ya da rakam harf karışık girilmesini sağlayan yapı şeklinde ifade edebiliriz. Bu konuya ait uygulama kodlarımız şu şekilde:

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">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid columns="2">             
            <p:outputLabel for="tarih" value="Doğum Tarihiniz:"/>
            <p:inputMask id="tarih" value="#{inputMask.dogumTarihi}" mask="99/99/9999"/>
            
            <p:outputLabel for="telefon" value="Telefonunuz"/>
            <p:inputMask id="telefon" value="#{inputMask.telefon}" mask="0(999) 999-9999"/>
            
            <p:outputLabel for="urunanahtari" value="Ürün Anahtarını Giriniz:"/>
            <p:inputMask id="urunanahtari" value="#{inputMask.urunAnahtari}" mask="a9a9-aa**-9999-aaaa"/>
            </h:panelGrid>
            
            <p:commandButton value="SIFIRLA" type="reset" />
            <p:commandButton value="GÖNDER" update="display" oncomplete="PF('dlg').show()"/>
            
            <p:dialog widgetVar="dlg" modal="true" resizable="false" header="Values" showEffect="fade"> 
        <p:panelGrid id="display" columns="2" columnClasses="label,value">
            <h:outputText value="Doğum Tarihi: " />
            <h:outputText value="#{inputMask.dogumTarihi}" />
 
            <h:outputText value="Telefon Numaranız: " />
            <h:outputText value="#{inputMask.telefon}" />
 
            <h:outputText value="Ürün Anahtarı" />
            <h:outputText value="#{inputMask.urunAnahtari}"/>

        </p:panelGrid>
    </p:dialog>
        </h:form>
    </h:body>
</html>

<?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">

<h:head>

<title>Facelet Title</title>

</h:head>

<h:body>

<h:form>

<h:panelGrid columns="2">

<p:outputLabel for="tarih" value="Doğum Tarihiniz:"/>

<p:inputMask id="tarih" value="#{inputMask.dogumTarihi}" mask="99/99/9999"/>

<p:outputLabel for="telefon" value="Telefonunuz"/>

<p:inputMask id="telefon" value="#{inputMask.telefon}" mask="0(999) 999-9999"/>

<p:outputLabel for="urunanahtari" value="Ürün Anahtarını Giriniz:"/>

<p:inputMask id="urunanahtari" value="#{inputMask.urunAnahtari}" mask="a9a9-aa**-9999-aaaa"/>

</h:panelGrid>

<p:commandButton value="SIFIRLA" type="reset" />

<p:commandButton value="GÖNDER" update="display" oncomplete="PF('dlg').show()"/>

<p:dialog widgetVar="dlg" modal="true" resizable="false" header="Values" showEffect="fade">

<p:panelGrid id="display" columns="2" columnClasses="label,value">

<h:outputText value="Doğum Tarihi: " />

<h:outputText value="#{inputMask.dogumTarihi}" />

<h:outputText value="Telefon Numaranız: " />

<h:outputText value="#{inputMask.telefon}" />

<h:outputText value="Ürün Anahtarı" />

<h:outputText value="#{inputMask.urunAnahtari}"/>

</p:panelGrid>

</p:dialog>

</h:form>

</h:body>

</html>

Index sayfamız içinde InputText bileşenine benzer özellikte olan InputMask ile kullanıcının ne gireceğini kısıtlıayabiliyoruz. Kısıtlama görevini mask bileşeni üzerine alıyor. Eğer kullanıcıdan sadece rakamlar girmesini istiyorsak 9 , sadece harfler girmesini istiyorsak a ile işimizi görüyoruz. Nasıl bir kısıtlama istediğimizi de yine mask bileşenine yazıyoruz. Örneğin tarih için 99/99/9999 ifadesini kullandık.

InputMask.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class InputMask {
private String telefon;
private String dTarihi;
private String urunAnahtari;
private String dogumTarihi;

    public void setDogumTarihi(String dogumTarihi) {
        this.dogumTarihi = dogumTarihi;
    }

    public String getDogumTarihi() {
        return dogumTarihi;
    }


    public void setUrunAnahtari(String urunAnahtari) {
        this.urunAnahtari = urunAnahtari;
    }

    public String getUrunAnahtari() {
        return urunAnahtari;
    }

    public void setTelefon(String telefon) {
        this.telefon = telefon;
    }

    public String getTelefon() {
        return telefon;
    }

}

import javax.faces.bean.ManagedBean;

import javax.faces.bean.RequestScoped;

@ManagedBean

@RequestScoped

public class InputMask {

private String telefon;

private String dTarihi;

private String urunAnahtari;

private String dogumTarihi;

public void setDogumTarihi(String dogumTarihi) {

this.dogumTarihi = dogumTarihi;

}

public String getDogumTarihi() {

return dogumTarihi;

}

public void setUrunAnahtari(String urunAnahtari) {

this.urunAnahtari = urunAnahtari;

}

public String getUrunAnahtari() {

return urunAnahtari;

}

public void setTelefon(String telefon) {

this.telefon = telefon;

}

public String getTelefon() {

return telefon;

}

Ekran Çıktıları

Maalesef ekran çıktıları ile InputMask’ı tam olarak göstermek mümkün değil. Ama bir ön izleme olması açısından ekran çıktılarını koydum.

InputMask kullanımı da bu şekilde arkadaşlar. Başka bir yazıda görüşmek üzere sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X