My Hello World at Windows Vista Sidebar
Demi mengikuti tradisi lama di dunia perkodingan, maka setiap kali belajar pasti diawali dengan bagaimana caranya membuat tulisan "hello world" di layar. He3x maka karena sekarang karena lagi ngoprek-ngoprek Windows Vista Sidebar dengan bermodalkan "buku" yang dikasih om reza, jadi biar gak lupa gua bikin tutorial sederhana bagaimana membuat sebuah gadget yang menulis "hello world" di Vista Sidebar. Oh iya buat yang belum tau Vista Sidebar itu apa bisa lihat disini. Intinya kalo anda sudah biasa pake Konfabulator (buatan Yahoo!) atau Dashboard (di Mac) ya Sidebar ini gak jauh beda lah fungsinya. Kita bisa nambahin gadget-gadget dah bahkan kita bisa bikin gadgetnya sendiri. Bikin gadget untuk Vista Sidebar ini ternyata gak susah-susah amat, cukup dengan HTML+CSS+JavaScript kita udah bisa bikin sebuah gadget sederhana, ya kalo mo macem-macem bisa sih pake .NET Interop.
Okeh kita mulai aja tutorialnya. Untuk membuat sebuah Gadget "Hello World" maka kita hanya perlu membuat dua buah file yaitu :
1. manifest gadget ini yang mengandung info soal gadget kita dan juga link ke halaman HTML utama dari gadget ini (ya mirip dengan manifest yang ada di jar lah...), oh iya file ini harus dinamakan gadget.xml
2. sebuah halaman HTML yang mendeskripsikan tampilan dari gadget kita, dalam halaman HTML ini pun kita bisa menambahkan css dan juga javascriptnya.
okeh mari kita buat file yang pertama kasih nama gadget.xml dan silahkan ketikkan xml dibawah ini.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Hello World by Ronald</name>
<namespace>Example.You</namespace>
<version>1.0.0.0</version>
<author name="Ronald Rajagukguk">
<info url="www.ronaldpenalosa.com" />
</author>
<copyright>© 2008</copyright>
<description>My Hello World gadget</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
Okeh, XML simple diatas intinya pengen ngasih tau ke si vista, nilai-nilai properti dari gadget kita. Kayak misalnya nama, versi, dan atribut lainnya. Kemudian untuk elemen host, itu adalah nilai standar yang harus diisi kalo develop gadget. Kalo udah bikin file gadget.xml sekarang saatnya kita buat sebuah file html dengan nama HelloWorld.html (nama ini bisa diganti jika anda mengganti atribut src pada element base didalam dokumen xml pada file gadget.xml diatas). Silahkan ketikkan kode HTML dan CSS sederhana dibawah ini pada HelloWorld.html
<html>
<body style="width:130px;height:100px;background-color:Navy;color:White">
Hello World by Ronald Rajagukguk
</body>
</html>
Sip, kalo udah bikin dua file ini maka silahkan kompres dua file ini dengan format zip (bisa pake winrar atau tools kompresi lainnya) kemudian setelah itu ganti nama extensi file .zip tersebut dengan .gadget. Contoh jika anda mengkompres dua file tersebut dan nama file hasil kompresinya adalah hallo.zip maka ganti sehingga menjadi hallo.gadget. setelah diganti maka icon dari file tersebut akan berubah menjadi seperti gambar dibawah ini :
Okeh, sekarang kita bisa klik dua kali pada file tersebut dan akan muncul prompt yang bertanya apakah kita akan menginstall sebuah gadget pada vista sidebar, pilih OK dan setelah itu jika kita membuka jendela penambahan gadget pada vista sidebar maka akan ada sebuah gadget dengan nama "Hello World by Ronald". Pilih gadget tersebut lalu pasang di sidebar vista anda. Sekarang di sidebar anda, tentunya ada sebuah gadget baru dengan latar belakang warna biru navy dan tulisan "Hello World by Ronald Rajagukguk". He3x simpel ya bikin aplikasi hello worldnya. Besok gua posting lagi deh cara bikin sidebar yang lebih menarik.
cheers and happy easter everyone.......