Windows Phone 7 versi RTM sudah dirilis untuk ikut meramaikan pasar persaingan mobile phone yang saat ini didominasi oleh IPhone dan Android. Untuk para developer yang tertarik untuk mencoba mengembangkan aplikasi pada platform yang baru ini dapat mendownload developer tools versi RTM pada alamat : http://developer.windowsphone.com/.

Pada versi beta sebelumnya pembuatan aplikasi dengan Windows Phone hanya dapat menggunakan bahasa C# saja, namun pada tanggal 23 sept 2010 MS telah merilis versi VB dari Windows Phone 7 (Microsoft Visual Basic CTP for Windows Phone Developer Tools) ini merupakan berita yang sangat menggembirakan bagi VB developer yang sempat merasa frustasi dan dianak tirikan karena ada rumor yang mengatakan bahwa WP7 tidak mendukung bahasa VB. Ini juga merupakan bukti dari janji MS untuk menjadikan VB dan C# equal (co-evolution strategy). Anda dapat mendownload VB CTP for Windows Phone Developer tools di sini.

Pada tutorial berseri ini saya akan mencoba membuat beberapa contoh aplikasi WP7 menggunakan VB (kecuali XNA, karena saat ini VB belum mendukung aplikasi XNA di WP7). Tutorial kali ini berupa Hands On Labs yang dapat langsung dicoba untuk dibuat . 

Topik yang akan dibahas pada tutorial kali ini adalah :

• Hello Windows Phone 7.
• Aplikasi Silverlight dengan WP7.
• REST Services dengan WP7.
• WCF RIA Services dengan WP7.

Hello Windows Phone 7

Untuk membuat aplikasi menggunakan WP7 anda dapat mendownload Visual Studio Express for Windows Phone atau jika anda sudah memiliki VS 2010 Ultimate anda dapat menginstal developer tools. Anda dapat menjalankan aplikasi yang anda buat pada device emulator yang sudah disediakan. Pada tutorial dibawah ini saya menggunakan VS 2010 Ultimate.

Pada WP7 anda dapat membuat 2 macam aplikasi dengan platform yang berbeda yaitu Silverlight dan XNA. Silverlight digunakan untuk membuat kebanyakan aplikasi pada WP7 sedangkan XNA hanya dikhususkan untuk pembuatan aplikasi game.

Lab 1 (Membuat Aplikasi di WP7)

• Buka Visual Studio 2010, anda dapat memilih VB atau C# (misal pada contoh dibawah ini saya memilih bahasa VB).
• Pilih File – New Project – Silverlight for Windows Phone – Windows Phone Application – beri nama HelloWP7.

• Pada solution explorer perhatikan file yang digenerate oleh Visual Studio.

• Penjelasan dari file-file tersebut adalah:

• Secara default halaman yang akan dijalankan pertama kali adalah MainPage.xaml.
• Double-click pada halaman MainPage.xaml pada Solution Explorer. Secara default anda dapat melihat tampilan design Windows Phone disisi kiri. Anda dapat menambahkan elemen baru seperti tombol, textbox dengan cara drag n drop kedalam tampilan design atau anda juga dapat menambahkan manual dengan mengetikan kode XAML.

• Pada tampilan XAML cari Grid container dengan nama LayoutRoot. Jika anda pernah belajar layout menggunakan bahasa XAML di Silverlight atau WPF anda pasti familiar dengan kode berikut :
<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>

• Pada tag TitleGrid yang ada didalam LayoutRoot ubah teks yang akan ditampilkan sebagai title dan judul halaman dari aplikasi yang anda buat:
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Hello WP7" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

• Dibawah ContentGrid tambahkan sebuah Grid lagi untuk menampilkan textblock yang akan berisi teks yang akan anda inputkan pada textbox diatas.

• Pada tampilan design, double-click pada button btnClick untuk menambahkan event handler. Maka otomatis Visual Studio akan menambahkan deklarasi event tersebut pada tag button.

• Tulis kode berikut untuk menambahkan kode pada event click.
  Private Sub btnClick_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
      tbMessage.Text = txtMessage.Text
      txtMessage.Text = String.Empty
  End Sub

• Sebelum menjalankan aplikasi anda dapat memilih target deployment dari aplikasi anda. Ada dua pilihan yaitu Windows Phone Emulator atau Windows Phone Device.

• Jalankan aplikasi anda dengan menekan tombol F5. Maka Visual Studio akan memanggil Emulator menjalankan aplikasi anda.

• Untuk menggunakan pc keyboard pada emulator anda dapat menekan tombol Pause/Break.
• Jika anda ingin melakukan modifikasi aplikasi anda pada Visual Studio, anda tidak perlu untuk menutup emulator. Cukup modifikasi kemudian klik F5 lagi untuk mendeploy aplikasi yang baru.

Lab 2 (Menambahkan Halaman Error pada Aplikasi WP7)

Untuk menangkap error yang terjadi dan menampilkan error tersebut di halaman error anda dapat menambahkan kode berikut pada aplikasi anda.

• Buka Project HelloWP 7 yang sudah anda buat sebelumnya.
• Klik kanan pada project HelloWP7 → Add → New Item → pilih template Windows Phone Potrait Page beri nama ErrorPage.xaml

• Tambahkan kode pada ErrorPage.xaml berikut
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!–TitlePanel contains the name of the application and page title–>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="tbTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="tbErrorTitle" Text="Error Page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    <!–ContentPanel – place additional content here–>
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Border BorderBrush="White">
            <TextBlock x:Name="tbError" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}"/>
        </Border>
    </Grid>
</Grid>

• Tekan F7 untuk membuka tampilan View Code, kemudian tambahkan kode berikut untuk menampilkan error:

• Pada Solution Explorer klik kanan pada App.xaml dan pilih View Code.
• Cari event Application_UnhandledException kemudian tambahkan kode berikut:
Public Sub Application_UnhandledException(ByVal sender As Object, ByVal e As ApplicationUnhandledExceptionEventArgs) Handles Me.UnhandledException

    ' Show graphics profiling information while debugging.
    If Diagnostics.Debugger.IsAttached Then
        Diagnostics.Debugger.Break()
    Else
        e.Handled = True
        ErrorPage.Exception = e.ExceptionObject
        CType(RootVisual, PhoneApplicationFrame).Source = New Uri("/ErrorPage.xaml", UriKind.Relative)
    End If
End Sub

• Dengan menuliskan kode diatas maka jika terjadi kesalahan diluar eksepsi yang kita sediakan maka pesan kesalahan tersebut akan ditampilkan di halaman ErrorPage.xaml.
• Tambahkan kode berikut pada event ButtonClick_Click di MainPage.xaml.
Private Sub btnClick_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    tbMessage.Text = txtMessage.Text
    'txtMessage.Text = String.Empty

    'kode yang menghasilkan pesan error
    Dim bil = 10 / CDbl(txtMessage.Text)
    tbMessage.Text = "Hasil : " & bil.ToString
End Sub

• Tekan Ctrl+F5 untuk menjalankan program tanpa proses debugging. Kemudian masukan nilai string kedalam textbox agar terjadi kesalahan akibat FormatException. Maka pesan kesalahan tersebut akan ditampilkan kedalam halaman ErrorPage.xaml.

Selamat mencoba, happy coding guys !

bersambung ke part 2….