Kuika’nın Barcode Renderer elementi, barkodları oluşturmak ve görüntülemek için kullanılır. Barkodlar, ürün bilgilerini hızlı ve etkili bir şekilde iletmek için yaygın olarak kullanılır ve bu element sayesinde uygulamanızda barkodları kolayca entegre edebilirsiniz. Barkod Renderer, farklı barkod türlerini destekler ve kullanıcıların ürünleri tarayıcılar veya mobil cihazlar aracılığıyla kolayca tanımlamasını sağlar. Bu eğitim içeriğinde, Barcode Renderer elementini kullanarak nasıl barkod oluşturabileceğinizi ve uygulamanızda nasıl görüntüleyebileceğinizi öğreneceksiniz.

Barcode Renderer elementi yalnızca web uygulamaları desteklemektedir.

Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:

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

Barcode Renderer Elementi Ekleyin

‍

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

“UI Design” (1) modülünde, sol kenarda bulunan “Elements” (2) panelinden "Display" (3) kategorisi altındaki Barcode Renderer elementini (4) ekrana sürükleyip bırakın.

Elements panelinden Barcode Renderer elementini ekranda boş bir alana sürüklerseniz Row elementi ile eklenir. Bir Column içine sürüklerseniz sadece Barcode Renderer elementi eklemiş olursunuz.

Barcode Renderer Elementi Özellikleri

Properties panelinde bulunan:

Value: Value alanına, statik bir değer ekleyebileceğiniz gibi Symbol Picker aracılığıyla bir durumu, Input elementinin içeriğini veya bir aksiyon sonucuna ait değerin dinamik olarak gelmesini de sağlayabilirsiniz.
Format: Dünya standartlarına uygun olan barkod formatlarından size en uygun olanını seçebilirsiniz. Barcode Renderer, Value bölümünden aldığı değer ile seçilen formatta barkod gösterimini sağlar. Barcode Renderer elementi seçili iken, Properties panelinde bulunan Formatter açılır menüsü aracılığıyla barkod formatınızı belirleyebilirsiniz. Açılır pencerede EAN13, UPC, EAN8, EAN5, CODE128A, CODE128B, CODE39, ITF14, MSI, MSI10, MSI11, MSI1010, MSI1110, Pharmacode ve Codebar gibi barkod kodları yer almaktadır.some text
- EAN13: Uluslararası ürün tanımlama için kullanılan 13 haneli barkod kodu.
- UPC: Kuzey Amerika'da yaygın olarak kullanılan evrensel ürün kodu.
- EAN8: 8 haneli barkod, daha az bilgi taşıyan bir formattır.
- EAN5: Özel etiketlemeler için kullanılan 5 haneli barkod kodu.
- Code128A, Code128B, Code128C: Yüksek yoğunluklu barkod formatlarıdır ve farklı karakter setlerini temsil eder.
- Code39: Düşük yoğunluklu barkod olup, harf, rakam ve özel karakterleri içerir.
- ITF14: 14 haneli barkod, özellikle kartonlar ve lojistik süreçler için kullanılır.
- MSI, MSI10, MSI11, MSI1010, MSI1110: Modulus barkodlarıdır ve 10 ve 11 gibi modlarla işlenir.
- Pharmacode: İlaç ambalajlarını tanımlamak için kullanılan özel bir barkod formatıdır.‍
Codebar: Genellikle hızlı tarama işlemleri için tercih edilen bir barkod formatıdır.

Authorization (Yetkilendirme).

Uygulamanızın ekran ve elementlerinde, "Anonymous Access" ve "All Roles Access" yetkilendirme seçenekleri ile kullanıcı erişimini özelleştirebilirsiniz. "Anonymous Access" herhangi bir hesap bilgisi sorgulaması olmadan erişimi mümkün kılarken, "All Roles Access" ile kullanıcı hesap bilgileri doğrulanarak erişim sağlanır.

Element düzeyinde yetkilendirme için, ilgili elementi seçip Properties panelinden "Authorization" ayarlarını düzenleyerek, uygulamanızın güvenlik ve kullanıcı deneyimini yönetebilirsiniz.

Visibility (Görünürlük)

Ekranların veya elementlerin görünürlüğünü ayarlamanıza olanak tanır. Elementler'de Visibility, belirli bir durum veya koşula göre görünürlüğü düzenlemenizi sağlar. Her bir element için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.

Ekrandaki elemente tıklayın.
Sağ kenardaki “Properties” panelini açın.
“Visibility” alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın. Kuika, uygulamanızdaki ekranların görünürlük kontrolünü yapabilmeniz için Always Visible, Hidden, Sometimes Visible seçeneklerini sunmaktadır.

Always Visible: Uygulamanızdaki ekranların her zaman görünür olmasını sağlar. ‍
Hidden: Uygulamanızdaki ekranların gizlenmesini sağlar. ‍
Sometimes Visible: Uygulamanızdaki ekranların koşula bağlı görünür olmasını sağlar.

Editability (Düzenlenebilirlik)

‍

Elementleri düzenlenebilir hale getirmenize olanak tanır.

Enabled: Bu seçenek seçildiğinde, ilgili element düzenlenebilir hale gelir.
Disabled: Bu durumda, ilgili element düzenlenemez.
Sometimes Enabled: Bu seçenek, öğenin belirli koşullara göre bazen düzenlenebilir, bazen düzenlenemez olduğu anlamına gelir.

Style Panel ile Arayüz Tasarımını Özelleştirin

Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz.

Altta tanımlanan bölümler element özelinde değişkenlik gösterir.

Layout (Düzen)‍: Elementlerin boyutlandırılması, hizalanması ve çevresel iç boşlukların (padding) ayarlanması gibi görsel düzenlemeleri buradan yapabilirsiniz. Bu ayarlar, elementin içerisinde bulunan diğer elementlerin düzenini de etkiler. Özellikler arasında Size, Min Size ve Align bulunur; ancak, bazı elementler Display özelliğini desteklemeyebilir.
Text (Metin)‍: Elementin metin özellikleri, yazı tipi ailesi, stil, renk, boyut, aralık ve diğer seçenekler aracılığıyla buradan düzenlenebilir. Bu bölüm, Text ile ilgili tüm ayarlamaları destekler.
Fill (Dolgu)‍: Elementin arka planını renk veya görseller ile kişiselleştirmek için Fill ayarını kullanabilirsiniz.
Border (Kenarlık)‍: Elementlerinize kenarlık ekleyerek ve köşe yarıçaplarını ayarlayarak daha estetik bir görünüm kazandırabilirsiniz.
Shadow (Gölge)‍: Web uygulamalarında kullanılan elementlere gölge efekti ekleyerek derinlik hissi verebilirsiniz. Ancak, bazı elementler mobil uygulamalar için uygun olmadığından gölge özelliği desteklenmeyebilir.