1. Gallery View Elementine Genel Bakış

Gallery View elementi, uygulamanızda görselleri veya içerikleri düzenli bir yapıda listelemenizi sağlayan güçlü bir görüntüleme elementidir. Birden fazla görselin veya kart yapısındaki içeriğin kullanıcı tarafından kolayca keşfedilebilmesine olanak tanır. Galeri yapısı; resim gösterimleri, ürün portföyleri, kategori listeleri veya koleksiyon içerikleri gibi görsel ağırlıklı ekranlarda ideal bir kullanım sunar.

Kullanıcılar, öğeler arasında kaydırarak veya tıklayarak gezinebilir; içerikler hem estetik hem de düzenli bir görünüm ile sunulur. Gallery View elementi, responsive yapısı sayesinde mobil ve web cihazlarda otomatik uyum sağlayarak optimize edilmiş bir kullanıcı deneyimi sunar.

Gallery View elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Resim galerisi oluşturmak. Çoklu görselleri düzenli bir yapıda listelemek için kullanılır. Ürün fotoğrafları, etkinlik görüntüleri veya proje görselleri bu alanda sıkça kullanılır.
• Portföy veya proje sunumu yapmak. Tasarım portföyleri, referans çalışmaları veya proje çıktıları görsel kartlar halinde sergilenebilir.
• Ürün katalogları göstermek E-ticaret uygulamalarında ürünlerin görsel ağırlıklı olarak listelenmesi için uygun bir bileşendir.
• Kategori veya içerik gruplarını görsel kartlarla sunmak. Blog kategorileri, menüler veya içerik koleksiyonları görsel açıdan zengin bir şekilde kullanıcıya aktarılabilir.

2. Temel Özellikler

• Görsel Odaklı Kart Yapısı. Her bir öğe, görsel veya içerik kartı şeklinde gösterilir; bu sayede kullanıcı görsellere hızlıca odaklanabilir.
• Responsive (Duyarlı) Tasarım. Mobil, tablet ve web ekranlarında otomatik uyum sağlar. Kartlar ekran genişliğine göre yeniden hizalanır.
• Dinamik Veri Bağlama. Datasource veya aksiyonlar üzerinden gelen veriler otomatik olarak galeri kartlarına uygulanabilir.
• Esnek Grid Düzeni. Çoklu kartlar ızgara yapısına benzer şekilde düzenlenir. Kartlar satırlar hâlinde hizalanır.
• Boş Veri Durum Yönetimi. Veriler bulunmadığında mesaj veya özel bir görsel göstermeyi destekler.

2.1 Gallery View Elementi Özellikleri (Properties)

Gallery View elementini seçtiğinizde sağ tarafta yer alan Properties paneli üzerinden görsel düzenlemeler, veri kaynağı yönetimi ve responsive kolon ayarları yapılandırılabilir. Aşağıdaki tüm özellikler detaylı şekilde açıklanmıştır:

Veri ve Boş Durum Ayarları

• Datasource: Gallery View içinde görüntülenecek verilerin kaynağını belirler. Datasource veya aksiyonlardan gelen veriler otomatik olarak kartlara uygulanır.
• No Data Found Message: Dinamik veri bağlanmadığında veya veri boş döndüğünde önizleme ekranında gösterilecek mesajı belirler. Örn: “Gösterilecek içerik bulunamadı.”
• Show No Data Found Image: Veri olmadığında gösterilecek özel görseli tanımlamanızı sağlar. Özellikle galeri boşken kullanıcı deneyimini iyileştirmek için kullanılır.

Responsive Kolon Ayarları

• Phone Columns Count: Mobil cihazlarda yan yana gösterilecek kolon sayısını belirler. Varsayılan: 1
• Tablet Columns Count: Tablet ekranlarında yan yana gösterilecek kolon sayısını belirler. Varsayılan: 2
• Desktop Columns Count: Web/desktop ekranlarında yan yana gösterilecek kolon sayısını belirler. Varsayılan: 3

Hover (Üzerine Gelme) Ayarları

• Hover Font Color: Kullanıcı fare ile galeri kartlarının üzerine geldiğinde metin rengini değiştirir.
• Hover Bg Color: Kullanıcı kartın üzerine geldiğinde arka plan rengini değiştirir. Bu özellik özellikle kart vurgulamak için kullanılır.
• Row Bg Color: Kart veya satır üzerine gelindiğinde arka plan renginin değişmesini sağlar. Hover davranışı ile uyumlu şekilde kullanılabilir.

Izgara (Grid) Boşluk Ayarları

• Horizontal Gutter: Kartlar arasındaki yatay boşluk miktarını belirler.
• Vertical Gutter: Kartlar arasındaki dikey boşluk miktarını belirler.

2.2. Elemente Eklenebilen Aksiyonlar

Gallery View elementi, bir görüntüleme bileşeni olarak çalıştığı için herhangi bir aksiyon ekleme veya tetikleyici (trigger) tanımlama özelliğini desteklemez.

Kullanıcı etkileşimleri doğrudan Gallery View üzerinden değil, galeri içine yerleştirilen Panel, Button, Image gibi UI elemanları üzerinden yönetilmelidir.

Bu nedenle:

• onClick,
• onChange,
• veya başka herhangi bir tetikleyici Gallery View elementine eklenemez.

Eğer kullanıcı tıklaması veya başka bir etkileşim gerektiriyorsa, bunu Gallery View içindeki elementlere aksiyon bağlayarak gerçekleştirebilirsiniz.

3. Gallery View Elementi Nasıl Kullanılır? 

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

Senaryo: Ürün Galerisi Gösterimi

Bir e-ticaret uygulamasında, ana sayfa veya kategori ekranında kullanıcıya ürünleri görsel ağırlıklı ve düzenli bir şekilde sunmak için kart tabanlı bir ürün galerisi kullanılır. Bu galeri, ürün görselleri, adları, fiyatları ve stok durumlarını tek bir ekranda net bir şekilde göstererek kullanıcının ürünleri hızlıca incelemesini sağlar.

Kullanıcı, ürün kartlarını kaydırarak veya listeyi aşağı doğru ilerleterek farklı ayakkabı modellerini karşılaştırabilir. Bu yapı, ürünlerin hem estetik hem de bilgilendirici bir biçimde sunulmasını sağlayarak satın alma kararını kolaylaştırır.

Senaryoda:

• Ürün galerisi içerisinde her bir ürün kartı; ürün görseli, ürün adı, stok durumu ve fiyat bilgisini düzenli bir şekilde sunacak şekilde yapılandırılmıştır.
• Kartın üst bölümünde ürün adı ve stok bilgisi yer alırken, orta bölümde ürüne ait görsel gösterilir. Kartın alt bölümünde ise ürünün fiyat bilgisi kullanıcıya net ve okunabilir biçimde sunulur.
• Bu yapı sayesinde kullanıcı, ürünleri tek bakışta karşılaştırabilir ve stok durumu ile fiyat bilgisine hızlıca erişebilir.

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

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “ProductGallery” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

Price sütunu eklenirken Decimal veri türünde Decimal Scale > 2 olarak ayarlayın.

• Önemli Alan adları:
  
  • ProductName: Ürünün ad bilgisini tutar. Galeri veya kart yapısında kullanıcıya gösterilen ana metindir ve ürünün ne olduğunu hızlıca anlamasını sağlar.
  • ImageUrl: Ürüne ait görselin URL bilgisini içerir. Ürün galerisi veya liste ekranlarında gösterilen ana görsel bu alan üzerinden yüklenir.
  • Price: Ürünün satış fiyatını ifade eder. Kullanıcıya küsuratlı fiyat bilgisiyle birlikte gösterilir ve ürün karşılaştırmalarında kullanılır.
  • StockStatus: Ürünün stok durumunu belirtir (ör. Stokta, Sınırlı Stok, Tükendi). Kullanıcının satın alma kararını yönlendiren bilgilendirici bir alandır.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

1. İki aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
   

• Örnek Verileri Ekleyen Aksiyon (InsertProductGalleryData): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO ProductGallery
(Id, ImageUrl, Price, ProductName, StockStatus)
VALUES
(NEWID(), 'https://images.pexels.com/photos/19090/pexels-photo.jpg', 2499.90,
 N'Spor Ayakkabı', N'Stokta'),
(NEWID(),'https://images.pexels.com/photos/1537671/pexels-photo-1537671.jpeg', 1899.50,
 N'Günlük Ayakkabı', N'Stokta'),
(NEWID(), 'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg', 3299.75,
 N'Koşu Ayakkabısı', N'Sınırlı Stok'),
(NEWID(), 'https://images.pexels.com/photos/1456706/pexels-photo-1456706.jpeg', 2799.30,
N'Deri Ayakkabı',  N'Stokta'),
(NEWID(), 'https://images.pexels.com/photos/2048548/pexels-photo-2048548.jpeg', 3599.95,
 N'Outdoor Ayakkabı', N'Tükendi');

Uygularken ProductGallery kısmını silip tekrar ProductGallery yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan Aksiyon (GetProductGalleryData):
  

SELECT * FROM ProductGallery;

Uygularken ProductGallery kısmını silip tekrar ProductGallery yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

Başlangıçta anasayfada: 

1. UI Design modülünü açın.
2. Sayfada Add Action > Initial Action > Custom > Managed Db > GetProductGalleryData aksiyonunu ekleyin.

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

1. Sol yan panelden Elements > Data > GalleryView elementini sayfaya sürükleyip bırakın. 
2. Gallery View element içerisine Elements > Container > Row elementini sürükleyip bırakın.
3. Row elementinde Row > Properties > Desktop > bir pencere olarak ayarlayınız.

4. Col alanı içerisine Elements > Container > Panel elementini ekleyin. 

5. Panel elementinde arka plan rengini Panel > Styling > Fill > Style > White Background olarak ayarlayın.

6. Kenarlar için Panel > Styling > Border > Radius > 15 px olarak ayarlayın.

7. Panel içerisine Elements > Container > Row elementini sürükleyip bırakın.
8. Row elementinde  Row > Properties > Desktop > iki pencere olarak ayarlayınız.

9. Row içerisinde sol taraftaki Col alanını seçin. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sola olarak ayarlayın.

10. Sağ taraftaki Col alanını seçin. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sağa olarak ayarlayın.

11. Her iki Col içerisine Elements > Display > Label elementini sürükleyip bırakın.

12.  Sağ taraftaki Label elementinde Label > Styling > Text > Style > Heading 6 olarak ayarlayın.

13.  Yazıların altına Panel içerisine Elements > Display > Image elementini sürükleyip bırakın.

14. Image elementinin yanındaki boşluğa tıklayıp Col alanına ilerleyin. Col > Styling > Layout > Align > Dikey ve yatay olarak ortalayın.
15. Image elementine tıklayın. Boyutlarını Image > Styling > Layout > Width ve Height alanlarını sırasıyla 300 px ve 200 px olarak ayarlayın.

16. Image elementi altına Panel elementi içerisine Elements > Container > Row elementini sürükleyip bırakın.
17.  Row elementinde Row > Properties > Desktop > bir pencere olarak ayarlayınız.
18. Row içerisindeki Col alanına tıklayın. Col > Styling > Layout > Align bölümünden dikey hizalamayı Ortala, yatay hizalamayı ise Sağa olarak ayarlayın.
19. Col içerisine Elements > Container > HorizontalStack elementini sürükleyip bırakın.

20.  Label elementleri içerisinde Label > Styling > Layout > Width alanlarındaki default tanımlı 100 px değerlerini silin.

Adım 5 - Element Ayarlarının Yapılandırılması 

Sayfaya eklenen initial aksiyonun elementlere bağlantısı:

1. Panel içerisindeki herhangi bir elemente tıklayın ve breadcrumb menüsü aracılığıyla GalleryView elementine tıklayın.

2. GalleryView elementi içerisinde GalleryView > Properties > Datasource > GetProductGalleryData aksiyonunu seçin.

3. Sol kenardaki ilk Label elementine tıklayın. Label elementinde Label > Properties > Value > Field to display > ProductName olarak ayarlayın.

4. Sağ kenardaki ikinci Label elementine tıklayın. Label elementinde Label > Properties > Value > Field to display > StockStatus olarak ayarlayın.

5. Image elementine tıklayın. Image elementinde Image > Properties > Value > Field to display > ImageUrl olarak ayarlayın.

6. Alt kenardaki ilk Label elementine tıklayın. Label > Properties > Value > Field to display > Price olarak ayarlayın.

7. Alt kenardaki ikinci Label elementine tıklayın. Label > Properties > Value > Symbol Picker > Fixed Value > TL yazısını ekleyin. 

Kur bilgileri üzerinden farklı kur fiyatlarını tablo üzerine ekleyip gösterebilirsiniz. Örnek senaryoda sadece TL kullanılmıştır.

8. Son düzenlemelerden sonra beklenen görünüm aşağıdaki gibi olmalıdır
   

Preview:

Uygulama test edildiğinde, ürün kartlarının Gallery View elementi içerisinde yan yana listelendiği bir ürün galerisi görüntülenir. Her kartın üst bölümünde ürün adı ve stok durumu bilgisi yer alırken, orta bölümde ürüne ait görsel öne çıkarılmış şekilde sunulur. Kartın alt bölümünde ise ürünün fiyat bilgisi net ve okunabilir biçimde gösterilir.

Kullanıcı, farklı ayakkabı modellerini tek ekranda karşılaştırabilir; stokta, sınırlı stokta veya tükenmiş ürünleri kolayca ayırt edebilir. Bu yapı sayesinde ürünler düzenli, sade ve kullanıcı dostu bir şekilde listelenerek alışveriş deneyimi desteklenir.

4. Ortak Özellikler (Properties)

Gallery View 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)

• Kart yapısını sade ve tutarlı tutun. Farklı boyutlarda içerikler galeri düzenini bozabileceğinden mümkün olduğunca standart kart bileşenleri kullanın.
• Responsive kolon sayılarını doğru ayarlayın. Phone / Tablet / Desktop Columns Count ayarlarını doğru yapılandırmak, mobil uyumu doğrudan etkiler.
• Gutter (boşluk) ayarlarını doğru belirleyin. Çok dar gutter değerleri sıkışık görünüm oluştururken, çok geniş değerler sayfayı gereksiz uzatabilir.
• Boş veri durumunu kullanıcıya açıklayıcı şekilde gösterin. No Data Found Message ve Show No Data Found Image değerlerini özelleştirerek boş ekran deneyimini iyileştirin.
• Hover efektlerini dikkatli kullanın. Hover Font Color ve Hover Bg Color, görsel yoğun ekranlarda vurguyu artırırken aşırı kontrastlı renklerden kaçınılmalıdır.

6. Kısıtlamalar

• Gallery View elementi aksiyon ekleme (onClick, onChange vb.) desteklemez. Etkileşimler yalnızca içindeki elementler üzerinden yönetilebilir.
• Responsive yapı kolon sayılarına bağlıdır. Yanlış ayarlanan Phone/Tablet/Desktop Columns Count değerleri grid düzeninde bozulmalara neden olabilir.
• Görsel oranları tutarsız olduğunda düzen bozulabilir. Farklı en–boy oranlarına sahip görseller grid görünümünde hizalama sorunlarına neden olur.
• Gutter değerleri ekran genişliğine göre sabittir. Oranlı (yüzdesel) boşluk ayarı desteklenmediği için dar ekranlarda sıkışıklık oluşabilir.