Kuika’nın Text Input elementi, kullanıcıların uygulamalarda metin girişi yapmalarını sağlar. Kullanıcı adı, adres, kimlik numarası, telefon veya diğer metin tabanlı bilgilerin girilmesi için kullanılır. Doğrulama, maskeleme ve biçimlendirme (formatter) özellikleri sayesinde girilen verilerin tutarlı ve doğru formatta olmasını sağlar.

Text Input elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Kayıt (Register) veya Giriş (Login) formları
• Profil düzenleme ekranları
• İletişim ve destek formları
• Arama kutuları veya filtreleme alanları
• Ürün / sipariş bilgisi giriş alanları

Kullanım Senaryosu – Hesap Oluşturma (Create Account)

Bir üyelik oluşturma ekranında, kullanıcıların isim, e-posta ve şifre bilgilerini girmesi gerekir. Text Input elementi, bu alanlardan “Username” girişi için kullanılır.

Senaryoda:

• Kullanıcı “Create Your Account” ekranına gelir.
• “Username” alanına adını girer (örn. Özge Kaçar).
• “Email Address” ve “Password” alanlarını doldurur.
• Tüm bilgiler girildikten sonra “Create Account” butonuna tıklayarak hesabını oluşturur.
• Uygulama, girilen verileri doğrular ve kullanıcıyı kayıt eder.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables sekmesine tıklayın.
3. Yeni bir tablo oluşturun: CreateUsersTextInput
4. Aşağıdaki alanları ekleyin:
   
   

5. Ardından SQL Actions sekmesine gidin.
6. Yeni bir aksiyon oluşturun: CreateUserTextInput
7. Aşağıdaki SQL sorgusunu girin:

INSERT INTO Users (Username, Email, PasswordUser, CreatedAt)VALUES (@Username, @Email, @PasswordUser, SYSDATETIMEOFFSET());

Bu sorgu, Text Input ve diğer giriş alanlarından gelen verileri kaydeder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input kategorisinden Text Input elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties Panel üzerinden aşağıdaki ayarları yapılandırın:

• Placeholder: “Enter your name”
• Value: userName
• Max Length: 50
• Allow Clear: Aktif
• Formatter: Uppercase (isteğe bağlı)
• Input Mode: char

5. “Email Address” ve “Password” alanlarını da ekleyin.
6. Altına bir Checkbox ekleyin: “I agree with the terms and conditions…”
7. En alta bir Button (Create Account) elementi ekleyin.
8. Button için şu aksiyonu tanımlayın:
   
   • onClick → Managed DB → Custom SQL Action (CreateUser)
   • Parametreler:
     
     • Username → TextInput1.value
     • Email → EmailInput1.value
     • Password → PasswordInput1.value

Özelliklerin Senaryo Bağlamında Kullanılması

• Value: Kullanıcı tarafından girilen veya başlangıçta atanmış metni temsil eder.
• Placeholder: Kullanıcı veri girmeden önce görünen açıklayıcı metindir. Örnek: “Enter your name”
• Max Length: Karakter sınırı belirler. Örnek: 50 karakterden uzun kullanıcı adı girilemez.
• Allow Clear: Kullanıcının girdiği metni tek tıklamayla temizlemesini sağlar.
• Mask: Belirli formatlara göre metin girişini sınırlar (örneğin telefon veya tarih formatı).
• Formatter: Girilen metni biçimlendirir. Örnek: Uppercase → tüm harfleri büyük yazar.
• Speech To Text: Sesli komutla metin girişi yapılmasını sağlar.

Text Input Maskeleme Kullanımı

Maskeleme, kullanıcıdan belirli bir formatta veri alınmasını sağlar.
Bu özellik, özellikle tarih, telefon numarası veya plaka girişlerinde kullanılır.

Temel Mask Sembolleri:

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

Örnek Mask Formatları:

• 99/99/9999 → Tarih (örnek: 01/01/2025)
• (999)-999-9999 → Telefon (örnek: (555)-444-1212
• AA 9999 → Plaka (örnek: TR 1234)
• $999,999.00 → Para birimi (örnek: $125,340.00)

Senaryo Adımı Tamamlandığında

• Kullanıcı adını ve diğer bilgileri girer.
• “Create Account” butonuna bastığında veriler tabloya kaydedilir.
• Kayıt başarılı olduğunda kullanıcı “Login” ekranına yönlendirilir.
• Yanlış veya eksik veri girildiyse uyarı mesajı gösterilir.

Kısıtlamalar

• Çok uzun girişlerde Max Length kullanılmalıdır.
• Mask formatı yanlış tanımlandığında veri kaybı olabilir.
• Boş alan gönderimleri öncesinde doğrulama yapılmalıdır.

İpuçları ve Best Practices

• Placeholder metinlerini yönlendirici tutun: “Enter your name” gibi.
• Gereksiz biçimlendirme kullanmayın; kullanıcı deneyimini sade tutun.
• Sesli giriş (Speech To Text) özelliğiyle mobil erişilebilirliği artırın.
• Mask ve Formatter özelliklerini aynı anda kullanırken önizleme testleri yapın.
• Hatalı girişlerde kullanıcıya anında geri bildirim sağlayın (örnek: “Lütfen adınızı girin”).