1. Text Input Elementine Genel Bakış

Text Input elementi, kullanıcıların uygulama içerisinde tek satırlı metin girişi yapmasını sağlayan temel bir veri giriş elementidir. Kullanıcılar, Text Input alanı boşken placeholder (yer tutucu metin) görür ve sağ kenarda yer alan Allow Clear özelliği sayesinde girdikleri metni tek tıklamayla temizleyebilir. 

Text Input elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Ad, soyad ve kısa metin girişleri
• Arama alanları
• Başlık ve etiket girişleri
• Form alanları
• Filtreleme ve kullanıcı girdisi gerektiren ekranlar

2. Temel Özellikler

• Tek satırlı metin girişi: Kısa ve orta uzunluktaki metinler için bir giriş alanı sunar.
• Placeholder (yer tutucu metin) desteği: Alan boşken kullanıcıya beklenen giriş hakkında yönlendirici metin gösterir.
• Allow Clear ile hızlı temizleme: Kullanıcılar girdikleri metni tek tıklamayla temizleyebilir.
• Doğrulama (Validation) ile uyumlu yapı Zorunlu alan, minimum–maksimum uzunluk gibi kurallarla birlikte kullanılabilir.
• Formatlama desteği: Girilen metnin belirli kurallara göre biçimlendirilmesini sağlar.
• Dinamik değer bağlama: Değerler statik olarak girilebilir veya state, değişken ve aksiyon çıktılarıyla dinamik olarak yönetilebilir.
  

2.1. Text Input Elementi Özellikleri

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Value: Kullanıcı tarafından girilen veya başlangıçta atanmış metni temsil eder.
• Placeholder: Kullanıcı metin girmediğinde görünen bilgilendirici metindir (örn. “Adınızı girin”).
• Max Length: Kullanıcının girebileceği maksimum karakter sayısını sınırlar (örn. 30 karakter).
• Allow Clear: Sağ kenarda bulunan Sil (X) simgesiyle metnin hızlıca temizlenmesini sağlar.
• Mask: Kullanıcının belirli bir formatta metin girmesini sağlar (örn. tarih için ##/##/####).
• Formatter: Girilen metni belirli bir biçime dönüştürür:
  
  • Lowercase: Harflerin küçük harfe dönüştürülmesini sağlar.
  • Uppercase: Harflerin büyük harfe dönüştürülmesini sağlar.
• Input Mode: Klavye düzenini belirler (örn. all – tüm karakterler, char – harf ve semboller, number – yalnızca sayılar).
• Allowed Chars: Girilebilecek karakterleri belirler (örn. yalnızca rakam ve "-", "(", ")" gibi karakterler).
• Auto Complete: Kullanıcının yazdığı metne uygun öneriler sunar (örn. "İ" yazıldığında "İzmir", "İstanbul" gibi seçenekler çıkar).
• Input Mode: Klavye düzenini belirler. Seçenekler:
  
  • all: Tüm karakterlere izin verilir
  • char: Harf ve sembollere izin verilir
  • number: Yalnızca sayılar girilebilir
• Speech To Text: Sesli komutlarla metin girişi yapılmasını sağlar.

2.2. Text Input Elementinde Maskeleme

Text Input elementi, belirli formatlara uygun veri girişini sağlamak amacıyla maskeleme işlemlerini destekler. Böylece kullanıcıdan gelen verilerin doğru ve tutarlı formatta olması garanti altına alınır.

Temel Mask Sembolleri

• 9: Rakam (0-9)
• a: Harf (A-Z, a-z)
• *: Alfanümerik karakter (A-Z, a-z, 0-9)

Örnek Maske Formatları

• 99/99/9999: Tarih biçimi (örn. 01/01/2023)
• (999)-999-9999: Telefon numarası (örn. (555)-555-1234)
• $999,999.00: Para birimi (örn. $123,456.00)
• aaaa9999: Harf ve sayı karışımı (örn. ABcd2025)
• ***-***: Seri numarası formatı (örn. aZ3-bT7)
• AA 9999: Plaka formatı (örn. TR 1234)

Ülke Bazlı Telefon Formatları

• Türkiye: 999 999 99 99
• Almanya: +49 99 999 99
• Fransa: 9 99 99 99 99

Uygulama Adımları

1. Elements panelinden Text Input elementini sayfaya sürükleyin.
2. Sağ taraftaki Properties panelinden Mask bölümünü açın.
3. Mask → Fixed Value alanına:
   
   • Manuel olarak bir maske formatı girin,
   • veya veri tabanından gelen bir değer bağlayın.
4. Maskeleme ayarlarını yaptıktan sonra önizleme alarak sonucu test edebilirsiniz.

‍
2.3. Elemente Eklenebilen Aksiyonlar

Text Input elementi, kullanıcı etkileşimlerine bağlı olarak aşağıdaki tetikleyicileri (event) destekler. Bu tetikleyiciler sayesinde metin girişi anlık veya kontrollü şekilde yönetilebilir.

onChange: Kullanıcı Text Input alanındaki değeri her değiştirdiğinde tetiklenir.

Kullanım senaryoları:

• Girilen metni state veya değişkenlere anlık olarak aktarmak
• Canlı arama veya filtreleme yapmak
• Dinamik alan gösterimi / gizleme
• Anlık doğrulama veya karakter sayımı

onBlur: Kullanıcı Text Input alanından odak kaybettiğinde tetiklenir.

Kullanım senaryoları:

• Kullanıcı yazmayı tamamladıktan sonra doğrulama yapmak
• Boş veya hatalı girişlerde uyarı göstermek
• Alan bazlı kontrol ve veri temizleme işlemleri

onPressEnter: Kullanıcı Text Input alanında Enter tuşuna bastığında tetiklenir.

Kullanım senaryoları:

• Form submit işlemini başlatmak
• Arama veya filtreleme aksiyonunu tetiklemek
• Kullanıcıyı bir sonraki adıma yönlendirmek

3. Text Input Elementi Nasıl Kullanılır? 

Bu bölümde Text Input elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Kayıt Formu ile Kullanıcı Bilgilerinin Alınması

Bir uygulamada kullanıcıların temel bilgilerini hızlı ve düzenli bir şekilde sisteme kaydedebilmesi için Kayıt Formu kullanılır. Bu senaryoda form, kullanıcıdan gerekli bilgileri adım adım alarak tek bir işlemle kayıt oluşturmayı amaçlar.

Senaryoda:

• Kullanıcı, Ad Soyad alanına kimlik bilgilerini metin olarak girer.
• Mail Adresi alanına geçerli bir e-posta adresi girilir; bu alan iletişim ve doğrulama süreçlerinde kullanılmak üzere kaydedilir.
  (Not: Mail alanı örnek olması amacıyla oluşturulmuştur. Daha verimli ve doğru kullanım için Email elementi tercih edilebilir.)
• Ev Adresi alanına adres bilgisini serbest metin şeklinde girer.
• Tüm alanlar doldurulduktan sonra Kaydet butonuna tıklanır.
• Kaydetme işlemiyle birlikte girilen bilgiler sisteme aktarılır ve kullanıcıya işlemin başarılı olduğuna dair geri bildirim sağlanır.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “UserRegistrations” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • FullName:  Kullanıcının ad ve soyad bilgisini tutar.
  • EmailAddress: Kullanıcının e-posta adresini saklar. İletişim ve doğrulama amaçlı kullanılır.
  • HomeAddress: Kullanıcının ev adresi bilgisini içerir.
  • CreatedAt: Kayıt işleminin gerçekleştirildiği tarih ve saati tutar.

Adım 2 - Gerekli Aksiyonu Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

• İki aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
  

• Örnek Verileri Listeleyen Aksiyon (GetUserRegistrations):

SELECT * FROM UserRegistrations;

Uygularken UserRegistrations kısmını silip tekrar UserRegistrations yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Elementlerin Eklenmesi ve Ayarlanması

• Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
• Yazı stilini Label > Styling > Text > Style > Heading 5 olarak ayarlayın.
  

• Yazıyı Label > Properties > Value > “Kayıt Formu” olarak ekleyin.
• Sayfaya Elements > Text Input > TextInput elementini sürükleyip bırakın.
• Text Input içerisindeki ön yazıya TextInput > Properties > Placeholder > “Ad Soyad” yazısını ekleyin.
  

• Karakter sınırını TextInput > Properties > MaxLength > 200 olarak ayarlayın.
  

• Yazılan kolayca temizlenmesi için TextInput > Properties > AllowClear > Açık olarak ayarlayın.
  

• Konuşmayla yazı oluşturmak için TextInput > Properties > SpeechToText > Açık olarak tanımlayın.
  

• TextInput elementine tıklayın üzerinde açılan seçeneklerden ilki “Duplicate” seçeneğine basın ve elementi çoğaltın.
  

•  Alttaki Text Input elementine tıklayın ve aşağıdaki boşluğa sürükleyerek aynı Col içerisindeki elementleri ayırın.
  

•  Ön yazıyı TextInput2 > Properties > Placeholder > “Mail Adresi” olarak güncelleyin.
•  Mail adres karakter sınırını standartlara uygun TextInput2 > Properties > MaxLength > 254 olarak ayarlayın.
•  Mail adresinde konuşarak yazmayı TextInput2 > Properties > SpeechToText > Kapalı olarak güncelleyin.
•  TextInput2 elementine tıklayın üzerinde açılan seçeneklerden ilki “Duplicate” seçeneğine basın ve elementi çoğaltın.
  

•  Alttaki TextInput3 elementine tıklayın ve aşağıdaki boşluğa sürükleyerek aynı Col içerisindeki elementleri ayırın.
  

•  Ön yazıyı TextInput3 > Properties > Placeholder > “Ev Adresi” olarak güncelleyin.
•  Mail adres karakter sınırını standartlara uygun TextInput3 > Properties > MaxLength > 400 olarak ayarlayın.
•  Ev adresinde konuşarak yazmayı TextInput3 > Properties > SpeechToText > Açık olarak güncelleyin.
• Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
• Button yazısını Button > Properties > Label > “Kaydet” olarak düzenleyin.
  

• Button elementine kayıt aksiyonunu Button > Add Action > onClick > ManagedDb > Save Record ekleyin.
  

•  Save Record aksiyonunda UserRegistrations tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin. 

• CreatedDate alanını Default > Now olarak tanımlayın.
  

• EmailAddress alanını Components > TextInput2 > value olarak tanımlayın.
  

• FullName alanını Components > TextInput1 > value olarak tanımlayın.
  

•  HomeAddress alanını Components > TextInput3 > value olarak tanımlayın.
  

• Id alanını Default > New Guid olarak tanımlayın.
  

•  Tanımlamalar sonucunda Save Record aksiyonun tüm alanları aşağıdaki gibi olmalıdır.
  
  

•  Daha önce kaydedilen ve yeni kaydedilen kayıtları butona tıkladıktan sonra görebilmek için Button > Add Action > onClick > Custom > Managed DB > GetUserRegistrations aksiyonunu ekleyin.
  

Kayıt sayfasında işlemler tamamlandıktan sonra yönlendirme yapıldığı için Set Value Of aksiyonuyla kayıt sonrası Text Input içeriklerini temizleme işlemi yapılmamıştır.

•  Sayfa açıldığında geçmiş yazıları da görebilmek için Sayfaya Add Action > Initial Action > Custom > Managed DB > GetUserRegistrations aksiyonunu ekleyin.
  

• Sol yan paneldeki Action Tree alanından GetUserRegistrations aksiyonun yanındaki mavi ikonuna basılı tutup sayfaya sürükleyin.
  

•  Açılan pencerede ilgili alanları seçin ve oluşturun.
  

•  Sayfa son durumda aşağıdaki gibi olmalıdır.
  

Preview:

Uygulama test edildiğinde, kullanıcı Ad Soyad, Mail Adresi ve Ev Adresi bilgilerini tek bir form üzerinden kolayca girer. Metin alanlarında klavye ile giriş yapılabildiği gibi, mikrofon simgesi kullanılarak sesle veri girişi de gerçekleştirilebilir.

Form doldurulduktan sonra Kaydet butonuna tıklandığında bilgiler sisteme eklenir ve alt bölümde yer alan tabloda; girilen ad-soyad, e-posta adresi, ev adresi ve kayıt tarihi bilgileri anlık olarak listelenir.

Bu yapı sayesinde kullanıcı bilgileri hızlı, düzenli ve doğrulanabilir bir şekilde kayıt altına alınır.

4. Ortak Özellikler (Properties)

Text Input elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Kısa ve tek satırlı metinler için kullanın. Uzun içerikler için Text Area tercih edilmelidir.
• onPressEnter ile hızlı akış sağlayın. Arama, filtreleme veya form gönderimi senaryolarında kullanıcıyı hızlandırır.
• Placeholder ile kullanıcıyı yönlendirin. Beklenen giriş formatını netleştirin.

6. Kısıtlamalar

• Text Input elementi çok satırlı metin girişini desteklemez.
• Zengin metin veya biçimlendirme (bold, link vb.) özellikleri yoktur.
• Gelişmiş doğrulama senaryoları için ek Validation kuralları gerekir.
• Görsel veya dosya girişi desteklemez.