Skip to main content

TextArea

Kullanıcının çok satırlı, uzun metin girebileceği nesnedir. Açıklama, not, gerekçe ya da serbest metin gibi bir satıra sığmayan alanlar için kullanılır.

Değer tipi: string

Ne zaman kullanılır?

Birden fazla satıra yayılan uzun metinler için idealdir: açıklama, gerekçe, not, talep detayı. Tek satırlık kısa metinlerde TextBox, belirli bir biçim gereken alanlarda MaskInput daha uygundur.

Tasarımcı özellikleri

Bir TextArea seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.

General

ÖzellikAçıklama
NameNesnenin koddaki adı (ör. TextArea1). Koddan bu adla erişirsiniz.
Field NameVeritabanındaki alanın adı.
SizeAlanın veritabanındaki uzunluğu. Uzun metinlerde bu değeri yeterince büyük tutun.

Label

Nesnenin yanındaki etiketi yönetir.

ÖzellikAçıklama
Caption / TextEtiketin yazısı (çok dilli olabilir).
PositionEtiketin yeri: solda (Left) veya üstte (Top).
Width / HeightEtiketin boyutu.
FontYazı tipi, kalın / italik / altı çizili.
Show ColonEtiketin sonuna iki nokta (:) ekler.
Horizontal Align / Vertical AlignEtiketin hizası.
VisibleEtiketi gösterir veya gizler.

Behavior

ÖzellikAçıklama
ReadOnlyAlanı salt okunur yapar.
RequiredAlanı zorunlu yapar; boşsa form kaydedilmez.
MaxLengthEn fazla kaç karakter girilebileceğini sınırlar.
RowsAlanın kaç satır yüksekliğinde görüneceğini belirler. TextArea'yı TextBox'tan ayıran özelliktir.
Tab IndexTab tuşuyla geçiş sırasını belirler.
Is Secret DataDeğeri hassas veri sayar; loglarda gizlenir.
Enable MultiLanguage TextÇok dilli değer girişini açar.

Appearance

ÖzellikAçıklama
Visible / Client VisibleNesnenin görünürlüğü.
Enabled / Client EnabledNesnenin aktif olup olmadığı.
PlaceholderAlan boşken görünen soluk ipucu yazısı.
Text AlignYazının hizası.
TitleFareyle üzerine gelince çıkan ipucu (tooltip).
Show Character CounterKarakter sayacını gösterir. Uzun metin alanlarında kullanıcıya kalan karakteri gösterir.

Olaylar

Bir nesne açılırken olaylar belirli bir sırayla tetiklenir; kullanıcı alana dokununca da ayrı olaylar çalışır. Doğru kodu doğru olaya yazmak için bu sırayı bilmek işinizi kolaylaştırır.

Açılış sırası: OnInitOnLoadOnDataLoadOnPreRenderOnRender

Kullanıcı yazarken: OnTextChangingOnTextChanged, alandan çıkınca OnValueChangingOnValueChanged

Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda. TextArea'nın iki tarafta sunduğu olaylar farklıdır.

Sunucu olayları (Server)

OlayNe zaman çalışır
OnInitForm açılırken nesne oluşturulduğunda, en başta.
OnLoadOnInit'in hemen ardından, nesne yüklenince.
OnRenderNesne ekrana çizilirken.
OnTextChangingKullanıcı yazarken, metin değişmeden hemen önce.
OnTextChangedMetin değiştikten hemen sonra.
OnValueChangingDeğer değişmeden hemen önce (iptal edilebilir).
OnValueChangedKullanıcı alandan çıkıp değer kesinleştiğinde. En sık kullanılan olaydır.
OnValidatingAlan doğrulanırken çalışır; geçerlilik kontrolü buraya yazılır.
OnMultiLanguageTextChanging / OnMultiLanguageTextChangedÇok dilli metin değişmeden önce / sonra.

İstemci olayları (Client)

Sunucudaki olaylara ek olarak tarayıcı tarafında şunlar da vardır:

OlayNe zaman çalışır
OnDataLoadNesnenin verisi yüklendiğinde.
OnPreRenderNesne ekrana çizilmeden hemen önce.
OnClick / OnDoubleClickNesneye tıklanınca / çift tıklanınca.
OnPropertyChanging / OnPropertyChangedBir özellik kodla değiştirilmeden önce / sonra.
Olay parametreleri

OnValueChanging / OnTextChanging olaylarının parametresi (args TS, e C#) şunları taşır:

  • newValue / NewValue — girilmek istenen yeni değer
  • oldValue / OldValue — önceki değer
  • cancel / Canceltrue yapılırsa değişiklik iptal edilir (yalnızca Changing olaylarında)

Changed olaylarında cancel yoktur (değişiklik artık gerçekleşmiştir).

Kod örnekleri

Bir TextArea'ya üç yerden erişebilirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.

Form kodu (C#, sunucu)

Form kodunda nesneye doğrudan adıyla erişirsiniz:

// Oku
string aciklama = TextArea1.Value.ToString();

// Yaz
TextArea1.Value = "Talep gerekçesi buraya yazılır.";
TextArea1.Text = "Talep gerekçesi buraya yazılır.";

Akış (Flow) kodu (C#, sunucu)

Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:

// Oku
string aciklama = Document1.Controls["TextArea1"].Value.ToString();

// Yaz
Document1.Controls["TextArea1"].Value = "Talep gerekçesi buraya yazılır.";
Document1.Controls["TextArea1"].Text = "Talep gerekçesi buraya yazılır.";

İstemci kodu (TypeScript, tarayıcı)

İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır (value, text):

this.TextArea1.value = "";
this.TextArea1.text = "";
.Value mi .Text mi?

.Value saklanan değerdir, .Text ekranda görünen metindir. TextArea için ikisi de string'tir; yazarken ikisini de aynı yazıyla set etmeye özen gösterin.

Örnek: değeri doğrulama (OnValueChanging)

OnValueChanging değer değişmeden hemen önce çalışır; istemediğiniz bir değeri burada iptal edebilirsiniz. Aşağıdaki örnekte 10 karakterden kısa bir açıklama girilmesi engellenir.

İstemci (TypeScript):

async TextArea1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<string>) {
if (args.newValue != null && args.newValue.length < 10) {
args.cancel = true; // Değer değişimini iptal eder
this.showMessage("Uyarı", "Açıklama en az 10 karakter olmalıdır.", "Validation");
}
}

Sunucu (C#):

void TextArea1_OnValueChanging(object sender, PropertyChangingEventArgs<string> e)
{
if (e.NewValue != null && e.NewValue.Length < 10)
{
e.Cancel = true;
ShowMessage("Uyarı", "Açıklama en az 10 karakter olmalıdır.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}

İpuçları

  • Rows özelliğiyle alanın kaç satır yüksekliğinde görüneceğini ayarlayın; uzun açıklamalar için 4-6 satır rahat bir başlangıçtır.
  • Uzun metinlerde Show Character Counter özelliğini açarak kullanıcıya kalan karakteri gösterin; MaxLength ile birlikte iyi çalışır.
  • Tek satırlık kısa metinler için TextArea yerine TextBox kullanın.
Tüm tasarımcı özellikleri (tam liste)

General: Name, Field Name, Size

Label: Caption, Text, Position, Left, Width, Height, Font (Bold / Italic / Underline), Ellipsis, Visible, Show Colon, Horizontal Align, Vertical Align, Mark Char, Mark Position

Behavior: ReadOnly, Required, MaxLength, Rows, Tab Index, Is Secret Data, Enable MultiLanguage Text

Appearance: Visible, Client Visible, Enabled, Client Enabled, Placeholder, Text Align, Title, Show Character Counter, Text, Value

Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnPropertyChanging, OnPropertyChanged, OnClick, OnDoubleClick, OnDataLoad, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged

Olaylar (Server): OnInit, OnLoad, OnRender, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged