Cerita Kuliah | Tanggal 06 - 11 - 2013
Selamat malam selamat bertemu kembali.
Pada pertemuan kali ini saya akan sedikit membahas tentang Application Bar...!!
Application Bar merupakan sistem kontrol yang dapat kita gunakan untuk membangun sebuah toolbar pada aplikasi windows phone. Terdapat dua jenis application bar yang dapat kita gunakan, yaitu berbasis icon button dan berbasis text menu. Application bar dapat kita definisikan untuk satu aplikasi atau hanya pada halaman tertentu saja.
Pertama pada best practice ada hal-hal yang harus kita perhatikan, yaitu :
- Jika suatu task dapat direpresentasikan dengan jelas melalui icon, gunakan icon button, jika tidak, gunakan text menu
- Gunakan app bar untuk membuat sistem menu agar konsisten dengan user experience seluruh aplikasi pada device
- Opacity yang sebaiknya dipergunakan adalah 0 (akan tidak tampilkan, dan content page akan memenuhi screen layar), 0.5 dan 1 (akan tampak dilayar)
Untuk icon button hal-hal yang sebaiknya diperhatikan adalah :
- Image yang digunakan berwarna putih pada foreground dan transparent menggunakan alpha channel
- Tidak perlu menambahkan lingkaran pada border image, hal itu sudah otomatis
- Jangan gunakan icon button untuk navigasi back, sudah disediakan pada hardware
- Gunakan icon button, untuk task yang utama pada aplikasi
- Contoh icon dapat diperoleh disini : Microsoft Download Center
- hindari lebih dari 5 icon button
Dan untuk text menu perhatikan hal-hal sebagai berikut :
- hindari menggunakan lebih dari 5 text menu
- usahakan menggunakan text antara 14- 20 karakter
gunakan lowercase
Baik,untuk memulai latihan persiapkan tools sebagai berikut :
- Visual Studio 2010 ( saya menggunakan Express for Windows Phone)
- Windows Phone 7 emulator
- Silverlight 4
Selanjutnya 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 –teman 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.
Untuk nama foldernya yaitu “Images”. Selanjutnya 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 memasukkan icon-icon itu pada bar-nya. Pada aplikasi Microsoft Visual windows phone 2010.
ini adalah contoh script 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>
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 halaman baru lagi dan beri nama firstpage.xaml
Kemudian klik pada button yang akan diberi aksi, masukkan coding berikut :
NavigationService.Navigate(newUri(String.Format("/firstpage.xaml"), UriKind.Relative));
