NAVIGATION PAGE
halo sahabat blogger ketemu lagi di pertemuan kali ini yaitu pertemuan kesembilan, untuk minggu ini pembelajaran mata kuliah windows phone pindah jam ke pagi-pagi dan untuk mengisi waktu luang maka pada saat ini saya akan menshare hasil pembelajaran tadi pagi :D ,pada pembelajaran kali ini kita kana membahas tentang navigation page yaitu perpindahan dari halam ke halaman lain di windows phone. okeh kita persingkat waktu langsung saja kita membuat sebuah latihan. seperti biasa langkah-langkah awalnya yaitu
1. New Project (ctrl+shift+N)
gambar diatas memiliki komponen-komponen seperti dibawah ini
1 buah textbox
1 buah textblock
4 buah button
selanjutnya karena pada pertemuan kali ini membahas navigation page maka hal yang perlu diperhatikan adalah harus adanya page yang dituju. pada latihan kali ini kita akan mencoba membuat 5 buah page dan setiap page dapat terhubung satu sama lainnya,okeh langkah selanjutnya kita membuat sebuah folder untuk penyimpanan page-page yang dibutuhkan.
7. lihatlah gambar dibawah ini
klik kanan pada project kalian lalu pilih add dan pilih new folder,,beri nama folder kalian "view" ,lihat gambar dibawah ini.
8. selanjutnya tambahkan page.xaml sebagai page yang dibutuhkan,lihatlah gambar dibawah ini
klik kanan pada folder yang baru dibuat lalu pilih add kemudian pilih new item lalu lakukan seperti dibawah ini
pilih windows phone potrait lalu isikan nama pagenya kemudian add,,pada latihan kali saya memberikan nama setiap page yaitu
secondpage.xaml sebagai page kedua
third.xaml sebagai page ketiga
fourth.xaml sebagai page keempat
fifth.xaml sebagai page kelima
9. lalu lakukan pendesainna pada setiap pagenya,pada latihan kali ini saya menyamakan desain setiap page nya,lebih jelasnya lihat gambar dibawah ini
Desain Page pertama (mainpage.xaml)
Desain Page kedua (secondpage.xaml)
Desain Page ketiga(thirdpage.xaml)
Desain page keempat(fourthpage.xaml)
Desain Page kelima(fifthpage.xaml)
10. setelah itu masukkan script dibawah ini pada setiap page.
MainPage.xaml
SecondPage.xaml
ThirdPage.xaml
Fourthpage.xaml
Fifth.xaml
11. setelah itu debug lah projectnya maka hasilnya akan seperti dibawah ini,,dibawah ini navigation page secara normal dan berurutan dari page satu ke dua,dua ketiga dan seterusnya.
lihatlah keterangan yang keluar di setiap page,yang menandakan itu berasal dari page berapa
kemudian lihatlah gambar dibawah ini,dilakukan dengan secara acak tidak berurutan dan tidak seperti gambar diatas
lihatlah kembali keterangan yang muncul di textblock pada setiap page,itu menandakan page sebelumnya atau berasal dari page mana
12. selanjutnya pada setiap kita menavigasi page maka akan selalu muncul keterangan di textboxnya kata dari page sebelumnya,nah sekarang kita akan mencoba bagaimana caranya kata yang ada ditaxtbox dapat hilang ketika kita akan mencoba mengetikkan kata ,lihat gambar dibawah ini
ketika pertama kali masuk ke page tertentu maka textbox akan seperti gambar dibawah ini
13. lihatlah gambar dibawah ini
pada setiap page lakukan penambahan event handler di bagian textboxnya,yaitu caranya klik texktboxnya kemudian pilih event lalu cari perintah mouse enter ,double klik bagian mouse enternya masukkan script dibawah ini
maka hasilnya akan seperti ini
pada saat pertama kali masuk kedalam page
ketika kita akan mengetik kata di textbox kata yang pada saat pertama kali muncul akan hilang sendiri dan textbox menjadi kosong
14. selesai
sekian pertemuan kali ini semoga dengan latihan diatas teman-teman blogget dapat memahami tentang navigation page di windows phone,oke sampe bertemu di pertemuan selanjutnya :D
NAVIGATION PAGE
1. New Project (ctrl+shift+N)
2. Pilih windows Phone App + Visual C#
3. Beri nama project “tugasNCD” Name project jangan lupa samakan dengan Solution Name
4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.
5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK
6. lalu lakukan pendesainna seperti dibawah ini
gambar diatas memiliki komponen-komponen seperti dibawah ini
1 buah textbox
1 buah textblock
4 buah button
selanjutnya karena pada pertemuan kali ini membahas navigation page maka hal yang perlu diperhatikan adalah harus adanya page yang dituju. pada latihan kali ini kita akan mencoba membuat 5 buah page dan setiap page dapat terhubung satu sama lainnya,okeh langkah selanjutnya kita membuat sebuah folder untuk penyimpanan page-page yang dibutuhkan.
7. lihatlah gambar dibawah ini
klik kanan pada project kalian lalu pilih add dan pilih new folder,,beri nama folder kalian "view" ,lihat gambar dibawah ini.
8. selanjutnya tambahkan page.xaml sebagai page yang dibutuhkan,lihatlah gambar dibawah ini
klik kanan pada folder yang baru dibuat lalu pilih add kemudian pilih new item lalu lakukan seperti dibawah ini
pilih windows phone potrait lalu isikan nama pagenya kemudian add,,pada latihan kali saya memberikan nama setiap page yaitu
secondpage.xaml sebagai page kedua
third.xaml sebagai page ketiga
fourth.xaml sebagai page keempat
fifth.xaml sebagai page kelima
9. lalu lakukan pendesainna pada setiap pagenya,pada latihan kali ini saya menyamakan desain setiap page nya,lebih jelasnya lihat gambar dibawah ini
Desain Page pertama (mainpage.xaml)
Desain Page kedua (secondpage.xaml)
Desain Page ketiga(thirdpage.xaml)
Desain page keempat(fourthpage.xaml)
Desain Page kelima(fifthpage.xaml)
10. setelah itu masukkan script dibawah ini pada setiap page.
MainPage.xaml
SecondPage.xaml
ThirdPage.xaml
Fourthpage.xaml
Fifth.xaml
11. setelah itu debug lah projectnya maka hasilnya akan seperti dibawah ini,,dibawah ini navigation page secara normal dan berurutan dari page satu ke dua,dua ketiga dan seterusnya.
kemudian lihatlah gambar dibawah ini,dilakukan dengan secara acak tidak berurutan dan tidak seperti gambar diatas
12. selanjutnya pada setiap kita menavigasi page maka akan selalu muncul keterangan di textboxnya kata dari page sebelumnya,nah sekarang kita akan mencoba bagaimana caranya kata yang ada ditaxtbox dapat hilang ketika kita akan mencoba mengetikkan kata ,lihat gambar dibawah ini
13. lihatlah gambar dibawah ini
pada setiap page lakukan penambahan event handler di bagian textboxnya,yaitu caranya klik texktboxnya kemudian pilih event lalu cari perintah mouse enter ,double klik bagian mouse enternya masukkan script dibawah ini
maka hasilnya akan seperti ini
14. selesai
sekian pertemuan kali ini semoga dengan latihan diatas teman-teman blogget dapat memahami tentang navigation page di windows phone,oke sampe bertemu di pertemuan selanjutnya :D
lihatlah keterangan yang keluar di setiap page,yang menandakan itu berasal dari page berapa
kemudian lihatlah gambar dibawah ini,dilakukan dengan secara acak tidak berurutan dan tidak seperti gambar diatas
lihatlah kembali keterangan yang muncul di textblock pada setiap page,itu menandakan page sebelumnya atau berasal dari page mana
12. selanjutnya pada setiap kita menavigasi page maka akan selalu muncul keterangan di textboxnya kata dari page sebelumnya,nah sekarang kita akan mencoba bagaimana caranya kata yang ada ditaxtbox dapat hilang ketika kita akan mencoba mengetikkan kata ,lihat gambar dibawah ini
ketika pertama kali masuk ke page tertentu maka textbox akan seperti gambar dibawah ini
13. lihatlah gambar dibawah ini
pada setiap page lakukan penambahan event handler di bagian textboxnya,yaitu caranya klik texktboxnya kemudian pilih event lalu cari perintah mouse enter ,double klik bagian mouse enternya masukkan script dibawah ini
maka hasilnya akan seperti ini
pada saat pertama kali masuk kedalam page
ketika kita akan mengetik kata di textbox kata yang pada saat pertama kali muncul akan hilang sendiri dan textbox menjadi kosong
14. selesai
sekian pertemuan kali ini semoga dengan latihan diatas teman-teman blogget dapat memahami tentang navigation page di windows phone,oke sampe bertemu di pertemuan selanjutnya :D
0 komentar:
Posting Komentar