Component Data Binding

Databinding, çeşitli aksiyonlarla hesaplanan verilerin arayüzdeki bileşenler aracılığıyla gösterilmesi işlemidir. Örnek olarak bir personel kayıt ve güncelleme ekranını ele alalım.

Bu ekranda, güncelleme işlemi için personele ait veriler bir SQL aksiyonu aracılığıyla ekrandaki bileşenlere bağlanır ve bu bileşenlerde SQL'de yer alan veriler gösterilir. Bu öğrenme içeriğinde, Form Ekranlarında Basit Bileşenlere Databinding, Form Ekranlarında SelectBox elementine Databinding ve Liste Ekranlarında Databinding konularını inceleyeceğiz.

Bu işlemi gerçekleştirmek için, elementlerin Properties panelinde yer alan Value özelliği kullanılır. Value özelliği içerisinde yer alan Symbol Picker, ilgili arayüze daha önce eklenmiş farklı değişkenleri gruplar halinde gösterir. Bu gruplar; daha önce çalıştırılmış aksiyonların sonuçları Action Results, arayüze parametre olarak geçirilmiş değişkenler Screen Input, sabit veriler Fixed Value, sistem değişkenleri Default ve benzerlerini içerir.

Yeni personel ekleme ekranı örneğine devam edecek olursak, bu ekranda bir personelin bilgilerini güncellemeyi ya da yeni bir personel oluştururacağımızı varsayalım. İlk olarak, PersonnelPrm adında Guid tipinde bir Screen Input tanımlamamız gerekir. Bu Screen Input, arayüzde gösterilecek olan personelin anahtar değeridir. İlgili personelin tüm verilerine ulaşmak için bir Initial Action çalıştırmalıyız. Bu Initial Action için SelectPersonnelById adında bir SQL aksiyonu oluşturalım. 

1. Custom Action Panelini açalım. Bu panelde Yeni bir Select Action oluşturup ve isimlendirelim.
2. Choose Source alanında yer alan + ikonuna tıklayarak Personnel tablosunu seçelim.
3. Personnel tablosu yanında yer alan link ikonuna tıklayarak açılan ekrandan Personnel tablosuyla ilişkili olan Department tablosunu seçelim. 
4. Field sekmesinde varsayılan olarak gelen alanların yanı sıra Personnel tablosunda yer alan ID kolonunu ekleyip, Alias alanında PersonnelID adını verelim. 
5. Devamında FullName, PersonnelImage, Status ve Title alanlarını ekleyelim ve son olarak Department tablosunda yer alan Id alanını ekleyelim. 
6. Alias alanında DepartmentID ismini verelim. Filter sekmesinde Personnel tablosunu ve tablodaki ID alanını seçelim. 
7. Varsayılan olarak gelen Is Equal To seçimini seçili halde bırakalım. Sağda bulunan alanda Symbol Picker SQL Parameter seçimini yapıp, ilgili alana Id yazalım.
8. Create butonuna tıklayarak aksiyonu kaydedelim.
9. Şimdi ilgili ekranda Add Action butonuna tıklayıp, Initial Action olarak SelectPersonnelById aksiyonunu ekleyelim. Id parametresini Symbol Picker aracılığıyla Screen Input olarak tanımlayalım.
10. Şimdi ekranda, personel bilgilerinin listeleneceği her bir elementin Properties panelinde yer alan Value özelliğinde, Symbol Picker kullanarak, Action Result’ta bulunan SelectPersonnelById aksiyonundaki her bir değeri ilgili alanlara bağlayın.
11. SelectBox ile birden fazla departman içerisinden seçim yapabilmek için, tüm departmanların verisini çekmemiz gerekiyor. 
12. İlk olarak Custom Action panelini açın ve bir SQL action ekleyin. Açılan editörde Departman tablosunu bulun ve detay menüsü (üç nokta) aracılığıyla açın, select aksiyonunu seçin. 
13. Aksiyonu kaydedin. Ekrana dönün ve Initial Action olarak DepartmentAll aksiyonunu ekleyin. 
14. Şimdi SelectBox'ı seçin, Properties panelinde yer alan Options alanından ilgili aksiyonu seçin. 
15. Açılan alanlarda Field to Display alanında Department Name, Field to Use as Key alanında Id seçimini yapın.
16.  Value alanında ise SelectPersonnelById aksiyonunun departman sonucunu bağlayın.
17. Devamında diğer elementler için veri bağlama işlemlerini gerçekleştirin.

Ardından, önceki öğrenme içeriğinde Page Init olay kurgusunu oluşturduğumuz kullanıcı yani personel listesi ekranında yer alan elementlerin Data Bind işlemlerini gerçekleştirelim. 

18. Page Init içeriğinde, Initial aksiyon eklediğimiz ekranı açın. 
19. Ekranda yer alan tabloyu seçin ve Tablonun Properties Panelinde yer alan Datasources alanında SelectPersonel aksiyonunu seçin. 
20. Ardından tablo içerisinde yer alan her bir elementleri tek tek seçerek Properties Paneli Value alanında bulunan Field to Display açılır menüsünden gösterilmek istenen ilgili veriyi seçin.
21. Tabloda yer alan ve kullanıcıların statüsünü farklı renkte ikonlarla göstermek için ilk olarak yeşil renkli ikonu seçin.
22. Properties paneli altında Visibility alanında Sometimes Visible seçeneğini seçin. Ardından Symbol Picker aracılığıyla Current kategorisi altında yer alan Status’ü seçin. 
23. SelectBox aracılığıyla is equal to seçimini yapın ve Switchi açık halde bırakın.
24. Şimdi kırmız renkli ikonu seçin. 
25. Properties paneli Visibility alanında Sometimes Visible seçeneğini seçin. 
26. Ardından Symbol Picker aracılığıyla Current kategorisi altında yer alan Status’ü seçin.
27. Status seçimi sonrasında SelectBox aracılığıyla is not equal to seçimini yapın ve Switchi açık halde bırakın.

Tabloda yer alan kullanıcıların toplam önerdiği fikir sayısını Builder 2 kursunda bağlayacağız.

Bu senaryoda, var olan ve Page Init aksiyonu eklenmiş bir liste ekran tasarımına veri bağladık. Eğer ekran tasarımınız hazır değilse ve veri öncelikli bir yaklaşım izliyorsanız, ilk olarak oluşturduğunuz aksiyonu Initial Action olarak eklediğinizde ve Action List panelinden ekrana sürükleyip bıraktığınızda, veri bağlantısı sağlanmış bir tablo tasarımını hızlı bir şekilde elde edebilirsiniz.

Benzer ihtiyaç durumlarında ilgili aksiyonu oluşturup,Data Binding işlemlerini sağlayabilirsiniz.