Dasar-dasar Editor Halaman

Editor halaman App Maker merupakan cara visual yang mudah untuk membuat antarmuka aplikasi Anda. Seret widget ke kanvas, ikat dengan data, dan jadilah UI.

Editor halaman memiliki tiga bagian utama—kanvas tempat Anda membuat UI, palet Widget dengan semua elemen UI yang dibutuhkan, dan sidebar sisi kanan untuk mengontrol detailnya.

Kanvas

Dengan kanvas, Anda dapat memposisikan dan menyesuaikan komponen yang disebut widget yang menyusun UI aplikasi. Kanvasnya berupa WYSIWYG ("apa yang Anda lihat adalah apa yang Anda dapatkan"), kecuali untuk properti widget data terikat yang dirender dengan placeholder hingga Anda memublikasikan atau mempratinjau aplikasi.

Saat Anda menambahkan widget ke kanvas, Anda dapat mengubah ukuran kanvas untuk melihat tampilan aplikasi pada ukuran layar yang berbeda. Untuk mengetahui informasi selengkapnya, lihat Pengaturan gaya untuk berbagai ukuran layar.

Palet widget

Seret widget dari palet Widget ke kanvas. Beberapa widget memiliki wizard yang membantu Anda mengikat widget dengan data. Beberapa data binding bersifat otomatis, jika sumber data default ditetapkan untuk suatu halaman.

Sidebar sisi kanan memiliki tiga fitur berbeda yang diperlukan untuk membuat UI:

FiturDeskripsi
Editor PropertiDaftar properti yang menentukan cara widget tertentu berinteraksi dengan data, merespons peristiwa, dimuat di halaman, dan lainnya.
Editor GayaPanel yang mengontrol tampilan widget di kanvas. Pilih tema bawaan dan buat gaya Anda sendiri dengan CSS.
OutlineDaftar yang menampilkan hubungan antara widget halaman dan memungkinkan Anda menyembunyikan widget dan mengunci di posisinya.

Data binding dengan Editor Properti

Dengan Editor Properti, Anda dapat mengedit properti yang mengontrol sebagian besar aspek widget, seperti lokasi, tampilan, dan bahkan perilaku widget. Misalnya, widget label memiliki properti text yang menentukan tampilan teksnya.

Ada tiga cara untuk menetapkan properti. Ketika Anda dapat menetapkan properti dengan lebih dari satu cara, klik ikon menu drop-down untuk memilih cara menetapkan properti.

  • Nilai statis (Sama dengan)—Nilai statis sangat praktis, karena Anda dapat memasukkannya secara langsung, tetapi nilai tersebut tidak dapat berubah saat pengguna berinteraksi dengan aplikasi Anda.

  • Ekspresi Binding (Binding)—Ekspresi binding sangat andal, karena Anda dapat menghubungkan UI dengan model data menggunakan ekspresi ini, sehingga model data tersebut mampu merespons secara dinamis saat data dimasukkan atau diedit.

  • Pilihan ()—Pilih di antara opsi yang tersedia atau tentukan (dan pilih) satu atau lebih opsi. Misalnya, pilih sumber data untuk halaman atau tambahkan daftar nama class ke properti styles.

Tips singkat mengenai kanvas

Berikut ini beberapa tips dan trik saat menggunakan kanvas:

  • Tahan tombol shift dan seret mouse untuk memilih beberapa widget.

  • Ketika memilih lebih dari satu widget, Anda dapat memindahkannya sebagai grup, mengedit properti bersama, dan lain-lain.

  • Klik kanan widget atau kanvas untuk memunculkan menu menurut konteks.

  • Tahan tombol control sambil mengatur ulang widget untuk menonaktifkan sementara panduan perataan paskan ke kanvas.

  • Gunakan tombol panah untuk memindahkan widget satu piksel dalam satu waktu.

Referensi lebih lanjut

  • Pelajari berbagai Widget di App Maker lebih lanjut.

  • Cari tahu cara menyesuaikan tampilan dan nuansa aplikasi Anda dengan Gaya.

  • Dapatkan panduan tentang cara membuat halaman di Tata Letak Lanjutan.