When designer codes: Coba-coba Silverlight 3 + .NET RIA Services + Blacklight Controls

Akhir-akhir ini sedang disibukkan oleh pengerjaan aplikasi buat Tugas Akhir. TA saya intinya membuat suatu perangkat bantu pengajaran IMK (Interaksi Manusia Komputer) yang berbasis web. Si aplikasi yang rencananya dinamakan “HCI Learning Tool” itu simpelnya seperti sebuah aggregator dari perangkat2 bantu IMK yang udah ada sebelumnya, dan bisa berbentuk perangkat lunak, video, podcast audio, maupun dokumen. Sounds simple enough? Yap, karena emang berat di bagian analisis kurikulum dan alat peraganya.

Yang saya butuhkan buat bikin dosen penguji nanti senyum-senyum adalah: UI super cool, dan tentunya logic app yang berjalan tanpa error. And for me as I claimed myself to be a designer, yang saya butuhkan adalah: YANG CODINGNYA NGGAK RUMIT :)

First thought: “Okay, it’s gonna be Silverlight. Let’s check out the most recent version.” (maklum udah kelamaan ga menyentuh SL lagi sejak photoshop & Ms. Word sangat menyita waktu :p) Donlot video.. donlot HOL.. sampe nyembah2 minta Telerik controls dari para MVP, hehe. Sampai akhirnya suatu saat saya diperkenalkan sama yang namanya .NET RIA Services oleh sang master..

Apaan tuh .NET RIA Service? Apa hubungannya sama Silverlight 3? Sebenarnya Pak Risman pernah membahas sekitar bulan april lalu, dan saya pertama nge-scan (nge-scan lho bukan baca) tetep aja nggak ngerti :p Hikmah yang bisa didapat adalah untuk belajar teknologi baru emang kudu liat DEMO APPnya langsung, so guys please check it out first:

http://www.hanselman.com/abrams/

image

Jadi dalam pengertian saya, .NET RIA Services itu merupakan gabungan dari aplikasi yang menggunakan SL3 di sisi client dan ASP.NET di sisi server, maka dari itu pas kita Create New Project akan menghasilkan satu solution dengan 2 project terpisah, satunya ngurusin tampilan aplikasi di klien dan satunya ngurusin sisi server.

Hebatnya si .NET RIA Services ini adalah dia membuat segala sesuatu jauuuuh lebih mudah ketika kita ingin membangun aplikasi data-driven atau LOB (Line-of-Business Apps) yang sifatnya n-Tier. Kebanyakan aplikasi web yang ada saat ini masih bersifat 2-tier, dimana UI memiliki koneksi hanya ke database plain saja. Sedangkan .NET RIA Services fokus pada pembuatan application logic di mid-tier serta penggunaan data yang sifatnya end-to-end, termasuk di dalemnya contohnya validasi data, autentikasi role pengguna, dll yang udah siap pake, jadi ga perlu koding ribet-ribet :)

image

Nah, pada .NET RIA Service untuk mengakses si data-data itu bisa melalui yang namanya Data Access Layer (DAL), dimana DAL itu sendiri bisa bermacem-macem bentuknya. Sejauh yang saya eksplor kita bisa mengakses database dengan memakai ADO.Net Entity Framework, LINQ to SQL, POCO (Plain Old CLR Object –> which i’m not quite sure what on earth this means :p), atau bahkan pake cloud service via Azure dan juga lewat WCF dan ADO.Net Data Service. Yang saya pake sih paling simpel yaitu pake entity framework.

Ok, enough with .NET RIA Services introduction. Semua tentangnya bisa dipelajari lewat link resource di bagian bawah. Let’s proceed with my other thought:

Setelah mendapat firasat “kayaknya lebih gampang nih ngurusin data pake .NET RIA services” akhirnya saya beranjak mengeksplor kira-kira apa yaa yang bisa membuat UI makin terlihat ciamik? Lalu saya menemukan Blacklight Controls buatan Martin Grayson. Kontrol ini sama dengan yang digunakan untuk membuat interface pada MSCUI Patient Journey Demonstrator yang tersohor itu. Lagi-lagi akan lebih menarik kalo liat demonya, please go to Interactive Controls > Dashboards > Drag Dock Panel.

http://mightymeaty.members.winisp.net/blacklight.silverlight/

image

Yup, DRAG DOCK PANEL. Kayaknya keren nih kalo bisa menampilkan daftar alat peraga IMK disini :) Akhirnya setelah buka VS2008 + Blend 3 seharian saya baru berhasil membuat interfacenya pake bantuan accordion dan kontrol Blacklight buat nampilin konten. Dan karena bikinnya diatas RIA Service jadi ngga perlu pusing mikirin Login Authentication dan nampilin DataGrid serta DataForm-nya (udah plus sorting + filtering). Ini screenshot tampilannya:

image 

image

Jadi maunya ada 2 halaman penting yaitu HOME dan UPLOAD. User baru bisa masuk ke menu Upload jika sudah login. Oke, itu sudah. Menampilkan daftar tabel alat peraga? sudah. Proses CRUD (Create, Read, Update, Delete) data? sedang dalam proses pengkodingan, hehe.

Nah sekarang yang menjadi pertanyaan adalah bagaimana membuatnya menjadi seperti ini:

scrshot

[gambar diatas tentu saja tampilan UI yang saya mau via photoshop :) ]

Disini bedanya otak designer sama developer. Kalo designer yang mentok koding, bukannya malah ngoprek2 dengan rajin tapi yang ada malah bikin screenshot UI idaman pake manipulasi gambar. Udah gitu dipost di forum geeks berharap ada master-master kode yang bisa bantu. Hahaha..

Yang membuat saya bingung adalah gimana memindahkan isi tabel di DataGrid (pada halaman UPLOAD) ke dalam isian konten si drag-dock panel. Masalahnya adalah karena panel-panel drag&dock tersebut saya generate dinamis pada saat run-time, karna user juga harus bisa mengupload contoh alat peraga lainnya.

Jadi apakah isi dari panel itu saya buat user control tersendiri? Trus ntar ngebedain yang kategori video dan kategori2 lainnya gimana ya? Apakah saya harus buat Domain Data Service baru ataukah pake DDS yang udah ada? Siapa aja yang udah ngoprek ya kira2 yg bisa ditanyain? :D

And so, still a loooong way to go. Semoga dapet pencerahan biar ntar bisa diupdate di postingan2 berikutnya, hehehe.

Anyway you should really try to build LOB applications using .NET RIA Services :) Hope these references would help:

Enjoy!

Cheers :)

Share this post: | | | |
Published Tuesday, August 4, 2009 8:07 PM by Umi Fadilah

Comments

# re: When designer codes: Coba-coba Silverlight 3 + .NET RIA Services + Blacklight Controls

Tuesday, August 4, 2009 11:39 PM by reyza

keren keren...super keren. apalagi sambil makan hotdog di hotdog booth yg ada di circle K nih :)

# re: When designer codes: Coba-coba Silverlight 3 + .NET RIA Services + Blacklight Controls

Wednesday, August 5, 2009 7:37 AM by poedja_p

ume dewa :)

# re: When designer codes: Coba-coba Silverlight 3 + .NET RIA Services + Blacklight Controls

Wednesday, August 5, 2009 8:24 AM by Umi Fadilah

@reyza: kalo sambil makan hotdog sambil diajarin koding mau dong..hahaha enakan Frankfurter laa daripada yg di circleK :)

@poedja: jaaa udah balik dari KP lo?beliin miniatur bali buat taro di mic ya..hehe [oot]

# Just a regular update from me: “The After-Graduate List” | umifadilah.net

Pingback from  Just a regular update from me: “The After-Graduate List” | umifadilah.net

# Channel Geeks .NET Edisi 03 – Young Women in Technology

Wednesday, August 26, 2009 11:41 AM by video

Download WMV (low res) Pada edisi kali ini kita mendapat kesempatan untuk berbincang dengan dua orang

# Channel Geeks .NET Edisi 03 – Young Women in Technology

Wednesday, August 26, 2009 5:50 PM by video

Download WMV (low res) WMV (hi res) Pada edisi kali ini kita mendapat kesempatan untuk berbincang dengan

Powered by Community Server (Commercial Edition), by Telligent Systems