Coba tanya saya, “Apa yang menarik ketika melihat konten VS2010 Training Kit (January release)?” Ya, dengan cepat saya akan menjawab, bagian yang paling menarik bagi saya untuk dipelajari (cuman) : Office UI customization + WPF & Silverlight 4 :p
Alasannya? Gampang, soalnya ada embel-embel keyword tentang UI (user interface) dan juga promosi mengenai fitur-fitur terbaru dari WPF & Silverlight Designer, hehehe.. Sisanya kebanyakan ASP.Net 4, Sharepoint, MEF, F# blablabla.. yang saya yakin menjadi slot untuk bahan nge-blog yg menarik bagi masing2 developer di bidangnya :)
Awalnya saya berasumsi bahwa kebanyakan dari kita sudah master mengenai WPF Designer di Visual Studio. Karena sebenarnya ini merupakan hal yang tidak terlalu teknis dan seringkali kita belajar melalui ‘adaptasi’ langsung di IDE. Sekedar informasi, WPF Designer tidak lain adalah visual design surface di Visual Studio (atau disebut juga dengan code-name “Cider”).
Namun pada Visual Studio 2010, cukup banyaaaak penambahan fitur-fitur barunya, sehingga saya merasa tertantang untuk sharing kepada rekan komunitas sekalian :) Oke langsung saja berikut adalah hal-hal yang baru dan menarik pada Cider di VS2010:
1. Same Support for Both WPF (Enhanced) & Silverlight (NEW!)
Salah satu yang paling noticeable pada Cider di VS2010 adalah mampu mendukung sepenuhnya pengerjaan aplikasi Silverlight. Jadi inget jaman2 dulu ngerjain project research saya tentang HCI Learning Tools dengan menggunakan Silverlight 3. Waktu itu masih pake VS2008 dimana kita kudu install Silverlight Tools & SDK dulu sebelumnya (cukup ribet, setuju nggak?). Seingat saya designer support untuk Silverlight masih terbatas banget.. Sehingga misalnya untuk benerin posisi objek dengan mouse saja kudu ke Blend dulu biar lebih precise.
Now that VS2010’s Cider support Silverlight with the same functionality as WPF, you get an interactive designer which enables drag-and-drop controls and everything else you get in WPF. A very good news, don’t you think? :) Especially when you’re a developer on a small team and you have a very limited access to hire professional designers. Well, technically i’m not saying that you won’t need one. If you do, you can still hire me :p
2. Panel Property-Editing yang Lebih Visual
Kalo misalnya dulu Anda termasuk yang suka nonton video-video tutorial dari Jesse Liberty (salah seorang punggawa MVP Silverlight sejak 1.0 sampai sekarang), untuk membuat gradient brush saja, di visual studio, ya lewat kode laah. Hmm.. kalo bahasa anak sekarang, “cem orang susah aja” :D
Coba lihat panel-panel property editing di VS2010 (Beta 2). Ya, segalanya ditampilkan sevisual mungkin, benar2 dimanjakan deh para developer ini.. hehe. Dibawah ini contoh panel Brush Editor dan contoh untuk Resource Picker (mirip yaa sama Blend :)
3. Databinding secara visual, no XAML direct-coding!
Bagi yang sudah terbiasa melakukan data binding via kode, fitur ini mungkin malah membuat beberapa orang canggung. Tapi saya yakin dalam tempo singkat Anda bisa langsung beradaptasi dan malah “ketagihan” ketika menyadari betapa mudahnya mengedit data-binding tanpa mengetik XAML satupun :)
Disini kita bisa binding ke beragam properti dari suatu element, resources, dan juga data-context. Oiya terkait dengan ini jadi inget juga kalo di VS2010 ini juga terdapat “Data Sources” window. Jadi sebenernya semua pengolahan data bisa dilakukan dengan mudah secara visual. Tutorial lebih lengkapnya akan saya berikan di postingan mendatang. Sekarang spoiler dulu…….. :p
4. Intellisense buat jenis Markup Extension {…}
Another good thing, people! Dulu terus terang aja kalo mau binding data dari kode, kadang2 saya sendiri suka rada-rada ngga PeDe soalnya entah itu gara2 lupa syntax, ato lupa mau bind kemana, resourcenya yang static ato dynamic yah… dan segala macam hambatan lainnya :p Sekarang di VS2010 (Beta 2), udah ada intellisense untuk jenis ekstensi markup dengan simbol ‘{ }’
Yup, aren’t we all glad… :)
5. Never Lose Track of Any Object
Sebenarnya ada banyak cara untuk mengetahui posisi dan letak tiap kontrol. Di Visual Studio 2010, dengan Tag Navigator (gambar atas) dan Document Outline (bawah), Anda tidak akan pernah “kehilangan arah”. Dibantu pula dengan thumbnail preview ketika kita meng-hover suatu objek.
6. Auto-Layout (Auto Size Root)
Fitur terbaru Auto-Layout sangat berguna apabila kita menginginkan user control yang ukurannya dapat menyesuaikan jendela aplikasi secara otomatis. Misalkan apabila windownya nanti di-maximize maka layout user controlnya tidak akan berantakan. Untuk melihat hasil dari Auto-Layout caranya sangat mudah, tinggal mengklik ikon kecil di pojok kanan bawah, yang ketika di-hover memunculkan tulisan, “Fixed Size root, click to switch to Auto Size root”. Seperti berikut:
Hasilnya tidak akan langsung terlihat pada Design-View, namun jika dilihat pada XAML view, maka dari kondisi semula yang seperti ini:
Akan berubah menjadi seperti berikut:
Terlihat jelas perbedaannya yaitu setelah diklik ikon Auto Size root maka ditambahkan instance seperti yang biasa kita lihat di Expression Blend, dengan penambahan properti SizeToContent=”WidthAndHeight”. Now open your solution, run it (F5), then try to maximize and see what happens to any of your user control.
7. Error-handling yang Lebih Baik pada Design-View
Saat terjadi error pada kode kita, umumnya pada VS2008 hanya akan diberitahu bahwa designer tidak bisa di-load dan hanya memberi petunjuk agar kita melakukan reload. Nah pada VS2010 Anda bisa mengisolasi error terhadap user control yang spesifik, dan juga sama seperti Blend, memberikan info keterangan mengenai exception tersebut.
8. Support berbagai Versi & Multiple Platform
Kalo dulu di VS2008, design-time suatu kontrol hanya menaruh target pada platform WPF terbaru (tidak fleksibel jika suatu saat rilis platform WPF baru atau bahkan platform sebelumnya). Begitu pula dengan Silverlight. Namun pada VS2010 kali ini mendukung cross-multiple platform termasuk di dalamnya design-time support untuk WPF 3.5, WPF 4, Silverlight 3, Silverlight 4, dst..
---
Hmm.. rasanya sudah sangat panjang postingannya :p Oke kalo gitu sekian sharing mengenai fitur-fitur menarik WPF Designer yang baru pada VS2010 (beta 2).. Semoga menambah wawasan dan bikin makin semangat coding visual! :D
Cheers…