1. Vertical Stack Elementine Genel Bakış

Vertical Stack elementi, kullanıcı arayüzü elementlerini dikey bir düzende, üst üste hizalamak için kullanılan temel bir layout elementidir. İçindeki UI elementlerini tek bir kolon yapısında düzenleyerek içeriklerin daha okunabilir, düzenli ve hiyerarşik bir yapıda sunulmasını sağlar.

Form alanları, bilgi blokları, kart içerikleri veya alt alta gösterilmesi gereken her türlü UI elementi için kullanılabilir. Vertical Stack, spacing (boşluk yönetimi), alignment (hizalama) ve responsive davranışlar gibi özelliklerle UI düzenlerini daha kontrollü ve tutarlı hale getirir.

Vertical Stack elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Form alanlarını dikey olarak sıralamak. Örneğin: Ad, Soyad, E-posta, Telefon gibi input alanlarının alt alta gösterilmesi.
• Karmaşık içerikleri mantıksal bloklara ayırmak. Kart yapıları, profil bölümleri veya bilgi açıklamaları için idealdir.
• Ekran düzenini kolon formunda oluşturmak. Özellikle mobil cihazlarda alt alta dizilmesi gereken içeriklerde kullanılır.
• Liste benzeri içerikler oluşturmak. Örneğin bir Vertical Stack içerisinde birden fazla Row yerleştirerek dikey liste tasarlamak.
• Kart içi başlık – açıklama – aksiyon sıralamaları oluşturmak. Vertical Stack bu tür hiyerarşik düzenlerde en yaygın kullanılan elementtir.
• Dikey yönlü içerik akışı gereken tüm UI senaryoları. Haber akışları, açıklama blokları, formlar, ayar ekranları gibi.

2. Temel Özellikler

• Dikey hizalama (vertical layout) desteği. Vertical Stack içine eklenen tüm UI elementlerini üst üste, tek kolon yapısında düzenler.
• Esnek bir layout yapısı. İçerikler ekran genişliğine göre otomatik ölçeklenebilir; sabit veya esnek yüksekliklerle çalışabilir.
• Elementler arası boşluk yönetimi (spacing). Alt alta duran elementlerin arasındaki boşluk kolayca ayarlanabilir, düzen daha okunabilir hale gelir.
• Yatay hizalama kontrolü (horizontal alignment). Vertical Stack içindeki elementler sol, orta veya sağ hizalanabilir.
• Responsive uyumluluk. Mobil ve web ekranlarda sorunsuz çalışır; özellikle mobil ekranlarda uzun form ve içerik yapılarında çok etkilidir.
• Kapsayıcı bir düzen elementi. İçerisine Text, Button, Input, Icon, Image, Row ve diğer tüm UI elementleri eklenebilir.

2.1. Element Ayarları (Properties)

Vertical Stack elementini seçtiğinizde, sağ taraftaki Properties paneli üzerinden dikey düzenin boşluk ve hizalama davranışlarını kontrol edebilirsiniz. Aşağıdaki ayar şu anda Vertical Stack’in temel özelliğini oluşturur:

• Gap: Vertical Stack içerisine eklenen UI elementlerinin birbirleri arasındaki dikey boşluğu belirler. Varsayılan boşluk değeri: 12 px. Bu ayar ile:
  
  • Elementler arasındaki mesafeyi artırabilir veya azaltabilirsiniz.
  • Dikey düzenin okunabilirliğini ve düzenini iyileştirebilirsiniz.

2.2. Elemente Eklenebilen Aksiyonlar

Vertical Stack elementi bir düzen (layout) elementi olduğu için doğrudan aksiyon ekleme özelliğini desteklemez. Bu nedenle:

• Vertical Stack elementine ADD ACTION ile aksiyon bağlanamaz.
• Element seçildiğinde aksiyon paneli görünmez.
• Tıklama, yönlendirme, veri işleme gibi işlemler Vertical Stack üzerinden tetiklenemez.

Etkileşim gerektiren senaryolarda:

• Vertical Stack içine yerleştirilen Button, Text, Icon, Image, Row gibi elementlere aksiyon eklenebilir.
• Aksiyonlar bu alt elementlerden tetiklenir, Vertical Stack yalnızca düzen sağlar.

Vertical Stack sadece dikey düzen oluşturur; etkileşim davranışları çocuk elementlerde yönetilir.

3. Vertical Stack Elementi Nasıl Kullanılır? 

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

Senaryo: Profil Özet Kartı Oluşturma

Bir sosyal medya, şirket içi portal veya eğitim yönetim sistemi gibi uygulamalarda, kullanıcının temel profil bilgilerinin hızlı ve anlaşılır bir şekilde gösterilmesi önemlidir. Bu senaryoda, kullanıcının profil simgesi, adı ve pozisyon bilgisi tek bir kart üzerinde düzenli bir yapı ile sunulmaktadır.

Profil bileşenleri Vertical Stack içinde üstten alta doğru sıralanarak temiz ve sade bir görünüm oluşturulur. İlk sırada kullanıcı resminin yer aldığı kartın devamında, kullanıcının adı ve unvan bilgisi hiyerarşik olarak gösterilir.

Senaryoda:

• Kullanıcıyı temsil eden ikon kartın üst bölümünde yer alır.
• Altında kullanıcının adı, en altta ise pozisyon veya unvan bilgisi gösterilir.
• Vertical Stack, tüm bu bilgilerin tek bir kart üzerinde düzenli bir şekilde hizalanmasını sağlayarak kullanıcının kimlik özetini sade bir arayüzle sunar.

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

DataSources modülünde tablo oluşturma: 

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

• Önemli Alan adları:
  
  • UserName: Kullanıcının görünen adını veya profil kartında gösterilecek isim bilgisini tutar.
  • Department: Kullanıcının bağlı olduğu departman, pozisyon veya unvan bilgisini saklar.
  • ProfileImage: Kullanıcıya ait profil görselinin Image formatında saklandığı alandır. Kart üzerinde kullanıcı simgesi veya fotoğrafı bu alandan gösterilir.

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 (InsertUserProfileSummary): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO UserProfileSummary (Id, UserName, Department, ProfileImage)
VALUES
(
    NEWID(),
    'Ferhat',
    'Product Designer', 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNjQiIGN5PSI0MiIgcj0iMjQiIHN0eWxlPSJmaWxsOiAjNDA3OGZmOyIvPjxwYXRoIGQ9Ik02NCA3MmMtMjYuNCAwLTQ4IDE3LjctNDggMzguN2MwIDIuMiAxLjggMy45IDQgMy45aDg4YzIuMiAwIDQtMS43IDQtMy45QzExMiA4OS43IDkwLjQgNzIgNjQgNzJ6IiBzdHlsZT0iZmlsbDogI2Q2ZWRmZjsiLz48L3N2Zz4='
);

Profil fotoğrafı base64 formatında veri tablosuna eklenmiştir. Mevcut kullanıcı profil tablosundaki profil fotoğraflarını kullanabilirsiniz. Profil aşamalarında görseller URL yerine yüklendiği için bu senaryoda binary formatta kullanılmıştır. İsteğe bağlı olarak image URL de tercih edilebilir.

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

• Verileri Sağlayan ve Filtreleyen Aksiyon (InsertUserProfileSummary):

SELECT TOP 1 * FROM UserProfileSummary;

Örnek senaryoda demo bir kullanıcı kullanıldığı için oturum açan kullanıcıya veya kullanıcı ID’sine bağlı bir yapı kullanılmamıştır. İsterseniz senaryoyu gerçek kullanıcı bilgilerine göre uyarlayabiliriz.

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

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

Başlangıçta anasayfada: 

1. UI Design modülünü açın.
2. Sol yan panelden Elements > Container > Row elementini sayfaya sürükleyip bırakın. 
3. Row içerisinde Row > Properties > Desktop alanını bir sütun olarak ayarlayın.

4. Row içerisindeki Col alanına tıklayın ve Col > Styling > Layout > Align alanından sütunu sağ yaslayın ve dikeyde ortalayın.

5. Sol yan panelden Elements > Container > Panel elementini Col içerisine sürükleyip bırakın. 
6. Panel elementinde Panel > Styling > Layout alanında aşağıdaki tanımlamaları yapın.

7. Arka plan rengi Panel > Styling > Fill > White Background olarak seçimini yapın.

8. Kenarları Panel > Styling > Border > Radius alanında 50 px tanımlaması yapın.
9. Panel elementi içerisine Elements > Container > VerticalStack elementini ekleyin.
10.  Vertical Stack içerisini VerticalStack > Styling > Layout > Align alanından yatayda ortalayın.

Vertical Stack içerisinde dikeyde ortalama işlemi yapılamamaktadır.

11.  Vertical Stack içerisine Elements > Display > Image elementini ekleyin.
12.  Image içerisinde Image > Styling > Layout > Width ve Height alanlarını 32 px olarak tanımlayın. 

13.  Image altına Elements > Display > Label elementini ekleyin.
14.  Label elementi altına bir  Elements > Display > Label elementini ekleyin.

Adım 4 - Kullanıcı Getirme Aksiyonun Tanımlanması

1. Sayfaya Add Action > Initial Action > Custom > Managed DB > GetUserProfileSummary aksiyonunu tanımlayınız.

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

1. Image elementinde Image > Properties > Value > Action Results > GetUserProfileSummary > First > ProfileImage alanından profil resmini tanımlıyoruz.

2. İlk Label elemenetinde Label > Properties > Value > GetUserProfileSummary > First > UserName alanından kullanıcı ismini tanımlıyoruz.

3. Son olarak ikinci Label elemenetinde Label > Properties > Value > GetUserProfileSummary > First > Department alanından kullanıcı departmanını tanımlıyoruz.

Preview:

Uygulama test edildiğinde, Vertical Stack elementi kullanılarak oluşturulan profil kartında kullanıcıya ait profil simgesi, ad bilgisi ve pozisyon bilgisi düzenli bir şekilde üst üste hizalanmış olarak görüntülenir. Bu yapı sayesinde kart içerisindeki tüm bilgiler sade, okunabilir ve estetik bir görünümle kullanıcıya sunulur.

5. Kullanım Tavsiyeleri (Best Practices)

• Dikey akışlı tasarım oluştururken düzeni sade tutun. Çok fazla element yerleştirmek Vertical Stack’in okunabilirliğini azaltabilir.
• Gap değerini içerik yoğunluğuna göre ayarlayın. Formlarda daha geniş boşluklar, bilgi kartlarında daha kompakt boşluklar kullanılabilir.
• Vertical Stack’i bir kapsayıcı olarak kullanırken iç hizalamaya dikkat edin. Sol hizalama en okunabilir yapı olsa da bazı kart tasarımlarında center hizalama tercih edilebilir.
• Stack içine Row ekleyerek karmaşık düzenler oluşturabilirsiniz. Örn. her satır Row, satırların tamamı Vertical Stack içinde olabilir.

6. Kısıtlamalar

• Vertical Stack yalnızca dikey düzen sağlar; yatay hizalama için Row veya Horizontal Stack gerekir.