Windows Phone 7 Tutorial (VB) Part 1

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.

image

  • Pada solution explorer perhatikan file yang digenerate oleh Visual Studio.
    image
  • Penjelasan dari file-file tersebut adalah:

Item

Deskripsi

App.xaml / App.xaml.vb

Mendefinisikan entry point dari aplikasi, inisialisasi resources, dan mendefiniskan style dari user interface.

MainPage.xaml / MainPage.xaml.vb

Halaman utama yang berisi desain aplikasi.

ApplicationIcon.png

Icon untuk program yang anda buat yang akan ditampilkan pada application list.

Background.png

Icon yang ditampilkan di awal pada saat program dijalankan pertama kali.

MyProject\AppManifest.xml

Manifest file yang dibutuhkan untuk menggenerate application package.

MyProject\AssemblyInfo.vb

Mengandung nama dan versi metadata yang di embed pada general assembly.

MyProject\WMAppManifest.xml

Manifest file yang mengandung metadata spesifik yang berhubungan dengan Windows Phone Silverlight application, termasuk fitur spesifik yang hanya ada di Silverlight untuk Windows Phone

References folder

Berisi list library (assembly) yang menyediakan services dan functionality yang dibutuhkan untuk menjalankan aplikasi.

    • 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.

image

    • 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.
<Grid x:Name="ContentGrid" Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Name="txtMessage" Margin="20,20,10,20" />
    <Button Grid.Column="1" Name="btnClick" Content="Click Me" HorizontalAlignment="Right" Margin="10,20,20,20" Padding="4" Click="btnClick_Click" />
</Grid>

<Grid Grid.Row="2">
    <TextBlock Name="tbMessage" Style="{StaticResource PhoneTextNormalStyle}"
               Foreground="Orange" HorizontalAlignment="Stretch" TextWrapping="Wrap"
               TextAlignment="Center" FontWeight="Bold" />
</Grid>

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

image

  • 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.

image

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

image

    • 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 → AddNew Item → pilih template Windows Phone Potrait Page beri nama ErrorPage.xaml

image

    • 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:
Partial Public Class ErrorPage
    Inherits PhoneApplicationPage

    Public Shared Exception As Exception

    Public Sub New()
        InitializeComponent()
    End Sub

    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)
        tbError.Text = Exception.ToString
    End Sub
End Class

    • 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.

image

Selamat mencoba, happy coding guys !

bersambung ke part 2….

One Response to Windows Phone 7 Tutorial (VB) Part 1

  1. thanks for inform….
    jln2 ke webku bos…:D

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: