1. Splitter Elementine Genel Bakış

Splitter elementi, ekranı yan yana ya da alt alta iki bölmeye ayıran bir container (kapsayıcı) elementidir. Bölmelerin arasında sürüklenebilir bir tutamak (gutter) bulunur; kullanıcı uygulamayı kullanırken bu tutamağı sürükleyerek bölmelerin genişliğini veya yüksekliğini kendisi ayarlayabilir.

Splitter'ın her bölmesi bir SplitterPanel olarak tanımlanır. Splitter ekrana eklendiğinde içerisinde otomatik olarak iki SplitterPanel ile birlikte gelir. Her SplitterPanel'in içerisine Tree, Table, form alanları, harita veya diğer tüm UI elementleri yerleştirilebilir.

Splitter öncesinde bu tür düzenler sabit genişlikli Col elementleriyle kurulabiliyordu; ancak bu yapıda kullanıcı bölme genişliklerini değiştiremiyordu. Splitter, kullanıcının kendi ekranını ihtiyacına göre daraltıp genişletebildiği esnek arayüzler oluşturmayı sağlar.

Splitter elementi şu anda yalnızca web projelerinde desteklenmektedir. Android ve iOS projelerinde görüntülenmez.

1.1. Sık Kullanım Senaryoları

Splitter, bir tarafta seçim yapılan, diğer tarafta ise seçilen kaydın detayının gösterildiği ekranlar için idealdir:

• Ürün ağacı ve parça detayı. Solda ürün ağacı, sağda seçilen parçanın detay bilgileri.
• Liste ve önizleme. Solda kayıt listesi, sağda seçilen kaydın önizlemesi.
• Kategori/klasör ağacı ve içerik. Solda kategori veya klasör yapısı, sağda ilgili içerikler.
• Form ve canlı önizleme. Solda form alanları, sağda formun çıktısının anlık önizlemesi.
• Harita ve liste. Harita ile konum listesinin yan yana gösterilmesi.

İki bölmenin genişliği her zaman sabit kalacaksa Row ve Col elementleri yeterlidir. Splitter, kullanıcının bölme boyutlarını değiştirebilmesinin istendiği ekranlarda tercih edilmelidir.

2. Temel Özellikler

• Container olarak çalışma. Splitter, içerisindeki SplitterPanel'ler aracılığıyla her türlü UI elementini barındırabilir.
• Yatay ve dikey bölme. Bölmeler yan yana (horizontal) veya alt alta (vertical) konumlandırılabilir.
• Kullanıcı tarafından yeniden boyutlandırma. Bölmeler arasındaki tutamak sürüklenerek panel boyutları çalışma anında değiştirilebilir.
• Panel bazında boyut sınırları. Her panel için açılış boyutu ile minimum ve maksimum sınırlar tanımlanabilir.
• Daraltılabilir paneller. Tutamağa çift tıklanarak panel tamamen kapatılabilir, tekrar çift tıklanarak geri açılabilir.
• Klavye desteği. Tutamağa klavye ile odaklanıldığında ok tuşlarıyla panel boyutu 10'ar piksel değiştirilebilir, Enter veya Space tuşuyla panel daraltılabilir.

2.1. Element Ayarları (Properties)

Splitter yapısında ayarlar iki seviyede yapılır: Splitter elementinin kendisine ait ayarlar ve her bir SplitterPanel'e ait ayarlar.

Splitter Ayarları

Splitter elementini seçtiğinizde sağ tarafta yer alan Properties paneli üzerinden aşağıdaki ayarları yapılandırabilirsiniz.

Orientation (Yönlendirme)
Bölmelerin hangi yönde sıralanacağını belirler.

• Horizontal: Paneller yan yana konumlanır. Ağaç–detay ve liste–önizleme düzenleri için uygundur.
• Vertical: Paneller alt alta konumlanır. Üstte içerik, altta detay veya önizleme alanı gibi yapılar için uygundur.

GutterSize: Bölmeler arasındaki tutamağın kalınlığını belirler. İnce bir tutamak sade bir görünüm sağlarken, daha kalın bir tutamak fark edilmesini ve sürüklenmesini kolaylaştırır.

GutterColor: Tutamağın rengini belirler. Uygulamanın tema renkleriyle uyumlu bir renk seçilerek bölmeler arasındaki ayrım belirgin veya sade hale getirilebilir.

Splitter'ın Properties alanında ayrıca içerisindeki panellerin listesi yer alır. Bu liste üzerinden panellere tıklanarak ilgili panelin ayarlarına geçilebilir, yukarı/aşağı ok ikonları ile panellerin sırası değiştirilebilir.

SplitterPanel Ayarları

Splitter'ın Properties alanındaki panel listesinden veya BreadCrumb üzerinden ilgili SplitterPanel seçildiğinde aşağıdaki ayarlar görüntülenir:

DefaultSize: Panelin ekran ilk açıldığında kaplayacağı boyutu belirler. Değer piksel (px) veya yüzde (%) olarak girilebilir. Örneğin: sol panel %30, sağ panel %70.

MinSize: Kullanıcının paneli küçültebileceği en küçük boyutu belirler. İçeriğin okunamayacak kadar daralmasını engeller.

MaxSize: Kullanıcının paneli büyütebileceği en büyük boyutu belirler. Bir panelin diğer paneli ekrandan tamamen itmesini engeller.

Resizable: Panelin yeniden boyutlandırılıp boyutlandırılamayacağını belirler. Kapatıldığında o panelin kenarındaki tutamak sürüklenemez ve panel DefaultSize değerinde sabit kalır.

Collapsible: Panelin daraltılabilir olup olmayacağını belirler. Açık olduğunda kullanıcı tutamağa çift tıklayarak paneli tamamen kapatabilir, tekrar çift tıklayarak geri açabilir. Klavye ile kullanımda aynı işlem Enter veya Space tuşuyla yapılır.

3. Splitter Elementi Nasıl Kullanılır?

Bu bölümde Splitter elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.

Senaryo: Ürün Ağacı ve Parça Detayı Ekranı Oluşturma

Bir üretim yönetimi uygulamasında, bir ürünün hangi montaj gruplarından, hammaddelerden ve operasyonlardan oluştuğunu ağaç yapısında görmek ve seçilen parçanın detaylarını aynı ekranda incelemek önemlidir.

Bu senaryoda ekran Splitter ile iki bölmeye ayrılır. Sol panelde ürün ağacı Tree elementi ile gösterilir; her düğüm türüne göre kendi ikonu ve rengiyle, miktar ve birim bilgileriyle birlikte listelenir. Sağ panelde ise ağaçta seçilen parçanın detay bilgileri görüntülenir. Kullanıcı tutamağı sürükleyerek ağaç alanını genişletebilir veya ağaç panelini daraltarak detay alanına odaklanabilir.

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

DataSources modülünde tabloyu oluşturma:

1. Datasources modülüne gidin.
2. Ardından Tables sekmesine gidin.
3. "ProductPart" adında yeni tablo oluşturun.

Tablo; Id, ParentId, Name, PartType, PartCode, Quantity, Unit, Icon, Color ve Description sütunlarından oluşur.

Önemli Alan adları:

• Id: Parçaya ait benzersiz kimlik bilgisidir.
• ParentId: Parçanın ağaçta bağlı olduğu üst düğümün Id bilgisidir. En üst düğümde (ürünün kendisinde) boş bırakılır. Tree elementi hiyerarşiyi bu alan üzerinden kurar.
• Name: Ağaçta düğüm metni olarak gösterilecek parça adıdır.
• PartType: Parçanın türünü belirtir. Örn: Ürün, Montaj, Hammadde, Operasyon.
• PartCode: Parçaya ait stok veya malzeme kodudur.
• Quantity: Üst düğüm için gereken miktar bilgisidir.
• Unit: Miktarın birimidir. Örn: adet, kg, dk.
• Icon: Düğümde gösterilecek ikondur. Material icon adı veya bir resim URL'i olarak saklanır.
• Color: Düğümün ikon ve metin rengini belirler. HEX formatında saklanır.
• Description: Parçaya dair açıklama bilgisidir. Detay panelinde gösterilir.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için üç aksiyon tanımlamanız gerekir. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

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

-- 1) Üst düğümler için değişkenleri tanımla
DECLARE @Product   UNIQUEIDENTIFIER = NEWID();
DECLARE @Frame     UNIQUEIDENTIFIER = NEWID();
DECLARE @WheelSet  UNIQUEIDENTIFIER = NEWID();

-- 2) ProductPart tablosuna verileri ekleme
INSERT INTO ProductPart (Id, ParentId, Name, PartType, PartCode, Quantity, Unit, Icon, Color, Description)
VALUES
(@Product,  NULL,      N'Şehir Bisikleti',   N'Ürün',      'PRD-100', 1,  N'adet', 'pedal_bike',   '#1E88E5', N'Nihai ürün'),
(@Frame,    @Product,  N'Gövde Montajı',     N'Montaj',    'MNT-110', 1,  N'adet', 'build',        '#6D4C41', N'Kadro ve çatal montaj grubu'),
(NEWID(),   @Frame,    N'Alüminyum Profil',  N'Hammadde',  'HM-111',  2.4, N'kg',  'inventory_2',  '#E53935', N'6061 alüminyum boru profil'),
(NEWID(),   @Frame,    N'Kaynak Operasyonu', N'Operasyon', 'OP-112',  45, N'dk',   'engineering',  '#43A047', N'Kadro birleştirme kaynağı'),
(@WheelSet, @Product,  N'Tekerlek Seti',     N'Montaj',    'MNT-120', 2,  N'adet', 'build',        '#6D4C41', N'Ön ve arka tekerlek'),
(NEWID(),   @WheelSet, N'Jant',              N'Hammadde',  'HM-121',  1,  N'adet', 'inventory_2',  '#E53935', N'28 inç alüminyum jant'),
(NEWID(),   @WheelSet, N'Lastik',            N'Hammadde',  'HM-122',  1,  N'adet', 'inventory_2',  '#E53935', N'700x35C şehir lastiği'),
(NEWID(),   @Product,  N'Son Montaj',        N'Operasyon', 'OP-130',  30, N'dk',   'engineering',  '#43A047', N'Tüm grupların birleştirilmesi');

Ağaç Verisini Sağlayan Aksiyon (GetProductTree):

SELECT
    Id,
    ParentId,
    Name,
    PartType,
    Quantity,
    Unit,
    Icon,
    Color
FROM ProductPart;

Seçilen Parçanın Detayını Sağlayan Aksiyon (GetPartDetail): Bu aksiyon için PartId adında bir parametre tanımlayın.

SELECT
    Name,
    PartType,
    PartCode,
    Quantity,
    Unit,
    Description
FROM ProductPart
WHERE Id = @PartId;

Uygularken ProductPart kısmını silip tekrar ProductPart 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

1. UI Design modülünü açın.
2. Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetProductTree aksiyonunu ekleyin.

Adım 4 - Element Ekleme

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çerisine Elements > Container > Splitter elementini sürükleyip bırakın. Splitter, içerisinde iki SplitterPanel ile birlikte gelir.
4. İlk SplitterPanel içerisine Tree elementini sürükleyip bırakın.
5. İkinci SplitterPanel içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
6. VerticalStack elementine tıklayın ve sol yan panelden Elements > Display > Label elementine beş kez tıklayarak alt alta beş Label oluşturun.

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

Sayfada alt kısımda yer alan BreadCrumb aracılığıyla istediğiniz elemente ulaşabilirsiniz.

Splitter ayarları:

1. BreadCrumb üzerinden Splitter1 elementine tıklayın.
2. Splitter > Properties > Orientation alanında horizontal seçimini yapın.
3. Splitter > Properties > GutterSize alanında 6 px tanımlaması yapın.
4. Splitter > Properties > GutterColor alanında #E0E0E0 rengini seçin.

Sol panel (ürün ağacı) ayarları:

1. Splitter Properties alanındaki panel listesinden ilk SplitterPanel'e veya BreadCrumb üzerinden SplitterPanel1_0 elementine tıklayın.
2. DefaultSize alanında %35 tanımlaması yapın.
3. MinSize alanında 250 px tanımlaması yapın.
4. MaxSize alanında %60 tanımlaması yapın.
5. Resizable alanını aktif hale getirin.
6. Collapsible alanını aktif hale getirin. Böylelikle kullanıcı tutamağa çift tıklayarak ağacı kapatabilir ve detay alanına odaklanabilir.

Sağ panel (parça detayı) ayarları:

1. İkinci SplitterPanel'e (SplitterPanel1_1) tıklayın.
2. DefaultSize alanında %65 tanımlaması yapın.
3. MinSize alanında %40 tanımlaması yapın.
4. Resizable alanını aktif hale getirin.
5. Collapsible alanını pasif bırakın. Böylelikle detay alanı hiçbir zaman tamamen kapanmaz.

Tree ayarları:

1. Tree elementine tıklayın ve Tree > Properties > Datasource alanında GetProductTree aksiyonunu seçin.
2. Düğüm kimliği için Id, üst düğüm için ParentId, düğüm metni için Name alanlarını tanımlayın.
3. Icon Field alanında Icon tanımlamasını yapın. Her düğüm, türüne uygun ikonla gösterilir.
4. Color Field alanında Color tanımlamasını yapın. Hammaddeler kırmızı, operasyonlar yeşil, montaj grupları kahverengi olarak ayırt edilir.
5. Columns alanına Quantity ve Unit alanlarını ekleyin. Miktar ve birim bilgileri düğüm metninin sağında hizalı olarak görüntülenir.
6. Column Width alanından kolon genişliğini ayarlayın. Kolon başlık şeridinin görünmesini istemiyorsanız Show Column Header alanını kapatın.

Columns ile eklenen alanlar tablo değil, düğüm metninin yanında hizalanmış hücrelerdir. Bu alanlarda sıralama ve filtreleme yapılamaz.

Seçim ve detay bağlantısı:

1. Tree elementi seçiliyken ADD ACTION butonundan düğüm seçildiğinde tetiklenen aksiyonu ekleyin ve GetPartDetail aksiyonunu seçin.
2. PartId parametresine seçilen düğümün Id değerini verin.
3. Sağ paneldeki Label elementlerinde Label > Properties > Value > Field to display alanında GetPartDetail aksiyonundan gelen alanları sırasıyla tanımlayın: Name, PartType, PartCode, Quantity ve Description.

Preview

Uygulama test edildiğinde, ekran Splitter elementi ile iki bölmeye ayrılmış şekilde görüntülenir. Sol panelde ürün ağacı; her düğüm kendi ikonu, türüne göre rengi ve sağında hizalanmış miktar–birim bilgileriyle listelenir. Ağaçta bir parçaya tıklandığında, seçilen parçanın adı, türü, kodu, miktarı ve açıklaması sağ panelde gösterilir.

Kullanıcı bölmeler arasındaki tutamağı sürükleyerek ağaç alanını tanımlanan sınırlar içinde genişletip daraltabilir. Tutamağa çift tıklandığında ağaç paneli tamamen kapanır ve detay alanı tüm ekranı kaplar; tekrar çift tıklandığında ağaç paneli geri açılır.

4. Ortak Özellikler (Properties)

Splitter ve SplitterPanel elementleri ü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)

• Splitter'ı yalnızca gerçekten gerektiğinde kullanın. Bölme genişlikleri sabit kalacaksa Row ve Col elementleri daha basit bir çözümdür.
• Her panel için MinSize tanımlayın. Minimum boyut belirlenmemiş paneller, içindeki Tree veya form alanlarının okunamayacağı kadar daraltılabilir.
• Seçim panelini daraltılabilir, detay panelini sabit tutun. Ağaç, liste veya kategori gibi seçim alanlarında Collapsible özelliğini açmak, kullanıcının gerektiğinde detaya odaklanmasını sağlar.
• Ekran boyutuna göre px veya % tercih edin. İçeriği belirli bir genişliğin altına düşmemesi gereken panellerde MinSize için px, genel oranı korumak istediğiniz panellerde DefaultSize için % kullanın.
• GutterSize ve GutterColor ile tutamağı fark edilir kılın. Kullanıcıların bölmeleri yeniden boyutlandırabileceğini anlaması için tutamağın arka planla yeterli kontrasta sahip olmasına dikkat edin.

6. Kısıtlamalar

• Splitter yalnızca web projelerinde desteklenir; Android ve iOS projelerinde kullanılamaz.
• Splitter yalnızca iki bölme ile çalışır. Diğer UI elementleri doğrudan Splitter'a değil, SplitterPanel'lerin içerisine eklenmelidir.
• Resizable özelliği kapatılan panelin kenarındaki tutamak sürüklenemez; bu durumda panel yalnızca DefaultSize değerinde görüntülenir.
• Panellerin DefaultSize, MinSize ve MaxSize değerleri birbiriyle uyumlu olmalıdır. Panellerin toplam minimum boyutları ekran alanını aşarsa düzen beklendiği gibi çalışmayabilir.