Membuat Aplikasi Windows 8 – 12 – Data Binding

Assalamu’alaikum :)

Membuat Aplikasi Windows 8 – 12 – Data Binding. Sebelum mempelajari cara membuat Aplikasi Windows 8 dengan panduan Ebook  Programming Windows 8 Apps with HTML, CSS, and JavaScript oleh Kraig Brockschmid saya belum pernah mempelajar mengenai data binding. Jadi ini adalah hal baru dan konsep baru untuk saya, langsung mulai saja ya  :o

Apa itu Data Binding?

Data Binding adalah konsep dari mengikat/membuat hubungan/mengaitkan ( “binding” ) data antara dua object. Biasanya kedua object tersebut adalah object datanya itu sendiri dan yang kedua adalah object UI atau apa yang ditampilkan ke user. Banyak juga yang menyebut object data adalah source dan object UI adalah target.

Contoh dari data binding di sini misalnya kita memiliki sebuah elemen paragraf ( <p> ) yang isinya adalah nama user yang sedang memakai. Nama user kita simpan dalam sebuah object di JavaScript. Ketika object di JavaScript itu berubah, maka data yang ditampilkan di element (UI) haruslah berubah juga secara automatis. Inilah yang disebut data binding.

Data Binding sangat berguna untuk mensyncronisasikan data sehingga kita tidak perlu merubah secara manual sebuah value dari object ketika pasangan dari object tersebut berubah. Semua sudah automatis.

Data Binding memiliki 3 scenario, yaitu one-time, one-way dan two-way. Kalo kita lihat dengan ilustrasi contoh yang saya berikan di atas, ketiga scenario tersebut kurang lebih seperti ini:

One-Time:

UI mengambil data dari source hanya pada saat pertama kali di load. Ketika di tengah jalan sourcenya itu diganti, maka tampilan di UI tidak terganti.

One-Way:

UI mengambil data dari source setiap saat, ketika di tengah jalan source nya berganti. Maka tampilan di UI juga harus berganti.

Two-Way:

Scenario ini sama dengan One-Way tetapi bedanya kedua elemen dapat mengubah satu sama lain. Misalnya object source berubah, object target juga harus menyesuaikan. Begitu pula ketika object target berubah, object source juga harus berubah. Jadi di sini sebuah object dapat menjadi source dan dapat menjadi target.

Membuat Data Binding di Windows 8

WinJS sudah menyediakan library untuk mempermudah kita dalam melakukan Data Binding. Ini semua dapat diakses melalui API  WinJS.Binding yang dapat digunakan untuk scenario One-Time dan One-Way. Menurut ebook yang saya baca, saat ini WinJS belum support Two-Way, by default. Tetapi anda bisa membuat engine bindingnya sendiri atau menggunakan 3rd-party library.

Untuk contohnya saya akan membuat semacam pengecek status barang untuk penjual. Nama barangnya, lalu ketersediaannya yaitu “Ready Stock”, “Pre-Order”, atau “Out Of Stock”, lalu jumlah barang yang tersisa (hanya tampil kalau ketersediaannya “Ready Stock”;).

Okay, untuk contoh. Saya akan membuat HTML seperti berikut:

Dimana saya memiliki element untuk “item-name”, “item-status” dan “item-total”. Dan di JavaScript saya tambahkan fungsi yang akan mengubah status barang menjadi “Out Of Stock” di JavaScript, bukan di UI:

Lalu di JavaScript saya juga memiliki object yang akan saya gunakan sebagai source:

One-Time

Kalau di JavaScript, untuk melakukan One-Time Data Binding kita bisa menggunakan syntax yang biasa kita gunakan langsung di JavaScript. Yaitu:

Hasilnya akan menjadi:

One Time Data Binding

 

Kalau kita menekan tombol tersebut maka tidak akan terjadi apa-apa. Karena kita menggunakan scenario One-Time. Data hanya di load waktu pertama kali terload saja halamannya.

Kalau menggunakan API dari WinJS bisa dengan cara berikut:

  1. Pertama kita set di HTMLnya langsung elemen apa mengambil data apa menggunakan attribute data-win-bind. Isi dari data-win-bind ini adalah property apa yang ingin di bind, dan apa yang akan di bind ke property tersebut. Dengan format:
    <target property>: <source data> [<converter function>]
    Di mana converter function ini opsional, kita akan melihat kegunaanya sebentar lagi.
  2. HTML nya akan menjadi seperti ini:

    Perhatikan pada data-win-bind, kita mengeset innerHTML ke nama member dari Object “barang“, sesimple itu. Tapi beda kalau untuk yang Quantity, karena kita ingin mengambil value Quantity berdasarkan statusnya maka member status harus kita masukkan ke dalam sebuah fungsi agar diolah menjadi data yang kita inginkan.

    Nah fungsi tersebut kita panggil dengan Converter, jadi bukan fungsi biasa. Untuk mengubah dari fungsi biasa ke Converter kita harus membungkusnya menggunakan WinJS.Binding.converter:

  3. Langkah terakhir adalah menghubungkan element di UI dengan object di JavaScript. Kita bisa menggunakan Syntax:
    WinJS.Binding.processAll(document.getElementById("item-container"), barang.data);
  4. Jalankan.

Hasilnya akan sama seperti yang kita dapat ketika menggunakan JavaScript biasa.

One-Way

Enaknya kalau kita menggunakan WinJS untuk melakukan Data Binding di One-Time, kita tinggal menambahkan satu perintah saja agar bisa digunakan, yaitu:

var observableBarang = WinJS.Binding.as(barang.data);

Lalu perubahan apa saja yang mau dilakukan, kita lakukan kepada object observableBarang tersebut. Jadi, dalam function onclick button kita ubah sedikit menjadi:

Ketika kita coba jalankan, maka tampilan memang seperti sebelumnya. Namun ketika kita meng-click tombolnya, maka data akan otomatis berubah:

One Way Data Binding WinJS

 

Hebat kan? Tanpa kita mendeteksi ada perubahan atau tidak tampilan di UI sudah langsung berubah.

Sekian dari saya, silahkan bertanya kalau ada yang kurang jelas.
Source Code bisa di download di: http://sdrv.ms/1dwojJW
Video menyusul :)

REFERENSI:
Kraig Brockschmid. Programming Windows 8 Apps with HTML, CSS, and JavaScript, 2012.

AbangFadli, out :cool:

Wassalamu’alaikum :kr

Ilmu jangan disimpan sendiri, bagikan ke teman-teman anda:

Comments

comments

Ahmad Fadli Basyari

Mahasiswa IT di President University. Memiliki hobi membuat aplikasi mobile, blogging dan menonton film.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA *

[+] kaskus emoticons nartzco