Kullanıcı arayüzü oluşturma

Kullanılabilirlik ve yapılandırılmış bir arayüz tasarlamak için AppMaster Web Designer, kapsamlı bir dizi atomik UI bileşeni sağlar. Bu bileşenler, amaç ve hedeflerinizle uyumlu olacak şekilde çeşitli şekillerde birleştirilebilir ve gruplandırılabilir.

AppMaster aşağıdaki kullanıcı arayüzü bileşenlerini sunar:

• Kapsayıcılar: Diğer bileşenlerin mantıksal olarak yapılandırılması ve gruplandırılması için temel öğeler.
• Modallar ve Çekmeceler: Geçerli ekrandan ayrılmadan ek bilgi veya eylemleri görüntülemek için etkileşimli bileşenler.
• Dinamik Değer Çıkışı Bileşenleri: Verileri dinamik olarak sunmak için Listeler , Izgaralar ve Tablolar içerir.
• Temel Kullanıcı Arayüzü Öğeleri: Temel arayüz etkileşimleri için gerekli olan Düğmeler , Metin ve Simgeler gibi.
• Gezinme Bileşenleri: Dikey ve Yatay Menüler , Sekmeler ve benzer gezinme araçlarını içerir.
• Form Öğeleri: Kullanıcı etkileşimi ve veri toplama için çeşitli girişler ve kontroller.

Bileşen kitaplığında yapılan düzenli güncellemeler, web uygulamalarını daha verimli bir şekilde geliştirme yeteneğinizi artırır.

Basit hesap makinesi uygulamamız için, AppMaster sürükle ve bırak web sitesi oluşturucusunun olanaklarını göstermek üzere bir kullanıcı arayüzü oluşturalım. Bu uygulama, giriş değerlerine dayalı olarak çeşitli matematiksel işlemlerin sonucunu gösterecektir.

Esnek Konteyner

Flex Container ile bir konteyner içindeki tüm alt öğeler için hizalama ve istifleme yönetimini kolayca yönetebilirsiniz.

Flex Container, web sayfanızın yapısını oluşturmak için temel bir bileşendir. AppMaster web uygulaması tasarımcısındaki Flex Container, kullanıcıların alt öğeleri (widget'lar veya kapsayıcılar) esnek bir şekilde düzenlemesine olanak tanır. Hem yatay hem de dikey hizalamaları destekleyerek geliştiricilerin farklı ekran boyutlarına uyum sağlayan karmaşık düzenler oluşturmasına olanak tanır.

Kapsayıcı Ekleme

İki ana kap kullanacağız: biri veri girişi için, diğeri ise hesaplama sonuçlarını tek bir ortak kapta görüntülemek için.

İlk olarak, diğer tüm öğeleri barındırmak için tuvale Flex Container ekleyin.

Görünüm panelinde çeşitli ayarları keşfedebilirsiniz:

• Öğe Kimliği: İş süreçlerinde kapsayıcıya referans vermek için benzersiz bir tanımlayıcı.
• Ortak Grup: Görünürlük ve imleç stili gibi bileşenin varsayılan durumunu tanımlamaya yönelik ayarlar.
• Flex Alt Grubu: Öğenin esnek ana bileşen içinde nasıl davranacağını belirler.
• Düzen: Kap içindeki alt öğelerin düzenlenmesine yönelik ayarlar.
• Boyutlar: Elemanların boyutlarını belirtmek için.
• Spacing : Öğenin içindeki ve çevresindeki boşluğu ayarlar.
• Arka Plan: Arka plan renkleri ve katmanları için seçenekler.
• Köşe Yarıçapı, Kenarlıklar, Gölge: Öğe kenarları, kenarlıklar ve gölge efektleri için özelleştirme.
• Araç İpucu: Fareyle üzerine gelme veya odaklanma eylemleri için bir araç ipucu ekler.

Ana konteynerinizi özelleştirin. Örneğin, Direction'ı yatay olarak ayarlayalım ve Gap , Padding , Corner radius ve Borders'ı ayarlayalım.

Daha sonra, formun değerleri girmesi için ana dosyanızın içine başka bir Flex kapsayıcı r ekleyin. Ana kaptaki kullanılabilir alanı doldurmak için tam genişliğe ayarlayın.

Sonuçları görüntülemek üzere ayrı bir blok oluşturmak için bu Kabı çoğaltın ( CTRL/⌘+D kullanarak). Genişlik özelliğini %30 olarak ayarlayın.

Kullanıcı Arayüzü Öğeleri Ekleme

Uygulamanızı oluşturmaya devam etmek için gerekli kullanıcı arayüzü öğelerini eklemenin zamanı geldi.

Form Ekle

İş sürecimiz, kullanıcının her ikisi de Kayan tipte iki sayı girmesini gerektirir. Bunu mümkün kılmak için hesaplama sürecini başlatmak üzere iki Değişken Giriş ve bir Düğme ekleyin.

Sol taraftaki Esnek Konteyner Yönünü Dikey olarak değiştirin ve iç içe geçmiş elemanların aralarında küçük bir boşluk kalması için bir Boşluk ekleyin. Bu Flex kapsayıcının içine, ilk değer için 'X' olarak etiketleyeceğimiz bir Giriş Kayan Noktası ekleyin:

• Giriş Kayan elemanını sol taraftaki konteynere sürükleyip bırakın.
• Görünüm Panelinde bir Etiket ve Yer Tutucu ekleyerek alanı kişiselleştirin.
• Uygulamanızın tasarımına uyacak şekilde alanın görünümüne ince ayar yapın.

Kanvas üzerinde eklenen alanı seçin ve CTRL/⌘+D kullanarak çoğaltın. Çoğaltılan alanın Etiketini ve Yer Tutucusunu , ikinci değer olan 'Y'yi temsil edecek şekilde değiştirin.

Şimdi eklenen alanların altına bir Button öğesini sürükleyip bırakın. Görünüm panelinde Düğmeyi tam genişliğe yayılacak şekilde ayarlayın. Bu, Flex Child grubundaki Align özelliğinin Stretch olarak ayarlanmasıyla gerçekleştirilebilir.

Düğme için bir Etiket girin ve isteğe bağlı olarak görsel çekiciliğini artırmak için bir Simge ekleyin.

Bu öğeleri ekledikten sonra, netlik ve tanımlama kolaylığı açısından bunları yeniden adlandırmak iyi bir uygulamadır. Bu, iş süreçlerinizde bunlara atıfta bulunmanızı kolaylaştırır, anlaşılırlığı artırır ve geliştirme sürecini hızlandırır.

Sonuç Bloğu Ekle

Ana konteynerin sağ tarafında iş sürecimizi yürüttükten sonra sonuçların görüntüleneceği bir alan yapılandıracağız. İlk olarak, bu kabın Yön özelliğini Dikey olarak ayarlayın ve elemanların aralıklarını düzgün tutmak için küçük bir Boşluk ekleyin. Genişliğini %30 olarak değiştirin.

Sağdaki bu kapsayıcıya yeni bir Yatay Esnek kapsayıcı ekleyin ve içine işlemi temsil eden bir Simge öğesi, Eşit sembollü bir Metin Bloğu ve işlemin sonucunun görüntüleneceği Metin Bloğu ekleyin. Bu kapsayıcıyı dört kez çoğaltın ve her birini tanımlı matematiksel işlemlerimiz için güncelleyin.

Görünüm Paneli ile her öğeyi istediğiniz gibi özelleştirin.

İpucu Bloğu Ekle

Arayüzün kullanılabilirliğini arttırmak için sonuçlar alınana kadar görüntülenecek bir yer tutucu yapıyoruz. Bunun için, doğru kabın genişliğini (%30) yansıtan ek bir Flex Kap ekleyin ve içine açıklayıcı bir ipucu içeren bir Metin Bloğu yerleştirin.

Sonuçları içeren kapsayıcının önemli bir özelliği, ilk görünürlük durumudur. Varsayılan olarak, Görünür anahtarını kapalı olarak ayarlayın ve başlangıçta onu görünmez yapın.

Öğeyi Gizle

Bu konteyneri görünür hale getireceğiz ve verileri ancak iş süreci yürütülüp sonuç alındıktan sonra güncelleyeceğiz. İş süreçlerinin oluşturulması ve sonuçların görüntülenecek şekilde yazılması sırasında kolay tanımlama sağlamak amacıyla Metin Bloğu adlarının atanması önemlidir.

🎉 İyi iş! Uygulamamız için mükemmel kullanıcı arayüzünü oluşturduk ve öğelerimize etkileşim eklemeye hazırız.