Data Binding pada Windows 8 Apps

Perancangan dan perencanaan sumber data adalah proses yang sangat penting dalam proses pengembangan Aplikasi. Dalam proses Development Windows 8 Apps terdapat konsep Data Binding untuk pengolahan Data. Pemahaman terhadap konsep Data Binding akan membantu Developer untuk mengembangkan Aplikasi.

Data Manipulation

Bagaimana konsep dan implementasi dari Data Binding pada Windows 8 Apps? Berikut dalam posting ini akan dijelaskan. 

Proses Data Binding adalah sebuah konsep yang terdapat dalam WinRT dalam pengolahan Data. Dalam konsep Data Binding terdapat Binding Source dan Binding Target. Gambar di bawah merepresentasikan konsep Data Binding

Konsep Data Binding

Dari gambar di atas dapat diamati Data Binding adalah sebuah jembatan. Data Binding menjembatani komunikasi antara Binding Target dengan Binding Source. Proses Data Binding dibutuhkan 4 komponen,yaitu :

1. Sebuah Target Binding, target Binding adalah komponen UI yang menjadi target untuk menampilkan Data.
2. Properti Target, yaitu properti dari Target Binding yang menjadi tempat dari Data,berupa Properti komponen UI
3. Path, yaitu nilai yang ingin di tampilkan pada Target Binding, berupa member-member dari sebuah Objek
4. Sumber Data, yaitu letak dari nilai yang ingin ditampilkan, berupa Objek

Implementasi Data Binding

Untuk lebih memahami konsep Data Binding, akan dijelaskan proses Data Binding yang melibatkan file SampleDataSource.cs. File SampleDataSource.cs otomatis terbentuk saat kita memulai project Windows 8 Apps. Dalam file tersebut terdapat kumpulan member-member yang menjadi Path dari proses Data Binding. Kita dapat mengkostumasi data-data yang akan dilewatkan pada member-member tersebut, sesusai data yang diinginkan. Berikut penjelasannya :

1. Buka file SampleDataSource.cs, terletak di folder DataModel. SampleDataSource.cs memiliki member-member yang dihasilkan secara default saat kita memilih project Template. Member-member tersebut digunakan untuk menampilkan konten pada project Template

2. Berikut potongan sintak pada file SampleDataSource.cs

 public SampleDataGroup(String uniqueId, String title, String subtitle, String imagePath, String description)

            : base(uniqueId, title, subtitle, imagePath, description)

        {

            Items.CollectionChanged += ItemsCollectionChanged;

        }

Sintak di atas berfungsi sebagai binding source pada halaman GroupDetailPage.xaml. Dari sintak tersebut diketahui SampleDataGroup membutuhkan 5 parameter. Ke lima parameter tersebut yang akan ditampilkan pada tiap tiap binding target pada GroupDetailPage.xaml.

Selanjutnya perhatikan potongan sintak member SampleDataItem berikut:

  public SampleDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group)

            : base(uniqueId, title, subtitle, imagePath, description)

        {  this._content = content;

            this._group = group;       }

Pada potongan kode di atas dapat diketahui ada 7 parameter yang akan dilewatkan pada member SampleDataItem. Ke tujuh parameter tersebut nantinya akan menjadi data source pada GroupItemsPage.xaml



3. Berikutnya, kita akan melakukan customisasi nilai parameter yang dilewatkan pada member SampleDataItem. Temukan member SampleDataSource() berikut pada file SampleDataSource.cs

public SampleDataSource()

 SampleDataSource berisi sintak untuk memasukan nilai ke member SampleDataItem(). Perhatikan ilustrasi berikut :

Data Binding dengan SampleDataSource

Dari ilustrasi diatas, terlihat terdapat Objek group1 yang berisi data-data yang menjadi Binding source. Untuk menambahkan group baru cukup dengan membuat objek baru yang merujuk pada kelas SampleDataGroup().

Selanjutnya untuk menambahkan item pada tiap group, menggunakan method Add. Method Add memerlukan parameter data yang ingin ditampilkan untuk setiap item.