Membangun UI

Untuk merancang kegunaan dan antarmuka terstruktur, AppMaster Web Designer menyediakan beragam komponen UI atom. Komponen-komponen ini dapat digabungkan dan dikelompokkan dalam berbagai cara agar selaras dengan tujuan dan sasaran Anda.

AppMaster menawarkan komponen UI berikut:

• Wadah: Elemen dasar untuk menyusun dan mengelompokkan komponen lain secara logis.
• Modals and Drawers: Komponen interaktif untuk menampilkan informasi atau tindakan tambahan tanpa meninggalkan layar saat ini.
• Komponen Output Nilai Dinamis: Termasuk Daftar , Kisi , dan Tabel untuk menyajikan data secara dinamis.
• Elemen UI Dasar: Seperti Tombol , Teks , dan Ikon , penting untuk interaksi antarmuka dasar.
• Komponen Navigasi: Termasuk Menu Vertikal dan Horizontal, Tab , dan alat navigasi serupa.
• Elemen Formulir: Berbagai masukan dan kontrol untuk interaksi pengguna dan pengumpulan data.

Pembaruan rutin pada pustaka komponen meningkatkan kemampuan Anda untuk mengembangkan aplikasi web dengan lebih efisien.

Mari buat UI untuk aplikasi kalkulator sederhana kita guna mendemonstrasikan kemungkinan pembuat situs web seret dan lepas AppMaster. Aplikasi ini akan menampilkan hasil berbagai operasi matematika berdasarkan nilai masukan.

Wadah Fleksibel

Dengan Flex Container , Anda dapat dengan mudah mengelola penyelarasan dan manajemen penumpukan untuk semua elemen turunan dalam sebuah container.

Flex Container adalah komponen dasar untuk membangun struktur halaman web Anda. Flex Container di desainer aplikasi web AppMaster memungkinkan pengguna mengatur elemen anak (widget atau container) secara fleksibel. Ini mendukung penyelarasan horizontal dan vertikal, memungkinkan pengembang membuat tata letak kompleks yang beradaptasi dengan ukuran layar berbeda.

Menambahkan Kontainer

Kami akan menggunakan dua wadah utama: satu untuk entri data dan yang lainnya untuk menampilkan hasil perhitungan yang dibungkus dalam satu wadah umum.

Pertama, tambahkan Flex Container ke kanvas untuk menampung semua elemen lainnya.

Di panel Appearance , Anda dapat menjelajahi berbagai pengaturan:

• ID Elemen: Pengidentifikasi unik untuk mereferensikan kontainer dalam proses bisnis.
• Grup Umum: Pengaturan untuk menentukan status default komponen, seperti visibilitas dan gaya kursor.
• Grup Anak Fleksibel: Menentukan bagaimana elemen berperilaku dalam komponen induk fleksibel.
• Tata Letak: Pengaturan untuk mengatur item anak di dalam wadah.
• Ukuran: Untuk menentukan dimensi elemen.
• Spasi : Menyesuaikan ruang di dalam dan di sekitar elemen.
• Latar Belakang: Pilihan untuk warna dan lapisan latar belakang.
• Radius Sudut, Perbatasan, Bayangan: Kustomisasi untuk elemen tepi, batas, dan efek bayangan.
• Keterangan alat: Menambahkan keterangan alat untuk tindakan mengarahkan atau memfokuskan.

Sesuaikan wadah utama Anda. Misalnya, atur Direction ke horizontal dan sesuaikan Gap , Padding , Corner radius , dan Borders .

Selanjutnya, tambahkan wadah Flex lain di dalam wadah utama Anda agar formulir dapat memasukkan nilai. Atur ke lebar penuh untuk mengisi ruang yang tersedia di wadah induk.

Gandakan Kontainer ini (menggunakan CTRL/⌘+D ) untuk membuat blok terpisah untuk menampilkan hasilnya. Atur properti Lebar menjadi 30%.

Menambahkan Elemen UI

Untuk terus membangun aplikasi Anda, saatnya menambahkan elemen UI yang diperlukan.

Tambahkan Formulir

Proses bisnis kami mengharuskan pengguna untuk memasukkan dua angka, keduanya bertipe Float. Untuk memungkinkan hal ini, tambahkan dua Input Float dan sebuah Tombol untuk memulai proses perhitungan.

Alihkan Arah Kontainer Fleksibel sisi kiri ke Vertikal dan tambahkan Celah agar elemen yang disarangkan memiliki sedikit ruang di antaranya. Tambahkan ke dalam wadah Flex ini Input Float untuk nilai pertama, yang akan kita beri label sebagai 'X':

• Seret dan lepas elemen Input Float ke wadah sebelah kiri.
• Di Panel Penampilan , personalisasikan bidang dengan menambahkan Label dan Placeholder .
• Sempurnakan tampilan bidang agar sesuai dengan desain aplikasi Anda.

Pilih bidang yang ditambahkan di kanvas dan duplikat menggunakan CTRL/⌘+D . Ubah Label dan Placeholder bidang duplikat untuk mewakili nilai kedua, 'Y'.

Sekarang seret dan lepas elemen Tombol di bawah bidang yang ditambahkan. Di panel Appearance , sesuaikan Tombol untuk menjangkau lebar penuh. Hal ini dapat dicapai dengan mengatur properti Align di grup Flex Child ke Stretch .

Masukkan Label untuk Tombol, dan secara opsional, tambahkan Ikon untuk meningkatkan daya tarik visualnya.

Setelah menambahkan elemen-elemen ini, sebaiknya ganti namanya agar lebih jelas dan mudah diidentifikasi. Hal ini memudahkan untuk merujuknya dalam proses bisnis Anda, meningkatkan pemahaman dan mempercepat proses pengembangan.

Tambahkan Blok Hasil

Di sisi kanan wadah induk, kita akan mengonfigurasi ruang untuk menampilkan hasil setelah menjalankan proses bisnis kita. Pertama, atur properti Direction wadah ini ke Vertikal dan tambahkan Celah kecil untuk menjaga jarak elemen tetap rapi. Ubah Lebarnya menjadi 30%.

Di dalam wadah kanan ini, masukkan wadah Horizontal Flex baru dan tambahkan di dalamnya elemen Ikon yang mewakili operasi, Blok Teks dengan simbol Sama, dan Blok Teks di mana hasil operasi akan ditampilkan. Gandakan wadah ini empat kali, perbarui masing-masing untuk operasi matematika yang telah kita tentukan.

Sesuaikan setiap elemen sesuai keinginan Anda dengan Appearance Panel .

Tambahkan Blok Petunjuk

Untuk meningkatkan kegunaan antarmuka, kami membuat placeholder yang akan ditampilkan hingga hasilnya diperoleh. Untuk ini, tambahkan Flex Container tambahan, yang mencerminkan lebar wadah yang tepat (30%), dan tempatkan Blok Teks di dalamnya dengan petunjuk deskriptif.

Fitur utama penampung dengan hasil adalah status visibilitas awalnya. Secara default, matikan tombol Terlihat , awalnya membuatnya tidak terlihat.

Sembunyikan Elemen

Kami akan membuat wadah ini terlihat dan memperbarui data hanya setelah proses bisnis dijalankan dan hasilnya diperoleh. Penting untuk menetapkan nama Blok Teks, memastikan kemudahan identifikasi selama pembuatan proses bisnis dan penulisan hasil untuk ditampilkan.

🎉 Kerja bagus! Kami membuat UI yang sempurna untuk aplikasi kami dan siap menambahkan interaktivitas ke elemen kami.