Bu öğrenme içeriği kapsamında yeni bir personel eklemeyi sağlayan Form ekranı tasarımını yapacağız. Form ekran tasarımında Input kategorilerinde yer alan elementlere sıklıkla başvuracağız.
Bu öğrenme içeriği kapsamında yeni bir personel eklemeyi sağlayan Form ekranı tasarımını yapacağız.
Başlamadan önce öğrenme içeriği sonunda oluşturmayı hedeflediğimiz ekran tasarımını inceleyelim.
Ekranın üst kenarında Header ve altında Form elementlerini görüyoruz. Personel görsel yükleme fonksiyonu için Ikon elementi, metin girişlerini sağlamak için TextInput elementi ve Input elementlerinin başlığı için de Label elementi kullanılmış. Form girişi sonrası verilerin kayıt işlemi için de bir Button elementi eklenmiş olduğunu görüyoruz.
Şimdi bu ekranı birlikte hazırlayalım
Form ekranının Drawer olarak açılmasını sağlayacağız. Bu nedenle ekran tasarımını Drawer olarak açılacak genişlikte yapmamızda fayda var. Böylece ekran içindeki elementlerin düzenini net bir şekilde görmüş oluruz.
Form ekranı tasarımını gerçekleştirmek için Screens panelinden yeni ekran ekleme pop-up’ı aracılığıyla Blank bir ekran oluştur ve New Employee olarak isimlendir.
Ekranın sağ kenar ortasında bulunan tutamaç aracılığıyla ekran genişliğini 480px olarak ayarla. Bu genişlik ayarlama işlemi, ekrana mutlak bir genişlik ölçüsü vermez. Belirlediğimiz genişlikte ekran içindeki elementlerin davranışını görmemizi sağlar. Ancak bir ekranı Drawer veya Pop-up olarak açarken kesin bir genişlik ölçüsü verirsin.
Açılan ekrana bir Header elementi ekleyin. Burada küçük bir hatırlatma yapmakta fayda var. Hazırladığın form ekranı, bir ekran olarak açılacaksa, diğer ekranlarda kullandığın Header elementini burada da kullanmakta fayda var. Ancak ekran Drawer veya Pop-up olarak açılacaksa, Header tasarımı burada normal bir sayfada kullanılan haliyle tekrar etmez. Burada daha basit bir tasarım hazırlamak gerekir.
Header elementi içine Row ekle ve Properties panelinden 2 kolona dönüştür.
Sol kolona bir Label elementi ekle. Properties paneli value alanından Employee Form metnini gir.
Sağ kolona ise bir icon elementi ekle. Properties panelinden ikon tipini değiştir, Styling paneli text bölümünden Button_Secondary stilini seç.
Daha sonra icon elementinin bulunduğu kolonu seçerek Styling paneli Layout bölümü aracılığıyla sağa hizala.
Şimdi form bölümü için elementleri eklemeye başlayalım.
Ekrana bir Row elementi sürükle ve Properties panelinden tek kolona dönüştür. Kolonu seç ve Styling>Fill bölümü ile arka planına beyaz renk ver. Border bölümü radius alanından da 4 yönde 8px eğim ver.
Kolon içine bir Vertical Stack elementi ekle. Bu element ile içine ekleyeceğimiz image ve icon elementlerinin aralıklarını ayarlayacağız.
Image elementini Vertical Stack elementinin içine ekle. Properties paneli Image fit alanından Fill seçimini yap. Ardından Styling panelini aç. Layout bölümü Size alanından genişlik ve yükseklik değeri olarak 124px değerini ver. Border bölümü radius alanından 4 yönde 124px değeri ile Image çerçevesini yuvarla.
Vertical Stack elementi içine ayrıca bir ikon elementi ekle. Properties paneli ile upload tipinde bir ikon seç. Styling paneli Text bölümü ile Button_Secondary stilini seç.
Vertical Stack elementini seç. Properties paneli Size alanından iki element arasındaki boşluk değerini 16px olarak değiştir. Styling paneli layout bölümünden de ortala'yı seç.
Şimdi input elementleriyle devam edelim. Bir Row elementi ekle ve Properties paneli ile tek kolona dönüştür.
İçine önce bir label elementi ekle. Properties paneli value bölümünden Full Name metnini gir. Styling paneli Text bölümünden H6 Stilini seç.
Aynı kolon içine bir Text Input elementi ekle. Input elementleri varsayılan olarak block görünümü ile gelir.
Input elementini eklediğimiz bu input Row’u seç ve duplicate et.
Çoğalttığın row içindeki label elementini seç. Properties paneli value alanından Phone metnini gir.
Text input elementini seç ve sil. Elements panelinden Numeric Input elementini ekle.
Row elementini tekrar seç ve duplicate ile çoğalt.
Label elementini seç ve Properties paneli value alanına Email metnini gir.
Numeric input elementini seç ve sil. Element panelinden Email tipindeki input elementini ekle.
Department bölümü için row elementini seç ve tekrar çoğalt.
Label elementini seç ve Properties paneli value alanına Department metnini gir.
Email input elementini seç ve sil. Element panelinden Selectbox elementini ekle.
Şimdi Department bölümünün yer aldığı Row elementini seç ve Context menü aracılığıyla Duplicate et.
Label elementini seç ve Properties paneli value alanına Title metnini gir.
Ardından son olarak Title bölümünün yer aldığı Row elementini seç ve çoğalt.
Label elementini seç ve Properties paneli value alanına Birthday Date metnini gir.
Selectbox elementini seç ve sil. Element panelinden Date elementini ekle.
Buraya kadar form içinde kullanılacak input elementlerini ekledik. Şimdi bu elementlere girilen verilerin kayıt işlemini yapacak butonu ekleyelim.
Ekrana Footer elementi ekle.
Ardından içine bir row elementi ekle ve Properties paneli üzerinden 2 kolona dönüştür.
Sol kolona bir Label elementi ekle. Properties paneli value alanından Delete metnini gir. Styling paneli Text bölümünden yazı rengini kırmızı olacak şekilde değiştir. Bu ekranı yeni bir çalışanın kayıt, düzenleme ve silme işlemlerinde de kullanıyor olacağız. Bu nedenle çalışanların listelendiği ekran da düzenle butonuna tıklandığında açılacak bu ekran ile hem düzenleme hem de silme işlemi de yapabiliyor olacağız.
Footer'daki sağ kolona bir buton elementi ekle. Properties paneli value alanından Save metnini gir.
Save butonunun ebeveyni kolonu seç. Styling paneli layout bölümünden sağa hizala.
Buraya kadar uygulama içinde kullanılacak yeni veri kaydı, düzenleme ve silme işlemi yapmaya yardımcı olacak ekranı tasarımını tamamladık. İlerleyen içeriklerde veri bağlantılarını yaparak çalışır hale getireceğiz.
Bu öğrenme içeriği kapsamında yeni bir personel eklemeyi sağlayan Form ekranı tasarımını yapacağız. Form ekran tasarımında Input kategorilerinde yer alan elementlere sıklıkla başvuracağız.
Bu öğrenme içeriği kapsamında yeni bir personel eklemeyi sağlayan Form ekranı tasarımını yapacağız.
Başlamadan önce öğrenme içeriği sonunda oluşturmayı hedeflediğimiz ekran tasarımını inceleyelim.
Ekranın üst kenarında Header ve altında Form elementlerini görüyoruz. Personel görsel yükleme fonksiyonu için Ikon elementi, metin girişlerini sağlamak için TextInput elementi ve Input elementlerinin başlığı için de Label elementi kullanılmış. Form girişi sonrası verilerin kayıt işlemi için de bir Button elementi eklenmiş olduğunu görüyoruz.
Şimdi bu ekranı birlikte hazırlayalım
Form ekranının Drawer olarak açılmasını sağlayacağız. Bu nedenle ekran tasarımını Drawer olarak açılacak genişlikte yapmamızda fayda var. Böylece ekran içindeki elementlerin düzenini net bir şekilde görmüş oluruz.
Form ekranı tasarımını gerçekleştirmek için Screens panelinden yeni ekran ekleme pop-up’ı aracılığıyla Blank bir ekran oluştur ve New Employee olarak isimlendir.
Ekranın sağ kenar ortasında bulunan tutamaç aracılığıyla ekran genişliğini 480px olarak ayarla. Bu genişlik ayarlama işlemi, ekrana mutlak bir genişlik ölçüsü vermez. Belirlediğimiz genişlikte ekran içindeki elementlerin davranışını görmemizi sağlar. Ancak bir ekranı Drawer veya Pop-up olarak açarken kesin bir genişlik ölçüsü verirsin.
Açılan ekrana bir Header elementi ekleyin. Burada küçük bir hatırlatma yapmakta fayda var. Hazırladığın form ekranı, bir ekran olarak açılacaksa, diğer ekranlarda kullandığın Header elementini burada da kullanmakta fayda var. Ancak ekran Drawer veya Pop-up olarak açılacaksa, Header tasarımı burada normal bir sayfada kullanılan haliyle tekrar etmez. Burada daha basit bir tasarım hazırlamak gerekir.
Header elementi içine Row ekle ve Properties panelinden 2 kolona dönüştür.
Sol kolona bir Label elementi ekle. Properties paneli value alanından Employee Form metnini gir.
Sağ kolona ise bir icon elementi ekle. Properties panelinden ikon tipini değiştir, Styling paneli text bölümünden Button_Secondary stilini seç.
Daha sonra icon elementinin bulunduğu kolonu seçerek Styling paneli Layout bölümü aracılığıyla sağa hizala.
Şimdi form bölümü için elementleri eklemeye başlayalım.
Ekrana bir Row elementi sürükle ve Properties panelinden tek kolona dönüştür. Kolonu seç ve Styling>Fill bölümü ile arka planına beyaz renk ver. Border bölümü radius alanından da 4 yönde 8px eğim ver.
Kolon içine bir Vertical Stack elementi ekle. Bu element ile içine ekleyeceğimiz image ve icon elementlerinin aralıklarını ayarlayacağız.
Image elementini Vertical Stack elementinin içine ekle. Properties paneli Image fit alanından Fill seçimini yap. Ardından Styling panelini aç. Layout bölümü Size alanından genişlik ve yükseklik değeri olarak 124px değerini ver. Border bölümü radius alanından 4 yönde 124px değeri ile Image çerçevesini yuvarla.
Vertical Stack elementi içine ayrıca bir ikon elementi ekle. Properties paneli ile upload tipinde bir ikon seç. Styling paneli Text bölümü ile Button_Secondary stilini seç.
Vertical Stack elementini seç. Properties paneli Size alanından iki element arasındaki boşluk değerini 16px olarak değiştir. Styling paneli layout bölümünden de ortala'yı seç.
Şimdi input elementleriyle devam edelim. Bir Row elementi ekle ve Properties paneli ile tek kolona dönüştür.
İçine önce bir label elementi ekle. Properties paneli value bölümünden Full Name metnini gir. Styling paneli Text bölümünden H6 Stilini seç.
Aynı kolon içine bir Text Input elementi ekle. Input elementleri varsayılan olarak block görünümü ile gelir.
Input elementini eklediğimiz bu input Row’u seç ve duplicate et.
Çoğalttığın row içindeki label elementini seç. Properties paneli value alanından Phone metnini gir.
Text input elementini seç ve sil. Elements panelinden Numeric Input elementini ekle.
Row elementini tekrar seç ve duplicate ile çoğalt.
Label elementini seç ve Properties paneli value alanına Email metnini gir.
Numeric input elementini seç ve sil. Element panelinden Email tipindeki input elementini ekle.
Department bölümü için row elementini seç ve tekrar çoğalt.
Label elementini seç ve Properties paneli value alanına Department metnini gir.
Email input elementini seç ve sil. Element panelinden Selectbox elementini ekle.
Şimdi Department bölümünün yer aldığı Row elementini seç ve Context menü aracılığıyla Duplicate et.
Label elementini seç ve Properties paneli value alanına Title metnini gir.
Ardından son olarak Title bölümünün yer aldığı Row elementini seç ve çoğalt.
Label elementini seç ve Properties paneli value alanına Birthday Date metnini gir.
Selectbox elementini seç ve sil. Element panelinden Date elementini ekle.
Buraya kadar form içinde kullanılacak input elementlerini ekledik. Şimdi bu elementlere girilen verilerin kayıt işlemini yapacak butonu ekleyelim.
Ekrana Footer elementi ekle.
Ardından içine bir row elementi ekle ve Properties paneli üzerinden 2 kolona dönüştür.
Sol kolona bir Label elementi ekle. Properties paneli value alanından Delete metnini gir. Styling paneli Text bölümünden yazı rengini kırmızı olacak şekilde değiştir. Bu ekranı yeni bir çalışanın kayıt, düzenleme ve silme işlemlerinde de kullanıyor olacağız. Bu nedenle çalışanların listelendiği ekran da düzenle butonuna tıklandığında açılacak bu ekran ile hem düzenleme hem de silme işlemi de yapabiliyor olacağız.
Footer'daki sağ kolona bir buton elementi ekle. Properties paneli value alanından Save metnini gir.
Save butonunun ebeveyni kolonu seç. Styling paneli layout bölümünden sağa hizala.
Buraya kadar uygulama içinde kullanılacak yeni veri kaydı, düzenleme ve silme işlemi yapmaya yardımcı olacak ekranı tasarımını tamamladık. İlerleyen içeriklerde veri bağlantılarını yaparak çalışır hale getireceğiz.
