Bu öğrenme içeriğinde personellere ait bilgilerin detaylı olarak aktarıldığı ekran tasarımını hazırlayacağız.
Detay ekranı Drawer ekran tipinde oluşturulduğu için Drawer’a uygun olarak boyutlandırılmıştır. Detay ekranının en üstünde bir Header yer almaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve ekranı kapatmaya olanak sağlayan bir çıkış ikon butonu bulunmaktadır.
Header altında personellere yönelik fotoğraf bilgisi için Image elementi, ad soyad, departman ve diğer başlıklar için Label elementi kullanıldığını görüyoruz.
Bu öğrenme içeriğinde personellere ait bilgilerin detaylı olarak aktarıldığı ekran tasarımını hazırlayacağız.
Öncelikle tamamlanmış detay ekranını inceleyelim.
Detay ekranı Drawer ekran tipinde oluşturulduğu için Drawer’a uygun olarak boyutlandırılmıştır. Detay ekranının en üstünde bir Header yer almaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve ekranı kapatmaya olanak sağlayan bir çıkış ikon butonu bulunmaktadır.
Header altında personellere yönelik fotoğraf bilgisi için Image elementi, ad soyad, departman ve diğer başlıklar için Label elementi kullanıldığını görüyoruz.
Bu ekranı hazırlarken önceki videoda oluşturduğumuz form ekranını değiştirerek hazırlayalım.
Form ekranını aç. Properties paneli ekran ismi yanındaki yardımcı menüyü kullanarak ekranı çoğaltın.
Açılan kopya ekran adını, Screens panelinden ilgili ekran yanında bulunan detay menüsü aracılığıyla Employee Details olarak değiştir.
Header içinde bulunan Label elementini seç. Properties paneli value alanında ekran adını Employee Details olarak değiştir.
Küçük birkaç düzenleme ile şimdi bu formu Display ekranına dönüştüreceğiz.
Image elementi altındaki Upload ikon butonunu seç ve sil.
Form tarafındaki input elementlerini tek tek seç ve sil.
İlk bölüm olan Fullname alanına bir Label elementi ekle. Label elementleri Inline olarak eklenir. Styling paneli Layout bölümünden Block görüntüleme tipini seç. Böylece bir satırda kalacak şekilde Label elementi alt alana geçti. Properties paneli value bölümü ile örnek bir isim ekle (Mary Watson).
Label elementini çoğalt ve ardından bir alttaki alan olan Phone altına taşı. Properties paneli value alanına örnek bir telefon numarası ekle. (+12121234567)
Label elementini çoğalt ve ardından bir alttaki alan olan E-mail altına taşı. Properties paneli value alanına örnek bir e-mail adresi yaz. (mary.watson@kuika.com)
Benzer bir şekilde Department için de Label elementini çoğaltarak ilgili düzenlemeyi yap. Properties paneli value alanına örnek bir departman adı yaz. (Finance)
Ardından Title bölümü içinde bir önceki bölümde kullandığın Label elementini seç ve çoğalt. Department bölümünde çoğalttığın Label elementini bu alana taşı. Properties paneli value alanına aracılığıyla örnek bir unvan yaz. (Team Leader)
Bir önceki işleme benzer şekilde son olarak Title altında yer alan Label elementini seç ve çoğalt. Title bölümünde çoğalttığın Label elementini Birthday Date altına taşı. Properties paneli value alanına aracılığıyla örnek bir tarih yaz. (01.12.2002)
Son olarak hazırladığımız bu ekran bir veri gösterim ekranı olduğu için Footer bölümündeki butonlara ihtiyacımız bulunmuyor. Footer elementini seç ve sil.
Öncesinde hazırladığımız bir ekran temel özelliklerini kullanarak farklı bir ekranı da böyle hızlıca hazırlayabilirsin.
Bu öğrenme içeriğinde personellere ait bilgilerin detaylı olarak aktarıldığı ekran tasarımını hazırlayacağız.
Detay ekranı Drawer ekran tipinde oluşturulduğu için Drawer’a uygun olarak boyutlandırılmıştır. Detay ekranının en üstünde bir Header yer almaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve ekranı kapatmaya olanak sağlayan bir çıkış ikon butonu bulunmaktadır.
Header altında personellere yönelik fotoğraf bilgisi için Image elementi, ad soyad, departman ve diğer başlıklar için Label elementi kullanıldığını görüyoruz.
Bu öğrenme içeriğinde personellere ait bilgilerin detaylı olarak aktarıldığı ekran tasarımını hazırlayacağız.
Öncelikle tamamlanmış detay ekranını inceleyelim.
Detay ekranı Drawer ekran tipinde oluşturulduğu için Drawer’a uygun olarak boyutlandırılmıştır. Detay ekranının en üstünde bir Header yer almaktadır. Header içerisinde ekran isminin yazdığı bir Label elementi ve ekranı kapatmaya olanak sağlayan bir çıkış ikon butonu bulunmaktadır.
Header altında personellere yönelik fotoğraf bilgisi için Image elementi, ad soyad, departman ve diğer başlıklar için Label elementi kullanıldığını görüyoruz.
Bu ekranı hazırlarken önceki videoda oluşturduğumuz form ekranını değiştirerek hazırlayalım.
Form ekranını aç. Properties paneli ekran ismi yanındaki yardımcı menüyü kullanarak ekranı çoğaltın.
Açılan kopya ekran adını, Screens panelinden ilgili ekran yanında bulunan detay menüsü aracılığıyla Employee Details olarak değiştir.
Header içinde bulunan Label elementini seç. Properties paneli value alanında ekran adını Employee Details olarak değiştir.
Küçük birkaç düzenleme ile şimdi bu formu Display ekranına dönüştüreceğiz.
Image elementi altındaki Upload ikon butonunu seç ve sil.
Form tarafındaki input elementlerini tek tek seç ve sil.
İlk bölüm olan Fullname alanına bir Label elementi ekle. Label elementleri Inline olarak eklenir. Styling paneli Layout bölümünden Block görüntüleme tipini seç. Böylece bir satırda kalacak şekilde Label elementi alt alana geçti. Properties paneli value bölümü ile örnek bir isim ekle (Mary Watson).
Label elementini çoğalt ve ardından bir alttaki alan olan Phone altına taşı. Properties paneli value alanına örnek bir telefon numarası ekle. (+12121234567)
Label elementini çoğalt ve ardından bir alttaki alan olan E-mail altına taşı. Properties paneli value alanına örnek bir e-mail adresi yaz. (mary.watson@kuika.com)
Benzer bir şekilde Department için de Label elementini çoğaltarak ilgili düzenlemeyi yap. Properties paneli value alanına örnek bir departman adı yaz. (Finance)
Ardından Title bölümü içinde bir önceki bölümde kullandığın Label elementini seç ve çoğalt. Department bölümünde çoğalttığın Label elementini bu alana taşı. Properties paneli value alanına aracılığıyla örnek bir unvan yaz. (Team Leader)
Bir önceki işleme benzer şekilde son olarak Title altında yer alan Label elementini seç ve çoğalt. Title bölümünde çoğalttığın Label elementini Birthday Date altına taşı. Properties paneli value alanına aracılığıyla örnek bir tarih yaz. (01.12.2002)
Son olarak hazırladığımız bu ekran bir veri gösterim ekranı olduğu için Footer bölümündeki butonlara ihtiyacımız bulunmuyor. Footer elementini seç ve sil.
Öncesinde hazırladığımız bir ekran temel özelliklerini kullanarak farklı bir ekranı da böyle hızlıca hazırlayabilirsin.
