Hello Windows Phone

Sekedar berbagi tentang bagaimana membuat aplikasi pertama di platform Windows Phone. Untuk tutorial kali ini akan dimulai mengembangkan aplikasi “Hello” di Windows Phone 8.0. Tapi sebelum memulainya, tentu kita telah menginstal Visual Studio + Windows Phone SDK dan sudah memahami isi dapurnya.

Dalam latihan ini, kita akan membuat, menguji, dan menjalankan aplikasi “Hello” di Windows Phone emulator. Kita akan belajar bagaimana menggunakan Windows Phone SDK termasuk Microsoft Visual Studio 2012 Express untuk Windows Phone IDE, dan Windows Phone Emulator. Kita mulai dengan unsur-unsur yang sangat dasar dari setiap aplikasi Windows Phone. Karena ini adalah sebuah aplikasi Windows Phone, kita harus menguasai bahasa pemograman C # dengan model pemrograman XAML yang nantinya menentukan interfacenya.

Untuk membangun user interface pada Windows Phone yang menggunakan XAML, kita bisa mengedit XAML dari halaman utamanya. Kita akan menambahkan tiga elemen ke halaman utamanya yaitu: text box, button, dan text block. Setelah selesai, aplikasi memungkinkan kita untuk memasukkan pesan teks dalam text box dan kemudian button click untuk menampilkan teks yang kita masukkan text box tadi.

Task 1 – Membuat aplikasi Windows Phone project di visual studio

Dalam latihan ini, kita menggunakan template standar dari Microsoft Visual Studio 2012 Express untuk Windows Phone sebagai langkah awal untuk aplikasi pertama.

  1. Buka Visual Studio dan buat new project menggunakan Windows Phone App Template yang terletak di bawah kategori Windows Phone. Atur nama project menjadi HelloPhone dan lokasi nya bebas (Contoh -> Drive : E).

    creating-a-new-wp-app-project
    Membuat new project Windows Phone di Microsoft Visual Studio 2012 Express
  2. wp8-as-target
    Pilih target os Windows Phone 8.0
  3. Pada solution explorer akan di perlihatkan template aplikasi windows phone
    Solution Explorer menampilkan aplikasi HelloPhone
    Tampilan solution Explorer dari aplikasi HelloPhone

    1
    Deskripsi dari masing – masing item yang ada di solution explorer
  4. Sekarang, klik kanan App.xaml di Solution Explorer dan pilih Show Code untuk membuka codingannya. Perhatikan bahwa dalam konstruktor disini merupakan infromasi umum dari aplikasi yang sedang kita kembangkan. Kita dapat mengeditnya, seperti nama aplikasi dan publisher maupun lain – lain.

    project-properties-window
    Project Properties window

 

Task 2 – Membuat dan mentest aplikasi windows phone pada emulator

Saat ini, aplikasi belum bisa apa – apa, tetapi bisa saja di debug.

  1. Untuk pertama kali debug dan kompilasi, harusnya tidak ada error.
  2. Pastikan target debug adalah Emulator WVGA 512MB. Untuk melakukan hal ini, tinggal scroll kebawah.

    Memilih perangkat target untuk menyebarkan aplikasi
    Memilih perangkat target untuk menyebarkan aplikasi
  3. Tekan F5 untuk menjalankan aplikasi di Windows Phone Emulator.
  4. Setelah siap, emulator menunjukkan halaman Start dan tak lama kemudian, aplikasi Anda muncul di jendela emulator.

    running-the-app
    Menjalankan aplikasi di Telepon Windows emulator
  5. Sampai proses debug selesai dan tampilan seperti diatas, maka kita sudah berhasil menjalankan emulator

 

Task 3 – Mendesain tampilan user

Dalam task ini, kta akan membuat elemen UI untuk aplikasi HelloPhone. Aplikasi ini sangat sederhana, ketika selesai aplikasi UI akan berisi keterangan, textbox, dan tombol. Untuk menggunakan aplikasi ini, kita akan memasukkan beberapa teks ke dalam textbox dan kemudian, ketika Anda mengklik tombol, aplikasi menampilkan banner dengan teks yang Anda ketik. Ini akan terlihat seperti gambar berikut:

User interface aplikasi
User interface aplikasi

Dalam solusi Explorer, klik dua kali MainPage.xaml untuk membuka file ini pada designer.

Dalam markup XAML yang dihasilkan oleh template standar aplikasi Windows Phone, cari elemen Grid bernama LayoutRoot. Ubah properti RowDefinition dengan menggunakan kode di bawah ini:

Cari elemen Grid bernama TitlePanel. Atur properti Text dari elemen TextBlock pertama dalam Grid  untuk string “Windows Phone 8”. Demikian pula, atur properti Text dari elemen TextBlock kedua string “Hello Phone”.

Sekarang, cari elemen Grid bernama ContentPanel, yang seharusnya saat ini kosong, dan menjadi berikut : XAML markup dalam elemen ini.

Untuk melengkapi desain halaman, tambahkan baris ketiga yang mengandung banner dengan pesan yang dimasukkan oleh pengguna. Untuk membuat baris ini, masukkan text berikut : XAML markup tepat sebelum tag akhir grid luar.


 

Task 4 – Kondisi event dari user interface

Dalam task ini, kita akan mendefinisikan event handler yang merespon tindakan dari user interface, yaitu pada button klik. Kita mendefinisikan event handler menggunakan kode dalam file-code yang ada di belakang halaman tersebut.

  1. Pastikan bahwa mode desainer diatur untuk menDesain.
  2. Klik tombol yang bertuliskan “Click Me” dan periksa sifat-sifatnya. Klik tab Events untuk menampilkan dan menemukan acara Klik dalam daftar ini dan kemudian ketik ClickMeButton_Click dalam kotak teks yang terletak di sebelah event ini. Tekan ENTER untuk menghasilkan sebuah event handler dengan nama ini dan membuka file code yang nantinyamenampilkan tulisan metode yang dihasilkan oleh Visual Studio.
    Membuat event handler untuk tombol
    Membuat event handler untuk tombol

    Tampilan XAML menunjukkan handler baru terikat pada acara Klik
    Tampilan XAML menunjukkan handler baru pada acara Klik
  3. Pelaksanaan metode (yang merupakan metode kosong sekarang) berada di MainPage.xaml.cs Masukkan kode berikut di dalam tubuh metode ClickMeButton_Click.https://gist.github.com/90f77a0717aac3f01c6b

 

Task 5 – Verifying the Application

Dalam task ini, kita membangun, dan menjalankan aplikasi di Windows Phone Emulator dan untuk menguji bahwa aplikasi bekerja seperti yang diharapkan. Selain itu, kita akan mengatur breakpoint, menggunakan debugger untuk mengetahui proses pada code, dan memeriksa nilai variabelnya.

  1. Jika perlu, kembali buka file sourcecode MainPage.xaml. Untuk melakukannya, klik kanan file ini di Solution Explorer dan kemudian pilih View Code.
  2. Tentukan breakpoint untuk menghentikan eksekusi pada event handler pada button “Click Me”.
  3. Tekan F5 untuk mendebug aplikasi padaWindows Phone Emulator dan akan dimulai sesi debugging. Tunggu aplikasi untuk memulai dan menampilkan page utama.
  4. Pada jendela emulator, click text box untuk memberikan fokus. Hal ini akan menyebabkan Panel Input Software membuka secara otomatis. Kita dapat mengetik pesan dengan menggunakan panel atau tekan tombol PageUp untuk menggunakan virtual keyboard desktop Anda sebagai gantinya. Setelah memasukkan beberapa teks ke dalam kotak teks, klik tombol di sebelahnya.

    Mengetik di emulator
    Mengetik di emulator
  5. Kembali ke Visual Studio, kita akan melihat eksekusi yang berhenti di breakpoint yang Anda tetapkan sebelumnya dan ada pernyataan berikutnya untuk mengeksekusi muncul ditandai dengan warna kuning.

    Melangkah melalui kode di debugger
    Melangkah melalui kode di debugger
  6. Sekarang Anda dapat memeriksa salah satu objek ini dalam lingkup seperti dalam setiap sesi debugging. Jika Anda memeriksa properti MessageTextBox.Text, maka harus mengandung nilai yang Anda masukkan pada langkah 4.
  7. Tekan F5 untuk melanjutkan debuging aplikasi. Beralih kembali ke Windows Phone Emulator. Sekarang harus menampilkan ketikan dalam teks prompt di bawah kotak teks.

    Aplikasi HelloPhone berjalan di Windows Phone Emulator
    Aplikasi HelloPhone berjalan di Windows Phone Emulator
  8. Klik tombol Back di emulator untuk menavigasi ke halaman sebelumnya. Perhatikan bahwa ketika Anda melakukan ini, sesi debugging tidak berakhir. Karena banyak cara untuk menjalankan aplikasi, itu perlu untuk debugger untuk terus melekat pada aplikasi Anda, bahkan ketika itu tidak berjalan. Untuk menghentikan debugging, tekan Shift + F5 dalam Visual Studio.
  9. Penjelasan selama proses debug dapat dilihat pada gambar dibawah :

    hellophone-app-running
    Debug mode
Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s