Revo Flasher - Tutorial Ini adalah terjemahan bebas dari tutorial dengan judul the new
multiscreen explained dari situs tAIR sebuah situs repository App Inventor. Berikut ini
Panduannya :
Klik pada Add Screen dan beri nama layar tersebut dgn nama about
Lakukan lagi langkah tersebut untuk layar Help dan Settings sehingga sekarang kita
sudah memiliki empat buah layar pada aplikasi yang akan kita buat
NOTE: Setiap layar akan terpisah, sehingga kita akan melakukan langkah duplikasi
pada projek ini.
Setelah semua layar selesai kita buat, sekarang saatnya untuk melengkapi komponen
yang ada pada layar, dsini kita akan menggunakan naming conventions jika anda
belum memahaminya silahkan anda mempelajarinya terlebih dahulu, kita akan mulai
dari Arrangements, ListPickers dan Labels.
2. Screen1
Pastikan kita berada pada Screen1.
2.1 Menu
Dsini kita akan menggunakan list picker to untuk membuat menu navigasi
Drag Vertical Arrangement ke Screen1 dan rename menjadi varMenu, Set lebar dan
tingginya untuk menyesuaikan dengan layar
Drag elemen listpicker ke varMenu yang barusan kita buat.
Rename menjadi lprMenu set background color menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih set lebar dan tingginya agar sesuai.
2.3. Database
Drag tinyDB ke Screen1 dan beri nama tdbMain.
Catatan : mengenai tinyDB dan multiscreen:
Kita hanya bisa menggunakan 1 TinyDB per aplikasi.
kita bisa bebas memberi nama.
Tapi kita harus memasukkan tinyDB ke tiap layar yg memerlukan akses ke Database.
Kita juga dapat memberi nama database berbeda, tapi ingat gunakanlah tag yang berbeda, agar
terhindar dari ketidaksengajaan, dan data kita tertimpa.
Apabila kita sudah melakukan semuanya dengan benar, saat ini layar akan terlihat
seperti ini :
3. About
Sekarang kita akan set layar About, klik pada About.
3.1 . Menu
Kita gunakan list picker untuk membuat menu navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya agar sesuai.
Drag listpicker ke varMenu yg baru saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya agar sesuai
3.4 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat seperti ini :
4. Help
Untuk layar Help .
4.1 Menu
Kita gunakan list picker untuk membuat menu navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya agar sesuai.
Drag listpicker ke varMenu yg baru saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya agar sesuai
4.3 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat seperti ini :
5. Settings
Untuk layar Settings.
5.1 Menu
Kita gunakan list picker untuk membuat menu navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya agar sesuai.
Drag listpicker ke varMenu yg baru saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya agar sesuai
5.3 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat seperti ini :
6.2 Screen1.Initialize
Screen Initialize events hampir sama pada semua layar. Pada Screen1 hanya ada
sedikit kode extra untuk menghandle ketilka aplikasi pertama kali dijalankan
Klik pada area layar Screen1.Initialize dan pilih kontrol If Else.
klik pada connector untuk test pada block if else dan pilih math =.
Pada block math = masukkan tdbMain.GetValue dan set tag ke TextColor.
Pada kanan block math = biarkan text kosong
Pada then-do masukkan Set Global TextColor dari My Definitions drawer ke Color
None.
Kemudian pada bagian else-do , Set Global
TextColor ke tdbMain.GetValue TagTextColor.
Set juga txtHome.TextColor ke Global TextColor.
Ambil block if Else lagi dan tempatkan dibawah yg pertama tadi.
Set test ke tdbMain.GetValue tag layar = kosong , seperti tadi kecuali bagian
tagTextColor.
Pada then-do, Set Global Screens ke Make a list dengan empat buah layar.
Simpan layar-layar itu ke tDB sehingga bisa digunakan pada layar yg lain, dengan
menambahkan tdbMain.
Simpan layar Tag dengan nilai dari Value Global Screens.
Pada Block the else-do, set global Screens ke tdbMain.GetValue dengan tag Screens.
6.3 lprMenu.BeforePicking
Drag lprMenu.Elements to dari lprMnuDrawer dan set ke Global Screens.
Note: Event ini akan sama pada keempat layar yg kita buat.
6.4 lprMenu.AfterPicking
lprMenu.AfterPicking pada setiap layar agak sedikit berbeda. Kita hanya akan
mengecek layar lainnya
Note : kita tidak perlu mengecek layar dimana kita berada saat itu, karena kita sudah
berada disana
Klik pada layar dan pilih control -> if.
Klik pada area dekat connector dan pilih math -> =.
Dari lprMenu Drawer. drag lprMenu.Selection dan tempatkan dapada sisi kiri = .
Klik pada area dekat connector pada sisi kanan block = block dan pilih text ->text.
Ubah text ke about.
Klik pada if block kemudian tekan ctrl-c sekali dan ctrl-v dua kali untuk meng-copy dua
block if.
Koneksikan pada block if yang berada dibawahnya drag ke lptMenu.AfterPicking.
Ubah Blcok About Text pada block if yg baru if blocks ke Help dan Settings.
Dibawah block then do for each if klik pada layar pilih control -> buka layar yang lain
beserta text.
Set pada Start text dengan nama dari layar dimana kita berada.
Buat dua copy dgn control-c dan control-v kemudian drag block ke statement if yang
sesuai.
lprMenu.AfterPicking kita akan terlihat seperti dibawah ini .
Pada dasarnya kita hanyamengulangi proses ini untuk layar lainnya, pastikan memiliki
terlebih dahulu kita memiliki start text layar dimana kita berada dan nama
layar untuk tigalayar lainnya.Karena langkah-langkahnya sangat mirip, untuk sisa dari
tutorial hanya akanmenunjukkan perbedaan yg ada dan kemudian
memperlihatkan screenshot kode smua.
6.5 About
Yang berbeda dari layar about adalah lprMenu.AfterPicking
NOTE: pada update source v76 on 2/14/2012 , source code Call Get Start Text telah
diganti dengan call get plain start text.
Help
Yang berbeda dari layar about adalah lprMenu.AfterPicking diubah dan ditambahkan
txtHelp.
6.6 Settings
Sekarang kita memiliki beberapa rutin di sini untuk dapat menyimpan pengaturan.
Kemudian kita tarik beberapa warna ke dalamlist.
6.7 lprColor.BeforePicking
Selanjutnya kita menambahkan block lprColor.BeforePicking.
Pada Block BeforePicking kita set nama list dan nama dari warna kita pilih dari list
warna. Kita melakukan ini sehingga kitamemiliki nama yang user friendly
untuklistpicker.
PENTING : Pastikan nama warna pada lprColor.Elements sama dengan pada variable
ColorList.
6.8 lprColor.AfterPicking
Pada lprColor.AfterPicking kita set variable textcolor ke index yang dipilih dari variable
ColorList.
Kemudian kita text color kedalam tDB sehingga kita bisa menggunakannya pada layar
yang lain.
Jangan lupa untuk mengeset warna dari layar settings.
Maka pada layar settings akan terlihat :