Kuika ile uygulama geliştirirken sistem aksiyonları ve oluşturduğunuz özel aksiyonlar aracılığıyla veri bağlama işlemlerini gerçekleştirebilirsiniz.
Bu öğrenme içeriğinde veri kaynaklarınızda yer alan verileri, ekran tasarımlarına bağlamayı oluşturduğumuz her ekran özelinde detaylı bir şekilde inceleyeceğiz.
Kuika ile uygulama geliştirirken sistem aksiyonları ve oluşturduğunuz özel aksiyonlar aracılığıyla veri bağlama işlemlerini gerçekleştirebilirsiniz.
Bu öğrenme içeriğinde veri kaynaklarınızda yer alan verileri, ekran tasarımlarına bağlamayı oluşturduğumuz her ekran özelinde detaylı bir şekilde inceleyeceğiz.
İlk ekranımız olan Dashboard ekranı ile işleme başlayalım.
Şimdi hazırlamış olduğumuz ve aşağıda görseli verilen Dashboard ekranını hatırlayalım.
Dashboard ekranında veri bağlama işlemine ilk olarak Header'da bulunan menu ile başlayalım. Header' da yer alan hamburger menu ikonuna tıkladığımızda Left Menu sayfasının açılması için öncelikle menü ikonunu seçin. Menü ikonunun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Devamında eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan menu ekranını yani Left Menu başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Left olarak seçip Close butonuna tıklayın.
Dashboard ekranına menü ekranını bağladıktan sonra bir sonraki adımda Content Menu içinde yer alan Logout öğesine Logout sistem aksiyonunu ekleyelim.
Bu işlem için öncelikle Content Menu properties paneli aracılığıyla Logout öğesini seçin. Logout öğesi seçiliyken Properties panelinde ADD ACTION → onClick → Authorization → Logout seçimini yapın.
Bu işlemle birlikte Dashboard ekranında yer alan Header için veri bağlama işlemini tamamladık şimdi Dashboard ekranında yer alan diğer veriler için veri bağlantısını sağlayalım.
İlk olarak Dashboard ekranında yer alan tabloda personel listelemesini sağlayacak ve kart yapısında yer alan toplam personel ve departman sayılarının gösterimini sağlayacak aksiyonları Initial olarak ekleyelim. Bunun için Dashboard ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom>ManagedDB → SelectEmployeebyDate seçimini yapın.
Ardından ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee adımlarını gerçekleştirerek toplam personel sayısını sağlayacak aksiyonu ve ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment adımlarını gerçekleştirerek toplam departman sayısını sağlayacak aksiyonu Initial olarak ekleyiniz.
Bu aksiyonları Initial olarak eklemeniz, Dashboard ekranı her açıldığında bu ekranda aksiyonların çalışmasını sağlayacaktır.
Şimdi bu aksiyonlarla gelen değerleri ilgili alanlara bağlayalım.
İlk olarak toplam toplam personel sayısının yazacağı Label' i seçin. Ardından Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın.
Açılan menüden Action Results → TotalEmployee → First → TotalEmployee → To String seçimini yapın .
Böylelikle toplam personel sayısına yönelik veri bağlama işlemini gerçekleştirdik.
İkinci adımda toplam departman sayısının yazacağı Label'i seçin. Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın.
Açılan menüden Action Results → TotalDepartment → First → TotalDepartment → To String seçimini yapın.
Bu işlemle Dashboard ekranında yer alan kart yapısında veri bağlama işlemini tamamladık.
Dashboard ekranında son eklenen personelleri listeleyen tablo yapısı için veri bağlama işlemine başlayalım.
İlk olarak Show all ifadesine tıkladığımızda tüm personellerin listelenmesini sağlayacak liste ekranına geçişi sağlayalım. Show all ifadesinin yazdığı Label'i seçin. Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani Employee List başlıklı ekranı seçin ve ekran açılma tipi olarak Current Page seçimini yapın.
Aksiyonu kaydetmek için Close butonuna tıklayın.
Daha sonra Dashboard ekranında son eklenen personelleri listeleyen tabloya veri bağlama işlemini gerçekleştirelim.
Item Tree ya da BreadCrumb aracılığıyla Table elementini seçin. Properties panelinde yer alan Datasource aracılığıyla SelectEmployeebyDate aksiyonunu seçin.
Daha sonra Table elementinin sütunlarında yer alan içeriklere veri bağlama işlemini gerçekleştirelim.
İlk olarak birinci sütunda Horizontal Stack içinde bulunan Image elementini seçin ve Properties panelinde value → Field to display → Image seçimini yapın.
Ardından yine birinci sütunda Horizontal Stack içinde yer alan Label elementini seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Bir sonraki adımda ikinci sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → Department seçimini yapın.
Son olarak ise üçüncü sütunda yer alan ikonu seçin ve ADD ACTION → onClick → Navigation → Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani Display başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Right olarak seçip Close butonuna tıklayın.
Bu işlemle birlikte Dashboard ekranında veri bağlama işlemini tamamladık.
Şimdi bir diğer ekran olan Listeleme ekranında veri bağlama işlemine geçelim.
Listeleme ekranında veri bağlama işlemi için EmployeeList başlıklı ekranı açın.
Açılan ekranda yer alan Header içindeki elementlere ilgili aksiyonların bağlanması için tıpkı Dashboard ekranda olduğu gibi aksiyon bağlama işlemlerini gerçekleştirin.
Left Menu sayfasının açılması için öncelikle Header'da bulunan menü ikonunu seçin. Menü ikonunun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Devamında eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan menu ekranını yani Left Menu başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Left olarak seçip Close butonuna tıklayın.
Dashboard ekranına menü ekranına bağladıktan sonra bir sonraki adımda Content Menu içinde yer alan Logout öğesine Logout sistem aksiyonunu ekleyelim.
Bu işlem için öncelikle Content Menu properties paneli aracılığıyla Logout öğesini seçin. Logout öğesi seçiliyken Properties panelinde ADD ACTION → onClick → Authorization → Logout seçimini yapın.
Şimdi listeleme işlevini sağlayacak aksiyonu ekleyelim liste ekranda veri bağlama işlemlerini tamamlayalım.
Liste ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyTI seçimini yapın. Ardından SelectEmployeebyTI aksiyonu altında yer alan SearchFor parametresini tanımlayın. SearchFor yanında bulunan Symbol Picker' a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin.
Bu işlem Employee List ekranı her açıldığında listeleme işlevini sağlayacak aksiyonu çalıştıracaktır. SearchFor parametresi ise TextInput'da yer alan değere göre listelemeyi filtreleyecektir.
Şimdi çalıştırdığımız Initial aksiyonu ekranda yer alan elementlere bağlayarak veri gösterimini sağlayalım.
İlk olarak TextInput elementini seçin ve Properties paneli aracılığıyla ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebyTI seçimlerini gerçekleştir. Ardından SelectEmployeebyTI aksiyonu altında yer alan SearchFor parametresini tanımlayın. SearchFor yanında bulunan Symbol Picker'a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin. Böylelikle TexInput elementine değer girdikçe listeleme ekranında filtreleme sağlanacaktır.
Daha sonra Button elementini seçin ve Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani New Employee başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Aksiyonu kaydetmek için Close butonuna tıklayın.
Ardından listeleme işlevini sağlayacak Table elementini seç.
Properties panelinde yer alan Datasource aracılığıyla SelectEmployeebyTI aksiyonunu seçin.
Artık Table elementini bir veriye bağladınız. Şimdi Table elementinin sütunlarında yer alan içeriklere veri bağlama işlemini gerçekleştirelim.
İlk olarak birinci sütunda Horizontal Stack içinde bulunan Image elementini seçin ve Properties panelinde value → Field to display → Image seçimini yapın.
Ardından yine birinci sütunda Horizontal Stack içinde yer alan Label elementini seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Ardından ikinci sütunda bulunan Label elementini seçin ve yine Properties panelini kullanarak value → Field to display → PhoneNumber seçimini yapın.
Bir sonraki adımda üçüncü sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → Email seçimini yapın.
Devamında dördüncü sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Horizontal Stack içinde yer alan edit ikonu seçin ve ADD ACTION → onClick → Navigation → Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan form ekranını yani New Employee başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer’i tanımlayabiliriz.
Horizontal Stack içinde yer alan diğer ikonu seçin ve ADD ACTION → onClick → Navigation>Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan personel detay ekranını yani Display başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın. Drawer seçimini yaptıktan sonra açılış yönünü Right olarak seçip Close butonuna tıklayın.
Bu işlemle birlikte Listeleme ekranında veri bağlamayı tamamlayın.
Bir sonraki adımda Personel ekleme ve güncelleme ekranında veri bağlama işlemlerini gerçekleştireceğiz.
Personel ekleme ve güncelleme ekranında veri bağlama işlemi için New Employee başlıklı ekranı açın.
Açılan ekranda yer alan Header'da bulunan ve ekrandan bir önceki ekrana dönüşü sağlayan ekranı kapatma ikonu için ilgili sistem aksiyonunu bağlayın.
Bunun için öncelikle Header'da bulunan ikonu seçin. İkonun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation →GoBack seçimini yapın ve Close butonuna tıklayarak aksiyonu kaydedin.
Ardından ekranda boş bir alan tıklayın ve güncelleme işlemlerini gerçekleştirmek için ilgili personelin bilgisini çekmek amacıyla bir Inital aksiyon bir de Screen Input ekleyin. Kuika ile uygulama geliştirme sürecinde iki ya da daha fazla ekran arasında veri aktarımını sağlamak için Screen Input kullanabilirsiniz.
Öncelikle ekranda boş bir yere tıkladıktan sonra Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyId seçimini yap.
Ekranda yer alan SelectBox elementlerinin içini mevcut verilerle doldurmak için iki Initial Action ekleme işlemi daha yapalım. İlk olarak ADD ACTION → Initial Actions → Custom → ManagedDB → SelectDepartment seçimini yap.
Daha sonra ADD ACTION → Initial Actions → Custom → ManagedDB → SelectTitle seçimini yap.
Ardından yine Properties panelinde bulunan ADD SCREEN INPUT' a tıkla. Screen Input adını prmsave olarak belirleyip, Screen Input tipini Guid olarak seçerek Create'e tıklayın.
Ardından SelectEmployeebyId aksiyonu altında yer alan Id parametresi için Symbol Picker aracılığıyla Screen Inputs → prmsave seçimini yapın.
Şimdi personel ekleme ve güncelleme ekranına yönlendirme sağlayan listeleme ekranından veri aktarımını sağlamak için Screen Input parametresini tanımlamak gerekmektedir.
Bunun için List ekranını açın. İlk olarak New Add butonunu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmsave adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmsave parametresi yanındaki Symbol Picker aracılığıyla Default → New Guid seçimini yapın. Böylelikle New Add butonuyla personel ekleme ve güncelleme ekranına yönlendirme sağlayabileceksiniz.
List ekranında yer alan personel ekleme ve güncelleme ekranına yönlendirme sağlayan bir diğer element Tablonun beşinci sütununda yer alan düzenleme ikonudur. Düzenleme ikonunu seçin Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmsave adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmsave parametresi yanındaki Symbol Picker aracılığıyla Current>id seçimini yapın. Böylelikle düzenleme ikonuyla personel ekleme ve güncelleme ekranına yönlendirme sağladığınızda düzenlemek istediğiniz personelleri otomatik olarak çekilecektir.
Şimdi personel ekleme ve güncelleme ekranında yer alan veri bağlama işlemlerine tekrar dönelim.
İlk olarak görsel yüklemeye olanak sağlayan Cloud iconunu seçin. Icon elementi seçiliyken ADD ACTION → OnClick Actions → Device→ PhotoFromGallery seçimini yapın.
Daha sonra ise Galeriden seçtiğimiz görselin Image elementi içerisinde listelenmesi için bir UI Control aksiyonu ekleyelim. Bu işlem için ADD ACTION → OnClick Actions → UIControl→ SetValueOf seçimini yapın.
SetValueOf aksiyonu altında yer alan Component to Change parametresi altında Image1 elementini seçin. Açılan Value parametresi için ActionResult→PhotoFromGallery seçimini yapın. Ardından bu aksiyona bir kondisyon ekleyin. Bu koşul resmin seçili olup olmadığını arka planda sorgulayacaktır. Kondisyon eklemek için SetValueOf aksiyonunun yanında yer alan dot-dot-dot menüyü açın ve Add Condition öğesini seçin. Ardından SetValueOf altına bir Condition alanının geldiğini farkedeceksiniz.
Condition başlığı altında Will execute if... altında yer alan parametre için Symbol Picker'i tıklayın. ActionResult→PhotoFromGallery seçimini yapın. Devamında altta bulunan açılır menüden Is Not Empty kondisyonunu ekleyin. Böylelikle galeriden bir resim geldiği anda Image elementinde görüntülenecektir.
Bir sonraki adımda Departman ve Title SelectBox'larının veri kaynaklarını tanımlayalım.
Department karşısındaki SelectBox'u seçin. Properties paneli Options alanında Action olarak SelectDepartment, Field to display oalrak DepartmentName ve Field to Use as Key olarak Id seçimlerini yapın.
Benzer şekilde Title SelectBox'u için Properties paneli Options alanında Action olarak SelectTitle, Field to display olarak Title ve Field to Use as Key olarak Id seçimlerini yapın.
Butonu seçin. Properties paneli aracılığıyla ADD ACTION → onClick → Custom → ManagedDB → EmployeeSave seçimini yapalım. Action paneline eklenen aksiyonun parametrelerini tanımlayalım. Parametre tanımlama işlemi yeni eklenecek verilerin nereden alınacağını belirtecektir.
Parametre tanımlama işlemi veri tablosunda bulunan kolonların alfabetik sırasına göre yapılmaktadır.
Sırasıyla ilk olarak BirthdayDate parametresi yanındaki Symbol Picker aracılığıyla Components → Date1 → Value seçimini yapın. Buradaki Date1 elementin Default olarak gelen ismidir. Elementin ismini değiştiğirnizde yeni isimle burada listelenecektir.
Ardından ikinci parametre olan CreatedDate yanındaki Symbol Picker aracılığıyla Default→ Now seçimini yapın.
Üçüncü parametre olan Department yanındaki Symbol Picker aracılığıyla Components → SelectBox1 → Value seçimini yapın.
Email için Email1 → Value, EmployeeImage için Image altındaki Value’yi seçin.
FullName için TextInput1, PhoneNumber için NumberInput1,
Title için SelectBox0_1→ Value seçimini yapın.
Son parametre tanımlama işlemi için Id yanındaki Symbol Picker aracılığıyla Screen Input → prmSave seçimini yapın.
Bu adımlarla parametre tanımlama işlemini gerçekleştirmiş olduk.
Ardından Save butonuna bir Go back aksiyonu ekleyerek kayıt işlemi sonrasında liste ekranına otomatik dönüşü sağlayın. Bu işlem için Add Action → onClick → Navigation → GoBack seçimini yapmanız yeterli olacaktır.
Personel ekleme ve güncelleme ekranının bir diğer işlevi liste ekranında yer alan personellerin bilgisini güncellemektir. Bu işlemi gerçekleştirmek için bilgisini çekmek istediğiniz kullanıcın bilgilerini ilgili alanlarda güncellemek gerekmektedir. Şimdi bu işlevi yerine getirmek için gerekli işlemleri yapalım.
Ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Bir sonraki adımda personel ismi için kullanacağımız TextInput1 elementinde Value → Actions Results → SelectEmployeebyID → First → FullName seçimini yapın.
Benzer şekilde her bir elementi seçitkten sonra SelectEmployeebyID altından ilgili alan adımına göre değer seçimini yapın.
Artık bir güncelleme işleminde personel bilgileri otomatik olarak listelenecektir.
Bu ekrandaki son işlemimiz ise Footer'da yer alan silme işlemidir. Silme işlemini gerçekleştirmek için Delete yazılı Label'i seçin.
Properties paneli aracılığıyla ADD ACTION → onClick → Custom → DeleteEmployee seçimini yapın. Aksiyonda yer alan ID parametresini Symbol Picker ile Screen Inputs → prmsave seçimini yapın.
İşte bu kadar!
Bu işlemlerle birlikte personel ekleme ve güncelleme ekranında veri bağlamayı tamamladık. Bir sonraki ekranımız personel bilgilerinin detayını görüntülemeyi sağlayan Display ekrandır. Şimdi Display ekranda veri bağlama işlemlerine yakından bakalım
Display ekranı açın Header’da bulunan kapat ikonu için bir sistem aksiyonu ekleyerek başlayalım.
Bunun için öncelikle Header'da bulunan ikonu seçin. ADD ACTION → onClick → Navigation → GoBack aksiyonunu seçin.
Ardından ekranda boş bir alana tıklayın ve güncelleme işlemlerini gerçekleştirmek için ilgili personelin bilgisini çekmek amacıyla bir Inital aksiyon bir de Screen Input ekleyin. Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID seçimini yap.
Ardından yine ADD SCREEN INPUT' a tıkla. Screen Input adını prmdetail olarak belirleyip, Screen Input tipini Guid olarak seçerek Create' e tıklayın.
SelectEmployeebyID aksiyonu altında yer alan ID parametresi yanındaki Symbol Picker aracılığıyla Screen Inputs>prmdetail seçimini yapın.
Şimdi personel detay ekranına yönlendirme sağlayan dashboard ve listeleme ekranından, veri aktarımını sağlamak için Screen Input parametresini tanımlamak gerekmektedir.
Bunun için ilk olarak Dashboard ekranını açın. Tablonun son sütununda bulunan ikonu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmdetail adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmdetail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın. Böylelikle detay ikonuyla personel detay ekranına yönlendirme sağladığınızda detaylarını görüntülemek istediğiniz personelin bilgileri otomatik olarak çekilecektir.
Daha sonra diğer bir ekran olan List ekranını açın. Tablonun beşinci sütununda yer alan görüntüleme ikonunu seçin Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmdetail adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmdetail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın. Böylelikle detay ikonuyla personel detay ekranına yönlendirme sağladığınızda detaylarını görüntülemek istediğiniz personelin bilgileri otomatik olarak gelecektir.
Şimdi tekrardan personel detay ekranına dönelim ve veri bağlama işlemlerini gerçekleştirelim.
İlk olarak ekranda yer alan Image elementini seçin.
Properties paneli Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Benzer şekilde ekranda yer alan diğer Label ve benzeri elementler için de, Fullname, Phone, Email, DepartmentName, TitleName ve BirthdayDate tanımlarını seçin.
Bu işlemlerle birlikte personel detay ekranında veri bağlamayı tamamladık.
Uygulama içinde kullanacağınız menü ile navigasyonu sağlamak için ilgili aksiyon ekleme işlemlerini birlikte yapalım.
LeftMenu ekranını açın. Açılan ekranda yer alan Header'da bulunan ve ekrandan bir önceki ekrana dönüşü sağlayan yani Left Menu'yu kapatacak olan ikonu seçin ve GoBack sistem aksiyonunu ekleyin.
Ardından Dashboard ve Employee List Label’larının bulunduğu Row elementleri her birini ayrı ayrı seçerek Navigate aksiyonlarını tanımlayın.
New Employee Label elementinin bulunduğu Row elementini seçin ve Properties panelinde yer alan ADD ACTION → onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan New Employee başlıklı ekranı seçin. Ardından prmsave başlıklı screen input için Symbol Picker aracılığıyla Default → New Guid seçimini yapın. Ekran açılma tipi olarak Drawer seçimini yapın
Bir sonraki öğrenme içeriğinde Departman ekleme ekranı üzerinde, yukarıda yaptığımız işlemlerin daha kolay nasıl yapılacağını CRUD yapısı ile birlikte inceleyeceğiz.
Kuika ile uygulama geliştirirken sistem aksiyonları ve oluşturduğunuz özel aksiyonlar aracılığıyla veri bağlama işlemlerini gerçekleştirebilirsiniz.
Bu öğrenme içeriğinde veri kaynaklarınızda yer alan verileri, ekran tasarımlarına bağlamayı oluşturduğumuz her ekran özelinde detaylı bir şekilde inceleyeceğiz.
Kuika ile uygulama geliştirirken sistem aksiyonları ve oluşturduğunuz özel aksiyonlar aracılığıyla veri bağlama işlemlerini gerçekleştirebilirsiniz.
Bu öğrenme içeriğinde veri kaynaklarınızda yer alan verileri, ekran tasarımlarına bağlamayı oluşturduğumuz her ekran özelinde detaylı bir şekilde inceleyeceğiz.
İlk ekranımız olan Dashboard ekranı ile işleme başlayalım.
Şimdi hazırlamış olduğumuz ve aşağıda görseli verilen Dashboard ekranını hatırlayalım.
Dashboard ekranında veri bağlama işlemine ilk olarak Header'da bulunan menu ile başlayalım. Header' da yer alan hamburger menu ikonuna tıkladığımızda Left Menu sayfasının açılması için öncelikle menü ikonunu seçin. Menü ikonunun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Devamında eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan menu ekranını yani Left Menu başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Left olarak seçip Close butonuna tıklayın.
Dashboard ekranına menü ekranını bağladıktan sonra bir sonraki adımda Content Menu içinde yer alan Logout öğesine Logout sistem aksiyonunu ekleyelim.
Bu işlem için öncelikle Content Menu properties paneli aracılığıyla Logout öğesini seçin. Logout öğesi seçiliyken Properties panelinde ADD ACTION → onClick → Authorization → Logout seçimini yapın.
Bu işlemle birlikte Dashboard ekranında yer alan Header için veri bağlama işlemini tamamladık şimdi Dashboard ekranında yer alan diğer veriler için veri bağlantısını sağlayalım.
İlk olarak Dashboard ekranında yer alan tabloda personel listelemesini sağlayacak ve kart yapısında yer alan toplam personel ve departman sayılarının gösterimini sağlayacak aksiyonları Initial olarak ekleyelim. Bunun için Dashboard ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom>ManagedDB → SelectEmployeebyDate seçimini yapın.
Ardından ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee adımlarını gerçekleştirerek toplam personel sayısını sağlayacak aksiyonu ve ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment adımlarını gerçekleştirerek toplam departman sayısını sağlayacak aksiyonu Initial olarak ekleyiniz.
Bu aksiyonları Initial olarak eklemeniz, Dashboard ekranı her açıldığında bu ekranda aksiyonların çalışmasını sağlayacaktır.
Şimdi bu aksiyonlarla gelen değerleri ilgili alanlara bağlayalım.
İlk olarak toplam toplam personel sayısının yazacağı Label' i seçin. Ardından Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın.
Açılan menüden Action Results → TotalEmployee → First → TotalEmployee → To String seçimini yapın .
Böylelikle toplam personel sayısına yönelik veri bağlama işlemini gerçekleştirdik.
İkinci adımda toplam departman sayısının yazacağı Label'i seçin. Properties panelinde Value altında Fixed Value yanında bulunan Symbol Picker'a tıklayın.
Açılan menüden Action Results → TotalDepartment → First → TotalDepartment → To String seçimini yapın.
Bu işlemle Dashboard ekranında yer alan kart yapısında veri bağlama işlemini tamamladık.
Dashboard ekranında son eklenen personelleri listeleyen tablo yapısı için veri bağlama işlemine başlayalım.
İlk olarak Show all ifadesine tıkladığımızda tüm personellerin listelenmesini sağlayacak liste ekranına geçişi sağlayalım. Show all ifadesinin yazdığı Label'i seçin. Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani Employee List başlıklı ekranı seçin ve ekran açılma tipi olarak Current Page seçimini yapın.
Aksiyonu kaydetmek için Close butonuna tıklayın.
Daha sonra Dashboard ekranında son eklenen personelleri listeleyen tabloya veri bağlama işlemini gerçekleştirelim.
Item Tree ya da BreadCrumb aracılığıyla Table elementini seçin. Properties panelinde yer alan Datasource aracılığıyla SelectEmployeebyDate aksiyonunu seçin.
Daha sonra Table elementinin sütunlarında yer alan içeriklere veri bağlama işlemini gerçekleştirelim.
İlk olarak birinci sütunda Horizontal Stack içinde bulunan Image elementini seçin ve Properties panelinde value → Field to display → Image seçimini yapın.
Ardından yine birinci sütunda Horizontal Stack içinde yer alan Label elementini seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Bir sonraki adımda ikinci sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → Department seçimini yapın.
Son olarak ise üçüncü sütunda yer alan ikonu seçin ve ADD ACTION → onClick → Navigation → Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani Display başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Right olarak seçip Close butonuna tıklayın.
Bu işlemle birlikte Dashboard ekranında veri bağlama işlemini tamamladık.
Şimdi bir diğer ekran olan Listeleme ekranında veri bağlama işlemine geçelim.
Listeleme ekranında veri bağlama işlemi için EmployeeList başlıklı ekranı açın.
Açılan ekranda yer alan Header içindeki elementlere ilgili aksiyonların bağlanması için tıpkı Dashboard ekranda olduğu gibi aksiyon bağlama işlemlerini gerçekleştirin.
Left Menu sayfasının açılması için öncelikle Header'da bulunan menü ikonunu seçin. Menü ikonunun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Devamında eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan menu ekranını yani Left Menu başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Drawer seçimini yaptıktan sonra açılış yönünü Left olarak seçip Close butonuna tıklayın.
Dashboard ekranına menü ekranına bağladıktan sonra bir sonraki adımda Content Menu içinde yer alan Logout öğesine Logout sistem aksiyonunu ekleyelim.
Bu işlem için öncelikle Content Menu properties paneli aracılığıyla Logout öğesini seçin. Logout öğesi seçiliyken Properties panelinde ADD ACTION → onClick → Authorization → Logout seçimini yapın.
Şimdi listeleme işlevini sağlayacak aksiyonu ekleyelim liste ekranda veri bağlama işlemlerini tamamlayalım.
Liste ekranında boş bir alana tıklayın ve ekranın Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyTI seçimini yapın. Ardından SelectEmployeebyTI aksiyonu altında yer alan SearchFor parametresini tanımlayın. SearchFor yanında bulunan Symbol Picker' a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin.
Bu işlem Employee List ekranı her açıldığında listeleme işlevini sağlayacak aksiyonu çalıştıracaktır. SearchFor parametresi ise TextInput'da yer alan değere göre listelemeyi filtreleyecektir.
Şimdi çalıştırdığımız Initial aksiyonu ekranda yer alan elementlere bağlayarak veri gösterimini sağlayalım.
İlk olarak TextInput elementini seçin ve Properties paneli aracılığıyla ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebyTI seçimlerini gerçekleştir. Ardından SelectEmployeebyTI aksiyonu altında yer alan SearchFor parametresini tanımlayın. SearchFor yanında bulunan Symbol Picker'a tıklayın ve ardından Components → TextInput1 → Value seçimini gerçekleştirin. Böylelikle TexInput elementine değer girdikçe listeleme ekranında filtreleme sağlanacaktır.
Daha sonra Button elementini seçin ve Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan liste ekranını yani New Employee başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın.
Aksiyonu kaydetmek için Close butonuna tıklayın.
Ardından listeleme işlevini sağlayacak Table elementini seç.
Properties panelinde yer alan Datasource aracılığıyla SelectEmployeebyTI aksiyonunu seçin.
Artık Table elementini bir veriye bağladınız. Şimdi Table elementinin sütunlarında yer alan içeriklere veri bağlama işlemini gerçekleştirelim.
İlk olarak birinci sütunda Horizontal Stack içinde bulunan Image elementini seçin ve Properties panelinde value → Field to display → Image seçimini yapın.
Ardından yine birinci sütunda Horizontal Stack içinde yer alan Label elementini seçin ve Properties panelinde value → Field to display → FullName seçimini yapın.
Ardından ikinci sütunda bulunan Label elementini seçin ve yine Properties panelini kullanarak value → Field to display → PhoneNumber seçimini yapın.
Bir sonraki adımda üçüncü sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → Email seçimini yapın.
Devamında dördüncü sütunda yer alan Label elementini seçin ve Properties panelinde value → Field to display → DepartmentName seçimini yapın.
Horizontal Stack içinde yer alan edit ikonu seçin ve ADD ACTION → onClick → Navigation → Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan form ekranını yani New Employee başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer’i tanımlayabiliriz.
Horizontal Stack içinde yer alan diğer ikonu seçin ve ADD ACTION → onClick → Navigation>Navigate işlemini gerçekleştirin. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan personel detay ekranını yani Display başlıklı ekranı seçin ve ekran açılma tipi olarak Drawer seçimini yapın. Drawer seçimini yaptıktan sonra açılış yönünü Right olarak seçip Close butonuna tıklayın.
Bu işlemle birlikte Listeleme ekranında veri bağlamayı tamamlayın.
Bir sonraki adımda Personel ekleme ve güncelleme ekranında veri bağlama işlemlerini gerçekleştireceğiz.
Personel ekleme ve güncelleme ekranında veri bağlama işlemi için New Employee başlıklı ekranı açın.
Açılan ekranda yer alan Header'da bulunan ve ekrandan bir önceki ekrana dönüşü sağlayan ekranı kapatma ikonu için ilgili sistem aksiyonunu bağlayın.
Bunun için öncelikle Header'da bulunan ikonu seçin. İkonun Properties panelinde yer alan ADD ACTION butonuna tıklayın. Ardından onClick → Navigation →GoBack seçimini yapın ve Close butonuna tıklayarak aksiyonu kaydedin.
Ardından ekranda boş bir alan tıklayın ve güncelleme işlemlerini gerçekleştirmek için ilgili personelin bilgisini çekmek amacıyla bir Inital aksiyon bir de Screen Input ekleyin. Kuika ile uygulama geliştirme sürecinde iki ya da daha fazla ekran arasında veri aktarımını sağlamak için Screen Input kullanabilirsiniz.
Öncelikle ekranda boş bir yere tıkladıktan sonra Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyId seçimini yap.
Ekranda yer alan SelectBox elementlerinin içini mevcut verilerle doldurmak için iki Initial Action ekleme işlemi daha yapalım. İlk olarak ADD ACTION → Initial Actions → Custom → ManagedDB → SelectDepartment seçimini yap.
Daha sonra ADD ACTION → Initial Actions → Custom → ManagedDB → SelectTitle seçimini yap.
Ardından yine Properties panelinde bulunan ADD SCREEN INPUT' a tıkla. Screen Input adını prmsave olarak belirleyip, Screen Input tipini Guid olarak seçerek Create'e tıklayın.
Ardından SelectEmployeebyId aksiyonu altında yer alan Id parametresi için Symbol Picker aracılığıyla Screen Inputs → prmsave seçimini yapın.
Şimdi personel ekleme ve güncelleme ekranına yönlendirme sağlayan listeleme ekranından veri aktarımını sağlamak için Screen Input parametresini tanımlamak gerekmektedir.
Bunun için List ekranını açın. İlk olarak New Add butonunu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmsave adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmsave parametresi yanındaki Symbol Picker aracılığıyla Default → New Guid seçimini yapın. Böylelikle New Add butonuyla personel ekleme ve güncelleme ekranına yönlendirme sağlayabileceksiniz.
List ekranında yer alan personel ekleme ve güncelleme ekranına yönlendirme sağlayan bir diğer element Tablonun beşinci sütununda yer alan düzenleme ikonudur. Düzenleme ikonunu seçin Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmsave adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmsave parametresi yanındaki Symbol Picker aracılığıyla Current>id seçimini yapın. Böylelikle düzenleme ikonuyla personel ekleme ve güncelleme ekranına yönlendirme sağladığınızda düzenlemek istediğiniz personelleri otomatik olarak çekilecektir.
Şimdi personel ekleme ve güncelleme ekranında yer alan veri bağlama işlemlerine tekrar dönelim.
İlk olarak görsel yüklemeye olanak sağlayan Cloud iconunu seçin. Icon elementi seçiliyken ADD ACTION → OnClick Actions → Device→ PhotoFromGallery seçimini yapın.
Daha sonra ise Galeriden seçtiğimiz görselin Image elementi içerisinde listelenmesi için bir UI Control aksiyonu ekleyelim. Bu işlem için ADD ACTION → OnClick Actions → UIControl→ SetValueOf seçimini yapın.
SetValueOf aksiyonu altında yer alan Component to Change parametresi altında Image1 elementini seçin. Açılan Value parametresi için ActionResult→PhotoFromGallery seçimini yapın. Ardından bu aksiyona bir kondisyon ekleyin. Bu koşul resmin seçili olup olmadığını arka planda sorgulayacaktır. Kondisyon eklemek için SetValueOf aksiyonunun yanında yer alan dot-dot-dot menüyü açın ve Add Condition öğesini seçin. Ardından SetValueOf altına bir Condition alanının geldiğini farkedeceksiniz.
Condition başlığı altında Will execute if... altında yer alan parametre için Symbol Picker'i tıklayın. ActionResult→PhotoFromGallery seçimini yapın. Devamında altta bulunan açılır menüden Is Not Empty kondisyonunu ekleyin. Böylelikle galeriden bir resim geldiği anda Image elementinde görüntülenecektir.
Bir sonraki adımda Departman ve Title SelectBox'larının veri kaynaklarını tanımlayalım.
Department karşısındaki SelectBox'u seçin. Properties paneli Options alanında Action olarak SelectDepartment, Field to display oalrak DepartmentName ve Field to Use as Key olarak Id seçimlerini yapın.
Benzer şekilde Title SelectBox'u için Properties paneli Options alanında Action olarak SelectTitle, Field to display olarak Title ve Field to Use as Key olarak Id seçimlerini yapın.
Butonu seçin. Properties paneli aracılığıyla ADD ACTION → onClick → Custom → ManagedDB → EmployeeSave seçimini yapalım. Action paneline eklenen aksiyonun parametrelerini tanımlayalım. Parametre tanımlama işlemi yeni eklenecek verilerin nereden alınacağını belirtecektir.
Parametre tanımlama işlemi veri tablosunda bulunan kolonların alfabetik sırasına göre yapılmaktadır.
Sırasıyla ilk olarak BirthdayDate parametresi yanındaki Symbol Picker aracılığıyla Components → Date1 → Value seçimini yapın. Buradaki Date1 elementin Default olarak gelen ismidir. Elementin ismini değiştiğirnizde yeni isimle burada listelenecektir.
Ardından ikinci parametre olan CreatedDate yanındaki Symbol Picker aracılığıyla Default→ Now seçimini yapın.
Üçüncü parametre olan Department yanındaki Symbol Picker aracılığıyla Components → SelectBox1 → Value seçimini yapın.
Email için Email1 → Value, EmployeeImage için Image altındaki Value’yi seçin.
FullName için TextInput1, PhoneNumber için NumberInput1,
Title için SelectBox0_1→ Value seçimini yapın.
Son parametre tanımlama işlemi için Id yanındaki Symbol Picker aracılığıyla Screen Input → prmSave seçimini yapın.
Bu adımlarla parametre tanımlama işlemini gerçekleştirmiş olduk.
Ardından Save butonuna bir Go back aksiyonu ekleyerek kayıt işlemi sonrasında liste ekranına otomatik dönüşü sağlayın. Bu işlem için Add Action → onClick → Navigation → GoBack seçimini yapmanız yeterli olacaktır.
Personel ekleme ve güncelleme ekranının bir diğer işlevi liste ekranında yer alan personellerin bilgisini güncellemektir. Bu işlemi gerçekleştirmek için bilgisini çekmek istediğiniz kullanıcın bilgilerini ilgili alanlarda güncellemek gerekmektedir. Şimdi bu işlevi yerine getirmek için gerekli işlemleri yapalım.
Ekranda yer alan Image elementini seçin.
Properties panelinde Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Bir sonraki adımda personel ismi için kullanacağımız TextInput1 elementinde Value → Actions Results → SelectEmployeebyID → First → FullName seçimini yapın.
Benzer şekilde her bir elementi seçitkten sonra SelectEmployeebyID altından ilgili alan adımına göre değer seçimini yapın.
Artık bir güncelleme işleminde personel bilgileri otomatik olarak listelenecektir.
Bu ekrandaki son işlemimiz ise Footer'da yer alan silme işlemidir. Silme işlemini gerçekleştirmek için Delete yazılı Label'i seçin.
Properties paneli aracılığıyla ADD ACTION → onClick → Custom → DeleteEmployee seçimini yapın. Aksiyonda yer alan ID parametresini Symbol Picker ile Screen Inputs → prmsave seçimini yapın.
İşte bu kadar!
Bu işlemlerle birlikte personel ekleme ve güncelleme ekranında veri bağlamayı tamamladık. Bir sonraki ekranımız personel bilgilerinin detayını görüntülemeyi sağlayan Display ekrandır. Şimdi Display ekranda veri bağlama işlemlerine yakından bakalım
Display ekranı açın Header’da bulunan kapat ikonu için bir sistem aksiyonu ekleyerek başlayalım.
Bunun için öncelikle Header'da bulunan ikonu seçin. ADD ACTION → onClick → Navigation → GoBack aksiyonunu seçin.
Ardından ekranda boş bir alana tıklayın ve güncelleme işlemlerini gerçekleştirmek için ilgili personelin bilgisini çekmek amacıyla bir Inital aksiyon bir de Screen Input ekleyin. Properties paneli aracılığıyla ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID seçimini yap.
Ardından yine ADD SCREEN INPUT' a tıkla. Screen Input adını prmdetail olarak belirleyip, Screen Input tipini Guid olarak seçerek Create' e tıklayın.
SelectEmployeebyID aksiyonu altında yer alan ID parametresi yanındaki Symbol Picker aracılığıyla Screen Inputs>prmdetail seçimini yapın.
Şimdi personel detay ekranına yönlendirme sağlayan dashboard ve listeleme ekranından, veri aktarımını sağlamak için Screen Input parametresini tanımlamak gerekmektedir.
Bunun için ilk olarak Dashboard ekranını açın. Tablonun son sütununda bulunan ikonu seçin. Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmdetail adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmdetail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın. Böylelikle detay ikonuyla personel detay ekranına yönlendirme sağladığınızda detaylarını görüntülemek istediğiniz personelin bilgileri otomatik olarak çekilecektir.
Daha sonra diğer bir ekran olan List ekranını açın. Tablonun beşinci sütununda yer alan görüntüleme ikonunu seçin Properties panelinde daha önce eklemiş olduğunuz Navigate aksiyonunu genişletin.
Açılan Navigate aksiyonu altında prmdetail adında yeni bir parametrenin eklendiğini görmüş olmalısınız. Şimdi prmdetail parametresi yanındaki Symbol Picker aracılığıyla Current → id seçimini yapın. Böylelikle detay ikonuyla personel detay ekranına yönlendirme sağladığınızda detaylarını görüntülemek istediğiniz personelin bilgileri otomatik olarak gelecektir.
Şimdi tekrardan personel detay ekranına dönelim ve veri bağlama işlemlerini gerçekleştirelim.
İlk olarak ekranda yer alan Image elementini seçin.
Properties paneli Value → Actions Results → SelectEmployeebyID → First → EmployeeImage seçimini gerçekleştirin.
Benzer şekilde ekranda yer alan diğer Label ve benzeri elementler için de, Fullname, Phone, Email, DepartmentName, TitleName ve BirthdayDate tanımlarını seçin.
Bu işlemlerle birlikte personel detay ekranında veri bağlamayı tamamladık.
Uygulama içinde kullanacağınız menü ile navigasyonu sağlamak için ilgili aksiyon ekleme işlemlerini birlikte yapalım.
LeftMenu ekranını açın. Açılan ekranda yer alan Header'da bulunan ve ekrandan bir önceki ekrana dönüşü sağlayan yani Left Menu'yu kapatacak olan ikonu seçin ve GoBack sistem aksiyonunu ekleyin.
Ardından Dashboard ve Employee List Label’larının bulunduğu Row elementleri her birini ayrı ayrı seçerek Navigate aksiyonlarını tanımlayın.
New Employee Label elementinin bulunduğu Row elementini seçin ve Properties panelinde yer alan ADD ACTION → onClick → Navigation → Navigate seçimini yapın. Eklediğiniz Navigate aksiyonunda To Screen aracılığıyla açılacak olan New Employee başlıklı ekranı seçin. Ardından prmsave başlıklı screen input için Symbol Picker aracılığıyla Default → New Guid seçimini yapın. Ekran açılma tipi olarak Drawer seçimini yapın
Bir sonraki öğrenme içeriğinde Departman ekleme ekranı üzerinde, yukarıda yaptığımız işlemlerin daha kolay nasıl yapılacağını CRUD yapısı ile birlikte inceleyeceğiz.
