Bekerja dengan Data pada Windows Phone

Aplikasi sudah pasti banyak berhubungan dengan data. Tidak terkecuali aplikasi pada Windows Phone. Pada blogpost ini mari kita melihat beberapa aspek terkait data pada aplikasi Windows Phone. Skenario yang paling umum agar smartphone hanya bertindak sebagai presentation layer saja adalah data yang diperlukan tidak  disimpan di dalam phone memory itu sendiri. Artinya, data disimpan disuatu tempat dan dikonsumsi ketika diperlukan. Untuk itu diperlukan suatu mekanisme untuk mengonsumsi data tersebut. Selanjutnya bagaimana data tersebut dapat ditampilkan kepada user.

Sebagai studi kasus kita akan menggunakan data gempa yang digunakan rekan Veri untuk membuat aplikasi bing maps Earthquake Locator dan rekan Billy yang sudah mengimplementasikannya menggunakan kontrol Map di Windows Phone. Hanya saja fokus kali ini lebih ditekankan bagaimana data tersebut dikonsumsi,dan ditampilkan menggunakan fitur Databinding pada Silverlight di Windows Phone.

Untuk keperluan ini, buat lah sebuah project Windows Phone Application, tambahkan sebuah button dan sebuah ListBox dan beri nama agar dapat mudah diakses.

image

Konsumsi Web Service

Untuk mengonsumsi service dari suatu tempat (hosting sendiri, Azure, 3rd party API) ada dua strategi yang dapat digunakan. Jika service tersebut memiliki metadata tertentu (seperti WSDL) maka kita dapat mengenerate client class secara otomatis menggunakan fitur Visual Studio. Jika tidak kita dapat menggunakan kelas yang menunjang networking yaitu WebClient. Penggunaan WebClient membutuhkan tiga bagian yaitu (1) deklarasi kelas, (2) menentukan event handler setelah pemanggilan service dan (3) pemanggilan service itu sendiri secara asinkronus.

   1: private void Button_Click(object sender, RoutedEventArgs e)

   2:         {

   3:             string url = "http://bmg.go.id/dataXML/gempaterkini.xml";

   4:             WebClient feeder = new WebClient();

   5:             feeder.DownloadStringCompleted += new DownloadStringCompletedEventHandler(feeder_DownloadStringCompleted);

   6:             feeder.DownloadStringAsync(new Uri(url));

   7:  

   8:         }

   9:  

  10:         void feeder_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

  11:         {

  12:         }

Kembalian dari pemanggilan service tersebut adalah data dalam format XML. Format lainnya seperti JSON,ATOM, atau raw text pun sebenarnya tidak masalah. Untuk membaca data kembalian ini mari kita gunakan LINQ to XML. Pembahasan secara penuh tentang LINQ dalam Bahasa Indonesia sudah pernah dibahas secara lengkap oleh bung Ronald pada ebook Perjalanan ke Desa LINQ .

Tambahkan referensi terhadap Linq.Xml dan direktif pada kode sumber.

image image

 

Untuk menampung data kembalian tersebut dan future use mari kita buat kelas sederhana, yang terdiri dari beberapa string.

   1: public class EQItem

   2:    {

   3:        public String Date { get; set; }

   4:        public String Time { get; set; }

   5:        public String Magnitude { get; set; }

   6:        public String Depth { get; set; }

   7:        public String Area { get; set; }

   8:  

   9:    }

 

 

Selanjutnya tambahkan pada bagian event handler feeder_DownloadStringCompleted. Untuk contoh ini data yang akan diambil adalah waktu, jam, kedalaman,kekuatan gempa serta tempat kejadiannya. Untuk setiap data gempa dari file XML kita akan membuat suatu EQItem dalam koleksi IEnumerable<XElement> yang akan dikembalikan oleh query Linq. Selanjutnya data tersebut dijadikan ItemSource dari ListBox yang sudah didefinisikan sebelumnya.

   1: void feeder_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

   2:         {

   3:             if (e.Error != null)

   4:                 return;

   5:             XElement xmlBMGfed = XElement.Parse(e.Result);

   6:  

   7:             BMGListBox.ItemsSource = from BMGfeed in xmlBMGfed.Descendants("gempa")

   8:                                      select new EQItem

   9:                                      {

  10:                                          Date = BMGfeed.Element("Tanggal").Value,

  11:                                          Time = BMGfeed.Element("Jam").Value,

  12:                                          Depth = BMGfeed.Element("Kedalaman").Value,

  13:                                          Magnitude = BMGfeed.Element("Magnitude").Value,

  14:                                          Area = BMGfeed.Element("Wilayah").Value

  15:                                      };

  16:          }

 

DataTemplate dan Databinding

DataTemplate dan Databinding adalah dua hal yang sangat berguna dalam data presentation di aplikasi Silverlight. Dan hal ini juga berlaku untuk Silverlight pada Windows Phone. Secara sederhana, DataTemplate berguna untuk mengkustomisasi sebuah item untuk menampilkan sejumlah data. Misalkan, sebuah ListBox yang pada dasarnya dapat menampilkan sejumlah data string dapat kita kustomisasi tampilannya untuk menampilkan data-data gempa tadi dalam lay-out  yang juga dapat kita tentukan. Sementara itu DataBinding adalah sebuah proses untuk menghubungkan UI dengan business logic. Selain dapat mempersingkat penulisan code-behind dan membuat kode lebih bersih, jika dilakukan dengan baik , DataBinding dapat membantu kita untuk melakukan perubahan secara otomatis dari UI ke dalam data dan sebaliknya,konversi tipe data dan sebagainya.

Contoh penggunaan databinding pada kasus ini adalah suatu textblock yang Text nya kita Bind ke properti yang terdapat pada kelas EQItem seperti magnitude,date,depth dan sebagainya. Menggunakan teknik ini, hal yang biasanya kita lakukan dengan setting text pada kode tidak perlu kita lakukan lagi.

<ListBox Name="BMGListBox" Margin="0,0,-12,0"  

        ScrollViewer.VerticalScrollBarVisibility="Auto" 

        Canvas.Left="30" 

        Canvas.Top="94">

        <ListBox.ItemTemplate>

            <DataTemplate>

                <StackPanel Orientation="Vertical" 

                            Margin="0,0,0,17" 

                            Width="432">

                    <TextBlock VerticalAlignment="Center" 

                               Foreground="#FFC8AB14" 

                               Style="{StaticResource PhoneTextSubtleStyle}" 

                               Text="{Binding Area}"></TextBlock>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock MinWidth="200" 

                                   VerticalAlignment="Center" 

                                   Text="{Binding Date}" 

                                    TextWrapping="Wrap" 

                                    Style="{StaticResource PhoneTextLargeStyle}"/>

                        <TextBlock HorizontalAlignment="Right" 

                                   VerticalAlignment="Center" 

                                   Text="{Binding Time}" 

                                   TextWrapping="Wrap" 

                                   Style="{StaticResource PhoneTextLargeStyle}"/>

                      </StackPanel>

                      <StackPanel Orientation="Horizontal">

                          <TextBlock MinWidth="200" 

                                     VerticalAlignment="Center" 

                                     Text="{Binding Magnitude}" 

                                     TextWrapping="Wrap" 

                                     Style="{StaticResource PhoneTextLargeStyle}"/>

                          <TextBlock HorizontalAlignment="Right" 

                                     VerticalAlignment="Center" 

                                     Text="{Binding Depth}" 

                                     TextWrapping="Wrap" 

                                     Style="{StaticResource PhoneTextLargeStyle}"/>

                      </StackPanel>

            </StackPanel>

        </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

 

Tekan F5 untuk melihat aplikasi bekerja. Tekan tombol dan data gempa akan segera ditampilkan ke layar tergantung seberapa cepat koneksi internet yang didapat oleh emulator.

image

Jika menginginkan pengetahuan lebih lanjut mengenai bagaimana bekerja dengan data pada aplikasi Silverlight secara umum (dan juga WPF), MIcrosoft team telah memperkenalkan MVVM pattern yang sangat berguna terutama jika aplikasi bekerja cukup banyak dengan data. Source code lengkap dapat diperoleh disini :

 

http://cid-3543a916eed05fb8.office.live.com/embedicon.aspx/Code/BMGApps.zip