Create a Simple Application with WP7

Dalam tutorial kali ini, saya akan membuat sebuah aplikasi sederhana yang untuk membuat sebuah kalkulator sederhana. Yang membuat ini menarik adalah aplikasi ini akan kita buat dalam sebuah Windows Phone 7 application yang didukung oleh bahasa pemrograman C#.

Dalam tutorial ini, kita akan menggunakan Visual Studio 2010 sebagai IDE. Langkah-langkah membuat aplikasi kalkulator dalam WP7 ini adalah sebagai berikut :

  1. Buka aplikasi Visual Studio, akan muncul sebuah window sebagai berikut :

     

  2. Pilih File -> New -> Project…, pada bagian Installed Templates, pilih Other Languages, kemudian pilih opsi Visal C#, lalu pilih Silverlight for Windows Phone. Setelah itu, pada bagian panel tengah pilih Windows Phone Application. Kemudian ganti nama dan directory dari project seperti yang anda inginkan.

     

  3. Setelah itu, tunggu beberapa saat, dan akan muncul sebuah workspace dari Visual Studio untuk membangun sebuah aplikasi Windows Phone. Layaknya sebuah aplikasi web yang menggunakan bahasa HTML sebagai Layouting, dalam aplikasi WP7 hal tersebut didelegasikan kepada sebuah bahasa yang berekstensi .xaml. XAML file merupakan sebuah markup language yang dapat mendefinisikan elemen antarmuka pengguna, data bindingeventing, dan fitur-fitur lain. DI bagian panel tengah, terdapat dua buah jendela, di sebelah kiri merupakan jendela untuk menampilkan tampilan aplikasi WP7, dan di sebelah kanan adalah kode yang dapat kita letakkan ke dalam sebuah aplikasi WP7

     

  4. Setelah antaramuka untuk tampilan aplikasi terbuka, kita siap untuk mulai membuat kalkulator tersebut. Langkah pertama yang diperlukan untuk membangun aplikasi kalkulator tersebut adalah dua buah text field, satu buah button, dan satu buah label. Text field diperlukan untuk mengisi angka, button diperlukan sebagai event launcher untuk melakukan suatu operasi matematika pada kalkulator ini , dan satu buah label untuk menampilkan hasil operasi tersebut. Komponen-komponen yang kita perlukan di atas sudah ada pada toolbox dan WP Controls, sehingga cukup kita tambahkan ke dalam aplikasi kita. Toolbox ini berada di sebelah kiri dari layar user interface anda.

     

  5. Dari komponen-komponen di atas, pilihlah komponen yang akan digunakan dalam aplikasi kita, yaitu TextBox, Button, dan TextBlock. Kemudian masukkan komponen tersebut ke dalam aplikasi dengan cara meng-klik komponen tersebut kemudian drag komponen ke tempat yang kita inginkan pada desain aplikasi , yang berada pada layar sebelah kiri dari panel yang berada di tengah VS2010. Setelah itu, tentukan ukuran dan posisi sesuai dengan selera kita masing-masing. Anda dapat mengganti nilai-nilai property dari setiap komponen dengan mengubahknya pada table Properties yang berada di bagian kanan bawah, di bawah Solution Explorer

     

  6. Setelah itu, anda perlu memberikan handler apabila suatu event dilakukan, dalam hal ini apabila tombol “Tambah” ditekan. Setelah tombol tambah ditekan, perlu suatu mekanisme untuk menambahkan nilai dari kedua textbox tersebut, dan memasukkannya ke dalam text block. Caranya adalah dengan menambahkan beberapa potongan kode program, yang dapat dilakukan dengan cara melakukan double klik pada tombol “Tambah” yang berada pada Designer View, kemudian ketikkan potongan program berikut :

    textBlock1, textBox1, dan textBox2 merupakan nama-nama object yang diinstantiate dari masing –masing class dari komponen tersebut. Agar dapat dijumlahkan, maka kita perlu mengambil isi dari setiap text box yang bertipe string menjadi integer, kemudian di jumlahkan. Setelah itu, lakukan konversi ulang ke string dan oper ke textblock untuk ditampilkan.

     

  7. Setelah itu, jalankan aplikasi ini dalam sebuah emulator Windows Phone, dengan menekan sebuah tanda panah yang berwarna hijau, atau dengan memilih menu Debug -> Start Debugging, atau dengan menekan tombol F5. Pastikan bahwa yang dijalankan adalah Windows Phone Emulator, dengan melihat sebuah dropdown di sisi kanannya. Setelah itu, jalankan aplikasi tersebut dalam emulator yang sudah ada.

     

  8. Sekarang, saatnya anda mencoba…J

2 responses to “Create a Simple Application with WP7

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s