Assalamu’alaikum
..
Selamat datang di pertemuan
ke 14, Aplikasi Parsing XML ..
Keyword kali ini adalah apa
lagu favorit kamuu ??
Karena belakangan ini aku
sering dengar nasyid, jadi salah satu nasyid favorit aku itu Hijjaz – Kasih Kekasih.
Yes, that’s my answer~
Ini adalah materi terakhir
yang di berikan dosen untuk melengkapi
pertemuan yang ke 14 sebelum UAS. Kali ini saya akan membahas tutorial
mengenai “Aplikasi Parsing XML”. Untuk mempersingkat waktu, kita
langsung saja pada project.
Create Aplikasi dengan
template Window Phone App dan beri nama “GirlsGeneration”.
Pada kesempatan ini kita
akan membuat aplikasi untuk menampilkan biodata dari salah group musik.
Data-data tersebut di simpan dalam bentuk xml.
Klik kanan project node
dalam Solution Explorer dan buat folder baru bernama ViewModels. Add -> New
Item -> New Folder
Klik kanan folder ViewModels
dan buat kelas baru bernama Member.cs. Add -> New Item -> Class. File ini
menyimpan kode yang merepresentasikan objek member group musik. Isi file dari
file tersebut adalah sebagai berikut.
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 halaman
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 dan tambahkan beberapa
reference untuk kebutuhan parsing xml, sehingga tampilanya seperti ini .
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;
Pada method MainPage() tambahkan beberapa kode,
sehingga menjadi seperti ini :
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
Karena method tersebut memanggil methodMainPage_Loadedpada RoutedEventHandlernya, maka
kita harus membuat method 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;
}
Kemudian kita harus membuat 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;
}
}
}
Sekarang kita akan membuat halaman detail untuk member
group musik tersebut. Klik kanan pada node project pilih Add -> New Item
-> Windows Phone Potrait Page, beri nama “DetailsPage.xaml”
<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"];
}
}
Copy folder Image dan file data.xml pada root project
anda.
Tambahkan reference System.xml.Linq. Klik Kanan pada node
project Add Reference ->System.Xml.Linq-> OK.
Dibawah ini adalah tampilan aplikasi nya :
Cukup
sekian laporan postingan pertemuan kali ini ..
Semoga
postingan ini bermanfaat dan semoga berhasil~
Terima
kasih~
Wassalamu’alaikum
wr.wb
0 komentar:
Posting Komentar