Membuat Aplikasi RSS Reader dengan C++ dan XAML

Diterjemahkan dengan pengubahan seperlunya : http://msdn.microsoft.com/en-us/library/windows/apps/hh465045.aspx Membuat Aplikasi RSS Reader dengan C++ dan XAML Sekarang kita akan membuat aplikasi sederhana yaitu RSS Reader. Tutorial ini dibangun dari awal untuk membantu memahami bagaimana cara menggunakan c++ dan xaml dalam pembangunan aplikasi. Kita tidak akan menggunakan template dan bantuan dari designer dan editor. Kita lakukan dengan tangan kosong. Tentu saja anda tidak akan selalu membangun aplikasi dengan cara seperti ini. Jadi saya harap anda bersabar dulu sebelum mulai menggunakan tools sakti yang telah disediakan. Aplikasi RSS reader ini sangat sederhana. Kita hanya akan memiliki satu halaman (page) yang akan melist RSS dari suatu website dan menampilkannya ke browser. C++ Desktop vs MetroStyle Jika anda merupakan programmer c++ untuk aplikasi desktop anda mungkin akan menemukan persamaan dan perbedaan dalam pembangunan aplikasi. Persamaan 

   

Anda tetap menggunakan C++, kita tetap bisa menggunakan STL, CRT dan library yang tersedia, tetapi pastikan bahwa library tersebut memang valid. (baca lebih jelas disini) C++/Cx Tutorial 2: 3rd Party Library Anda tetap bisa membuat UI dengan designer ataupun dengan code (XAML) Kita tetap menggunakan tipe dari Sistem operasi Windows dan tipe/kelas buatan kita sendiri Debuger, Profiler tetap dapat anda nikmati Aplikasi yang kita buat tetap native !! Tidak ada garbage collector, CLR dan segala tetek bengek dari managed world.

Yang baru 



 

Prinsip design dari UI sangat berbeda dengan desktop. Aplikasi MetroStyle mengutamakan content ketimbang border, label, dialog box dsb. Anda perlu memperhatikan masalah design ini dari awal. Kita menggunakan XAML untuk membuat UI. Pemisahan antara UI dan logik dari program lebih teratur di Metro ketimbang di MFC atau Win32. Designer dapat bekerja dengan XAML dan kita dapat bekerja dengan code (c++/cx). Mengenai XAML anda dapat melihat tutorial berikut XAML for C++ Developers Kita menggunakan WinRT yang Object Oriented dan mudah dipahami. Tetapi ada sebagian fungsi dari Win32 yang masih dapat diakses. Kita menggunakan c++/cx untuk mengakses object WinRT. Anda dapat melihat lebih lanjut pada tutorial berikut The amazing C++/CX

  

Aplikasi kita diharapkan menerapkan konsep seperti supspension, charm dan app bar untuk menciptakan user experience yang menyatu dengan Windows 8 Aplikasi kita akan dikompile ke package yang mengandung metadata tentang tipe yang dimiliki oleh aplikasi kita, resource, dan capabilities Aplikasi kita akan diverifikasi sebelum masuk ke windows store

Membuat aplikasi RSS Sederhana Fokus pembuatan aplikasi ini adalah memahami fundamental dari c++ dan XAML dalam pembuatan aplikasi metrostyle. Pada tutorial berikutnya kita akan memanfaatkan bantuan template dan tools seperti Visual Studio Designer dan Expression Blend Pertama kali kita lihat terlebih dahulu bagaimana arsitektur dari aplikasi sederhana ini. Kebanyakan aplikasi yang mengambil data dari internet memiliki arsitektur seperti berikut. Aplikasi RSS ini tidak ada bedanya. Aplikasi RSS kita ini hanya memiliki fungsionalitas untuk mengambil data dari external resource dan menampilkannya pada halaman.

External Data Source XAML

Model

Service Proxy Data Converter

Data Retriever

http

xml, rss, atom, json, odata dsb

Pada bagian ini kita akan menggunakan external data source yang sudah ada yaitu Blog INDC, sehingga kita tidak perlu repot-repot membuat server sendiri. Service Proxy juga tidak perlu kita buat sepenuhnya dari awal tetapi kita tinggal menggunakan kelas yang sudah ada. Mari kita mulai saja petualangan kita. Kita akan membuat project yang baru terlebih dahulu.

Visual Studio akan membuat semua infrastructure dan template yang akan kita gunakan untuk membangun aplikasi ini. Kita luangkan waktu sedikit untuk melihat apa saja yang dibuat oleh Visual Studio tersebut. Agar nanti kita dapat mudah melakukan pengubahan dan tidak mondar-mandir membuang waktu untuk menyelesaikan masalah yang sebenarnya sederhana. Kita akan tampilakn semua file yang ada pada project ini. Aktifkan show all files pada solution explorer kita karena ada beberapa file yang disembunyikan oleh Visual Studio. File tersebut merupakan file yang sebenarnya tidak perlu kita utak atik. Anda dapat melihat file rahasia tersebut pada folder debug.

Pertama kita akan perhatikan file-file mana saja yang dapat kita edit. Nama File

Deskripsi

App.xaml, BlankPage.xaml

Ini adalah file XAML. App.xaml merupakan file yang merepresentasikan object Aplikasi. BlankPage.xaml merupakan tampilan awal dari aplikasi kita. Kita dapat melakukan modifikasi pada XAML dengan menggunakan Visual Studio Designer atau Microsoft Expression Blend. Kita akan banyak memodifikasi BlankPage.xaml

App.xaml.h, App.xaml.cpp BlankPage.xaml.h, BlankPage.xaml.cpp

Seperti biasa pada c++ kita membagi kelas menjadi 2 file yaitu header dan implementasi. Kelas-kelas berikut adalah kelas yang digunakan sebagai codebehind untuk menangani logic terhadap UI yang ada pada BlankPage.xaml dan App.xaml. Kita meletakkan event handler dan logic yang lain yang berhubungan dengan page tersebut pada code behind ini. JIka adan membuat variable pada kelas App maka variable tersebut akan dikenali di seluruh

aplikasi anda. Jika anda membuat variable pada page maka hanya akan dikenali pada page itu saja. App.xaml tidak memiliki user interface tetapi kita tetap dapat menggunakan document outline dan property inspector pada designer Package.appxmanifest

Mengandung metadata yang menjelaskan Aplikasi kita, contohnya nama, deskripsi, logo dan capabities. File ini akan dibuka pada manifest designer.

*.png

Default dari logo dan image splash-screen. Kita akan mengganti dengan file kita sendiri

pch.h, pch.cpp

Precompiled header. Anda dapat menginclude pch.h jika dibutuhkan

File yang tidak kita sentuh File berikut digenerate oleh designer ketika kita melakukan perubahan pada user interface. Beberapa dari file ini memungkinkan kita memisahkan user interface dan code behind. Anda dapat melihat isi dari file tersebut untuk mengetahui bagaimana partial class tersebut bekerja. Untuk penjelasan mengenai partial class baca The amazing C++/CX. Jangan ubah partial class tersebut karena file tersebut akan digenerate ulang oleh designer dan perubahan yang anda buat akan ditimpa. File name

Description

App.xaml.g.h, App.xaml.g.cpp

App.xaml.g.cpp berisi kode program utama dan beberapa code tambahan lain. App.xaml.g.h berisi kode yang membuat sistem operasi dapat meload .xaml ke dalam memory dan membuat graph object. Jangan lakukan modifikasi pada file ini.

StandardStyles.xaml

Berisi template, style dan elemen lain yang sudah dibuat yang mencerminkan Metro Style app. Jangan langsung melakukan modifikasi terhadap file ini. Sebaiknya anda menggunakan style inheritance dengan BasedOn atau duplikasi code tersebut pada page lain, beri nama yang berbeda dan modifikasi nilainya. Baca mengenai style pada tutorial berikut XAML for C++ Developers

LayoutAwarePage.cpp, LayoutAwarePage.h, RichTextColumns.cpp,

Kode infrastruktur untuk menangani navigasi dan layout.

RichTextColumns.h, and so on BlankPage.xaml.g.h, BlankPage.xaml.g.cpp

XamlTypeInfo.g.h

Mengandung partial class yang digunakan untuk BlankPage Jangan modifikasi file ini XAML mengenerate file ini sehingga Windows runtime mengenali dan dapat meload tipe yang didefinisikan pada aplikasi dan merujuknya dari file XAML. Jangan modifikasi file ini.

Coba perhatikan BlankPage.xaml dan lihat code XAML nya pada editor. Anda akan melihat code berikut. Tambahkan attribute nama Grid1 pada Grid tersebut.

Perhatikan bahwa <Page> mengandung . Sekarng kita buka BlankPage.xaml.g.h.

Perhatikan strukturnya sama, kita memliki kelas dengan nama BlankPage yang diturunkan dari System.UI.Xaml.Page yang memiliki variable Grid1 sesuai dengan nama yang kita berikan pada XAML file tersebut untuk Grid.

Setiap tipe elemen yang ada pada XAML mewakili tipe WinRT. Sehingga jika kita menambahkan elemen pada XAML maka Visual Studio akan mengenerate kode c++ sehingga kita dapat merujuk object tersebut dari code behind. Sekarang anda coba perhatikan lagi BlankPage.xaml.g.h. Perhatikan bahwa kelas BlankPage di deklarasikan dengan partial ref class. Keyword partial dan ref bukan merupakan ISO C++. Ini merupakan keyword pada c++/cx. Anda dapat membaca mengenai c++/cx pada artikel berikut. The amazing C++/CX Keyword tersebut digunakan untuk membuat instance dari tipe WinRT. Keyword ref menyatakan bahwa kelas tersebut adalah tipe WinRT sehingga kita tidak perlu membuat code COM yang banyak. Perhatikan bahwa kita melihat variable dengan tipe Object^ dan Grid^. Simbol ^ disebut "hat" yang artinya adalah reference ke object. Jika anda terbiasa dengan menggunakan pointer utk merujuk ke memori yang dialokasikan dinamis, maka disini anda dapat menggunakan ^ untuk merujuk ke tipe WinRT. Anda juga dapat menggunakan keyword auto sehingga compiler menterjemahkan tipenya untuk anda. ref class adalah object COM yang mengimplementasikan interface IInspectable dan siklus hidupnya ditangani oleh smart pointer. Jadi kode ini dipastikan akan dijalankan sebagai native code dan bukan menggunakan virtual machine. c++/cx memungkinkan kita menulis dengan gaya c++ modern ketimbang menggunaakn COM programming yang usang. Gunakan c++/cx jika anda ingin mengakses tipe WinRT. Untuk hal lain yang tidak berhubungan dengan WinRT dapat ditulis dengan menggunakan ISO c++. Kita dapat menggabungkan ISO c++ dengan c++/cx pada satu fungsi. Keduanya akan dikompile menghasilkan native code. Dengan keyword partial kita dapat memisahkan kelas menjadi beberapa potongan. Kesemua file tersebut kemudian akan dicompile menjadi satu seolah-olah berada dalam satu file. Jika anda ingin menambahkan variable atau fungsi pada kelas BlankPage, tambahkan pada BlankPage.xaml.h dan BlankPage.xaml.cpp. Editor akan menambahkan variable dan boiler plate codee pada *.g.h dan *.g.cpp. Jadi anda dapat mengabaikan file dengan ekstensi *.g.*. Nah.. sekarang kita sudah tahu apa yang terjadi dibelakang layar. Anda dapat mendisable Show All files pada Solution Explorer sehingga anda mudah mencari file yang bisa di edit. Capabilities Aplikasi MetroStyle dijamin aman karena dijalankan pada container yang membatasi akses terhadap file system, network, dan hardware. Ketika user melakukan instalasi dari Windows Store, Windows akan mengecek metadata yang terdapat pada Package.appxmanifest untuk mengetahui capability yang dibutuhkan oleh aplikasi ini. Misalnya aplikasi kita membutuhkan akses data dari internet, document library atau mengakses webcam user dan microphone. Ketika aplikasi tersebut akan di install maka pada user akan ditampilkan capability apa saja yang dibutuhkan oleh aplikasi tersebut. User harus menyetujui hal tersebut sebelum aplikasi tersebut dapat mengaksesnya. Jika aplikasi tidak meminta ijin terhadap penggunaan resource maka dia tidak akan diinjikan untuk mengakses pada saat runtime. Kita dapat menambahkan capabilities dengan melakukan double click pada Package.appxmanifest

Maka editor akan dibuka dan silahkan pilih tab capabilities.

Pada bagian ini kita hanya akan menggunakan internet (client) untuk mengambil data rss sehingga kita tidak perlu lagi menambahkan capabilities. File tersebut dapat juga dibuka dengan editor XML. Klik kanan pada file tersebut dan pilih open with

Buka dengan menggunakan XML (Text) Editor

Anda akan menemukan bagian code berikut ini

Anda dapat langsung mengedit file tersebut untuk menambahkan capabilities.

Membuat data model. Saya akan mengingatkan anda kembali pada arsitektur sebelumnya dengan gambar berikut. Kita akan memusatkan pikiran kita pada Model. Model inilah yang berperan sebagai pembungkus terhadap data yang akan ditampilkan pada XAML UI. Data ini akan kita dapat dari blog RSS.

XAML

Model

Service Proxy Data Converter

Data Retriever

Jika anda melihat pada http://geeks.netindonesia.net/blogs/ maka anda akan melihat sumber rss yang ada pada blog tersebut. Rata-rata engine blog modern memiliki RSS feed.

Sebelumnya kita telah mendeklarasikan capabilities untuk mengakses Internet, maka kita sudah dapat membuat code untuk mengambil feed yang ada melalui http. Kita akan menampilkan title, author, date dan content dari setiap postingan yang terakhir. Kita dapat menggunakan kelas dari namespace Windows::Web::Syndication untuk mendownload feeds. Kita dapat langsung menggunakan kelas yang ada untuk menampilkan data di UI, tetapi hal tersebut membuat UI kita menjadi coupling dengan RSS. Kita akan membuat kelas kita sendiri sehingga kita bukan saja hanya menampilkan feed dengan tipe RSS tetapi juga Atom. Berikut ini adalah dua kelas model kita  

FeedData menyimpan informasi mengenai RSS dan Atom FeedItem menyimpan isi terhadap blog post

Kita mendeklarasikan kelas tersebut dengan ref class sehingga dapat dibinding dengan XAML untuk menampilkan Title, Author dsb. Kita menggunakan Bindable attribute untuk binding. Kelas ini hanya berisi data saja sehingga kita cukup membuat properties. Pada FeedData kita menggunakan IVector untuk mengekspos koleksi ke tipe WinRT yang lain. KIta menggunakan Vector sebagai concrete classnya. Karena kelas ini simple maka kita cukup hanya membuatnya pada header file saja tanpa perlu membuat implementation terpisah di cpp. Tambahkan new item dengan klik kanan project

Anda dapat memanfaatkan fitur search untuk mencari template header file. Tinggal ketik header dan enter.

Ketikkan code berikut pada file header tersebut #pragma once #include "pch.h" #include namespace SimpleBlogReader { [Windows::UI::Xaml::Data::Bindable] public ref class FeedItem sealed { public: FeedItem(void){} ~FeedItem(void){} property property property property

Platform::String^ Platform::String^ Platform::String^ Platform::Object^

Title; Author; Content; PubDate;

}; [Windows::UI::Xaml::Data::Bindable] public ref class FeedData sealed { public: FeedData(void) { m_items = ref new Platform::Collections::Vector(); } ~FeedData(void){} property Platform::String^ Title; property Windows::Foundation::Collections::IVector^ Items { Windows::Foundation::Collections::IVector^ get() {return m_items; } } private: Platform::Collections::Vector^ m_items; }; }

Usahakan anda familiar dengan c++/cx dengan mengetikkan code diatas. Perhatikan bahwa kita melakukan include terhadap collection.h karena kita menggunakan Platform::Collections::Vector Sekarng kita telah selesai dengan pekerjaan awal kita yaitu membuat model. Kita akan melanjutkan dengan mengambil data RSS dari blog yang ada.

XAML

Model

Service Proxy Data Converter

Data Retriever

Kita akan masuk pada bagian Service Proxy. Service Proxy ini bertujuan untuk mengambil data dari resource dan mengembalikan model yang akan dibinding ke XAML. Pada Service Proxy kita memiliki Data Retriever untuk mengambil data. Bisa saja kita mengambli data dari file, http, socket dsb. Data yang diambil kemungkinan memiliki format data xml, json atau odata. Data tersebut harus kita ubah dengan Data Converter ke dalam bentuk model. Beruntungnya untuk RSS feed, kita tidak perlu repot-repot lagi membuat Data Retriever karena kita tinggal menggunakan kelas Windows::Web::Syndication::SyndicationClient untuk mengambil dan melakukan parsing terhadap RSS dan Atom feeds. Kita hanya tinggal melakukan convert dari data RSS ke Model saja. Jadi kita hanya perlu membuat satu fungsi saja untuk melakukan konversi dari RSS / Atom ke Data Model. Kita akan membuat fungsi GetFeedData untuk operasi tersebut. Salah satu yang perlu diperhatikan dalam penggunaan SyndicationClient adalah penggunaan method asyncrhonous. Karena kita akan mengambil data dari internet dan kita tidak mau operasi tersebut membuat UI menjadi tidak responsive pada saat data didownload dari internet. Untuk mempelajari mengenai Asyncrhonous dengan WinRT anda dapat melihat tutorial berikut.

Fast and fluid with WinRT Async in C++ Tambahkan code berikut pada BlankPage.xaml.h #include "FeedData.h"

... // In the BlankPage class... private: void GetFeedData(Platform::String^ feedUriString); FeedData^ feedData;

Kita akan menggunakan GetFeedData untuk mengambil data dan mengubahnya ke feedData. FeedData tersebut akan di cache di kelas tersebut. Pada BlankPage.xaml.cpp tambahkan header berikut #include

dan tambahkan statement using berikut using namespace Windows::Web::Syndication; using namespace Concurrency;

Dengan demikian kita dapat menggunakan PPL untuk operasi asyncrhonous dan SyndicationClient. Kemudian tambahakn code berikut di konstruktor BlankPage sesudah InitializeComponent() feedData = ref new FeedData();

Kita tadi sudah melakukan deklarasi terhadap method GetFeedData, skarng saatnya kita mengimplementasinkannya pada BlankPage.xaml.cpp. Buat implementasi seperti berikut void BlankPage::GetFeedData(Platform::String^ feedUriString) { SyndicationClient^ client = ref new SyndicationClient(); Uri^ feedUri = ref new Uri(feedUriString); auto feedOp = client->RetrieveFeedAsync(feedUri); feedOp = client->RetrieveFeedAsync(feedUri); task<SyndicationFeed^> createFeedTask(feedOp); createFeedTask.then([this] (SyndicationFeed^ feed) -> SyndicationFeed^ { feedData->Title = feed ->Title->ToString(); auto feedItems = feed->Items; for(int i = 0; i < (int)feedItems->Size; i++) { auto item = feedItems->GetAt(i); FeedItem^ feedItem = ref new FeedItem(); feedItem->Title = item->Title->Text; feedItem->PubDate = ref new Platform::Box<Windows::Foundation::DateTime>(item->PublishedDate); feedItem->Author = item->Authors->GetAt(0)->Name; if (feed->SourceFormat == SyndicationFormat::Atom10) { feedItem->Content = item->Content->Text; } else if (feed->SourceFormat == SyndicationFormat::Rss20) { feedItem->Content = item->Summary->Text; } feedData->Items->Append((Object^)feedItem); } this->DataContext = feedData; return feed; }).then ([] (task<SyndicationFeed^> t) { try { auto f = t.get(); } catch (std::exception e) { //Handle exception } }); }

Perhatikan bahwa kita memanggil this->DataContext = feedData; setelah kita selesai mengisi object feedData dengan feed tersebut. Kita harus membuat feedData menjadi DataContext dari halaman tersebut sehingga kita dapat melakukan binding UI ke data tersebut. Dengan FeedData sebagai data context kita dapat menuliskan {Binding Path="Title"} pada XAML dan ketika XAML di load dan object dibentuk maka loader akan mengetahui bahwa Title yang dimaksud oleh ekspresi tersebut adalah property Title dari instance FeedData. Kita akan memanggil operasi tersebut pada event Loaded pada Page. Buka BlankPage.xaml. Pilih page pada document outline

Pada property dari page tersebut pilih event Loaded dan ketikkan PageLoadHandler. Tekan Enter. Maka method akan digenerate untuk event tersebut.

Pindah ke BlankPage.xaml.cpp dan isi implementasi method handler tersebut. void SimpleBlogReader::BlankPage::PageLoadHandler(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e) { GetFeedData("http://geeks.netindonesia.net/blogs/MainFeed.aspx");

}

User interface dengan XAML Sekarang kita akan membuat user interface dengan menggunakan XAML.

XAML

Model

Service Proxy Data Converter

Data Retriever

Cara yang paling efisien untuk membuat UI adalah dengan menggunakan template yang disediakan Visual Studio dan kemudian menggunakan Visual Studio Designer atau Expression Blend untuk mengeditnya. Tapi pada tutorial ini kita akan mempelajari struktur XAML sehingga kita akan bekerja dengan menggunakan XAML editor Aplikasi MetroStyle biasanya terdiri dari beberapa pages (halaman) dan memiliki layout yang berbeda. Contohnya untuk aplikasi blog reader kita memiliki halaman untuk browsing listing postingan, dan halaman yang lain untuk membaca detail dari postingan tersebut. Setiap page terdiri dari XAML tree yang terpisah dan codenya sendiri. Root dari elemen di page adlah <Page>. Tipe ini merupakan tipe WinRT yaitu Windows::UI::Xaml::Controls::Page. Kelas Page memiliki fitur untuk melakukan navigasi antar halaman dalam aplikasi. Di dalam page kita memiliki panel atau layout. Pada layout tersebut kitxtza dapat meletakkan content seperti TextBlock dan ListView untuk menampilkan text atau grafik dsb. Layout pada XAML terdiri atas absolute dan dinamis. Pada layout yang absolut kita langsung menentukan titik x dan y untuk posisi dari control tersebut. Pada layout yang dinamis kita menyerahkan nya pada container yang akan mengatur ukuran dan posisi jika aplikasi diperbesar atau diperkecil. Gunakan Canvas untuk layout absolute dan gunakan Grid, StackPanel dan yang lainnya untuk penempatan dinamis. Kita biasanya akan menggunakan keduanya dan melakukan komposisi satu panel di dalam panel yang lain. Untuk layout dari RSS reader kita ini kita akan membuat sederhana saja. KIta akan memiliki judul pada bagian atas, dan list dari post pada bagian kiri sedangkan isi dari content post yang dipilih ada disebelah kanan. Begini kira-kira ilustrasinya

Coba perhatikan BlankPage.xaml. File ini terdiri dari Page yang memiliki Grid sebagai contentnya. Berikut code XAMLnya.

Perhatikan elemen x:Class pada Page memiliki asosiasi dengan kelas BlankPage yang dideklarasikan pada BlankPage.xaml.g.h dan BlankPage.xaml.h. Ingat bahwa kita menambahkan feedData sebagai anggota variable kelas BlankPage. Kita menggunakan xmlns:local agar XAML page dapat mengenali kelas FeedData dan FeedItem yang akan kita binding ke XAML ini. Kita sudah menamai Grid utama kita dengan Grid1. Kita akan bagi dua Grid tersebut. Baris pertama akan berisi judul feed.

Judul Feed Grid2

Baris kedua akan kita isi dengan Grid lain yang kita beri nama Grid2. Grid2 akan kita bagi menjadi dua kolom. Kolom kanan akan berisi ListView yang menampilkan title, author dan date dari semua post yang tersedia. Kolom kiri terdiri dari ListView.

ListView

Judul feed Grid3

User dapat melakukan scrolling terhadap list tersebut dan memilihnya. Kolom kanan akan terdiri dari Grid, Grid3 akan berisi TextBlock pada bagian atas dan WebView pada bagian bawahnya. Text Block akan menampilkan judul dari blog post dan WebView akan menampilkan contentnya. Judul Feed ListView

Judul Post WebView

Begini kira-kira gambaran mengenai XAML yang akan kita buat sesuai dengan penjelasan yang tadi.

Mari kita mulai pembuatan user interfacenya.

Kita pertama kali akan membagi dua Grid1 dengan meletakkan code ini didalam Grid1.

Kita membuat tinggi dari baris (baris 0) untuk title 140 dan sisanya untuk baris ke 1 (index baris dimulai dari 0). Setelah definisi dari baris tersebut kita akan menambahkan TextBlock yang akan kita letakkan pada baris-0.

Karena kita tidak menentukan posisi dari kolom dan baris untuk kolom tersebut maka secara default akan diletakkan pada baris 0 dan kolom 0. Setelah TextBlock tersebut kita akan menambahkan Grid2. Letakkan tepat setelah TextBlock dan masih di dalam Grid1. Kita membaginya menjadi 2 kolom.

Perhatikan kita meletakkan Grid2 dua tersebut pada baris-1 dengan code Grid.Row = 1. Kita memasukkan Grid2 tersebut ke dalam Grid1. Perhatikan cara untuk membagi colom tersebut dengan 2* dan 3*. Artinya kita membagi ukuran kedua kolom tersebut menjadi 2:3. Setelah definisi kolom tersebut tambahakan ListView pada kolom 0 dan baris 0. Untuk sekarang kita biarkan saja kosong terlebih dahulu. Setelah code ListView tersebut kita tambahakn Grid3 yang memiliki 2 baris. Kita letakkan pada kolom kanan dari Grid2.

Perhatikan bahwa kita menggunakan Height="Auto", artinya tinggi dari baris tersebut akan menyesuaikan dengan contentnya. Baris kedua akan menggunakan sisanya.

Tambahkan TextBlock untuk menampilkan judul dari blog post tersebut.

Setelah TextBlock tersebut kita akan menambahkan WebView pada baris-1. Kita menggunakan WebView karena kita akan menampilkan content dalam format HTML. <WebView x:Name="ContentView" Grid.Row="1" Margin="0,5,20,20"/>

Setelah kita menjalani semua langkah diatas maka kode XAML kita akan terlihat sebagai berikut.

Anda akan melihat designer anda seperti berikut.

Anda dapat mencoba untuk menjalankannya dengan menekan F5. Setelah anda puas dengan hasilnya anda dapat menutupnya dengan ALT+F4. Anda dapat menghentikan debug dengan SHIFT+F5. Melakukan Format terhadap FeedItem Sekarng kita akan menghubungkan data model dengan UI XAML kita.

XAML

Model

Service Proxy Data Converter

Data Retriever

Sekarang yang kita lakukan adalah menampilkan item pada ListView. Kita telah memiliki definisi kelas model FeedItem yang terdapat pada FeedData.h. Kita juga telah melakukan inisialisasi dengan method GetFeedData dan mengisi collection FeedData::Items. Sekarang kita akan menampilkan title, author dan tanggal posting untuk setiap postingan pada feed tersebut. User dapat melakukan scroll dan memilih postingan yang dirasa menarik. Jika user memilih sebuah item, maka TextBlock yang berada di sebelah kanan akan menampilkan judul dari postingan dengan font yang besar dan WebView akan menampilkan contentnya. Format ListView yang kita inginkan adalah sebagai berikut

Untuk menggabungkan 3 nilai property dari FeedItem sebagai item dari list maka kita menggunakan Data Template. Data Template mengatur tampilan dari data. Kita dapat menggunakannya untuk menggabungkan informasi text, grafik, animasi, dan fitur XAML yang lain. Kita hanya menampilkan text pada tutorial ini. Kita hanya membutuhkan TextBlock untuk menampilkan setiap nilai dari property. Untuk menyusun TextBlock tersebut kita menggunakan StackPanel. Langkah-langkahnya adalah sebagai berikut Modifikasi ListView yang telah kita buat sebelumnya dengan menambakan ItemTemplate yang mengandung elemen DataTemplate sebagai berikut. Perhatikan bahwa DataTemplate selalu berada di dalam ItemTemplate. ListView akan menerapkan template tersebut untuk setiap item yang ada pada collection.

Dalam data template tersebut kita akan menambahkan StackPanel yang berisi 3 TextBlock. Masingmasing TextBlock akan menampilkan property dari FeedItem. Secara default maka StackPanel akan menyusun TextBlock tersebut secara vertical. Untuk sementara kita belum mengisi TextBlock dengan data sebenarnya dengan menggunakan binding. <StackPanel>

Sekarang yang kita lakukan adalah menghubungkan model yang berisi feed tersebut ke dalam ListView kita. Kita menamakannya dengan Data Binding. Binding expressions

Kita menggunakan {Binding } untuk mengisi nilai yang terletak pada property object ke dalam propery control yang sesuai. Untuk TextBlock property yang digunakan untuk menampilkan data adalah Text. Contohnya adalah sebagai berikut Text="{Binding Path=Title}". Title ini merupakan property yang terdapat pada DataContext. Data Context kita berisi FeedData. Anda masih ingat kan bahwa kita meletakkan code berikut ini pada constructor BlankPage ? this->DataContext = feedData; Kode diatas menyebabkan TextBlock melakukan binding terhadap Title yang berasal dari feedData. dengan melakukan setting data context seperti diatas maka object feedData menjadi data context untuk semua elemen pada page tersebut. Kita dapat mengubahnya pada setiap elemen jika diperlukan. Ubah property Text pada TitleText menjadi seperti berikut ini.

Untuk menghubungkan ListView ke data source kita perlu menambahkan kode ItemsSource="{Binding Path=Items}" pada ItemListView. Isi listview kita akan mengandung collection dari Items yang terdapat pada feedData. Sehingga tag pembuka ListView akan terlihat seperti berikut Setelah kita melakukan binding terhadap ListView maka kita akan melakukan binding terhadap item pada collection tersebut. Hasil akhirnya adalah sebagai berikut.

Sementara ini kita akan mengabaikan Publication Date karena kita membutuhkan converter untuk menampilkan DateTime. Perhatikan bahwa kita menambahkan FeedItem^ ke dalam koleksi yang bertipe Platform::Object^. Tidak ada informasi mengenai FeedItem dan property seperti Title, Author, PubDate. Data Binding menggunakan metadata untuk mengambil nilai property tersebut sehingga jika anda salah ketik pada ekspresi binding tersebut maka tidak akan terjadi error dan hanya menampilkan TextBlock kosong. Anda perlu berhati-hati dalam mengetikkan property yang akan dibinding.

Sekarang TextBlock yang tersisa adalah judul untuk blog post yang berada di atas WebView. Kita ingin TextBlock ini menampilkan judul yang dipilih user pada ListView. Jika kita menggunakan binding yang sama dengan TitleText maka kita akan menampilkan string yang sama, karena keduanya memiliki property dan data context yang sama. Kita perlu mengubah data context untuk Grid yang mengandung TextBlock tersebut. Kita juga dapat melakukan binding ke elemn XAML yang lain, kita menggunakan atribut ElementName untuk menentukan elemen mana yang akan kita binding Berikut adalah code yang dihasilkan

Apabila anda tidak sabar lagi ingin menjalankannya, anda bisa menekan F5 untuk melihat hasilnya. Hasilnya kira-kira seperti berikut ini.

Kita tidak melihat nama author ditampilkan karena kita menggunakan RSS sehingga tidak memiliki informasi tersebut. Format data dengan value converter Kita sekarang akan melakukan binding terhadap property PubDate yang memiliki tipe DateTime. Jika kita melakukan binding secara langsung maka kita akan mendapatkan hasil seperti berikut.

Kita harus mengubah DateTime tersebut ke Platform::String^ sesuai dengan format yang kita inginkan. Kita dapat menggunakan ValueConverter untuk mengubahnya. caranya adalah dengan membuat kelas yang diturunkan dari interface IValueConverter dan mengimplementasikan method Convert dan ConvertBack. Konverter mengubah data dari satu tipe ke tipe lain. Kita akan mengubah tanggal tersebut ke format hari-bulan-tahun. Tambahkan DataConverter.h ke dalam project anda

Ketik code berikut ini pada file DateConverter.h ee

Include DateConverter.h pada BlankPage.xaml.h. #include "DateConverter.h"

Kita membutuhkannya karena kita akan menggunakannya pada XAML code. Pada BlankPage.xaml tambahkan object DateConverter tersebut sebagai resource. Letakkan code berikut pada Page.Resources.

Kita akan menggunakannya ketika melakukan binding pada PubDate.

Anda dapat menjalankannya untuk melihat perubahan pada tanggal yang telah di format tersebut. Silahkan tekan F5

Anda telah melihat bahwa format tanggal sudah ditampilkan dengan benar. Menampilakan Content pada WebView Untuk menunjukkan isi postingan pada aplikasi kita maka kita memanfaatkan WebView. WebView digunakan untuk menampilkan data HTML pada aplikasi kita. Property Source dari WebView memerlukan URI untuk menampilkan content halaman. Kita disini hanya memiliki data HTML dalam bentuk string. KIta tidak memiliki URI yang dapat kita binding ke Source. Kita disini menggunakan method NavigateToString yang digunakan untuk menerima data HTML kita. Kita meletakkan code tersebut pada event SelectionChanged pada ListView

Buat terlebih dahulu event handler pada LIstView sebagai berikut

Ketikkan nama event pada SelectionChanged dan Navigate to Event untuk membuat otomatis handlerya

Anda akan dibawa menuju event handler. Isi event handler tersebut sehingga menjadi seperti berikut ini.

Selamat !! Anda telah memiliki satu aplikasi sederhana dengan satu halaman. Tekan F5 untuk melihat hasilnya.

Anda dapat mengakses source code dari tutorial ini disini https://skydrive.live.com/?cid=049EF90C335FB7D3&id=49EF90C335FB7D3%21136