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.
XAML 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 :
| <phone:PhoneApplicationPage | |
| x:Class=“PhoneApp2.MainPage“ | |
| xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation“ | |
| xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“ | |
| xmlns:phone=“clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone“ | |
| xmlns:shell=“clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone“ | |
| xmlns:d=“http://schemas.microsoft.com/expression/blend/2008“ | |
| xmlns:mc=“http://schemas.openxmlformats.org/markup-compatibility/2006“ | |
| mc:Ignorable=“d“ | |
| FontFamily=“{StaticResource PhoneFontFamilyNormal}“ | |
| FontSize=“{StaticResource PhoneFontSizeNormal}“ | |
| Foreground=“{StaticResource PhoneForegroundBrush}“ | |
| SupportedOrientations=“Portrait“ Orientation=“Portrait“ | |
| shell:SystemTray.IsVisible=“True“> | |
| <!–LayoutRoot is the root grid where all page content is placed–> | |
| <Grid x:Name=“LayoutRoot“ Background=“Transparent“> | |
| <Grid.RowDefinitions> | |
| <RowDefinition Height=“Auto“/> | |
| <RowDefinition Height=“*“/> | |
| </Grid.RowDefinitions> | |
| <!–TitlePanel contains the name of the application and page title–> | |
| <StackPanel x:Name=“TitlePanel“ Grid.Row=“0“ Margin=“12,17,0,28“> | |
| <TextBlock Text=“MY APPLICATION“ Style=“{StaticResource PhoneTextNormalStyle}“ Margin=“12,0“/> | |
| <TextBlock Text=“page name“ Margin=“9,-7,0,0“ Style=“{StaticResource PhoneTextTitle1Style}“/> | |
| </StackPanel> | |
| <!–ContentPanel – place additional content here–> | |
| <Grid x:Name=“ContentPanel“ Grid.Row=“1“ Margin=“12,0,12,0“> | |
| </Grid> | |
| </Grid> | |
| </phone:PhoneApplicationPage> |
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 :
- http://www.microsoftvirtualacademy.com/training-courses/xaml-deep-dive-for-windows-windows-phone-apps-jump-start
- http://www.microsoftvirtualacademy.com/training-courses/designing-your-xaml-ui-with-blend-jump-start
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.
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.
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 :
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 :
Event adalah cara untuk mengelola interaksi pengguna dengan kontrol. Salah satu yang paling sering digunakan adalah Tap, yang akan bereaksi ketika pengguna menekan kontrol.
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.
