Pertemuan Keempatbelas Membuat Aplikasi Parsing XML | Windows Phone | 27 Des 2013

Bismillah ...... 
Jum’at , 27 Desember 2013 

Alhamdulillah hari ini masih di berikan kesempatan dan di ingatkan untuk ngeblog,
kali ini  saya mau share materi hasil belajar minggu ini, disini kami belajar bagaimana membuat Aplikasi Parsing XML. 

Oa keyword minggu ini “ Apa lagu favorit kamu??... Nah lagu kesukaan saya  Zivilia judul na Pintu Taubat, alasan pertama saya menyukai lagu ini karena ne lagu favoritnya  mami saya, kalau dah dengerin ne lagu,pasti inget ma aktivitas mami di rumah,,nah klo alasan keduanya karena lirik nya Bagus dan music nya enak di dengar,,,, hehehe 

Hmm kembali lagi kepraktikum minggu ini,,,
Di minggu ini kita akan membuat Aplikasi untuk Menampilkan Biodata dari salah satu girlband korea. Data – data tersebut akan kita di simpan dalam bentuk Xml.

 

Pertama kita buka aplikasi Microsoft Visual Studio 2010 for windows phonenya :

1. Buka aplikasi windows phone – new project – name dan solution name (AplikasiParsingXml)
2. Kemudian Pilih platform Windows Phone 7.1
3. Klik kanan – Add – New Item -  tambahkan folder baru dengan nama ViewModels
4. Klik kanan pda folder ViewModels – tmbah folder baru (Image)masukkan gambar
   
5. Klik kanan pada folder ViewModels – Add – New item - tambah kan class baru denga nama Member.cs

Berikut adalah isi dari class Member. cs

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace AplikasiParsingXml.ViewModels

{

    public class Member

    {

        public string name { get; set; }

        public string birth { get; set; }

        public string picture { get; set; }

        public string place { get; set; }

        public string height { get; set; }

        public string blood { get; set; }

        public string histories { get; set; }

    }

Buka halam MainPage.xaml tambahkan koding berikut ini pada “Control Panel” :

<ListBox x:Name="MainListBox" Margin="0,0,-12,0" SelectionChanged="MainListBox_SelectionChanged">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <Image Height="150" Width="150" Source="{Binding picture}"></Image>

                        <StackPanel Margin="0,0,0,17" Width="332" Height="78">

                            <TextBlock Text="{Binding name}" TextWrapping="Wrap"

                                       Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                            <TextBlock Text="{Binding birth}" TextWrapping="Wrap" Margin="12,-6,12,0"

                                       Style="{StaticResource PhoneTextSubtleStyle}"/>

                        </StackPanel>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

Buka file MainPage.xaml.cs tambahkan beberapa reference untuk kebutuhan parsing xml:

using System;

using System.Collections.Generic;

using System.Diagnostics;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Collections.ObjectModel;

using System.Xml.Linq;

using Microsoft.Phone.Shell;

using AplikasiParsingXml.ViewModels;

namespace AplikasiParsingXml

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        //Selanjutnya buat Method MainPage_Loaded, karena kode diatas memanggil MainPage_Loaded

        private void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            ObservableCollection <Member> Items = new ObservableCollection <Member>();

            //add from xml

            XDocument XDoc = XDocument.Load("data.xml");

            foreach (var member in XDoc.Descendants("member"))

            {

                ItemViewModel item = new ItemViewModel();

                item.name = member.Element("name").Value;

                item.birth = member.Element("birth").Value;

                item.picture = member.Element("picture").Value;

                item.place = member.Element("place").Value;

                item.height = member.Element("height").Value;

                item.blood = member.Element("blood").Value;

             foreach

               (var historyItem in XDoc.Descendants("history"))

                {

                    item.histories += historyItem.Element("item").Value + ", ";

                }

                Items.Add(item);

            }

            MainListBox.ItemsSource = Items;

        }

        //Buat method yang dipanggil ketika item dari LisTBox di pilih

        private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            if (MainListBox.SelectedIndex == -1)

            return;

            PhoneApplicationService.Current.State["Item"] = MainListBox.SelectedItem;

            NavigationService.Navigate(new Uri("/DetailsPage.xaml", UriKind.Relative));

            MainListBox.SelectedIndex = -1;

        }

    }

}

Selanjutnya kita buat halaman detail untuk Member.

 Klik kanan pada project pilih Add -> New Item -> Windows Phone Potrait Page, berinama “DetailsPage.xaml” . Tambahkan koding berikut pada “Control panel”.

<Image Source="{Binding picture}" Width="150" Height="150" HorizontalAlignment="Left"></Image>

            <TextBlock Text="name :"></TextBlock>

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

            <TextBlock Text="birth :"></TextBlock>

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

            <TextBlock Text="place :"></TextBlock>

            <TextBlock Text="{Binding place}" TextWrapping="Wrap"></TextBlock>

            <TextBlock Text="height :"></TextBlock>

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

            <TextBlock Text="blood type:"></TextBlock>

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

            <TextBlock Text="histories :"></TextBlock>

            <TextBlock Text="{Binding histories}" TextWrapping="Wrap"></TextBlock>

Buka file DetailPage.xaml.cs dan tambahkan method berikut :

protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            if

                (PhoneApplicationService.Current.State.ContainsKey("Item"))

            {

                DataContext = PhoneApplicationService.Current.State["Item"];

            }

        }

Nah selanjutnya tambahkan reference System.xml.Linq.  Caranya Klik Kanan pada project Add Reference - System.Xml.Linq. Dan tambahkan file Data.xml pada project yg udah kita buat,Nah di data.xml itu berisi biodata . Klik kanan – New item – XML file (data.xml).

Example :

Sekian dulu praktikum minggu ini, mudah-mudahan bermanfaat ,… :))