Tutorial ini menunjukkan bagaimana cara membuat aplikasi yang memiliki beberapa layar. Di App Inventor, Anda dapat memiliki layar membuka layar kedua. Kemudian, layar kedua dapat kembali ke layar yang membukanya. Anda dapat memiliki banyak layar yang Anda inginkan. Layar dapat berbagi informasi dengan melewati dan kembali ketika mereka membuka dan menutup layar. Layar juga berbagi data TinyDB yang sama, yang dapat mereka gunakan untuk menyimpan nilai.
Berikut adalah cara untuk membangun dua layar untuk aplikasi ColoredDots.
Membangun Layar Utama (Screen1)
1. Mulai dengan membuat proyek baru. Untuk Screen 1, buat desain dan tambahkan panel komponen seperti gambar di bawah.
dengan spesifikasi komponen sebagai berikut:
Menambahkan layar kedua (Brush_Picker)
1. Untuk menambahkan layar baru untuk aplikasi Anda, klik tombol Add Screen di toolbar atas jendela Designer. Sebuah jendela dialog akan muncul, di mana Anda dapat memberikan nama untuk layar baru.
2. Berikut jendela Desain untuk layar kedua bernama Brush_Picker setelah komponen telah ditambahkan.
berikut spesifikasi komponen Brush_Picker:
Blok untuk layar utama (Screen1)
1. Buat blok seperti berikut. Screen1 pada dasarnya adalah sebuah program gambar. Ketika Anda kanvas disentuh, dapat dilakukan pemberian warna dot yang dingginkan. Warna tersebut ditentukan oleh latar belakang label ColorSample. Tombol erase berfungsi untuk membersihkan kanvas. Berikut adalah gambar bloknya:
2. Tambahkan blok berikut untuk dapat berkomunikasi dengan layar brush_picker. Ada tiga item, yaitu: warna, dotsize, dan jumlah warna yang tersimpan. Jumlah warna yang diperlukan untuk menciptakan daftar yang ListPicker. Berikut adalah bloknya:
3. Layar yang berbeda dalam aplikasi multiple screen dapat berkomunikasi melalui TinyDB. Untuk melakukan hal ini, setiap layar komponen diberikan TinyDB. Meskipun ini akan "berbeda" komponen TinyDB, mereka pada kenyataannya akan berbagi kunci yang sama: Jika salah satu toko layar nilai di bawah kunci, layar lainnya bisa mendapatkan nilai tersebut dengan menggunakan kunci yang sama. Dalam hal ini dibentuk prosedur “PopulateList” sebagai penyimpanan database berupa jumlah warna yang akan disimpan. Tambahkan After Listpicker1 Click. Gunanya untuk melihat daftar semua warna yang Anda buat. Berikut block nya :
4.Setelah dibentuk “Populate List”,tambahkan list picker ke blocks screen 1. initialized dan screen1.OtherScreenClosed. Tampilan Blocks seperti gambar dibawah :
Blok untuk layar Brush_Picker
1. Berikut adalah blok untuk checkColor dan limitRange. Tugas utama Brush_Picker adalah untuk membuatkan warna merah-hijau-biru dapat dimasukkan ke dalam kotak teks dan memberikan warna untuk Screen1. Masing-masing dari warna merah, hijau dan biru harus angka antara 0 dan 255.
2. Sekarang, kita akan menggunakan dua prosedur untuk membuat sisa blok untuk Brush_Picker. Ketika Anda mengklik ReturnToPainting, warna baru, ukuran baru dot (diambil dari RadiusTextBox), dan jumlah total warna dikembalikan ke Screen1 sebagai daftar tiga-item. Berikut adalah blok untuk melakukan hal ini. Brush_Picker menggunakan prosedur CheckColor dan LimitRange untuk memberi nilai yang dimasukkan dalam kotak teks nomor berlaku untuk warna dan ukuran dot.
3. Lakukan Inisialisasi Test Color Button. Berikut Blocks Test Color Button :
4. Blok berikutnya menunjukkan bagaimana Brush_Picker mengaitkan nama dengan warna untuk digunakan oleh Screen1. Blok Notifier1.ShowChooseDialog memicu acara Notifier1.AfterChoosing. Dalam blok ini, blok ifelse memeriksa respon apakah atau tidak warna harus disimpan. Jika respon adalah "OK," Notifier1.AfterChoosing panggilan Notifier1.ShowTextDialog yang meminta Anda untuk menyimpan nama untuk warna ini.
5. Tombol Reset memungkinkan pengguna untuk menghapus semua entri di bidang merah, hijau, dan biru sehingga mereka dapat memulai dengan mudah. Blok untuk ini yang ditampilkan di sini:
Postingan
0 komentar:
Posting Komentar