1. Flex Grid Elementine Genel Bakış

Flex Grid elementi, uygulamanızda içerikleri esnek ve uyarlanabilir bir ızgara düzeninde görüntülemenizi sağlayan güçlü bir yerleşim elementidir. Farklı boyut, oran ve hizalamalara sahip öğeleri düzenli bir yapıda göstermek için kullanılır. Flex Grid, modern tasarım yaklaşımı olan "responsive layout" mantığıyla çalışarak ekran genişliğine göre içeriklerin otomatik hizalanmasını ve düzenlenmesini sağlar.

Bu element sayesinde kartlar, ürün listeleri, görsel galeriler veya bilgi kutucukları gibi çoklu öğeleri dinamik ve estetik bir biçimde organize edebilirsiniz. Özellikle grid yapısına sahip listeleme ekranlarında, dashboard alanlarında veya esnek kart dizilimlerinde sıkça kullanılır.

Flex Grid elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Ürün listeleri oluşturmak. E-ticaret uygulamalarında ürün kartlarını düzenli ve ölçeklenebilir bir grid yapısında göstermek için kullanılır.
• Görsel galeri veya medya duvarı (media wall) tasarlamak. Resim, video veya kart tabanlı içerikleri farklı boyutlarda esnek şekilde konumlandırabilirsiniz.
• Dashboard kart düzenleri oluşturmak. Performans kartları, metrik kutucukları veya analitik içerikleri modüler bir grid içinde yerleştirmek için kullanılır.
• Blog veya haber kartlarını listelemek. Farklı içerik tiplerini (başlık, görsel, açıklama) grid formatında kullanıcıya sunabilirsiniz.
• Responsive düzen gerektiren ekranlarda içerik yönetimi. Mobil, tablet ve web ekranlarına göre otomatik uyum sağlayan dinamik bir layout oluşturmak için kullanılabilir.

2. Temel Özellikler

• Esnek ızgara yapısı (Flexible Grid Layout). İçerikler ekran genişliğine göre otomatik olarak yeniden hizalanır ve daha düzenli bir görünüm sağlar.
• Responsive davranış. Mobil, tablet ve web ekranlarında otomatik uyum sağlar; sütun sayısı cihaz boyutuna göre değiştirilebilir.
• Dinamik içerik desteği. Datasource veya aksiyonlar üzerinden gelen verileri grid yapısında otomatik olarak listeleyebilirsiniz.

2.1. Flex Grid Elementi Özellikleri (Properties)

Flex Grid elementini seçtiğinizde sağ tarafta yer alan Properties paneli üzerinden veri yönetimi, içerik görüntüleme davranışları ve boş durum yönetimi gibi ayarları yapılandırabilirsiniz.

Veri ve İçerik Ayarları

• Data Source: Flex Grid içinde görüntülenecek verilerin kaynağını belirler. Datasources veya aksiyonlar üzerinden gelen liste verisi, grid yapısında otomatik olarak render edilir. (Örn. ürün listesi, haber kartları, kullanıcı kartları)

Boş Veri (Empty State) Ayarları

• No Data Found Message: Veri kaynağından sonuç gelmediğinde kullanıcıya gösterilecek mesajı tanımlar. Örn: “Gösterilecek kayıt bulunamadı.”
• Show No Data Found Image: Veri olmadığında görüntülenecek özel bir görsel eklemenizi sağlar. Bu özellik özellikle boş ekranlarda kullanıcı deneyimini iyileştirmek için kullanılır.

2.2 Elemente Eklenebilen Aksiyonlar

Flex Grid elementi, bir listeleme veya yerleşim bileşeni olarak çalıştığı için herhangi bir tetikleyici (trigger) veya aksiyon ekleme özelliği desteklemez. Kullanıcı etkileşimleri doğrudan Flex Grid üzerinden değil, grid içine yerleştirilen UI elementleri üzerinden yönetilir. Bu nedenle:

• Flex Grid’e onClick,
• onChange,
• veya başka herhangi bir aksiyon tanımlanamaz.

Eğer bir kullanıcı etkileşimi tetiklemek istiyorsanız, Flex Grid’in içine eklediğiniz Button, Panel, Image gibi elementlere aksiyon bağlayabilirsiniz.

3. Flex Grid Elementi Nasıl Kullanılır? 

Bu bölümde Flex Grid elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Merkez Bankası Kur Gösterimi

Bu senaryoda uygulama, Türkiye Cumhuriyet Merkez Bankası (TCMB) tarafından yayımlanan güncel döviz kuru verilerini kullanıcılara sunar. Uygulama, belirli periyotlarda veya kullanıcı talebiyle TCMB kaynağından alınan kur bilgilerini işleyerek ekranda görüntüler.

Kullanıcı, dolar ve euro gibi temel para birimlerine ait alış–satış değerlerini tek bir ekran üzerinden takip edebilir. Bu yapı sayesinde finansal veriler güvenilir bir kaynaktan alınarak sade, anlaşılır ve karşılaştırılabilir bir biçimde kullanıcıya sunulur.

Senaryoda:

• Uygulama açıldığında Merkez Bankası tarafından yayımlanan döviz kurları ekranda listelenir.
• Kullanıcı, dolar ve euro gibi temel para birimlerine ait güncel değerleri tek ekranda görüntüler.
• Kur bilgileri sade bir liste veya kart yapısı içerisinde gösterilir.
• Veriler güvenilir bir kaynaktan alındığı için kullanıcıya referans amaçlı bir kur görünümü sunulur.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde yeni C# fonksiyonu ekleme: 

• Datasources modülüne gidin. 
• Ardından Sources yanındaki ekleme ikonuna tıklayın.
• Açılan sayfada C# Functions alanını seçin ve "DailyExchangeRate" adında oluşturun:

• Yeni açılan alandaki kodu silin yerine aşağıdaki C# kodunu ekleyin ve sağ üst köşede CREATE tuşuna basın.
  

using Newtonsoft.Json;
using RestSharp;
using System;
using System.Collections.Generic;
using System.Data;
using Microsoft.Data.SqlClient;
using System.Xml;
using System.Globalization;

namespace Kuika.ThirdPartyApisCollection
{
  public class TcmbDoviz
  {   
      public static List<ExchangeRate> GetTcmbDovizByKod()
      {
          string bugun = "https://www.tcmb.gov.tr/kurlar/today.xml";
          var xmlDoc = new XmlDocument();
          xmlDoc.Load(bugun);

          string EUR_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='" + "EUR" + "']/BanknoteSelling").InnerXml;
          string USD_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='" + "USD" + "']/BanknoteSelling").InnerXml;
          string GBP_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='" + "GBP" + "']/BanknoteSelling").InnerXml;
          
          var Rates = new List<ExchangeRate>() {
              new ExchangeRate(){ CurrencyName = "EUR/TRY", Value=Convert.ToDecimal(EUR_Satis, new CultureInfo("en-US"))},
              new ExchangeRate(){ CurrencyName = "USD/TRY", Value=Convert.ToDecimal(USD_Satis, new CultureInfo("en-US"))},
              new ExchangeRate(){ CurrencyName = "GBP/TRY", Value=Convert.ToDecimal(GBP_Satis, new CultureInfo("en-US"))}
          };
          return Rates;
      }
  }
  public class ExchangeRate
  {
      public string CurrencyName { get; set; }
      public decimal Value { get; set; }
  }
}

Adım 2 - Aksiyon Ekleme

Başlangıçta: 

1. UI Design modülünü açın.
2. Sayfada Add Action > Recurring Action aksiyonunu ekleyin.

3. Aksiyon içerisinde yenileme değerini 15 saniye olarak kullanın.
4. Sayfa başlangıcında çalışması için triggerOnPageInit alanını açık olarak ayarlayın.
5. Actions alanına Add Actions > Custom > DailyExchangeRate > GetTcmbDovizByKod tanımlamasını yapın.

Adım 3 - Element Ekleme ve Stil Düzenleme

1. Sol yan panelden Elements > Data > FlexGrid elementini sayfaya sürükleyip bırakın. 

2. FlexGrid elementi içerisinde FlexGrid > Properties > DataSource alanına  GetTcmbDovizByKod aksiyonunu bağlayın.

3. FlexGrid içerisine Elements > Display > Panel elementini sürükleyip bırakın.

4. Panel elementinde Panel > Styling > Layout > Align alanında yatay olarak ortalamayı seçin.

5. Panel elementi boyutunu Panel > Styling > Layout > Width > 200 px olarak ayarla.

6. Arka plan rengini Panel > Styling > Fill > Style > White Background olarak ayarlayın.

7. Kenarları Panel > Styling > Border > Radius > 15 px olarak ayarlayın.

8. Panel elementi içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.

9. VerticalStack elementi içerisine Elements > Display > Label elementini sürükleyip bırakın.

10.  Label elementi altına tekrar Elements > Display > Label elementi daha sürükleyip bırakın.

11.  İlk Label elementine Label > Properties > Value > Field to display > CurrencyName olarak tanımlayın.

12. İkinci Label elementine Label > Properties > Value > Field to display > Value olarak tanımlayın.

Preview:

Uygulama test edildiğinde, döviz kurları kart yapısı içerisinde yan yana görüntülenir. Her bir kart üzerinde ilgili döviz çifti (EUR/TRY, USD/TRY, GBP/TRY) üst bölümde yer alırken, altında güncel kur değeri net ve okunabilir bir şekilde gösterilir.

Bu yapı sayesinde kullanıcı, farklı döviz kurlarını tek ekranda karşılaştırabilir ve sade, düzenli bir görünümle kur bilgilerine hızlıca erişebilir.

4. Ortak Özellikler (Properties)

Flex Grid elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Grid’i içeriğe uygun boyutlandırın.  Flex Grid içerisindeki kart veya elemanlar farklı genişliklerde olabilir; bu nedenle grid yapısını tasarlarken içerik boyutlarını dikkate alın.
• Mobil uyumu göz önünde bulundurun. Grid yapısındaki elemanlar dar ekranlarda alt alta dizileceği için içeriklerin mobilde okunabilir olmasına dikkat edin.
• Boş veri durumunu kullanıcı dostu hâle getirin. No Data Found Message ve Show No Data Found Image ayarlarını kullanarak boş ekranları daha anlaşılır hâle getirebilirsiniz.
• Grid içindeki elemanlara yeterli iç boşluk (padding) ve dış boşluk (margin) verin. Kartların birbirine çok yakın olması kullanıcı deneyimini olumsuz etkiler.

6. Kısıtlamalar

• Flex Grid elementi aksiyon desteklemez. Kullanıcı etkileşimleri, grid içine eklenen elementler üzerinden yönetilmelidir.
• Responsive davranış, içeriğin boyutlarına bağlıdır. Çok geniş kartlar küçük ekranlarda hizalama problemleri oluşturabilir.
• Karmaşık yerleşimlerde tutarsız görünüm oluşabilir. Farklı yüksekliklerdeki içerikler grid görünümünü bozabilir.