Arayüzünü tanıyalım
Kuika Builder ile hızlı uygulama geliştirme sürecinizde Uygulama, Kullanıcı/Rol ve Database haricindeki tüm aşamaları Application Designer / Uygulama Tasarımcısı arayüzü ile hazırlayabilirsiniz. Bu arayüzde uygulama içindeki ekranlar, arayüz tasarımı yapacağınız ön tanımlı bileşenler, eklenmiş bileşenlere ait özellik/stil düzenlemeleri yapabileceğiniz paneller ve arayüzdeki bileşenleri verilere bağlayabileceğiniz, veri kaynakları ekleyebileceğiniz ek panel ve açılır pencerelerden oluşur.
Kuika Builder‘ın Application Designer/Uygulama Tasarımcısı görünümünde 4 yönde yerleştirilmiştir. Uygulama geliştirme sürecinde çoğunlukla kullandığınız paneller sağ ve sol kenarlara eklenmiştir. Sol kenarda bileşen, aksiyon, ekran ve görsel kütüphanesine ait liste/paneller bulunur. Sağ kenarda ise seçili ekran/bileşene ait özellik ve stilleri düzenleyebileceğiniz paneller yer alır. Üst ve alt kenarlarda ise kaydetme, önizleme ve validation gibi araçlar/paneller bulunur. Orta kısımda ise açık olan uygulama içinde seçili tasarım ekranı görüntülenir.
Sol ve sağ kenarlarda açık olan panel ikonlarına ikinci defa tıkladığınız ilgi panel sütunu gizlenir. Böylece Preview/Önizleme görünümüne geçmeden de çalıştığınız ekranı görüntüleyebilirsiniz.
Uygulama arayüzüne ekleyebileceğiniz tüm bileşenler bu panel içinde listelenir. Panel içindeki bileşenler arasında arama yapabilirsiniz. Mouse sol tuşu ile sürükle-bırak yöntemle ekranda bilediğiniz bir seviyeye seçili bileşeni ekleyebilirsiniz.
[Components panelinden sürükle bırak ile eklenen bileşen (row, table göster)]
Row/Column gibi bazı bileşenler taşıyıcı tipindedir. Bu tipte bileşenler içine (child/çocuk) bir bileşen eklenmediği sürece işlevsizdir. Table gibi bileşenler ise genel yapısı itibariyle kolon başlıkları gibi alanlar direkt görünürken, kolon/satır içine label, button ve simge gibi ek bileşenler alabilirler. Diğer bileşenleri (büyük çoğunluktaki) ekrana eklerken de bu Row/Column bileşenleri içine veya satırların üst/alt kenarlarına eklersiniz.
Kuika Builder içinde default/ön tanımlı olarak gelen aksiyonları kullanabileceğiniz gibi ekleyeceğiniz diğer veri kaynaklarından üreteceğiniz aksiyonları da kullanabilirsiniz.
Ekleyebileceğiniz veri kaynakları ise;
- MSSQL
- Swagger API
- C#’dır.
Bu kaynaklar ile üreteceğiniz temel CRUD veya daha ileri seviye tüm aksiyonlar Kuika Builder içinde Custom Actions olarak adlandırılır.
Yönetimini Custom Actions bölümünden yapabilirken, kullanım sürecinizde ise Properties/Özellikler paneli + Add Actions ile listeden seçerek ekran/bileşene ekleyebilirsiniz.
Temelde Row/Satır ve Column/Kolon gibi taşıyıcı bileşenlerin içinde/altında buton, text gibi bileşenleri ekleyerek arayüzü tasarladığımızda bileşenler bir diğerinin içinde bulunurlar. Bu süreçte üst bileşen parent/ebeveyn, alt bileşenler ise Child/çocuk olarak tanımlanır. Ekranda Row/Column içine eklenmiş bir buton olsa bile tam olarak "DomainAdi/ProjeAdi/EkranAdi/Row/Column/Button" şeklinde bir ebeveyn/çocuk ağacı ortaya çıkar.
Parent/Child sıralamasındaki bileşenlerin seviyeleri değiştirilebilir. Böyle bir işlem sonucunda ekranda görünen tasarım yapısı da değişecektir. Column içinde farklı Row/Column ekleyebileceğiniz gibi, bir bileşeni bulunduğu row/columndan başka bir row/column içine de sürükle bırak ile konum değişikliği yapabilirsiniz.
Uygulama içinde bulunan ekranların listelendiği ve yönetildiği paneldir.
Screens/Ekranlar paneli ile yeni ekranlar oluşturabilir (yeni ekran açılır penceresi üzerinden şablonlara ulaşabilir), liste içinde arama yapabilir, tasarımını düzenlemek istediğiniz ekrana adına tıklayarak açabilirsiniz.
Uygulama içinde bileşen teması ve yazı renkleri dahil tüm arayüz bileşenlerinin tema renklerini barındırır.
Hem uygulama arayüz tema renk düzenlemesini buradan yapabileceğiniz gibi, arayüzde kullanılabilecek renkleri de Palette/Palet paneli ile belirleyebilir ve yönetebilirsiniz.
Uygulama içinde bileşenler üzerinde kullanılan veya yeni stiller ekleyerek seçili bileşenler üzerinde kullanabileceğiniz yazı stillerini Typography/Tipografi paneli ile yönetebilirsiniz.
Ekran tasarımlarınızda kullanmak istediğiniz ikon, fotoğraf ve illüstrasyon gibi görüntüleri Images/Görseller ekranı ile ekleyebilir veya yönetebilirsiniz.
Kuika Builder içinde hazırladığınız uygulama İngilizce diline göre hazırlanır. Uygulamanızı çok dilli hazırlayabilmek için Language paneli ile diğer dillere ait yönetimi de sağlayabilirsiniz.
Çalışma sürecinizde Projects/Apps ekranına geri dönüş için bu butonu kullanabilirsiniz.
Designer/Uygulama Tasarımcısı ekranında açık olan uygulama üzerinde yaptığınız değişiklikleri kaydetmenize yardımcı olur.
Ekranlar arası geçişlerde kaydet işlemi gerekli olmasa da elektrik kesintisi gibi farklı problemlerin önüne geçebilmek için kaydedebilirsiniz.
Açık olan ekranı telefon, tablet ve web boyutlarında görüntüleyebilir, bu görünümlerde uygulama/ekran tasarımlarınıza devam edebilirsiniz.
Tasarladığınız uygulama/ekranlar temelinde responsive bir alt yapıya sahiptir. Web için deploy yaptığınızda responsive olacaklardır. Configuration ile yapacağınız/alacağınız diğer deploy seçenekleri ile Native Android veya iOS uygulamalarıda alabilirsiniz.
Açık olan uygulama ve ekranları gerçek anlamda önizlemenizi sağlayan araçtır.
Önizleme işlemi ile Kuika Builder Front-end ve Back-end anlamında tam bir kod üretimi sağlar. Önizleme başladığında gerçek uygulamayı test ediyor/önizliyor olursunuz.
Uygulama Tasarımcısında seçili ekran veya bileşene ait özelliklerin listelendiği paneldir. Yapacağınız değişiklikleri dilediğiniz zaman tekrar düzenleyebilirsiniz.
Uygulama Tasarımcısında seçili ekran veya bileşene ait görsel stillendirmeyi yaptığınız seçenekelerin olduğu paneldir. Yapacağınız değişiklikleri dilediğiniz zaman tekrar düzenleyebilirsiniz.
Font ve Renk stilleri için ayrıca Palette ve Typography panellerinde ek düzenlemeler yapabilirsiniz.
Şu anda bulunduğunuz bu yardım ekranına ulaşmanızı sağlar. Yardım Merkezi ile hızlı uygulama geliştirme sürecinizde ihtiyacınız olacak tüm detaylar metin, video ve özel görsellerle öğreniminize sunulmuştur.
Hata Denetçisi, tasarımınızda oluşabilecek tutarsızlıkları tespit etmenizi sağlar ve çözüm konusunda sizi yönlendirir.
Bu satır ile UygulamaAdi/EkranAdi/RowName/ColumnName/ButtonName gibi bir adres ile seçili bileşenin parent/child içerik adresini görüntüleyebilirsiniz. Seçili bileşen üst seviyelerindeki listede görüntülenen bu adres ile üst bileşenleri de seçebilirsiniz.
Bileşenlerin içerik adresi içindeki parent/child seçeneklerini düzenleyebilmek için direkt tasarım ekranında sürükle bırak ile yapabileceğiniz gibi sol kenarda ki Component Tree panelini de kullanabilirsiniz.