Display Ekranına Veri Bağlama

Bu öğrenme içeriği kapsamında Bir Fikrim Var mobil uygulamasında Display ekran türünde hazırladığımız fikir detay ekranı için veri bağlama işlemlerini gerçekleştireceğiz.

Ekranı incelediğimizde fikre ait bilgilerin yanı sıra fikre yapılmış yorumların listelendiği bir tablo yapısı yer almaktadır.

Birlikte bu ekrana veri bağlama işlemlerini yapalım.

1. Fikir detay ekranını açın.

İlk olarak ekranda bir Screen Input tanımlaması yapmak gerekmektedir. 

2. Ekrana IdeaDetail adında ve Guid tipinde bir Screen Input tanımlaması sağlayın.
3. Şimdi ekrana Initial Action olarak fikirlerin ve yorumların listelenemesini sağlayacak aksiyonları ekleyin.
4. Her iki aksiyon içerisinde açılan ID alanları için Symbol Picker>ScreenInput>IdeaDetail seçimini yapın.
5. Şimdi ekranda yer alan tüm elementler için veri bağlama işlemlerini elementleri tek tek seçerek gerçekleştirin.
6. Fikirlerin sahip olduğu beğeni, yorum ve diğer destekleyen bilgilerini Builder 2 kursunda detaylı inceleyeceğiz.
7. Tab elementinde yer alan Details sekmesi açıkken Fikir başlığını temsil eden metni seçin.
8. Properties paneli Value alanından SelectIdeaDetail aksiyonunun sonucunda dönen IdeaTitle değerini seçin.
9. Fikir açıklamasını temsil eden metni seçin. Yine value alanından  SelectIdeaDetail aksiyonunun sonucunda dönen IdeaDescription değerini seçin.

Şimdi yorumlar için veri bağlantısını sağlayalım.

9. Comments sekmesini açın.
10. Item Tree aracılığıyla Table elementini seçin.
11. Table elementinin Properties panelinde Datasource alanında Yorumların listelenmesini sağlayacak aksiyonu seçin.
12. Ardından Table içinde ismi temsil eden Label’i seçin. 
13. Label’in Properties panelinde Value alanında yer alan Field to Display aracılığıyla FullName değerini seçin.
14. Bu işlemi tabloda yer alan tarih ve yorum açıklaması için de tek tek yapın.

Fikir detay ekranına ulaşmak için Dashboard ekranda ve Fikir liste ekranında GalleryView içerisinde yer alan kolona daha önceki içeriklerde Navigate aksiyonu eklemiştik. Artık Detay ekranında bir Screen Input olduğu için Navigate aksiyonu altında bir Screen Input Parametresi ortaya çıktı. Bu parametre tanımlama işlemlerini gerçekleştirelim.

15. Dashboard ekranı açın. GalleryView içinde Navigate aksiyonu verdiğimiz kolonu seçin.
16. Properties panelde yer alan Navigate aksiyonu genişletin. 
17. Screen Input paratmetresini tanımlamak için Symbol Picker>Current>Id seçimini yapın.
18. Fikir listeleme ekranında veri bağlantılarınızı sağladıktan sonra benzer işlemi o ekranda da gerçekleştirebilirsiniz.

Böylece fikir detay ekranında veri bağlama işlemlerini gerçekleştirdik. Bu adımları uygulayarak Web uygulamada yer alan fikir detay ekranında veri bağlama işlemlerini gerçekleştirin.