Aplikasi Parsing XML || Windows Phone - 27 Desember 2013

Assallamu'allakum Jumat~
 Juma'ah Mubarokah !
Assalamu'allaikum Visual Advanced Pogramming~

Dan keyword minggu ini adalah “lagu favorit" Lagu kesukaan saaku adalah "Simfoni by Once" ehehehe karena ya suka aja... musik nya tuh dimainin sama orkestra... lagu nya terkesan mewah bgt... dan itu keren ehehehe

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 :

Inilah ceritaku... apa ceritamu ?