Page Init -> Data Load

Screen Lifecycle

About this lesson

Page Init, bir ekranın yüklenme sürecinde çalıştırılmasını istediğimiz aksiyonların eklendiği bölümdür. Bu işlev, özellikle açılışta veri gösterilmesi gereken durumlar için önemlidir. Örnek vermek gerekirse, bir personel listesi ekranı yüklendiğinde, bu listedeki personel kayıtlarının hemen görüntülenmesi istenebilir. Bu senaryoda, Page Init altında Add Action seçeneği kullanılarak personel listesini çeken bir aksiyon belirlenir ve bu aksiyon, Data Binding yöntemiyle arayüzdeki bileşenlere veri kaynağı olarak atanır.

Eğer Page Init kullanılacak olan ekran, seçilen bir kaydın detaylarını gösterecek ise, gösterilmesi istenen kaydın anahtarı bir screen input olarak tanımlanmalıdır. Bu anahtar, ilgili kaydın detay bilgilerine erişim sağlayacak olan aksiyon için bir başlangıç noktası oluşturur. Daha sonra bu aksiyon Page Init bölümüne eklenir ve Data Binding ile arayüz bileşenlerine bu aksiyon tarafından sağlanan veriler atanır.

Örnek bir senaryoda Page Init işlemini detaylandıralım.

Uygulamamız içerisinde yer alan kullanıcı Liste ekranlarında, personellerin listelendiği bir yapı kurgulayalım. 

  1. Managed DB ifadesi yanında yer alan + ikonuna tıklayın.
  2. Menüden Select Action’u seçin.
  3. Açılan ekranda aksiyonunuza bir isim verin.
  4. Choose Source alanında yer alan + ikonuna tıklayın ve açılan menüden Personnel tablosunu seçin.
  5. Personnel tablosu yanında yer alan link ikonuna tıklayın. 
  6. Açılan ekrandan Personnel tablosuyla ilişkili olan Department tablosunu seçin.
  7. Fields  sekmesini açın. Varsayılan olarak gelen alanların yanı sıra Personnel tablosunda yer alan ID kolonunu ekleyin ve Alias alanında PersonnelID adını verin.
  8. Devamında FullName, PersonnelImage, Status ve Title alanlarını ekleyin.
  9. Department tablosunda yer alan Id alanını ekleyin ve Alias alanında DepartmentID ismini verin.
  10. Ardından Sort Order sekmesini açın, Personnel tablosunu seçin. Kolon olarak Create date’i seçin ve Decending seçimini yapın.
  11. Create butonuna tıklayın ve aksiyonunuzu kaydedin.
  12. Kullanıcı liste ekranına Initial Action olarak SelectPersonnel aksiyonunu ekleyin. 

Bu işlem akışında bir liste ekranına Page Init ekleme sürecini inceledik.

Bir sonraki öğrenme içeriğinde eklediğimiz Page Init’i ekranda yer alan elementlere data bind edeceğiz.

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

Page Init, bir ekranın yüklenme sürecinde çalıştırılmasını istediğimiz aksiyonların eklendiği bölümdür. Bu işlev, özellikle açılışta veri gösterilmesi gereken durumlar için önemlidir. Örnek vermek gerekirse, bir personel listesi ekranı yüklendiğinde, bu listedeki personel kayıtlarının hemen görüntülenmesi istenebilir. Bu senaryoda, Page Init altında Add Action seçeneği kullanılarak personel listesini çeken bir aksiyon belirlenir ve bu aksiyon, Data Binding yöntemiyle arayüzdeki bileşenlere veri kaynağı olarak atanır.

Eğer Page Init kullanılacak olan ekran, seçilen bir kaydın detaylarını gösterecek ise, gösterilmesi istenen kaydın anahtarı bir screen input olarak tanımlanmalıdır. Bu anahtar, ilgili kaydın detay bilgilerine erişim sağlayacak olan aksiyon için bir başlangıç noktası oluşturur. Daha sonra bu aksiyon Page Init bölümüne eklenir ve Data Binding ile arayüz bileşenlerine bu aksiyon tarafından sağlanan veriler atanır.

Örnek bir senaryoda Page Init işlemini detaylandıralım.

Uygulamamız içerisinde yer alan kullanıcı Liste ekranlarında, personellerin listelendiği bir yapı kurgulayalım. 

  1. Managed DB ifadesi yanında yer alan + ikonuna tıklayın.
  2. Menüden Select Action’u seçin.
  3. Açılan ekranda aksiyonunuza bir isim verin.
  4. Choose Source alanında yer alan + ikonuna tıklayın ve açılan menüden Personnel tablosunu seçin.
  5. Personnel tablosu yanında yer alan link ikonuna tıklayın. 
  6. Açılan ekrandan Personnel tablosuyla ilişkili olan Department tablosunu seçin.
  7. Fields  sekmesini açın. Varsayılan olarak gelen alanların yanı sıra Personnel tablosunda yer alan ID kolonunu ekleyin ve Alias alanında PersonnelID adını verin.
  8. Devamında FullName, PersonnelImage, Status ve Title alanlarını ekleyin.
  9. Department tablosunda yer alan Id alanını ekleyin ve Alias alanında DepartmentID ismini verin.
  10. Ardından Sort Order sekmesini açın, Personnel tablosunu seçin. Kolon olarak Create date’i seçin ve Decending seçimini yapın.
  11. Create butonuna tıklayın ve aksiyonunuzu kaydedin.
  12. Kullanıcı liste ekranına Initial Action olarak SelectPersonnel aksiyonunu ekleyin. 

Bu işlem akışında bir liste ekranına Page Init ekleme sürecini inceledik.

Bir sonraki öğrenme içeriğinde eklediğimiz Page Init’i ekranda yer alan elementlere data bind edeceğiz.

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ğinde, bir ekranın yüklenme sürecinde Page Init kullanarak veri çekme işlemini gerçekleştireceğiz. Daha sonra bu verileri çeken aksiyonu arayüzdeki bileşenlere Data Binding yöntemiyle atayarak kullanacağız.

Page Init, bir ekranın yüklenme sürecinde çalıştırılmasını istediğimiz aksiyonların eklendiği bölümdür. Bu işlev, özellikle açılışta veri gösterilmesi gereken durumlar için önemlidir. Örnek vermek gerekirse, bir personel listesi ekranı yüklendiğinde, bu listedeki personel kayıtlarının hemen görüntülenmesi istenebilir. Bu senaryoda, Page Init altında Add Action seçeneği kullanılarak personel listesini çeken bir aksiyon belirlenir ve bu aksiyon, Data Binding yöntemiyle arayüzdeki bileşenlere veri kaynağı olarak atanır.

Eğer Page Init kullanılacak olan ekran, seçilen bir kaydın detaylarını gösterecek ise, gösterilmesi istenen kaydın anahtarı bir screen input olarak tanımlanmalıdır. Bu anahtar, ilgili kaydın detay bilgilerine erişim sağlayacak olan aksiyon için bir başlangıç noktası oluşturur. Daha sonra bu aksiyon Page Init bölümüne eklenir ve Data Binding ile arayüz bileşenlerine bu aksiyon tarafından sağlanan veriler atanır.

Örnek bir senaryoda Page Init işlemini detaylandıralım.

Uygulamamız içerisinde yer alan kullanıcı Liste ekranlarında, personellerin listelendiği bir yapı kurgulayalım. 

  1. Managed DB ifadesi yanında yer alan + ikonuna tıklayın.
  2. Menüden Select Action’u seçin.
  3. Açılan ekranda aksiyonunuza bir isim verin.
  4. Choose Source alanında yer alan + ikonuna tıklayın ve açılan menüden Personnel tablosunu seçin.
  5. Personnel tablosu yanında yer alan link ikonuna tıklayın. 
  6. Açılan ekrandan Personnel tablosuyla ilişkili olan Department tablosunu seçin.
  7. Fields  sekmesini açın. Varsayılan olarak gelen alanların yanı sıra Personnel tablosunda yer alan ID kolonunu ekleyin ve Alias alanında PersonnelID adını verin.
  8. Devamında FullName, PersonnelImage, Status ve Title alanlarını ekleyin.
  9. Department tablosunda yer alan Id alanını ekleyin ve Alias alanında DepartmentID ismini verin.
  10. Ardından Sort Order sekmesini açın, Personnel tablosunu seçin. Kolon olarak Create date’i seçin ve Decending seçimini yapın.
  11. Create butonuna tıklayın ve aksiyonunuzu kaydedin.
  12. Kullanıcı liste ekranına Initial Action olarak SelectPersonnel aksiyonunu ekleyin. 

Bu işlem akışında bir liste ekranına Page Init ekleme sürecini inceledik.

Bir sonraki öğrenme içeriğinde eklediğimiz Page Init’i ekranda yer alan elementlere data bind edeceğiz.

Dosyalar

No items found.

Kaynaklar

No items found.

Sözlük

No items found.

Ödev

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