Text Area elementi, kullanıcıların uzun ve çok satırlı metinler girmesini sağlayan bir veri giriş elementidir. Standart tek satırlı input alanlarına kıyasla daha geniş bir yazım alanı sunarak metinlerin rahatça yazılmasını ve düzenlenmesini mümkün kılar.
Text Area elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Açıklama ve yorum alanları
Geri bildirim ve iletişim formları
Not ve detay bilgi girişleri
Uzun metin gerektiren form alanları
İçerik ve açıklama odaklı ekranlar
2. Temel Özellikler
Çok satırlı metin girişi: Kullanıcılar tek alanda birden fazla satır içeren metinler yazabilir.
Geniş ve okunabilir yazım alanı: Uzun metinlerin yazımı ve görüntülenmesi daha konforludur.
Dinamik değer bağlama desteği: Değerler state, değişken veya aksiyon çıktıları üzerinden yönetilebilir.
2.1. Text Area Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Value: Kullanıcı tarafından girilen metni temsil eder. Statik bir değer ekleyebilir veya Symbol Picker kullanarak başka elementlerden veya aksiyonlardan gelen verileri dinamik olarak gösterebilirsiniz.
Placeholder: Kullanıcı giriş yapmadan önce görünen yer tutucu metindir (örn. “Buraya metninizi yazın”).
Allow Clear: Kullanıcının metni hızlıca silmesi için sağ kenarda bir Delete (X) simgesi görüntüler.
Autosize: Kullanıcının girdiği metnin uzunluğuna bağlı olarak Text Area elementinin yüksekliğini otomatik olarak ayarlar.
Max Length: Kullanıcının girebileceği maksimum karakter sayısını belirler (örn. 200 karakter sınırı).
Show Count: Kullanıcının girdiği karakter sayısını gerçek zamanlı olarak gösterir.
Formatter: Girilen metnin belirli bir biçime (örn. tümü büyük harf, küçük harf) otomatik olarak dönüştürülmesini sağlar.
Read Only: Metin alanını yalnızca okunabilir hale getirir. Kullanıcılar içeriği görebilir ancak düzenleme yapamaz.
Speech To Text: Sesli komutlarla metin girişi yapılmasını sağlar.
2.2. Elemente Eklenebilen Aksiyonlar
Text Area elementi, kullanıcı etkileşimlerine bağlı olarak birden fazla tetikleyici (event) destekler. Bu tetikleyiciler sayesinde uzun metin girişleri kontrollü şekilde yönetilebilir.
onChange: Kullanıcı Text Area içeriğini her değiştirdiğinde tetiklenir.
Kullanım senaryoları:
Girilen metni state veya değişkenlere aktarmak
Canlı karakter sayımı yapmak
Dinamik alan gösterimi veya filtreleme
onPressEnter: Kullanıcı Text Area alanında Enter tuşuna bastığında tetiklenir.
Kullanım senaryoları:
Form submit işlemini başlatmak
Kullanıcıyı bir sonraki adıma yönlendirmek
Metin girişini tamamlandı olarak işaretlemek
onResize: Kullanıcı Text Area alanının boyutunu değiştirdiğinde tetiklenir.
Kullanım senaryoları:
Alan boyutuna göre UI düzenini güncellemek
Dinamik layout veya responsive ayarlamalar yapmak
onBlur: Kullanıcı Text Area alanından odak kaybettiğinde tetiklenir.
Kullanım senaryoları:
Metin girişini tamamladıktan sonra doğrulama yapmak
Boş veya hatalı içerikler için uyarı göstermek
3. Text Area Elementi Nasıl Kullanılır?
Bu bölümde Text Area elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Hizmet Değerlendirme ve Geri Bildirim Paylaşımı
Bir uygulamada kullanıcılar, aldıkları hizmetle ilgili deneyimlerini detaylı ve anlaşılır bir şekilde paylaşmak ister. Hizmeti Değerlendir alanı, bu senaryoda kullanıcıların görüş, öneri ve memnuniyet durumlarını tek bir metin alanı üzerinden rahatça ifade edebilmesini sağlar.
Senaryoda:
Kullanıcı, Hizmeti Değerlendir başlığı altında yer alan metin alanına hizmetle ilgili yorumunu yazar.
Metin alanı, uzun içerik girişine uygun olacak şekilde geniş bir kullanım alanı sunar.
Yazılan içerik anlık olarak alan içerisinde görüntülenir ve karakter sayacı sayesinde kullanıcı, maksimum karakter sınırını takip edebilir.
Kullanıcı dilerse metni düzenleyebilir veya temizleyerek yeniden yazabilir.
Geri bildirim tamamlandığında Paylaş butonuna tıklanarak değerlendirme sisteme kaydedilir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“UserReviews” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
CommentText kolonunda Size alanını Max veya 500 olarak ayarlayın.
Önemli Alan adları:
CommentText: Text Area üzerinden girilen metin içeriğini tutar. Fikir ve görüş gibi serbest içerikler bu alanda saklanır.
CreatedDate: İçeriğin oluşturulduğu tarih ve saat bilgisini belirtir. Kayıtların zaman bazlı takibi için kullanılır.
UserName: İçeriği oluşturan kullanıcıya veya kaynağa ait bilgiyi tutar. Kullanıcı bazlı içerik ayrımı ve yetkilendirme senaryolarında kullanılır.
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 (GetUserReviews):
SELECT * FROM UserReviews;
Uygularken UserReviews kısmınısiliptekrar UserReviews 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 > “Hizmeti Değerlendir” olarak ekleyin.
Sayfaya Elements > Text Input > TextArea elementini sürükleyip bırakın.
Text Area içerisindeki ön yazıya TextArea > Properties > Placeholder > “Fikir ve Görüşlerinizi Yazınız” yazısını ekleyin.
Yazılan kolayca temizlenmesi için TextArea > Properties > AllowClear > Açık olarak ayarlayın.
Maksimum karakter sayısını TextArea > Properties > MaxLenght > 500 olarak tanımlayın.
Karakter sınırı ve sayısını göstermek için TextArea > Properties > ShowCount > Açık olarak tanımlayın.
Konuşmayla yazı oluşturmak için TextArea > Properties > SpeechToText > Açık olarak tanımlayın.
Yazı eklendikçe otomatik şekilde yazı alanın büyümesi için TextArea > Properties > AutoSize > Açık olarak ayarlayabilirsiniz. Kullanılan senaryoda 500 karakter sınırı olduğu için TextArea > Styling > Layout > Height > 200 px olarak tanımlanmıştır.
Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
Button elementine kayıt aksiyonunu Button > Add Action > onClick > ManagedDb > Save Record ekleyin.
Save Record aksiyonunda UserReviews tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin.
CommentText alanını Components > TextArea > value olarak tanımlayın.
CreatedDate alanını Default > Now olarak tanımlayın.
UserName alanını Default > User > Current Username 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 > GetUserReviews aksiyonunu ekleyin.
Yorum kaydedildikten sonra Text Areanın temizlenmesi için Button > Add Action > onClick > UIControl > Set Value Of aksiyonunu ekleyin.
Set Value Of aksiyonunda alanları, Component to Change olarak TextArea1, Value olarak Default > Empty olacak şekilde aşağıdaki gibi tanımlayın.
Sayfa açıldığında geçmiş yazıları da görebilmek için Sayfaya Add Action > Initial Action > Custom > Managed DB > GetUserReviews aksiyonunu ekleyin.
Sol yan paneldeki Action Tree alanından GetUserReviews 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ı Hizmeti Değerlendir alanına yorumunu yazarak veya sağ alt köşedeki mikrofon ikonunu kullanarak sesli giriş yapabilir. Metin alanı sağ alt köşesinden genişletilip daraltılabilir; sağ altta yer alan sayaç üzerinden karakter sayısı ve 500 karakter sınırı anlık olarak takip edilir.
Kullanıcı, sol üstteki X ikonuna tıklayarak metin alanını tek hamlede temizleyebilir. Paylaş butonuna basıldığında girilen değerlendirme tabloya eklenir ve işlem tamamlandığında metin alanı otomatik olarak temizlenerek yeni yorum girişi için hazır hâle gelir.
Sayfanın altında yer alan Tablo üzerinde daha önce eklenmiş ve yeni eklenen verileri görebilirsiniz.
4. Ortak Özellikler (Properties)
Text Area 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:
