Kuika’nın Image elementi, uygulamanıza görsel içerikler eklemenizi sağlayarak kullanıcı deneyimini daha zengin, estetik ve anlaşılır hale getirir. Image elementi hem statik görselleri hem de dinamik olarak veri kaynağından çekilen görselleri destekler. Bu sayede ürün görselleri, profil fotoğrafları, banner içerikleri, kampanya görselleri veya veri tabanından güncellenen resimler kolayca gösterilebilir.
Image elementi, sadece görsel göstermekle sınırlı değildir; tıklanabilirlik, responsive boyutlandırma, ölçekleme yöntemleri, köşelere yuvarlama, thumbnail kullanımı, arka plan görseli olarak kullanım gibi pek çok özelleştirme ile güçlü bir kullanıcı arayüzü oluşturmanıza imkân tanır.
Image elementi web ve mobil uygulamalarda tam olarak desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Ürün Görselleri Gösterme: E-ticaret uygulamalarında ürün fotoğraflarını listelemek, detay sayfasında büyük boyutlu görseller göstermek.
Profil Fotoğrafı Kullanımı: Kullanıcı hesap ekranlarında profil fotoğrafını statik veya dinamik veri kaynağı üzerinden göstermek.
Banner ve Kampanya Alanları: Ana sayfalarda reklam, kampanya veya bilgilendirme amaçlı büyük görseller oluşturmak.
Dinamik Görsel Yükleme: Veri tabanından veya API üzerinden gelen URL’lere göre görselin otomatik değişmesi.
Galeri ve Slayt Yapıları: Carousel, Horizontal Grid veya Gallery View gibi bileşenlerin içinde görsel sunumlarını zenginleştirmek.
Placeholder Image Gösterimi: Görsel URL’si boş olduğunda varsayılan bir görselin otomatik gösterilmesi (ör. kullanıcı profil resmi yoksa default avatar).
Tıklanabilir Görsel ile Navigasyon: Görsel üzerine tıklanınca farklı bir sayfaya gitmek, modal açmak veya aksiyon çalıştırmak için OnClick kullanımı.
2. Temel Özellikler
Statik veya Dinamik Görsel Desteği: Image elementi sabit bir görsel URL’si ile kullanılabilir veya Symbol Picker aracılığıyla veri tabanından gelen dinamik bir görsele bağlanabilir.
Responsive Yapı: Web ve mobil uygulamalarda otomatik olarak ekran genişliklerine uyum sağlar, böylece farklı cihazlarda doğru oranda görüntülenir.
Tıklanabilir Görsel Kullanımı: Image elementi bir buton gibi davranabilir; kullanıcı tıkladığında belirlenen bir aksiyon çalıştırılabilir (örneğin, sayfa geçişi veya modal açma).
2.1. Image Elementi Özellikleri
Image elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Value: Image elementinin alacağı statik veya dinamik değerleri belirler. Symbol Picker ile Uploaded Images seçeneğini kullanarak görsel kütüphanesindeki görüntülerden birini seçebilirsiniz. Veri bağlantısı kurulduğunda, veri tablosundaki görsel de görüntülenebilir.
Placeholder Image: Görsel yüklenmediğinde varsayılan bir görüntü gösterir. İhtiyacınıza göre bu görüntüyü değiştirebilirsiniz.
Zoom On Click: Görüntüye çift tıklama veya dokunma işlemiyle yakınlaştırma yapılmasını sağlar.
Image Fit: Görüntünün, Styling > Layout bölümünde belirtilen boyuta nasıl sığdırılacağını belirler. Elementin ebeveyn elementi tarafından belirlenen boyuta da uyum sağlayabilir.
2.1.1.Görsel Kütüphanesi Kullanımı
Properties panelinde Value alanına tıklayın.
Açılan menüden Uploaded Images seçeneğini seçin.
Görsel kütüphanesi penceresinde şu seçenekler bulunur:
ADD IMAGE: Cihazınızdaki görselleri sürükleyip bırakarak veya dosya seçerek ekleyebilirsiniz.
GENERATE WITH AI: Yapay zeka asistanı ile istediğiniz görseli tarif ederek, tarayıcılarda bulunmayan görseller üretebilirsiniz. Üretilen görselleri, sağ üst köşedeki Download ikonuna tıklayarak kütüphaneye ekleyebilirsiniz.
PNG, JPG ve SVG formatları hem web hem de iOS uygulamalarında doğrudan görüntülenebilir. Ancak, SVG formatı Android uygulamalarında desteklenmez. Bunun için görselleri Android Vector Drawable - XML formatında yüklemelisiniz. Hem .svg hem de .xml formatlarını aynı isimle yüklediğinizde, Kuika cihaz türüne göre uygun formatı otomatik olarak seçer.
2.1.2. Image Elementi ile Veri Kaynağına Görsel Ekleme
Kuika platformunda uygulamanızı açın.
UI Design modülünde, Elements panelinden Image elementini ekrana sürükleyin.
Elements panelinden bir Icon elementi sürükleyerek Image elementinin altına yerleştirin.
Eklediğiniz Icon elementine tıklayın.
Sağ kenardaki Properties panelinde ADD ACTION seçeneğine tıklayın.
OnClick → Device → Photo From Gallery seçimini yapın.
Tekrar ADD ACTION menüsüne dönün ve OnClick → UI Control → Set Value Of seçimini yapın.
Açılan menüde:
Component To Change: Görselin yükleneceği Image elementini seçin.
Value:Symbol Picker aracılığıyla Action Results → Photo From Gallery seçimini yapın.
Artık uygulamayı çalıştırdığınızda, ilgili ikona tıklayarak cihazınızdaki bir görseli yükleyebilirsiniz.
2.1.3. Veri Kaynağına Eklenen Görseli Kaldırma
Image elementinin altına bir Icon elementi (örneğin, “X” ikonu) yerleştirin.
Icon elementine tıklayın.
Sağ kenardaki Properties panelinde ADD ACTION seçeneğine tıklayın.
OnClick → UI Control → Set Value Of seçimini yapın.
Açılan menüde:
Component To Change: Görselin silineceği Image elementini seçin.
Value:Symbol Picker aracılığıyla Default → Empty seçimini yapın.
Bu işlemler tamamlandıktan sonra, kullanıcı “X” ikonuna tıkladığında görsel kaldırılacaktır.
2.1.4. Anlık Fotoğraf Yükleme
Image elementinin altına bir Icon elementi (örneğin, “kamera” ikonu) yerleştirin.
Icon elementine tıklayın.
Sağ kenardaki Properties panelinde ADD ACTION seçeneğine tıklayın.
OnClick → Device → Photo Take seçimini yapın.
Tekrar ADD ACTION menüsüne dönün ve OnClick → UI Control → Set Value Of seçimini yapın.
Açılan menüde:
Component To Change: Görselin yükleneceği Image elementini seçin.
Value:Symbol Picker aracılığıyla Action Results → Photo Take seçimini yapın.
Bu işlemler tamamlandıktan sonra, kamera ikonuna tıkladığınızda cihazınızın kamerası açılacak ve anlık fotoğraflar çekerek uygulamanıza yükleyebileceksiniz.
Önemli Notlar
Image elementi, büyük veri kümelerinde bile hızlı yüklenir ve kullanıcı deneyimini olumsuz etkilemeden yüksek performans sağlar.
Base64 formatında tutulan fotoğraflar, ağ üzerinde yavaşlık yaratmaması için tablonun ID’si aracılığıyla görüntülenir.
Styling > Layout ayarlarını kullanarak görsellerin boyutunu, hizalanmasını ve diğer stil özelliklerini özelleştirebilirsiniz.
2.2. Elemente Eklenebilen Aksiyonlar
Image elementi, kullanıcı etkileşimlerini yakalayabilen iki temel aksiyonu destekler. Bu aksiyonlar, görsele tıklama veya görsel kaynağının değişmesi gibi durumlarda belirli işlemleri tetiklemek için kullanılır.
onClick
Kullanıcı görsele tıkladığında tetiklenen aksiyondur. Sık kullanım senaryoları:
Bir sayfaya yönlendirme yapmak
Bir modal veya popup açmak
Detay sayfasına geçiş
Görseli büyütme (preview) işlemi
Bir aksiyon çalıştırarak veri kaydı veya güncelleme yapmak
onChange
Image elementinin kaynağı (URL veya Base64 görsel verisi) değiştiğinde tetiklenen aksiyondur. Sık kullanım senaryoları:
Dinamik olarak değişen görseli izleme
Form içindeki resim değiştiğinde otomatik işlem başlatma
Veri tabanına kaydedilecek yeni görseli işleme alma
Bir validasyon veya kontrol aksiyonunu tetikleme
Image elementi, bu iki tetikleyici sayesinde hem kullanıcı tıklamalarına hem de görsel değişimlerine tepki vererek uygulamanın etkileşim seviyesini artırır.
3. Image Elementi Nasıl Kullanılır?
Bu bölümde Image elementinin uçtan uca kullanımını, sistem hata durumlarını gösteren bir ekran üzerinden ele alacağız.
Senaryo: Kampanya / Banner Görseli Kullanımı
Bir uygulamada kullanıcıya sunulan kampanya veya duyuruların hızlı ve dikkat çekici şekilde aktarılabilmesi için banner görselleri kullanılır.
Bu senaryoda, ana ekranda konumlandırılan kampanya görseli; indirim, fırsat veya özel bir duyuruyu görsel olarak vurgulayarak kullanıcının içeriği tek bakışta algılamasını sağlar.
Senaryoda:
Image elementi ekranın merkezinde konumlandırılır.
Görsel, aktif kampanya veya duyuruyu temsil eden banner içeriği sunar.
Kampanyaya ait açıklama metni ve yönlendirme butonları görselin altında yer alır.
Adım 1 - Gerekli Aksiyonu Tanımlama
Arayüzde verileri göstermek ve veri eklemek için:
Bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Periyodları Sağlayan Aksiyon (GetCampaignImage):
SELECT N'Bahar Fırsatları Kampanyası' AS CampName, 'https://images.openai.com/static-rsc-3/dnXoeFS39sSiiwyNe_hZSsY7P7FvDc796R6XiB5M7J2G_7iEOsfBVC63fjkUyoZbnjyCXArTnuOkimtDq6OAHMGLqntZzaIavA56fEyxXJA?purpose=fullsize' AS ImageUrl
Sayfaya sol panelden Elements > Display > Label elementini ekleyin.
Yazıyı Label > Properties > Value > Action Results > GetCampaignImage > First > CampName olarak güncelleyin.
Yazı stilini Label > Styling > Text > Style > Heading 1 olarak ayarlayın.
Label elementinin yanındaki boşluğa tıklayın ve gelen Col seçeneklerinde Col > Styling > Layout > Align > Dikeyde ve Yatayda Ortala olarak ayarlayın.
Sayfaya Elements > Display > Image elementini sürükleyip bırakın.
Gösterilecek görseli Image > Properties > Value > Action Results > GetCampaignImage > First > ImageUrl alanını tanımlayın.
Resme tıklandığında büyütülmesi için Image > Properties > ZoomOnClick > Açık olarak ayarlayın.
Resmin alanı tamamen doldurması için Image > Properties > ImageFit > Fill olarak ayarlayın.
Image boyutlarını Image > Styling > Layout > Width > 100 % olarak tüm sütunu dolduracak şekilde, yüksekliğini de Height > 500 px ayarlayın.
Width alanında px yerine % seçimi yapmayı unutmayın.
Image elementinin yanındaki boşluğa tıklayın ve gelen Col seçeneklerinde Col > Styling > Layout > Align > Dikeyde ve Yatayda Ortala olarak ayarlayın.
Preview
Uygulama test edildiğinde, kampanya banner görselinin Image elementi üzerinden doğrudan bir URL kullanılarak ekrana yansıtıldığı görülür. Görsel; boyut, hizalama ve stil ayarları kolaylıkla düzenlenerek istenilen tasarım yapısına uygun şekilde eklenebilir. Bu sayede kampanya içerikleri hızlı ve esnek biçimde güncellenebilir.
4. Ortak Özellikler (Properties)
Image 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:
Tıklanabilir görsellerde net bir aksiyon hedefi belirleyin. Kullanıcı görsele tıkladığında nereye yönlendirileceği veya hangi işlemin tetikleneceği açık bir şekilde kurgulanmalıdır.
Responsive boyutlandırma tercih edin. Mobil ve tablet cihazlarda uyumlu görünmesi için Image elementinin genişlik ve yükseklik ayarlarını yapın.
OnChange tetikleyicisini dikkatli kullanın. Görsel kaynağı sık değişen senaryolarda gereksiz aksiyon tetiklemelerini önlemek için kontrol mekanizmaları eklenmelidir.
Arka plan şeffaflığına dikkat edin. PNG gibi transparan görsellerde koyu veya açık temaya göre zemin kontrastını kontrol etmek önemlidir.
6. Kısıtlamalar
Hatalı veya boş URL kullanıldığında görsel yüklenmeyebilir. Image elementi doğrudan yüklediği URL’nin durumuna bağlıdır.
onChange, yalnızca görsel kaynağı değiştiğinde tetiklenir. Tıklama, hover vb. etkileşimlerde çalışmaz; bu işlemler için yalnızca onClick kullanılabilir.
