Merhaba arkadaşlar,

Yine uzun bir aradan sonra birlikteyiz. Yoğunluklardan dolayı yazılarımı sık yazamıyorum. Bu yüzden kusuruma bakmayın. Yazıma başlamadan önce hepinizin kurban bayramını kutluyor nice bayramlara erişmemizi temenni ediyorum.

Bu yazımda arkadaşlar sizlere Primefaces üzerinde inputMask ve dialog kullanımıyla beraber bir takım püf noktalardan da bahsedeceğim. Öncelikle çalışacağımız koda bir göz gezdirelim.

index.xhtml

<?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>Kodumun Dünyası</title>
    </h:head>
    <h:body>
        <h:form>
            <p:panelGrid columns="2">
                <p:outputLabel for="date" value="Tarih" />
                <p:inputMask id="date" mask="99/99/9999" value="#{mask.date}"/>
                <p:outputLabel for="phone" value="Telefon" />
                <p:inputMask id="phone" mask="(999)-999-99-99" value="#{mask.phone}" />
                <p:outputLabel for="key" value="Ürün Anahtarı" />
                <p:inputMask id="key" mask="a*-9aa9-99a*" value="#{mask.key}" />
                <p:commandButton value="Sil" type="reset" />
                <p:commandButton value="Göster" update="display" oncomplete="PF('dl').show()" />
            </p:panelGrid>
            <p:dialog widgetVar="dl" header="Seçilenler" showEffect="slide">
                <p:panelGrid id="display" columns="2" >
                    <p:outputLabel value="Tarih" />
                    <h:outputText id="dateValue" value="#{mask.date}"/>
                    <p:outputLabel value="Telefon" />
                    <h:outputText id="phoneValue" value="#{mask.phone}" />
                    <p:outputLabel value="Ürün Anahtarı" />
                    <h:outputText id="keyValue" value="#{mask.key}" />
                </p:panelGrid>
            </p:dialog>
            </h:form>
    </h:body>
</html>

InputMaskClass.java

/*
 *  index.xhtml üzerinde kullanılan bean
 */
package com.edsoft.blogdeneme;

import javax.faces.bean.ManagedBean;

/**
 *
 * @author Yusuf ÖNDER
 */
@ManagedBean(name = "mask")
public class InputMaskClass {
    private String date;
    private String phone;
    private String key;

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }
}

index.xhtml Kodumuzu incelediğimiz zaman bir panelGrid içerisinde kullanıcıdan tarih, telefon ve ürün kodu bilgilerini alacağız. Ve bu bilgileri “mask” diye adlandırdığımız InputMaskClass sınıfını kullanarak işleme sokacağız. Fakat kullanıcıdan bu bilgileri alırken bizim belirlediğimiz bir kural çerçevesinde alacağız. Bunun için de inputText’in bir başka versiyonu olan inputMask kullanacağız. Şimdi sırayla bileşenimizi nasıl kullandığımızı inceleyelim.

İlk inputMask tanımı üzerinde bizim koyduğumuz şart şudur. Kullanıcı sadece sayısal giriş yapabilir ve bu giriş kaydedildiğinde (mesela 11/11/1111) tanımlanılan tip şeklinde kaydedilir. Kullanıcının sadece sayısal girişini ‘9’ temsili karakteri ile belirtiyoruz.

İkinci inputMask tanımı bazı sitelerde telefonumuzu kaydederken giriş yaptığımız inputText’in Primefaces versiyonudur 🙂

Son inputMask tanımı işin püf noktası olan örnek. Burada arkadaşlar kullanım şekli şudur. ‘a’ ile tanımladığımız yerlerde sayısal değer kullanamayız. Fakat her türlü karakter kullanılabilir. ‘*’ ile tanımladığımız yerlerde ise her türlü karakter ve sayıyı kullanabilirsiniz. Buradaki ana nokta şudur. Hangi noktada ne kullanmak istiyorsanız oraya uygun temsili karakteri kullanmanız. Mesela bu örnekte ilk karakter sayı olamaz fakat ikinci karakter her türlü değeri alabilir.

Kısacası mask içinde sadece sayısal değerler için ‘9’, harf ve özel karakterler için ‘a’, tüm karakterler içinde ‘*’ temsili karakteri kullanılır. ‘(‘, ‘)’, ‘-‘ gibi karakterler sadece kullanılacak düzeni belirler.

Şimdi gelelim dialog bileşenine. Bu bileşeni kullanıcıya bilgi vermek amacıyla kullanabilirsiniz.-şimdi kullanacağımız gibi- Bu bileşen aslında kendi başına bir bileşen değil. Mesela bir inputText gibi direkt kullanılan değil de bileşeni özelleştiren bir bileşendir. Mesela incelediğimiz zaman dialog içerisinde bir panelGrid kullandık. Aslında biz bu panelGrid’i özelleştirdik. Normalde direkt sayfada çıkacaktı şimdi ise bir action sonrası ortaya çıkacaktır. Yani dialog bileşeni, bu bileşen altında kullanılan bileşenleri özelleştirip kullanmamızı sağlayacaktır. Şimdi bu bileşeni ve tüm kodları inceleyelim.

dialog bileşenine baktığımızda widgetWar göreceğiz. widgetWar, bileşeni javascript ortamına açar. commandButton bileşenini incelediğimizde onComplete göreceğiz. onComplete, commandButton’da tanımladığımız işlem tamamlandığında şu işlemi yap dediğimiz javascript kullanılan bir özellik. Biz de commandButton üzerinde işlem tamamlandığında PF(‘dl’).show() diyerek dialog bileşenini aktifleştir dedik. PF() Primefaces bileşenlerini javascript üzerinde kullanmamızı sağlayan bir fonksiyon. Yani widgetWar tanımladığımız bileşeni PF() fonksiyonu ile javascript ortamına taşırız.

dialog bileşeni içerisinde panelGrid tanımladık ve gösterilecek değerleri belirttik. commandButton tıkladığımızda ise ajax ile bu bileşen güncellenip ekranda gösterilecektir. Ama burada bir başka püf nokta daha var. “h:form” püf noktası. Hep Primefaces’de h:form niye kullanılır diye merak ettiydim. Bu yazıyı yazarken öğrendim 🙂 h:form bize Primefaces’in ajax özelliğini kullanabilmemize yarıyor. Primefaces içerisinde aynı form altındaki bileşenleri ajax ile update edebiliriz. İsterseniz bu kodumuzda h:form etiketini kaldırın ve hangi bileşenler neden çalışmıyor araştırın. (İpucu: Primefaces commandButton özelliklerine bakın ve bahsetmediğimiz commandButtondan yola çıkın derim )

Yazımızı ekran görüntüleriyle sonlandıralım. Bir daha ki yazımızda görüşmek üzere esenlikle kalın.

Ekran Görüntüsü

Untitled

Facebook'dan yorumla