Image

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 ya da bir veri tablosundan çekilebilir, böylece uygulamanızdaki verilerle senkronize hale getirilebilir. Ayrıca, Image elementi ile görsellere tıklanabilirlik, ölçekleme ve farklı boyutlandırma özellikleri ekleyebilirsiniz. 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şmaktadır:

Image elementi ekleme,
Image elementi özellikleri,
Authorization (Yetkilendirme),
Visibility (Görünürlük),
Editability (Düzenlenebilirlik),
Style Panel ile arayüz tasarımını özelleştirme,
Actions (Aksiyonlar).

Image elementi ile veri kaynağınıza görsel eklemek için;

Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.

“UI Design” modülünde, sol kenarda bulunan “Elements” panelinden “Display” kategorisi altındaki Image elementini ekrana sürükleyip bırakın.
Uygulamanız çalışırken Image elementine görsel ekleyebilmek için “Elements” panelinden bir “Icon” elementi sürükleyip Image elementinin altına yerleştirin.
Ardından eklediğiniz Icon elementinin üstüne tıklayın.
Sağ kenardaki Properties panelinden “ADD ACTİON”a tıklayın.
“Onclick → Device → Photo From Gallery” seçimini yapın.
Tekrar “ADD ACTİON” açılır menüsüne dönerek “Onclick → UI Control → Set Value Of” seçimini yapın.
Açılan menüden “Component To Change” alanına, ilgili görseli yüklemek istediğiniz Image elementini seçin.
“Value” alanında ise Symbol Picker’a tıklayarak “Action Results → Photo From Gallery” seçimini yapın.

Artık uygulamayı çalıştırdığınızda, görüntüleme alanının altındaki ikona dokunduğunuzda, bilgisayarınızdan bir görsel yükleyebilirsiniz.

Veri Kaynağına Eklenen Görseli Kaldırın

Image elementinin altına bir tane daha “Icon” elementi yerleştirin. Örneğin, “X” ikonu seçebilirsiniz.
Eklediğiniz “Icon” elementine tıklayın.
Sağ kenardaki Properties panelinden “ADD ACTİON”a tıklayın.
“Onclick → UI Control → Set Value Of” seçimini yapın.
Açılan menüden “Component To Change” alanına, ilgili silmek istediğiniz Image elementi seçin.
“Value” alanında ise Symbol Picker’a tıklayarak “Default → Empty” seçimini yapın.

Bu işlemleri tamamladıktan sonra, artık “X” ikonuna tıklayınca görseliniz kaldırılacaktır.

Anlık Fotoğraf Yükleyin

Image elementinin altına bir tane daha “Icon” elementi yerleştirin. Örneğin, “fotoğraf makinesi” ikonu seçebilirsiniz.
Eklediğiniz “Icon” elementine tıklayın.
Sağ kenardaki Properties panelinden “ADD ACTİON”a tıklayın.
“Onclick → Device → Photo Take” seçimini yapın.
Tekrar “ADD ACTİON” açılır menüsüne dönerek “Onclick → UI Control → Set Value Of” seçimini yapın.
Açılan menüden “Component To Change” alanına, ilgili görseli yüklemek istediğiniz Image elementi seçin.
“Value” alanında ise Symbol Picker’a tıklayarak “Action Results → Photo Take” seçimini yapın.

Bu işlemleri tamamladıktan sonra, fotoğraf makinesi ikonuna tıkladığınızda cihazınızın kamerası açılacak ve anlık fotoğraflar çekerek uygulamanıza yükleyebileceksiniz.