Display Ekranına Veri Bağlama

Proje Ekranlarını Geliştirme

About this lesson

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. 

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

  1. Comments sekmesini açın.
  2. Item Tree aracılığıyla Table elementini seçin.
  3. Table elementinin Properties panelinde Datasource alanında Yorumların listelenmesini sağlayacak aksiyonu seçin.
  4. Ardından Table içinde ismi temsil eden Label’i seçin. 
  5. Label’in Properties panelinde Value alanında yer alan Field to Display aracılığıyla FullName değerini seçin.
  6. 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.

  1. Dashboard ekranı açın. GalleryView içinde Navigate aksiyonu verdiğimiz kolonu seçin.
  2. Properties panelde yer alan Navigate aksiyonu genişletin. 
  3. Screen Input paratmetresini tanımlamak için Symbol Picker>Current>Id seçimini yapın.
  4. 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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

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. 

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

  1. Comments sekmesini açın.
  2. Item Tree aracılığıyla Table elementini seçin.
  3. Table elementinin Properties panelinde Datasource alanında Yorumların listelenmesini sağlayacak aksiyonu seçin.
  4. Ardından Table içinde ismi temsil eden Label’i seçin. 
  5. Label’in Properties panelinde Value alanında yer alan Field to Display aracılığıyla FullName değerini seçin.
  6. 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.

  1. Dashboard ekranı açın. GalleryView içinde Navigate aksiyonu verdiğimiz kolonu seçin.
  2. Properties panelde yer alan Navigate aksiyonu genişletin. 
  3. Screen Input paratmetresini tanımlamak için Symbol Picker>Current>Id seçimini yapın.
  4. 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.

Kuika Platformunda yeni bir kullanıcı arayüzüne geçiyoruz ve Kuika Akademi kurslarımızı ve videolarımızı mümkün olan en kısa sürede güncelliyoruz.

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. Fikir detay ekranında Screen Input ile parametre tanımlayarak fikir ve yorumları listelemek için gerekli veri bağlama işlemlerini gerçekleştireceğiz, ayrıca Dashboard ve fikir listeleme ekranlarındaki Navigate aksiyonlarını da bu parametreyle güncelleyeceğiz.

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. 

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

  1. Comments sekmesini açın.
  2. Item Tree aracılığıyla Table elementini seçin.
  3. Table elementinin Properties panelinde Datasource alanında Yorumların listelenmesini sağlayacak aksiyonu seçin.
  4. Ardından Table içinde ismi temsil eden Label’i seçin. 
  5. Label’in Properties panelinde Value alanında yer alan Field to Display aracılığıyla FullName değerini seçin.
  6. 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.

  1. Dashboard ekranı açın. GalleryView içinde Navigate aksiyonu verdiğimiz kolonu seçin.
  2. Properties panelde yer alan Navigate aksiyonu genişletin. 
  3. Screen Input paratmetresini tanımlamak için Symbol Picker>Current>Id seçimini yapın.
  4. 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.

Dosyalar

No items found.

Kaynaklar

No items found.

Sözlük

No items found.

Ödev

Bu ödev kapsamında, modülde öğrendiğiniz bilgiler doğrultusunda aşağıda belirtilen ekran türlerine veri bağlama işlemlerini platform üzerinde gerçekleştirmeniz beklenmektedir:

  • Dashboard ekranına veri bağlama
  • Form ekranına veri bağlama
  • Display ekranına veri bağlama

Her bir ekranın, ilgili veri kaynaklarıyla doğru şekilde entegre edilmesi ve kullanıcıya güncel, anlamlı bilgiler sunacak biçimde yapılandırılması gerekmektedir.

Çalışmalarınızı, modülde belirtilen teknik gereksinimlere uygun şekilde tamamlayarak aşağıdaki formüzerinden teslim etmeniz beklenmektedir.

E-Posta Tasarımı
Email Builder Temelleri
Şablonların Kullanımı
Yeni Email Tasarımı
Mobil Arayüz Geliştirme
Mobil Ekran Tasarımlarına Giriş
Tabbar Tasarımı
Dashboard Ekran Tasarımım
Form Ekranının Tasarlanması
Listeleme Ekran Tasarımım
Detay Ekran Tasarımı
Mobile UI Prototipleme
Web UI Prototipleme
Aksiyonlarla Çalışmak
Navigasyonlarla Çalışma
Ekran Gösterim Tipleri
Web Prototip Hazırlama
Notify Ekleme
Preview Alma
Web Arayüz Tasarımına Giriş
Web Ekran Tasarımlarına Giriş
Registration Ekran Tasarımı
Header Tasarımı
Master Ekranlarla Çalışma
Menü Tasarımı
Dashboard Ekran Tasarımı
Listeleme Ekran Tasarımı
Form Ekran Tasarımı
Display Ekran Tasarımı
Elementler
Container Elementler
Date and Time Input Elementler
Display Elementler
Text Input Elementler
Numeric Input Elementler
Select Input Elementler
Data Elementler
Navigation Elementler
Interactive Elementler
Chart Elementler
Kuika'da Arayüz Tasarımına Giriş
Kuika Platformu'nda Kullanıcı Deneyimi
Uygulama Arayüz Tasarımı Süreci
Renklerle Çalışma
Boşlukların Tanımı
Yazı Stilleriyle Çalışma
Kompleks Stillerle Çalışma
Mock Data ile Çalışma
Konsept Tasarımı
Wireframe İlk Fikrin Görselleştirilmesi
Konsept Tasarımlarının Hazırlanması
UX Tasarımı
Kullanılabilirlik İlkeleri
Temel Tasarım İlkeleri
Bilgi Mimarisi
Ekranlar Arası Akış
Analiz ve Planlama
Proje Kapsamını ve Hedeflerini Tanımlama
Analiz Dokümanının Okunması
Örnek Diagramlarla Akış Okuma ve İhtiyaçların Tanımlanması
Projenin Planlanması
Designer Eğitim Seti Giriş
Low-Code Nedir?
Kuika Nedir?
Kuika ile Neler Yapabilirsin?
Platform Arayüzünü İnceleyelim
Öğrenim Sürecini Anlamak