Assalamu’alaikum
..
Selamat
datang di pertemuan ke 12 ..
Hari
ini dengan tanggal yang special 111213, welcome to Application Bar ..
Iyaa
pertemuan 12 ini pembahasan video tutorial tentang Application Bar, dan keyword
minggu ini adalah sebutkan alasan kamu bangga terhadap Indonesia ?? Kalau tidak
salah seperti itu hhaha. Kali ini urutan panggilan nama-nama mahasiswa berbeda.
Aku ga bisa mikir panjang karena sang dosen memulai dari nama absen urutan
terbawah #woahhhh dan urutan nama saya itu yaa dari bawah wkwk jawaban aku
adalah karena cuaca di Indonesia Cuma ada 2 .. eh salah maksudnya di Indonesia Cuma
ada 2 musim yaitu : Musim panas & musim hujan, seperti ituu hhahaha ..
Lanjut
pembahasan tentang Application Bar, Application Bar itu merupakan sebuah bar
atau tempat untuk menyimpan sebuah button atau item. Untuk lebih jelasnya kita
akan langsung pada project, Sama seperti yang sebelum-sebelumnya, saat kita
akan membuka atau mengoprasikan aplikasi windows phone. Kita akan mengikuti
langkah-langkah untuk membuat file baru.
Sebelum kita mengisika
item-item dan codding-nya, terlebih dahulu ikuti langkah-langkah berikut :
1. Buka file C pada laptop/PC anda
2. Plih program file (untuk windows phone
2010 (32 Bit), tapi kalau teman –temn memakai 64 Bit, maka yang anda pilih program file x86).
3. Plih Microsoft SDKs
4. Pilih Windows Phone
5. Dan pilih yang v7.1
6. Pilih Icon
7. Pilih Dark
8. Pilih icon yang teman-teman butuhkan.
Tapi dalam tutorial saya kali ini, saya akan mencontoh kan 4 icon, yaitu icon
appbar.add.rest, appbar.cancel.rest, appbar.check.rest. dan
appbar.download.rest.
Tapi sebelum kita akan
meng-eksport pada project, terlebih dahulu kita kan membuat new folder pada
project-nya. Mungkin teman-teman sudah pada tau cara membuat new folder-nya
tapi untuk lebih jelasnya saya akan mengulang kembali melalui gambar dibawah
ini.
Jangan
lupa nama foldernya yaitu “Images”. Setelah itu kita akan membuat folder baru
lagi pada folder Images ini. Caranya sama dengan diatas, tapi bedanya apabila
tadi kita mengklik kanan pada folder ApplicationBar2, nah sekarang kita akan
mengklik kanan pada folder Images-nya. Jangan lupa juga kita akan
memberi nama pada folder ke2 ini dengan
nama “AppBar. Guna dari folder AppBar ini yaitu untuk mengorganisir images yang
khusus untuk aplikasi bar saja. Setelah
itu kita akan mengcopy icon-icon yang telah kita pilih sebelumnya dan
memindahkan ke dalam folder AppBar.
Caranya
yaitu :
1. Kembali pada folder icon sebelumnya.
2. Pilih icon yang anda inginkan (tadi saya
telah memilih icon Add, Cancel, Check dan Download).
3. Klik kanan pada icon yang telah diblok
dan copy
4. Masuk ke file project
5. Klik kanan pada folder AppBar dan paste.
Sekarang
kita akan mengatur Build Ection-nya, apabila pada project teman-teman build
actionnya masih dalam kondisi “Resource”, maka kita akan mengubahnya menjadi
“Content”. Caranya yaitu :
1. Blok ke empat gambar icon pada folder AppBar.
2. Lihat pada menu properties dan search
“Build Ection”
3. Klik pada kotak build ectionnya dan
pilih “Content”.
Sekarang
kita akan memasang icon-icon itu pada bar-nya. Pada aplikasi Microsoft Visual
windows phone 2010, menu bar-nya telah
disiapkan, namun codding-nya masih dalam bentuk coment.
Sekarang kita akan menghapus
tanda coment pada coding tersebut, sehingga tampilannya akan seperti pada
gambar dibawah ini.
Berikut
codingnya :
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True"IsMenuEnabled="True">
<shell:ApplicationBarIconButtonx:Name="addAB"
IconUri="/Images/AppBar/appbar.add.rest.png" Text="Add"Click="addAB_Click"/>
<shell:ApplicationBarIconButtonx:Name="cancelAB"
IconUri="/Images/AppBar/appbar.cancel.rest.png"Text="Cancel" Click="cancelAB_Click"/>
<shell:ApplicationBarIconButtonx:Name="checkAB"
IconUri="/Images/AppBar/appbar.check.rest.png"Text="Check" Click="checkAB_Click" />
<shell:ApplicationBarIconButtonx:Name="deleteAB"
IconUri="/Images/AppBar/appbar.delete.rest.png"Text="Delete" Click="deleteAB_Click" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItemx:Name="menuItem1" Text="Menu Item
1"Click="menuItem1_Click"/>
<shell:ApplicationBarMenuItemx:Name="menuItem2" Text="Menu Item
2"Click="menuItem2_Click"/>
<shell:ApplicationBarMenuItemx:Name="menuItem3" Text="Menu Item
3"Click="menuItem3_Click"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Hasil
eksekusinya :
Tapi belum cukup sampai
disini project yang saya buat. Sekarang saya akan membuat icon button tersebut
dapat meng-link atau berfungsi saat saya mengkliknya.
Langkah pertama yaitu , saya
akan membuat folder baru lagi pada file ApplicationBar2 dan nama foledernya
yaitu “Views” setelah itu saya akan membuat item baru pada folder Views
tersebut, caranya lihat pada gambar dibawah ini
Maka akan muncul file baru
=> add.
Buat sebuah halaman lagi,
beri nama firstpage.xaml
Kemudian klik pada button
yang akan diberi aksi, masukkan coding berikut :
NavigationService.Navigate(newUri(String.Format("/firstpage.xaml"), UriKind.Relative));
Cukup
sekian laporan postingan pertemuan 12 ini ..
Semoga
postingan ini bermanfaat dan semoga berhasil~
Terima
kasih~
Wassalamu’alaikum
wr.wb
0 komentar:
Posting Komentar