PrimeFaces-Keyboard Bileşenini Özelleştirme

Merhaba arkadaşlar. Keyboard Kullanımı yazımızda belirttiğimiz üzere bu yazıda Keyboard bileşenini özelleştirmeyi ve onu Türkçe kullanıma uygun hale getirmeyi öğreneceğiz.

Keyboard bileşeninde ekranda görünecek harfleri ve rakamları biz belirleyeceğimiz zaman yerleşim düzenini etkiletyen özellik olan layout özelliğine custom atamasını yapıyoruz. Akabinde layoutTemplate özelliği ile ekranda nelerin gözükeceğine karar veriyoruz.

Şimdi bir kaç örnek ile bu durumu daha anlaşılır hale getirmeye çalışalım. İlk örneğimizde inputText’e tıklandığında çıkacak olan klavyede ilkay günel KOD5 yazmasını sağlayalım.

<?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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Merhaba</title>
</h:head>
<h:body>
    <h:form>
        <p:keyboard layout="custom" layoutTemplate="ilkay,günel,KOD5"/>
    </h:form>
</h:body>
</html>

Ekran çıktısında gördüğünüz gibi kullanılabilir harfler bizim verdiğimiz harfler olarak görüntülendi.

İkinci örneğimizde boşluk bırakma, girilen harfi silme, tüm girilen içeriği silme ve kapatma tuşlarını da ekleyelim klavyemize.

Boşluk bırakmak için yazılmış butonu layoutTemplate’mize spacebar eklemesini yaparak çağırabiliriz.

Girilen harfi silmek için normalde layuotTemplate’mize back eklemesini yapmamız yeterli. Ama biz bileşeni Türkçe hale getirmeye çalıştığımız için back özelliğinin varsayılan içeriğini değiştirmemiz gerekiyor ve bunun içinde backspaceLabel özelliğine görünmesini istediğimiz yazıyı atıyoruz. Daha sonra – işareti ile harf dizisinin yanına back yazıyoruz. Bu örnek için ben görünmesini istediğim yazı olarak Sil yazdım.

InputText içine girilmiş tüm ifadenin silinmesi için de clear butonunu kullanıyoruz ve bu butona Türkçe atama yapmak için clearLabel özelliğini kullanıyoruz. Yalnız burada değinmem gereken başka bir nokta daha var. Butonun içeriğinde Temizle yazısını göstermek istememe rağmen tarayıcıda Temiz şeklinde çıkıyordu. Bu sorunu btsoru.com‘da sordum ve gelen cevapta butonun boyutunu büyütmem gerektiğini ve bunu da head etiketleri arasına bir stil tanımlaması yaparak halledebileceğimi öğrendim. Aşağıdaki xhtml kodunda ben sadece clear butonun boyutunu genişlettim. Eğer tüm butonlarının boyutunu genişletmek ya da daraltmak isterseniz .keypad-clear yerine .keypad-key yazmanız yeterli. Eğer başka bir butonu özelleştirmek isterseniz şu listeden butonunuzu seçmeniz gerekiyor:

CLEAR => ' keypad-clear'
BACK => ' keypad-back'
CLOSE => ' keypad-close'
SHIFT => ' keypad-shift'
ENTER => ' keypad-enter'
SPACE_BAR => ' keypad-spacebar'

Keyboard bileşenini kapatmak için close butonunu çağırıyoruz ve bu butonun içine Türkçe atamamızı closeLabel ile yapıyoruz.

<?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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <style type="text/css">

        .custom  .keypad-clear {
            width: 68px;
        }
    </style>
    <title>Merhaba</title>
</h:head>
<h:body>
    <h:form>
        <p:keyboard  styleClass="custom" layout="custom" backspaceLabel="Sil" closeLabel="Kapat"
                    clearLabel="Temizle" layoutTemplate="ilkay-back,günel-clear,KOD5-close,spacebar"/>
    </h:form>
</h:body>
</html>

Son örneğimizde klavyemizi kendi alfabemize göre yazalım ve harfleri büyütüp küçültmek için shift butonunu ekleyelim. Yalnız burada birçok yere sormama rağmen çözemediğim bir sorun var. ‘i’ harfi shift tuşu aracılığı ile büyütüldüğünde ‘I’ harfine dönüşmekte. Diğer tüm Türkçe karakterler sorunsuz çalışırken ‘i’ ve ‘ı’ harflerini büyüttüğümüzde ikisi de ‘I’ harfi olmakta. PrimeFaces İngilizce üzerine inşa edildiği için bu sorun normal bir sorun. Bu sorunun çözümüne dair birşey bulabilirsem paylaşacağım.

<?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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <style type="text/css">

        .custom  .keypad-clear {
            width: 68px;
        }
    </style>
    <title>Merhaba</title>
</h:head>
<h:body>
    <h:form>
        <p:keyboard  styleClass="custom" layout="custom" backspaceLabel="Sil" closeLabel="Kapat"
                     clearLabel="Temizle" layoutTemplate="abcçd-back,efgğh-clear,ıijkl-close,mnoöp-shift,spacebar"/>
    </h:form>
</h:body>
</html>

Genel olarak keyboard bileşenini bu şekilde özelleştiriyoruz ve Türkçe’leştirmelerimizi yapabiliyoruz arkadaşlar. Gelecek yazıda Rating (Oylama) bileşenini inceleyeceğiz. Sağlıcakla kalın.

Benzer Yazılar

Yorum Yap X