PrimeFaces-Keyboard Kullanımı

Merhaba arkadaşlar. Password Kullanımı yazımızın ardından bu yazımızda PrimeFaces’ın sanal klavye bileşeni olan Keyboard bileşeninin kullanımını öğreneceğiz.

Keyboard bileşenini yazmakta olduğunuz uygulamarda kullanıcıyı klavyeden bağımsız hale getirmek ve işini sadece mouse ile görebilmesini sağlamak amacı ile kullanabiliriz. Örnek uygulamada ben bileşenin sadece 1 tipini anlatmadım. O da özelleştirilmiş klavye tipi. Onu bir sonraki yazı da klavyeyi nasıl Türkçe hale getirebileceğimizi öğrenirken anlatacağım. Keyboard bileşeni varsayılan olarak İngilizce harflerin üstüne kurulmuş bir bileşendir. Bu nedenle Türkçeleştirmek için özelleştirilmiş klavye tipini kullanacağız. Kodlar ve açıklamaları şu şekilde:

Keyboard.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "keyBoard")
@RequestScoped
public class KeyBoard {
String temelKullanim; 
String qwerty;
String alfabetik;
int sayisal;
String butonKullanim;
int resimKullanim;
String sifre;

    public void setSifre(String sifre) {
        this.sifre = sifre;
    }

    public String getSifre() {
        return sifre;
    }

    public int getResimKullanim() {
        return resimKullanim;
    }

    public void setResimKullanim(int resimKullanim) {
        this.resimKullanim = resimKullanim;
    }

    public void setButonKullanim(String butonKullanim) {
        this.butonKullanim = butonKullanim;
    }

    public String getButonKullanim() {
        return butonKullanim;
    }

    public void setSayisal(int sayisal) {
        this.sayisal = sayisal;
    }

    public int getSayisal() {
        return sayisal;
    }

    public void setAlfabetik(String alfabetik) {
        this.alfabetik = alfabetik;
    }

    public String getAlfabetik() {
        return alfabetik;
    }

    public void setTemelKullanim(String temelKullanim) {
        this.temelKullanim = temelKullanim;
    }

    public String getTemelKullanim() {
        return temelKullanim;
    }

    public void setQwerty(String qwerty) {
        this.qwerty = qwerty;
    }

    public String getQwerty() {
        return qwerty;
    }

}

import javax.faces.bean.ManagedBean;

import javax.faces.bean.RequestScoped;

@ManagedBean(name = "keyBoard")

@RequestScoped

public class KeyBoard {

String temelKullanim;

String qwerty;

String alfabetik;

int sayisal;

String butonKullanim;

int resimKullanim;

String sifre;

public void setSifre(String sifre) {

this.sifre = sifre;

}

public String getSifre() {

return sifre;

}

public int getResimKullanim() {

return resimKullanim;

}

public void setResimKullanim(int resimKullanim) {

this.resimKullanim = resimKullanim;

}

public void setButonKullanim(String butonKullanim) {

this.butonKullanim = butonKullanim;

}

public String getButonKullanim() {

return butonKullanim;

}

public void setSayisal(int sayisal) {

this.sayisal = sayisal;

}

public int getSayisal() {

return sayisal;

}

public void setAlfabetik(String alfabetik) {

this.alfabetik = alfabetik;

}

public String getAlfabetik() {

return alfabetik;

}

public void setTemelKullanim(String temelKullanim) {

this.temelKullanim = temelKullanim;

}

public String getTemelKullanim() {

return temelKullanim;

}

public void setQwerty(String qwerty) {

this.qwerty = qwerty;

}

public String getQwerty() {

return qwerty;

}

Java kodumuz içinde sadece değişkenler ve onların get-set metotları yer almaktadır.

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:body>
                <h:panelGrid columns="2">
                    <h:outputText value="Genel Kullanımlı Keyboard Bileşeni"/>
                    <p:keyboard id="temelKullanim" value="#{keyBoard.temelKullanim}"/>
                    
                    <h:outputText value="QWERTY Kullanımı"/>
                    <p:keyboard id="qwerty" value="#{keyBoard.qwerty}" layout="qwertyBasic"/>
                    
                    <h:outputText value="Alfabetik Sıralanmış Kullanım"/>
                    <p:keyboard id="alfabetik" value="#{keyBoard.alfabetik}" layout="alphabetic"/>
                    
                    <h:outputText value="Sayısal Değerler İçin Kullanım"/>
                    <p:keyboard id="numerik" value="#{keyBoard.sayisal}" keypadOnly="true"/>
                    
                    <h:outputText value="Butona Tıklama Yolu İle Kullanım"/>
                    <p:keyboard id="butonile" value="#{keyBoard.butonKullanim}" showMode="button" layout="qwertyBasic"/>
                    
                    <h:outputText value="Resme Tıklama Yolu İle Kullanım"/>
                    <p:keyboard id="resimile" value="#{keyBoard.resimKullanim}" showMode="button" buttonImageOnly="true"
                                buttonImage="/resources/images/keyboardpencil.png" keypadOnly="true"/>
                    
                    <h:outputText value="Şifre Şeklinde Kullanım"/>
                    <p:keyboard id="sifre" value="#{keyBoard.sifre}" password="true"/>
                    
                    <p:commandButton value="Girilen Değerleri Göster" oncomplete="PF('dialogPenceresi').show()" update="panel"/>
                    
                    <p:dialog id="degerler" showEffect="fade" hideEffect="fade" widgetVar="dialogPenceresi">
                        <p:panelGrid id="panel" columns="1">
                            <h:outputText value="#{keyBoard.temelKullanim}"/>
                            <h:outputText value="#{keyBoard.qwerty}"/>
                            <h:outputText value="#{keyBoard.alfabetik}"/>
                            <h:outputText value="#{keyBoard.sayisal}"/>
                            <h:outputText value="#{keyBoard.butonKullanim}"/>
                            <h:outputText value="#{keyBoard.resimKullanim}"/>
                            <h:outputText value="#{keyBoard.sifre}"/>
                        </p:panelGrid>
                    </p:dialog>
                    
                </h:panelGrid>
            </h:body>
        </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:body>

<h:panelGrid columns="2">

<h:outputText value="Genel Kullanımlı Keyboard Bileşeni"/>

<p:keyboard id="temelKullanim" value="#{keyBoard.temelKullanim}"/>

<h:outputText value="QWERTY Kullanımı"/>

<p:keyboard id="qwerty" value="#{keyBoard.qwerty}" layout="qwertyBasic"/>

<h:outputText value="Alfabetik Sıralanmış Kullanım"/>

<p:keyboard id="alfabetik" value="#{keyBoard.alfabetik}" layout="alphabetic"/>

<h:outputText value="Sayısal Değerler İçin Kullanım"/>

<p:keyboard id="numerik" value="#{keyBoard.sayisal}" keypadOnly="true"/>

<h:outputText value="Butona Tıklama Yolu İle Kullanım"/>

<p:keyboard id="butonile" value="#{keyBoard.butonKullanim}" showMode="button" layout="qwertyBasic"/>

<h:outputText value="Resme Tıklama Yolu İle Kullanım"/>

<p:keyboard id="resimile" value="#{keyBoard.resimKullanim}" showMode="button" buttonImageOnly="true"

buttonImage="/resources/images/keyboardpencil.png" keypadOnly="true"/>

<h:outputText value="Şifre Şeklinde Kullanım"/>

<p:keyboard id="sifre" value="#{keyBoard.sifre}" password="true"/>

<p:commandButton value="Girilen Değerleri Göster" oncomplete="PF('dialogPenceresi').show()" update="panel"/>

<p:dialog id="degerler" showEffect="fade" hideEffect="fade" widgetVar="dialogPenceresi">

<p:panelGrid id="panel" columns="1">

<h:outputText value="#{keyBoard.temelKullanim}"/>

<h:outputText value="#{keyBoard.qwerty}"/>

<h:outputText value="#{keyBoard.alfabetik}"/>

<h:outputText value="#{keyBoard.sayisal}"/>

<h:outputText value="#{keyBoard.butonKullanim}"/>

<h:outputText value="#{keyBoard.resimKullanim}"/>

<h:outputText value="#{keyBoard.sifre}"/>

</p:panelGrid>

</p:dialog>

</h:panelGrid>

</h:body>

</h:form>

</h:body>

</html>

Xhtml kodumuz içinde Keyboard bileşenini p:keyboard etiketi ile kullanıyoruz.

Eğer kullanılacak klavyede sayılar ve harflerin birlikte yer almasını istersek ekstra bir şey yapmamıza gerek yok. Sadece <p:keyboard value=”#{…}”/> dememiz yeterlidir.

Eğer gerçek klavyemizdeki QWERTY yerleşim düzenini kullanmak istersek p:keyboard etiketine layout=”qwertyBasic” ifadesini eklememiz yeterlidir. Yalnız bu durumda rakamlar ve işaretler gelmemektedir.

Eğer sanal klavyemizin alfabetik sıra içinde olmasını istersek layout=”alphabetic” ifadesini eklememiz yeterli olacaktır. Bu ifade QWERTY şeklini alfabetik sıraya soktuğu için burada da rakamlar ve işaretler gelmemektedir.

Eğer sadece sayıların kullanılabildiği bir sanal klaye kullanmak istersek keypadOnly=”true” demek bizim için yeterlidir.

Keyboard bileşeninin inputText’e tıklandığında gelmesinin dışında bir buton ya da bir resim aracılığı ile de gelmesini sağlayabiliriz.

Eğer buton vasıtası ile gelmesini istersek showMode=”button” ifadesini eklememizyeterlidi. Eğer resim vasıtası ile gelmesini istersek showMode=”button” buttonImageOnly=”true” buttonImage=”Resmin Adresi” ifadesini eklememiz gerekmetedir.

Eğer sanal klavye vasıtası ile şifre almak istersek de password=”true” eklememiz yeterlidir.

Xhtml kodumuzun geri kalan kısmı daha önce öğrendiğimiz şeylerdir. Ekran çıktılarımıza bakalım.

Ekran Çıktıları