Tutorial Ini yaitu terjemahan bebas dari tutorial dengan judul the new multiscreen explained dari situs tAIR sebuah situs repository App Inventor. OK pribadi saja, chekidot :
1. Buat projek gres pada Desainer
tambahkan layar ( add screens )
Rename Screen1 menjadi Home pada Title.
Klik pada Add Screen dan beri nama layar tersebut dgn nama about
Lakukan lagi langkah tersebut untuk layar Help dan Settings sehingga kini kita sudah mempunyai empat buah layar pada aplikasi yang akan kita buat
NOTE: Setiap layar akan terpisah, sehingga kita akan melaksanakan langkah duplikasi pada projek ini.
Setelah semua layar tamat kita buat, kini saatnya untuk melengkapi komponen yang ada pada layar, dsini kita akan memakai naming conventions kalau 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 memakai list picker to untuk menciptakan sajian 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 biar sesuai.
2.3 Screen Text
Drag Vertical arrangement ke layar Screen1.
Rename menjadi varHome, Set lebar dan tingginya untuk menyesuaikan dengan layar.
Drag Horizontal arrangement ke layar Screen1.
Rename menjadi harHome, set lebar dan tingginya.
Drag text box ke harHome Arrangement dan rename menjadi txtHome Set text menjadi This is the home screen. set lebar dan tingginya.
2.3. Database
Drag tinyDB ke Screen1 dan beri nama tdbMain.
Catatan : mengenai tinyDB dan multiscreen:
Kita hanya sanggup memakai 1 TinyDB per aplikasi.
kita sanggup bebas memberi nama.
Tapi kita harus memasukkan tinyDB ke tiap layar yg memerlukan saluran 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 melaksanakan semuanya dengan benar, dikala ini layar akan terlihat ibarat ini :
3. About
Sekarang kita akan set layar About, klik pada About.
3.1 . Menu
Kita gunakan list picker untuk menciptakan sajian navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya biar sesuai.
Drag listpicker ke varMenu yg gres saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya biar sesuai
3.2. Screen Text
Drag Vertical arrangement ke layar About .
Rename menjadi varAbout set lebar dan tingginya biar sesuai.
Drag Horizontal arrangement ke layar About.
Rename menjadi harAbout set lebar dan tingginya biar sesuai.
Drag text box ke harAbout Arrangement dan rename menjadi txtAbout.
Set text menjadi This is the about screen.
set lebar dan tingginya biar sesuai.
3.4 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat ibarat ini :
4. Help
Untuk layar Help .
4.1 Menu
Kita gunakan list picker untuk menciptakan sajian navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya biar sesuai.
Drag listpicker ke varMenu yg gres saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya biar sesuai
4.2 Screen Text
Drag Vertical arrangement ke layar Help .
Rename menjadi varHelp set lebar dan tingginya biar sesuai.
Drag Horizontal arrangement ke layar Help.
Rename menjadi harHelp set lebar dan tingginya biar sesuai.
Drag text box ke harHelp Arrangement dan rename menjadi txtHelp.
Set text menjadi This is the help screen.
set lebar dan tingginya biar sesuai.
4.3 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat ibarat ini :
5. Settings
Untuk layar Settings.
5.1 Menu
Kita gunakan list picker untuk menciptakan sajian navigasi.
Drag Vertical Arrangement ke About dan rename menjadi varMenu.
set lebar dan tingginya biar sesuai.
Drag listpicker ke varMenu yg gres saja kita buat.
Rename menjadi lprMenu , Set warna background menjadi hitam.
Set text menjadi Menu.
Set warna text menjadi putih.
Set lebar dan tingginya biar sesuai
5.2 Screen Text
Drag Vertical arrangement ke layar Settings .
Rename menjadi varSettings set lebar dan tingginya biar sesuai.
Drag Horizontal arrangement ke layar Settings.
Rename menjadi harSettings set lebar dan tingginya biar sesuai.
Drag text box ke harSettings Arrangement dan rename menjadi txtSettings.
Set text menjadi This is the Settings screen.
set lebar dan tingginya biar sesuai.
5.3 Database
Kita membutuhkan TinyDB database untuk settings.
Beri nama tdbMain.
Sehingga layar About kita akan terlihat ibarat ini :
6. Menambahkan Block Code – Pada Blocks Editor
Pilih screen1 pada jendela designer.
6.1 Screen1
Tambahkan block komponen berikut ke blocks editor:
built-in tab -> Definition drawer, tambahkan dua variables.
yang pertama namakan Make a list
Yang kedua TextColor Color None.
Dari My Blocks tab ->Drawer Screen1 drag Screen1.Initialize event.
Dari My Blocks lprMenu Drawer drag lprMenu.BeforePicking dan event lprMenuAfterPicking .
download source code tutorial App Inventor Android Multiscreen di link ini juga file pdf dari tutorial pada link download tutorial App Inventor Android Multiscreen dsini
Have Fun
Layanan Public App Inventor dari MIT sudah sanggup di coba , silahkan disini MIT Beta App Inventor
Kalau mau coba yg offline silahkan baca-baca dulu disini App Inventor offline
Layanan Public App Inventor dari MIT sudah sanggup di coba , silahkan disini MIT Beta App Inventor
Kalau mau coba yg offline silahkan baca-baca dulu disini App Inventor offline
Buat lebih berguna, kongsi:
