Kita bisa membuat user interface dengan mengetikkan langsung pada XAML windows sperti yang terlihat pada gambar dibawah ini

Transkripsi

1 Pengenalan XAML Extensible Application Markup Language (XAML) adalah bahasa deklaratif yang kita gunakan untuk membuat user interface di aplikasi metro style. Tentu saja kita dapat menggunakan Microsoft Visual Studio dan Expression Blend untuk membuat UI dan menyerahkan XAML dibuat secara otomatis oleh alat tersebut. Tetapi saya merasa bahwa sangat penting bagi kita untuk memahami cara kerja XAML. Hal ini mempermudah kita jika ingin melakukan edit secara langsung dan akses penuh ke user interface yang anda bangun. Kita harus belajar berjalan terlebih dahulu sebelum berlari bukan? Jika anda berasal dari web programming, anda bisa menganggap bahwa XAML setara dengan HTML. XAML terdiri dari elemen dan property. Kaidah markup yang diikuti adalah XML. XAML digunakan untuk membuat object dan mengatur nilai property dari object, mengatur struktur dari object dan hubungannya dengan object lain. Kita juga dapat membuat code yang berpasangan dengan XAML yang disebut code behind untuk menangani event atau mengatur property dari code. Sehingga ada pemisahaan yang bersih antara logic dan user interface. Hal ini juga mempermudah koordinasi kerja antara designer dan developer. File XAML adalah XML files yang memiliki ektensi.xaml. Code behindnya memiliki ekstensi.xaml.h (file header) dan.xaml.cpp (file implementasi)

2 Contoh XAML Pada bagian sebelumnya ketika membuat program pertama, kita telah melihat bagaimana kita membuat sebuah button dan menghasilkan XAML kira-kira sebagai berikut. Tag button tersebut kita gunakan untuk melakukan instansiasi object dari kelas Button. Width, HorizontalAlignment dan VerticalAlignment merupakan attribute yang ada pada object Button. Kita bisa membuat user interface dengan mengetikkan langsung pada XAML windows sperti yang terlihat pada gambar dibawah ini Selain itu kita juga dapat membuat user interface langsung dengan menggunakan Visual studio designer dengan cara drag and drop dari Toolbox. Setelah anda nanti mengetahui bagaimana XAML dan seluk beluknya maka kita akan menggunakan Visual Studio Designer dan Blend untuk membangun User Interface. Dengan demikian kita bisa menjadi lebih produktif dan kualitas dari product kita pun menjadi lebih baik.

3 XAML dan Code Sebenarnya kita bisa saja membangun user interface dengan menggunakan Code prosedural yang ditulis dengan c#. Contohnya adalah sebagai berikut. Kita dapat menulis code XAML diatas dengan menggunakan c++ sebagai berikut ini. Tetapi XAML lebih mudah untuk dibaca dan lebih singkat penulisannya dibandingkan dengan code c++. Meskipun kadang ada kalanya kita perlu membuat elemen dari user interface dengan code jika kita ingin membuat UI yang dinamis. Property Ada dua cara untuk memberikan nilai terhadap property : 1. sintaks attribute 2. sintaks property Anda telah melihat bagaimana cara menggunakan sintaks attribute sebelumnya dengan cara seperti ini attribute="value". Contohnya jika kita ingin membuat object Rectangle dan ingin memberikan warna Red maka kita akan membuatnya dengan cara sperti ini. <Rectangle Fill="Red" /> Tetapi jika warna yang kita inginkan tidak sesimple itu melainkan memiliki gradasi warna dan kombinasi maka kita dapat menggunakan sintaks property.

4 Nama Agar dapat menggunakan dan merujuk object Control yang telah kita buat dengan XAML maka kita perlu memberikan nama. Anda dapat langsung mengetikkan pada XAML editor atau menggunakan bantuan dari property panel. Setelah anda memberikan nama maka anda langsung dapat mengakses object control tersebut dari code. Berikut object tersebut telah ditampilkan pada intellisense Anda juga dapat merubah property lainnya dengan mudah dengan menggunakan property panel.

5 Event Handler Setiap control memiliki event yang memungkinkan kita untuk bereaksi terhadap aksi yang dilakukan oleh user atau perubahan yang teradi pada aplikasi kita. Contohnya Button memiliki event Click yang akan ditrigger ketika user melakukan klik terhadap Button. Kita membuat method yang disebut dengan event handler untuk menangani atau bereaksi terhadap event tersebut. Kita dapat membuat event handler dengan menggunakan Window Propertie, dari XAML atau langsung dari code behind. Jika anda menggunakan Property window maka anda tinggal memilih event yang akan ditangani, memberikan nama terhadap event handlernya dan double click. Maka event handler tersebut akan dibuat oleh Visual Studio. Maka anda akan melihat bahwa pada file header dan implementasi akan digenerate event handler untuk event tersebut

6 File Header File Implementasi Kita juga dapat membuat event handler langsung dari XAML view. Kita tinggal mengetikkan nama event yang ingin kita tangani dan intellisense akan membantu kita mengenerate event tersebut. Cara ketiga adalah dengan meletakkan proses untuk melekatkan handler dengan event langsung pada code behind. Jangan lupa menyertakan deklarasi pada header file XAML dan Visual Tree

7 Jika kita memiliki elemen <Button> atau <Grid>, kita dapat memiliki elemen di dalam elemen tersebut. Hal ini menggambarkan hubungan dan komposisi antar object dan menentukan posisi tampilan pada layar, juga bagaimana cara menangani suatu event. Perhatikan contoh berikut ini. Jika kita menggambarkan hubungan antara Grid, StackPanel dan TextBlock, kita akan mendapatkan visualisasi sebagai berikut. Selain untuk menentukan bagaimana representasi dari content, visual tree juga memiliki efek bagaimana event diproses. Banyak event yang berhubungan dengan UI dan input "bubble" sampai ke puncak tree. Contohnya kita dapat membuat event handler di StackPanel untuk menangani event press atau click untuk TextBlock. Hal ini sangat bermanfaat karena kita tidak perlu mengattach handler satu persatu untuk setiap TextBlock. cukup satu saja yang ada di parent nya yaitu StackPanel. Contohnya adalah sebagai berikut.

8 berikut adalah event handler nya Ketika anda menjalankan program tersebut dan menekan TextBlock maka event tersebut akan ditangkap oleh TextBlock tetapi akan diteruskan ke parent nya yaitu StackPanel dimana terdapat event handler commonhandler. Berikut skenario yang terjadi ketika TextBlock di klik. Kita juga dapat menangkap event tersebut pada Grid karena event dari StackPanel akan diteruskan lagi k Grid yang merupakan root dari tree tersebut. Resources Logical Resource membuat kita dapat membuat object XAML yang bukan merupakan bagian dari Visual tree tetapi dapat digunakan oleh elemen dari user interface yang lain. Contohnya kita membuat resource untuk warna dari sebuah button dengan Brush.

9 Keuntungan penggunaan resource adalah kita dapat menikmati reusability dari object yang kita definisikan tersebut, karena kita hanya membuat object tersebut sekali saja dan dapat menggunakannya berulang-ulang. KIta juga mendapatkan flexibility, dengan memisahkan object yang digunakan oleh user interface dan user interface itu sendiri kita dapat mengubah bagian user interface tersebut tanpa mengubah keseluruhan design. Berikut cara mendefinisikan resource yang terletak di Page. Jadi resource ini akan dikenali dikeseluruhan page tersebut. Jika anda ingin resource tersebut local hanya pada sebagian elemen saja, anda dapat mendeklarasikannya secara local terhadap elemen tersebut. berikut contoh untuk local ke grid. Setiap object yang dideklarasikan sebagai resource harus memiliki property x:key. Key inilah yang digunakan oleh elemen lain untuk mengakses resource tersebut. Anda juga dapat mendefinisikan resource pada Application (App.xaml) sehingga dapat diakses oleh keseluruhan aplikasi tersebut. Coba anda buka App.xaml anda maka anda akan menemukan deklarasi Resource yang sudah digenerate sebelumnya oleh visual studio. Anda dapat menambahkan resource global anda pada bagian tersebut. Setelah anda melakukan deklarasi maka tentu saja kita ingin menggunakan resource tersebut. Kita dapat melakukannya dengan sintaks {StaticResource resourcekey}.

10 Resource Dictionary Anda telah melihat bahwa pada App.xaml kita menemukan tag <ResourceDictionary>. Resource dictionary adalah koleksi dari resource yang berada pada XAML file yang berbeda dan dapat diimport oleh aplikasi kita. Hal ini dapat berguna apabila kita ingin menggunakan resource tersebut pada beberapa project pada satu solution. Coba kita lihat kembali bahwa pada App.xaml kita telah memiliki satu resource file. File tersebut terdapat di folder common. Anda dapat melihat bahwa dalam file StandardStyles.xaml tersebut kita menemukan banyak Style. Kita akan membahas style ini pada bagian berikutnya.

11 Anda dapat membuat ResourceFile dengan cara Add New Item dan memilih resource dictionary Anda tinggal menambahkan resource yang anda inginkan ke file tersebut.

12 Agar resource tersebut dapat diakses dari aplikasi kita maka kita harus menggabungkan resource tersebut. Caranya adalah dengan menggunakan MergedDictionaries. Style Pada resource StandardStyles.xaml yang sebelumnya kita lihat, kita menemukan banyak sekali style yang telah didefinisikan disana. Salah satu contoh dari style yang dapat kita lihat dari StandardStyles.xaml adalah sebagai berikut. Style berguna untuk mengatur tampilan dari aplikasi kita. Jika anda pernah berkutat dengan web pemrograman maka anda dapat menanggap bahwa style ini adalah css di xaml. Style akan memberikan perintah kepada ui untuk menggati penampakan standar sesuai dengan nilai yang kita tentukan. Kita menjadi lebih mudah untuk membuat tampilan yang konsisten. Hal ini sangat diperlukan pada aplikasi metrostyle. Aplikasi metrostyle memiliki prinsip-prinsip design yang telah standard dan ditentukan. Salah satu kelas yang akan sering kita gunakan untuk membuat style adala Setter. Setter berfungsi untuk mengubah nilai dari property elemen. <Setter Property="Background" Value="Red"/> Ada beberapa cara yang dapat digunakan untuk mengaplikasikan style pada control kita. Cara yang pertama adalah langsung mengesetnya pada control yang ingin kita ubah tampilannya.

13 Pada kasus diatas maka button kita akan memiliki warna merah dan tulisan "Style set directly" seperti pada gambar dibawah ini. Meskipun melakukan setting secara langsung pada control merupakan cara yang mudah,tetapi hal ini bukan merupakan best practice. Hal ini disebabkan kita tidak dapat menggunakan style tersebut di button lain dan kita harus melakukan copy paste dan akan banyak duplikasi code yang ada. Kita sebaiknya mematuhi prinsip Don't repeat yourself dalam hal ini. Cara yang paling banyak digunakan adalah menggunakan koleksi Resources. Kita telah mempelajari pada bagian sebelumnya bahwa resource dapat digunakan untuk mendefinisikan object yang dapat dirujuk oleh elemen-elemen lain. Pada contoh ini kita membuat koleksi resource dari Page. Anda harus mengatur TargetType dari style tersebut yaitu adalah Button dalam hal ini. Untuk menggunakannya kita menggunakan keyword binding expression Style="{StaticResource resourcekey}". Kita telah memberi key style dengan nama StyleOne. Key tersebutlah yang kita gunakan untuk merujuk kepada style tersebut. Jika button tadi stylenya ingin kita ubah maka code button akan menjadi sebagai berikut. Hasilnya tetap sama seperti sebelumnya, tetapi kita dapat menggunakan style tersebut berulang ulang. Style Inheritance Kita bisa menerapkan inheritance dalam membuat style. Hal ini dapat berfungsi jika kita ingin membuat style baru yang sedikit saja bedanya dengan style yang kita buat sebelumnya. Kita dapat menghemat code dengan membua satu base style yang akan kita turunkan. Kita melakukannya dengan menggunakan property BasedOn. Property BasedOn merujuk kepada style lain dan secara otomatis akan

14 menurunkan semua property yang dimiliki anggota dari parent style tersebut. Kita tinggal menambahkan member baru pada child style. Berikut adalah contoh dari style inheritance yang diaplikasikan untuk Button. Berikut adalah tampilan dari kedua button yang mengimplementasikan kedua style tersebut. Jika property di set di kedua style tersebut (parent dan child) maka nilai yang digunakan adalah nilai dari child nya. Tetapi jika hanya parent saja yang memberikan nilai sedangkan child tidak, maka nilai dari parent tersebut akan dipertahankan. Kita telah melihat sebelumya bahwa kita telah dipermudah oleh Visual Studio template yang menyediakan StandardStyle.xaml. Kita dapat menggunakannya secara langsung di aplikasi kita. Dan dijammin bahwa style yang terdapat di StandardStyle tersebut telah sesuai dengan desain metro. Anda sebaiknya menggunakan style yang telah didefinisikan pada StandardStyle tersebut. Ketika anda ingin mendefinisikan style sendiri maka selalu usahakan bahwa anda menurunkan dari StandardStyle dengan menggunakan BasedOn jika memungkinkan.