Erick Kurniawan, M.Kom, MCTS, MCPD, MCT http://actual-training.com 1 Hands On Lab Silverlight for WP7 Hands On Lab ini akan menjelaskan penggunaan VS 2010 untuk membuat aplikasi WP7 menggunakan Silverlight. Materi yang akan dibahas pada HOL ini adalah: Project and Solution Debugging Program Orientation Page Pages and Navigation Displaying List Of Data & Data Binding Membuat Aplikasi baru dengan Visual Studio Express for Windows Phone 7 1. Buka Visual Studio 2010 for Windows Phone 7. 2. Pilih File → New Project → Silverlight for Windows Phone → Windows Phone Application. 3. Beri nama SimpleCalculator. 4. Pada Solution Explorer perhatikan file yang digenerate oleh Visual Studio.
19
Embed
Hands On Lab Silverlight for WP7 - STT MANDALA BANDUNG · Erick Kurniawan, M.Kom, MCTS, MCPD, MCT 5 11. Sebelum menjalankan aplikasi anda dapat memilih target deployment dari aplikasi
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
1
Hands On Lab Silverlight for WP7
Hands On Lab ini akan menjelaskan penggunaan VS 2010 untuk membuat aplikasi WP7 menggunakan
Silverlight. Materi yang akan dibahas pada HOL ini adalah:
Project and Solution
Debugging Program
Orientation Page
Pages and Navigation
Displaying List Of Data & Data Binding
Membuat Aplikasi baru dengan Visual Studio Express for Windows Phone 7
1. Buka Visual Studio 2010 for Windows Phone 7.
2. Pilih File → New Project → Silverlight for Windows Phone → Windows Phone Application.
3. Beri nama SimpleCalculator.
4. Pada Solution Explorer perhatikan file yang digenerate oleh Visual Studio.
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
2
Item Deskripsi
App.xaml / App.xaml.cs Mendefinisikan entry point dari aplikasi, inisialisasi resources, dan mendefiniskan style dari user interface.
MainPage.xaml / MainPage.xaml.cs 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 pada start screen
SplashScreenImage.jpg Gambar yang akan dimunculkan ketika aplikasi dijalankan pertama kali.
Properties\AppManifest.xml Manifest file yang dibutuhkan untuk membuat application package.
Properties\AssemblyInfo.cs Mengandung nama dan versi metadata yang di akan ditanamkan pada general assembly.
Properties\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.
5. 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.
6. Pada StackPanel dengan nama ‘TitlePanel’ ubah teks yang akan ditampilkan sebagai title dari
6. Pada Solution Explorer klik kanan pada App.xaml dan pilih View Code.
7. Cari event Application_UnhandledException kemudian tambahkan kode berikut:
// Code to execute on Unhandled Exceptions private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { if (System.Diagnostics.Debugger.IsAttached) { // An unhandled exception has occurred; break into the debugger System.Diagnostics.Debugger.Break(); } e.Handled = true; ErrorPage.ex = e.ExceptionObject; (RootVisual as Microsoft.Phone.Controls.PhoneApplicationFrame).Source = new Uri("/ErrorPage.xaml", UriKind.Relative); }
8. Dengan menuliskan kode diatas maka jika terjadi kesalahan diluar eksepsi yang kita sediakan
maka pesan kesalahan tersebut akan ditampilkan di halaman ErrorPage.xaml.
9. Misal anda dapat menginputkan selain angka kedalam textbox pada aplikasi anda. 10. Tekan Ctrl+F5 untuk menjalankan program tanpa debug.
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
9
Navigating Between Pages
Untuk melakukan navigasi antar halaman anda dapat menggukan class NavigationService .
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
10
1. Buat project Windows Phone Application baru dengan nama ‘NavigatingApp’.
2. Kemudian buat halaman baru, pilih Windows Phone Protrait Page dengan nama ‘Page2.xaml’.
3. Pada ‘MainPage.xaml’ tambahkan kode berikut
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <HyperlinkButton x:Name="hbButton1" Content="Navigate to Page 2"/> </Grid>
4. Pada halaman ‘Page2.xaml’ tambahkan kode berikut :
6. Pada halaman Page2.xaml.cs, tambahkan kode berikut untuk mengambil nilai yang dikirimkan
dari MainPage.xaml.
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { lbText.Text = string.Format("Anda memilih option nomor : {0}", this.NavigationContext.QueryString["ID"]); }
Navigating Between Pages Using Global Application Variable
1. Buat Windows Phone Application dengan nama ‘NavigatingWithGlobalVariableApp’.
2. Pada MainPage.xaml tambahkan kode berikut.
<!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel> <CheckBox x:Name="chkRedColor" Content="I want all red pages" /> <HyperlinkButton Content="Navigate to page2" x:Name="hbToPage2" /> <HyperlinkButton Content="Navigate to page3" x:Name="hbToPage3" /> </StackPanel> </Grid>
3. Tambahkan dua halaman yaitu ‘Page2.xaml’ dan ‘Page3.xaml’
4. Tambahkan property berikut pada App.xaml.cs agar dapat diakses dari halaman yang berbeda.
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
13
public partial class App : Application { /// <summary> /// Provides easy access to the root frame of the Phone Application. /// </summary> /// <returns>The root frame of the Phone Application.</returns> public PhoneApplicationFrame RootFrame { get; private set; } public bool RedPages { get; set; } /// <summary> /// Constructor for the Application object. /// </summary>
5. Klik pada checkbox, kemudian tambahkan kode berikut pada event ‘Checked’.
private void chkRedColor_Checked(object sender, RoutedEventArgs e) { App a = Application.Current as App; a.RedPages = true; ContentPanel.Background = new SolidColorBrush(Colors.Red); }
6. Klik pada checkbox, kemudian tambahkan kode berikut pada event ‘Unchecked’.
private void chkRedColor_Unchecked(object sender, RoutedEventArgs e) { App a = Application.Current as App; a.RedPages = false; ContentPanel.Background = new SolidColorBrush(Colors.Black); }
7. Double click HyperlinkButton ‘hbToPage2’, kemudian tulis kode berikut untuk berpindah ke
8. Double click HyperlinkButton ‘hbToPage3’, kemudian tulis kode berikut untuk berpindah ke
halaman Page3.xaml.
9. Pada event load di Page2.xaml, tambahkan kode berikut untuk mengambil nilai dari global var
dan mengubah warna background.
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
14
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { App a = Application.Current as App; if (a.RedPages) ContentPanel.Background = new SolidColorBrush(Colors.Red); }
10. Sama dengan langkah sebelumnya, tambahkan kode berikut pada Page3.xaml.
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { App a = Application.Current as App; if (a.RedPages) ContentPanel.Background = new SolidColorBrush(Colors.Red); }
Navigating with State
Untuk menyimpan object yang kompleks agar dapat diakses pada halaman yang berbeda, anda dapat
menyimpan di state. Anda dapat menggunakan dictionary state pada object PhoneApplicationServices.
1. Buat Windows Phone Application dengan nama ‘NavigatingWithStateApp’
2. Pada halaman MainPage.xaml tambahkan kode berikut.
5. Pada event Load di halaman MainPage.xaml.cs tambahkan kode berikut untuk mengisi sample
data yang akan ditampilkan di ListBox
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { List<SampleUser> lstUser = new List<SampleUser>(); lstUser.Add(new SampleUser { UserName = "Erick", Message = "A Silverlight application is made up of pages that contain elements", ImageSource = "Images/pic1.png" }); lstUser.Add(new SampleUser { UserName = "Reza", Message = "These have properties that determine where they are, how they appear
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
http://actual-training.com
18
and what they can do in an application", ImageSource = "Images/pic2.png" }); lstUser.Add(new SampleUser { UserName = "Rully", Message = "The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane", ImageSource = "Images/pic1.png" }); lstUser.Add(new SampleUser { UserName = "Firstman", Message = "The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane", ImageSource = "Images/pic2.png" }); lstMessage.ItemsSource = lstUser; }