Bu öğrenme içeriğinde, örnek proje olarak hazırladığımız personel yönetim web uygulamasının, listeleme ekran tasarımını birlikte hazırlayacağız.
Liste ekranında, liste içerisinde belirli bir değer doğrultusunda arama ve filtreleme işlemi için bir TextInput yer almaktadır. TextInput elementi metin girişine olanak sağlayan bir Input kategorisi elementidir. Liste ekranında yer alan bir diğer element ise listeleme işlevini sağlayacak olan Table elementidir. Table elementi belirli bir gösterim sayısı belirtilmediği sürece tüm veri kaynağındaki içeriği (dinamik ve/veya statik) göstermek için eklenen veri öğesini, veri kaynağına göre çoğaltır. Bu sebeple ilk satırda eklediğin statik bir değeri diğer satırlarda da gösterilecektir. Ancak dinamik bir veri girişi sağlarsan; veri kaynağında yer alan değerlere göre tüm satırlar güncellenir. Liste ekranında yer alan diğer önemli yapılar ise Button ve Pagination elementleridir. Button elementi yeni bir personel ekleme ekranı gibi farklı bir sayfaya geçişi tetiklemeye olanak sağlar. Pagination elementi, gösterilen verilerin sayfa başına düşecek içerik sayısını ve sayfalama/sayfa geçişlerini sağlamaktadır.
Bu öğrenme içeriğinde, örnek proje olarak hazırladığımız personel yönetim web uygulamasının, listeleme ekran tasarımı ile devam ediyoruz.
İlk olarak, hazırlanan liste ekranına bir göz atalım.
Liste ekranında, liste içerisinde belirli bir değer doğrultusunda arama ve filtreleme işlemi için bir TextInput yer almaktadır. TextInput elementi metin girişine olanak sağlayan bir Input kategorisi elementidir. Liste ekranında yer alan bir diğer element ise listeleme işlevini sağlayacak olan Table elementidir. Table elementi belirli bir gösterim sayısı belirtilmediği sürece tüm veri kaynağındaki içeriği (dinamik ve/veya statik) göstermek için eklenen veri öğesini, veri kaynağına göre çoğaltır. Bu sebeple ilk satırda eklediğin statik bir değeri diğer satırlarda da gösterilecektir. Ancak dinamik bir veri girişi sağlarsan; veri kaynağında yer alan değerlere göre tüm satırlar güncellenir. Liste ekranında yer alan diğer önemli yapılar ise Button ve Pagination elementleridir. Button elementi yeni bir personel ekleme ekranı gibi farklı bir sayfaya geçişi tetiklemeye olanak sağlar. Pagination elementi, gösterilen verilerin sayfa başına düşecek içerik sayısını ve sayfalama/sayfa geçişlerini sağlamaktadır.
Bu detayların ardından liste ekranını birlikte hazırlamaya başlayalım.
Öncelikle Liste ekranı için Screens panelinden yeni bir ekran oluşturalım.
Açılan Pop-up’ta Blank seçimini yapıp ekran ismini List olarak belirledikten sonra Create butonuna tıkla.
Dashboard ekranındaki üstbilgi için hazırladığımız bölümün bu ekrana bir kopyasını ekleyelim.
Dashboard ekranını aç. Item Tree ve veya Breadcrumb ile üst bilgi ebeveyn elementi olan Header elementini içindeki Row elementini seç. Context Menü ile kopyala butonuna tıkla.
List ekranına dön. Ekrana bir Row elementini sürükle bırak. Row elementi seçiliyken Properties panelinden Row elementi adı yanındaki yardımcı menüden Paste komutu ile kopyaladığın Header elementini yapıştır.
Header’da yer alan sayfa ismini değiştirmek için Label elementini seç. Properties panelinden Value alanına ekran adı olarak Employee List değerini gir.
Liste için kullanılacak Table elementini de yine Dashboard ekranından alabiliriz. Dashboard ekranını aç. Table elementinin olduğu Ebeveyn Row elementini seç. Context menü ile kopyala.
Liste ekranına geri dönün, ekrana bir Row elementi sürükleyin. Row elementi seçiliyken Dashboard ekranından aldığınız Row’u yapıştırın.
İlk eklediğin Row’u silebiliriz.
Eklediğimiz Table üstünde bulunan başlık içerisindeki Label elementlerini seç ve Context menü ile sil.
Label’ları sildikten sonra Row’u seç ve Properties paneli aracılığıyla 3 kolona dönüştür.
Sol kolona bir Text Input elementi ekle. Properties paneli ile Placeholder alanına Search… metnini gir. İlerleyen öğrenme içeriklerinde bu arama alanıyla liste içinde arama yapılabilmesini sağlayacağız.
Sağ kolona bir Button elementi ekle. Properties paneli Label alanına New Add ifadesini gir ve Button elementinin bulunduğu kolonu Styling paneli aracılığıyla sağa yasla. İlerleyen öğrenme içeriklerinde bu Button ile yeni personel ekleme işlemini gerçekleştirmek için ilgili ekrana yönlendirmeyi sağlayacağız.
Bu ekran genel listeleme ekranı olduğu için veri tablosuna da bağlı olarak yeni kolonlar ekleyebilirsin. Örneğin personel e-mail ve telefon numarası için 2 kolon daha ekleyelim.
Item Tree veya Breadcrumb yardımıyla Table Row elementini seç. Properties panelinden Table’a 2 kolon daha ekle ve personel isminden sonra gelecek şekilde sürükleyip sırala.
Yeni eklediğimiz kolonların birincisine bir Label elementi ekle. Properties paneli value alanından bir telefon numarası ekle. (+12121234567)
İkinci kolona bir Label daha ekle. Value parametresi ile örnek bir e-mail adresi ekle. (mary.watson@kuika.com)
Table’daki son kolona ayrıca bir düzenleme ikonu daha ekleyelim. Öncelikle iki ikonunda yan yana geldiğinde ara boşluğunu ayarlayabilmek için Horizontal Stack elementi ekle. Ardından kolon içinde bulunan ikonu Horizontal Stack elementinin içine taşı.
İkonu seç ve Context menüden duplicate ile çoğalt. İkinci ikonu properties paneli üzerinden edit ikonu ile değiştir.
Horizontal Stack elementini seç ve Properties ile ara boşluk değerini 16px olarak gir.
Son olarak Table elementini seç ve Properties panelinde Pagination parametresindeki anahtarı aç.
Buraya kadar liste ekranını en temel ihtiyaç olan özellikleriyle hazırladık. Benzer bir süreçle, ihtiyacın olan ek özelliklerle liste ekranlarını hazırlayabilirsin.
Bu öğrenme içeriğinde, örnek proje olarak hazırladığımız personel yönetim web uygulamasının, listeleme ekran tasarımını birlikte hazırlayacağız.
Liste ekranında, liste içerisinde belirli bir değer doğrultusunda arama ve filtreleme işlemi için bir TextInput yer almaktadır. TextInput elementi metin girişine olanak sağlayan bir Input kategorisi elementidir. Liste ekranında yer alan bir diğer element ise listeleme işlevini sağlayacak olan Table elementidir. Table elementi belirli bir gösterim sayısı belirtilmediği sürece tüm veri kaynağındaki içeriği (dinamik ve/veya statik) göstermek için eklenen veri öğesini, veri kaynağına göre çoğaltır. Bu sebeple ilk satırda eklediğin statik bir değeri diğer satırlarda da gösterilecektir. Ancak dinamik bir veri girişi sağlarsan; veri kaynağında yer alan değerlere göre tüm satırlar güncellenir. Liste ekranında yer alan diğer önemli yapılar ise Button ve Pagination elementleridir. Button elementi yeni bir personel ekleme ekranı gibi farklı bir sayfaya geçişi tetiklemeye olanak sağlar. Pagination elementi, gösterilen verilerin sayfa başına düşecek içerik sayısını ve sayfalama/sayfa geçişlerini sağlamaktadır.
Bu öğrenme içeriğinde, örnek proje olarak hazırladığımız personel yönetim web uygulamasının, listeleme ekran tasarımı ile devam ediyoruz.
İlk olarak, hazırlanan liste ekranına bir göz atalım.
Liste ekranında, liste içerisinde belirli bir değer doğrultusunda arama ve filtreleme işlemi için bir TextInput yer almaktadır. TextInput elementi metin girişine olanak sağlayan bir Input kategorisi elementidir. Liste ekranında yer alan bir diğer element ise listeleme işlevini sağlayacak olan Table elementidir. Table elementi belirli bir gösterim sayısı belirtilmediği sürece tüm veri kaynağındaki içeriği (dinamik ve/veya statik) göstermek için eklenen veri öğesini, veri kaynağına göre çoğaltır. Bu sebeple ilk satırda eklediğin statik bir değeri diğer satırlarda da gösterilecektir. Ancak dinamik bir veri girişi sağlarsan; veri kaynağında yer alan değerlere göre tüm satırlar güncellenir. Liste ekranında yer alan diğer önemli yapılar ise Button ve Pagination elementleridir. Button elementi yeni bir personel ekleme ekranı gibi farklı bir sayfaya geçişi tetiklemeye olanak sağlar. Pagination elementi, gösterilen verilerin sayfa başına düşecek içerik sayısını ve sayfalama/sayfa geçişlerini sağlamaktadır.
Bu detayların ardından liste ekranını birlikte hazırlamaya başlayalım.
Öncelikle Liste ekranı için Screens panelinden yeni bir ekran oluşturalım.
Açılan Pop-up’ta Blank seçimini yapıp ekran ismini List olarak belirledikten sonra Create butonuna tıkla.
Dashboard ekranındaki üstbilgi için hazırladığımız bölümün bu ekrana bir kopyasını ekleyelim.
Dashboard ekranını aç. Item Tree ve veya Breadcrumb ile üst bilgi ebeveyn elementi olan Header elementini içindeki Row elementini seç. Context Menü ile kopyala butonuna tıkla.
List ekranına dön. Ekrana bir Row elementini sürükle bırak. Row elementi seçiliyken Properties panelinden Row elementi adı yanındaki yardımcı menüden Paste komutu ile kopyaladığın Header elementini yapıştır.
Header’da yer alan sayfa ismini değiştirmek için Label elementini seç. Properties panelinden Value alanına ekran adı olarak Employee List değerini gir.
Liste için kullanılacak Table elementini de yine Dashboard ekranından alabiliriz. Dashboard ekranını aç. Table elementinin olduğu Ebeveyn Row elementini seç. Context menü ile kopyala.
Liste ekranına geri dönün, ekrana bir Row elementi sürükleyin. Row elementi seçiliyken Dashboard ekranından aldığınız Row’u yapıştırın.
İlk eklediğin Row’u silebiliriz.
Eklediğimiz Table üstünde bulunan başlık içerisindeki Label elementlerini seç ve Context menü ile sil.
Label’ları sildikten sonra Row’u seç ve Properties paneli aracılığıyla 3 kolona dönüştür.
Sol kolona bir Text Input elementi ekle. Properties paneli ile Placeholder alanına Search… metnini gir. İlerleyen öğrenme içeriklerinde bu arama alanıyla liste içinde arama yapılabilmesini sağlayacağız.
Sağ kolona bir Button elementi ekle. Properties paneli Label alanına New Add ifadesini gir ve Button elementinin bulunduğu kolonu Styling paneli aracılığıyla sağa yasla. İlerleyen öğrenme içeriklerinde bu Button ile yeni personel ekleme işlemini gerçekleştirmek için ilgili ekrana yönlendirmeyi sağlayacağız.
Bu ekran genel listeleme ekranı olduğu için veri tablosuna da bağlı olarak yeni kolonlar ekleyebilirsin. Örneğin personel e-mail ve telefon numarası için 2 kolon daha ekleyelim.
Item Tree veya Breadcrumb yardımıyla Table Row elementini seç. Properties panelinden Table’a 2 kolon daha ekle ve personel isminden sonra gelecek şekilde sürükleyip sırala.
Yeni eklediğimiz kolonların birincisine bir Label elementi ekle. Properties paneli value alanından bir telefon numarası ekle. (+12121234567)
İkinci kolona bir Label daha ekle. Value parametresi ile örnek bir e-mail adresi ekle. (mary.watson@kuika.com)
Table’daki son kolona ayrıca bir düzenleme ikonu daha ekleyelim. Öncelikle iki ikonunda yan yana geldiğinde ara boşluğunu ayarlayabilmek için Horizontal Stack elementi ekle. Ardından kolon içinde bulunan ikonu Horizontal Stack elementinin içine taşı.
İkonu seç ve Context menüden duplicate ile çoğalt. İkinci ikonu properties paneli üzerinden edit ikonu ile değiştir.
Horizontal Stack elementini seç ve Properties ile ara boşluk değerini 16px olarak gir.
Son olarak Table elementini seç ve Properties panelinde Pagination parametresindeki anahtarı aç.
Buraya kadar liste ekranını en temel ihtiyaç olan özellikleriyle hazırladık. Benzer bir süreçle, ihtiyacın olan ek özelliklerle liste ekranlarını hazırlayabilirsin.
