PrimeFaces-Password Kullanımı

Merhaba arkadaşlar. Bu yazıda girilen şifrelerin eşit olup olmadığınıistemci tarafında kontrol etmeyi sağlayan Password bileşeninin kullanımını öğreneceğiz.

Kullanıcıya kayıt olması için bir form hazırladığımızı düşünelim. Bu formda olmazsa olmazlardan birisi kullanıcının şifresini girmesi ve şifresini onaylamak için tekrar girmesidir. Biz istese idik bu iki şifrenin konrolünü Java (bean/back-end) tarafında da yapabilirdik. Ama bu işlemin JavaScript veya onun üstüne bina edilmiş başka bir yapı ile yapılaması uygulamamıza performans katacaktır çünkü bu tarz işlemlerin sunucu tarafından istemci tarafına alınması sunucunun yükünü azaltmaktadır.

Örnek uygulamamızda kullanıcının bir şifre girmesi ve şifresini onaylamak için tekrar girmesi istenmektedir. Kodlarımız, açıklamaları ve ekran çıktıları şu şekilde:

PFSifreKontrolu.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class PFSifreKontrolu {
public String inlineSifre;
public String temelKullanimSifre;

    public String getInlineSifre() {
        return inlineSifre;
    }

    public void setInlineSifre(String inlineSifre) {
        this.inlineSifre = inlineSifre;
    }

    public String getTemelKullanimSifre() {
        return temelKullanimSifre;
    }

    public void setTemelKullanimSifre(String temelKullanimSifre) {
        this.temelKullanimSifre = temelKullanimSifre;
    }
}

Java kodumuz içinde değişkenlerimizin xhtml tarafında görülebilmesi ve kullanılabilmesi için get-set metotları yer alıyor.

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>PrimeFaces-Password Bileşeni Kullanımı</title>
    </h:head>
    <h:body>
        <h:form>
            <h:panelGrid id="sifreKontrolUygulaması" columns="2">
            <h:outputText value="Satır İçi Kullanım Örneği:"/>
            <p:password id="inlinesifre" validatorMessage="Şifreler Uyuşmuyor" required="true" label="Birinci Şifre" match="temelsifre" value="#{pFSifreKontrolu.inlineSifre}" feedback="true" inline="true" promptLabel="Lütfen Bir Şifre Giriniz"
                        weakLabel="Zayıf Şifre" goodLabel="Orta Seviyede Şifre" strongLabel="Güçlü Şifre"/>
            <h:outputText value="Temel Kullanım Örneği:"/>
            <p:password id="temelsifre" label="İkinci Şifre" required="true" value="#{pFSifreKontrolu.temelKullanimSifre}" feedback="true" promptLabel="Lütfen Bir Şifre Giriniz"
                        weakLabel="Zayıf Şifre" goodLabel="Orta Seviyede Şifre" strongLabel="Güçlü Şifre"/>
            </h:panelGrid>
            <p:commandButton value="KAYDET" update="sifreKontrolUygulaması"/>
            <p:messages id="mesaj" showDetail="true" autoUpdate="true" closable="true"/>
        </h:form>
    </h:body>
</html>

p:password etiketi ile kullandığımız Password bileşenimizde value özelliği ile girilen şifrenin Java tarafındaki değişkende tutulmasını sağlıyoruz. Ancak bu örnek sadece girilen iki şifrenin eşitliğinin kontrolü üzerine olduğu için value özelliklerini kullanmasak da olurdu. Eşitlik kontrolü yapabilmemiz için id değerlerini atamış olmamız gerekiyor. Bir Password bileşeninin match özelliğine karşılaştırmak istediğimiz diğer Password bileşeninin id bilgisini atadığımızda bu iki Password bileşenindeki değerler butona tıklandığında kontrol ediliyor. Eğer Password bileşenine tıkladığımızda yanında ya da altında bizi bir yazının karşılamasını istiyorsak feedback özelliğine true değerini atamamız gerekiyor. Eğer altında bir yazı çıkmasını istiyorsak inline özelliğine true atamasını yapmamız gerekiyor. Eğer yanında çıkmasını istiyorsak bir şey yapmamıza gerek yok. Yanında ya da altında çıkacak yazıları promtLabel ile belirtiyoruz. Sırası ile girilen şifrenin güçlü veya orta veya zayıf olduğuna dair iletileri strongLabel, goodLabel ve weakLabel özelliklerini kullanarak bildiriyoruz.

Şifrelerin uyuşmaması durumunda ekranda belirecek hatayı validatorMessage ile belirliyoruz.

Butonun update özelliğine panelGrid’in id’sini vererek butona tıklandığında şifrelerin eşit olup olmadığının kontrolünün gerçekleştirilmesini sağlıyoruz.

Ekran Çıktıları

Resimlerin altlarında daha iyi anlaşılması için bir takım yazılar koydum arkadaşlar.

Inline özelliğine true ataması yaptığım için bileşene tıklayınca altında yazı belirdi.

Girdiğim şifrenin orta seviyede olduğuna dair uyarı.

Inline özelliğine true ataması yapmadığım için yanında belirdi.

Aynı seviyede “farklı” bir şifre girdim.

Şifreler farklı olduğu için hata mesajı verildi.

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda PrimeFaces’ın klavye (keyboard) bileşenlerinin kullanımı öğreneceğiz.

PrimeFaces-Password Kullanımı

Yorum Ekle

Yorum Yap X

Benzer Yazılar

Yorum Ekle

Yorum Yap X