Apa itu XAML ?

XAML

Diawali ketertarikan dengan dunia mobile, dan juga diringi dengan sudah banyaknya teknologi mobile dan juga web yang menggunakan XAML sebagai interface dari sebuah aplikasi. So, di postingan kali ini kita akan membahas mendetail tentang XAML, mulai dari pengertian apa itu xaml, apa aja hubungan XAML dengan XML, kenapa harus XAML, dan juga bagaimana XAML bekerja.

Apa itu XAMLXML.svgXAML adalah singkatan dari Extensible Application Markup Language. Merupakan markup language yang berbasiskan kepada XML, meskipun XML merupakan bahasa Markup namun tidak sama dengan HTML, dan XML tidak dapat menggantikan HTML. Perbedaan antara XML dan HTML adalah pada tujuannya. Kalau HTML bertujuan untuk menampilkan data, sedangkan XML bertujuan untuk menyimpan dan membawa data. Setiap control di tempatkan pada sebuah page, button, textbox atau custom control yang mana di spesifikkaan pada tag XML. Jadi gampangnya kalau XAML itu berlandaskan XML.

Nah, XML itu merupakan bahasa yang digunakan untuk membawa, menyimpan dan mengubah data. Sejarah (XML) dimulai dengan pengembangan Standarisasi Generalised Markup Language (SGML) oleh Charles Goldfarb, bersama dengan Ed Mosher dan Ray Lorie pada 1970-an saat bekerja di IBM (Anderson, 2004). Meskipun nama SGML  bukan bahasa mark-up sendiri, namun merupakan bahasa yang digunakan untuk menentukan bahasa mark-up. Tujuan dari SGML adalah untuk menciptakan kosa kata yang dapat digunakan untuk mark up dokumen dengan tag struktural. – ccolins

Dengan menggunakan Microsoft Expression Blend kita akan sangat mudah mendesign UI dalam bentuk XAML, tinggal drag and drop. Tapi tentunya hal ini akan lebih baik jika kita mengetahui juga apa aja yang ada didalamnya.

Berikut contoh XAML yg saya ambil dari Windows Phone MainPage :

PhoneApplicationPage adalah base class dari Windows Phone page, seperti yg kita lihat, bahwa setiap control berada di dalamnya seperti atribut x:class. Atribut ini lah yang berfungsi mengindentifikasi code (.cs) di belakangnya agar terhubung dengan interface xaml ini.

Video Learning yang mungkin bermanfaat :

 

Namespace

Namespace merupakan struktur daru code yang sedang dibuat dengan initial class yang dibuat. Defaultnya, Visual Studio akan membuat namespace menggunakan nama yang sama dengan struktur folder dari project. Contohnya disini kita punya class yang dinamakan MyClass dan berada didalam folder Classes, jadi default namespace nya adalah Classes.MyClass.

sample
Namespace di XAML sebenarnya sama


Setiap Namespace akan diikuti dengan xmlns, ini merupakan struktur standar dari XML, dan kondisi setelahnya merupakan custom dari code yang akan di kembangkan, contoh disini adalah phone.

 

Properties dan Events

Setiap control bisa di custom dengan 2 cara, yaitu dengan menyetting properties dan actions nya. Keduanya di identifikasi dengan atribut dari tag nya XAML, tetapi keduanya mempuyai maksud yang berbeda.

1
TextBlock control

Properties  digunakan untuk mengubah tampilan atau perilaku kontrol. Biasanya, properti hanya mengatur dan menetapkan nilai atribut tertentu. Sebagai contoh, jika kita ingin menetapkan nilai properti Text dari TextBlock control, kita bisa melakukannya dengan cara sebagai berikut :

2
gambar sebagai kontrol background

Ada juga sebuah sintaks yang lebih panjang yang dapat digunakan dalam kasus properti yang kompleks yang tidak bisa didefinisikan dengan string biasa. Sebagai contoh, jika kita perlu mengatur gambar sebagai kontrol background, kita perlu menggunakan kode berikut :

3
Button Event

Event adalah cara untuk mengelola interaksi pengguna dengan kontrol. Salah satu yang paling sering digunakan adalah Tap, yang akan bereaksi ketika pengguna menekan kontrol.

4
eventhandler

Ketika kita mendefinisikan suatu event, Visual Studio secara otomatis akan meminta kita untuk membuat sebuah eventhandler, yang merupakan metode (dinyatakan dalam kode di belakang .cs) ketika event dijalankan.

Iklan

Satu pemikiran pada “Apa itu XAML ?

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s