Angular 11 ile direktiflere sahip ekran klavyesi

Herkese merhaba, bugün dokunmatik ekranlarda çalışacak bir ekran klavyesini Angular 11 versiyonu ile nasıl yazarız bunu öğreneceğiz. Amacımız html input tagına yazılacak bir directive ile ekranımızda bir sanal klavye göstermek olacaktır.

Angular 2+ sürümlerinde yer alan ekran klavyesi görevini aynı şekilde yerine getiren hali hazırda ngx paketleri yer almaktadır fakat biz bu işi direktifler ile nasıl yazarız nasıl özelleştirebiliriz ona bakacağız.

Angular projemizi “ng new projectName” komutu ile oluşturduktan sonra app klasörü içerisinde “services” adlı bir klasör oluşturalım ve yazacağımız servisleri bu klasörde toplayalım. “ng g service serviceName” komutu ile service sınıfımızı “services” klasörü içerisine oluşturduktan sonra kodlamamıza geçelim.

Yukarıda yazmış olduğumuz keyboard service sınıfımız yazacağımız keyboard directive sınıfı ile beraber konuşarak ekranda yer alan klavyede click yapılan her tuşun textini alarak ekrandaki inputa yazacaktır. Şimdi app klasörü içerisinde “directives” adlı bir klasör oluşturalım ve yazacağımız direktifleri bu klasörde toplayalım.

Directives sınıfımızın en altına ise mouse yada ekran click’ini dinleyecek host listenerimızı yazarak click eventi’ni dinleyelim.

@HostListener(‘click’)

onClick() {

this.keyboard.fireKeyPressed(this.currentValue);

}

Yukarıda görselde yer alan directive sınıfımızın işleyişine geçersek. Directive sınıfımız uygulama açıldığında inputa tıklandığı an devreye girecek. Alfabetik karakterleri toUpperCase() methodu ile büyük harfe dönüştürerek servis sınıfımıza push edecek ve servis sınıfımızı kullanan UI ekranımız aldığı çıktıyı ekranda gösterecek. HostListener ile dinlediğimiz ‘click’ eventi ise mouse yada ekrana her click yapıldıgında ilgili key’in textini alarak input içerisinde yazmamıza yardımcı olacaktır.

Directives klasörümüz içerisine osk-input.directive adında bir directive sınıfı oluşturarak inputa tıklandığı zaman sanal klavyemizin ekranda görülmesini istiyoruz. Ekranda boş alanlara tıklandığında sanal klavyemiz kapanır görünmez input içerisine click olduğu an ekranın alt kısmında çıkarak kullanıcıların kullanmasına yardımcı olur. Burada sanal klavyemizi ekranın istediğimiz alanında çıkartabiliriz ve ben ekranımın altında çıkmasını istediğim için özelleştirme yapmayacağım.

osk-input.directive sınıfımızın örnek kodları yukarıdaki görsellerde verilmiştir. Ekrandan inputa focus veya click olunduğunda çalışacak ve Sanal klavyemizde delete tuşuna basıldıkça tetiklenecek metodumuz yazılmıştır.

Artık UI ekranımızda gözükecek ekranımızın kodlarına geçebiliriz.

İster app-component.html dosyasına ister benim gibi ayrı bir componenet oluşturarak html dosyasına yukarıdaki gibi özelleştirilmiş sanal klavye kodlarınızı yazabilirsiniz. Yukarıdaki kodları yazdığımız componentin .ts dosyasına giderek aşağıda yer alan kodları yazalım.

ngOnInit ve ngOnDestroy gibi Angular life cycle methodların ne gibi durumlarda çalıştığını merak ederseniz internette kısa bir araştırma yaparak amacınıza ulaşmış olursunuz. Makale konusu gereği ben bu konuya değinmeyeceğim.

Evet artık directive sınıflarımızı yazdığımıza göre tek yapmamız gereken ekranın her hangi bir alanında gözükecek bir input yaratmak ve o inputa yazmış olduğumuz directive vererek sanal klavyemizin çalışıp çalışmadığını kontrol etmek.

Gördüğünüz üzere ekranda yer alan inputa yazdığımız directive vererek ekrandaki inputa click yapıldığında input ’un altında açılacak olan sanal klavye componentimizi çağırdık.

ve sanal klavyemiz yukarıda görüldüğü üzere hazır bir şekilde gelmektedir. Angular da input’lara bu şekilde directive’ler yazarak projelerinizin gereksinimlerine göre özelleştirmeler ve geliştirmeler yapabilirsiniz.

Proje kodları: github.com/vmutlu/Virtual-Onscreen-Keyboard

İlgilenenlere faydalı olması dileğiyle.

Junior Software Developer