Kuika'nın Image elementi, uygulamanızda görsel içerikler ekleyerek kullanıcı deneyimini zenginleştirmenizi sağlar. Statik görsellerin yanı sıra dinamik olarak değişebilen görselleri de destekler. Görseller, sabit bir URL üzerinden veya veri tablosundan çekilebilir. Ayrıca, Image elementi tıklanabilirlik, ölçekleme ve farklı boyutlandırma özelliklerini de sunar. Bu eğitim içeriğinde, Image elementini nasıl kullanacağınızı ve özelliklerini nasıl yapılandıracağınızı öğreneceksiniz.
Image elementi, web ve mobil uygulamalarda desteklenmektedir.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
Image elementi ekleme
Image elementi özellikleri
Image elementi ile veri kaynağına görsel ekleme
Veri kaynağına eklenen görseli kaldırma
Anlık fotoğraf yükleme
Element ayarları ve özelleştirme
Image Elementi Ekleyin
Kuika platformuna giriş yapın.
Apps ekranından çalışacağınız projeyi seçin.
UI Design modülüne girin.
Sol kenardaki Elements panelinden, Display kategorisi altındaki Image elementini sürükleyerek ekranınıza bırakın.
Image elementini boş bir alana sürüklerseniz, otomatik olarak bir Row elementi içinde eklenir.
Bir Column içine sürüklerseniz, yalnızca Image elementi eklenir.
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.
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.
Image Elementi İle 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.
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.
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.
Element Ayarları ve Özelleştirme
Authorization (Yetkilendirme)
Anonymous Access: Kullanıcıların hesap bilgisi girmeden erişmesini sağlar.
All Roles Access: Kullanıcıların hesap bilgileri doğrulanarak erişim sağlanır.
Element düzeyinde yetkilendirme için Properties panelinden Authorization ayarlarını düzenleyin.
Visibility (Görünürlük)
Always Visible: Element her zaman görünür.
Hidden: Element gizlenir.
Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.
Ayarı yapılandırmak için:
Ekrandaki elementi seçin.
Sağ kenardaki Properties panelini açın.
Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.
Editability (Düzenlenebilirlik)
Enabled: Element düzenlenebilir.
Disabled: Element düzenlenemez.
Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.
Style Panel ile Arayüz Tasarımı
Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:
Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.
Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.
Actions (Aksiyonlar)
Kuika, aşağıdaki sistem aksiyonlarını destekler:
Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations.
Kendi oluşturduğunuz SQL aksiyonlarını da kullanabilirsiniz.
Aksiyon eklemek için Properties panelinden +ADD ACTION butonunu kullanabilirsiniz.
Actions desteği bazı elementlerde geçerli olmayabilir.
