Membuat Gadget Windows Sederhana

Posted: 15 November 2010 in Desktop, Operating System, Programming, Web

Windows Gadget adalah fitur yang ditambahkan oleh Microsoft pada produk sistem operasinya untuk menambahkan nilai guna pada tampilan desktop. Fitur ini mulai diperkenalkan sejak Windows Vista. Dengan adanya gadget, maka pengguna dapat membuat tampilan desktopnya tidak hanya sebagai kumpulan icon berlatarbelakangkan suatu gambar, tetapi dapat menjadikan desktopnya memiliki fungsi lebih dan informatif. Fitur ini pada awalnya sudah diperkenalkan oleh apple pada produk sistem operasinya (dimana diberi nama Widget) yaitu macosx.

Windows Gadget pada dasarnya dibuat dengan berbasis pada penggunaan html, css dan javascript. Oleh karena itu, orang-orang yang sudah terbiasa dengan pemrograman web dapat dengan mudah membuat widget buatannya sendiri. Pada artikel kali ini penulis akan mencoba membuat sebuah gadget permainan klasik yaitu menebak angka yang ada pada pikiran pemakai (antara 0 sampai 63) aplikasi dengan meminta pemakai untuk memberi masukan apakah bilangan yang ada dalam pikirannya terdapat pada 6 kartu yang akan ditampilkan.

Langkah awal yang dilakukan adalah dengan membuat folder gadget buatan kita (penamaan mengikuti format /namaGadget.gadget), dalam hal ini ‘/BilanganRahasia.gadget’, kemudian membuat file manifest untuk gadget kita pada folder gadget, yaitu ‘gadget.xml’ (nama tidak boleh diubah), dimana isi filenya adalah sebagai berikut (format xml) :

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
	<name>Permainan Bilangan Rahasia Gadget</name>
	<namespace>144key</namespace>
	<version>1.0.0.0</version>
	<author name="Joel Hutasoit">
		<info url="144key.wordpress.com" />
		<logo src="icon.png"/>
	</author>
	<copyright>© 2010 Joel H. [144key]</copyright>
	<description>Bilangan Rahasia Sidebar gadget to guess what number in your mind.</description>
	<icons><icon height="48" width="48" src="icon.png"/></icons>
	<hosts>
		<host name="sidebar">
			<base type="HTML" apiVersion="1.0.0" src="BilanganRahasia.html" />
			<permissions>Full</permissions>
			<platform minPlatformVersion="1.0" />
			<defaultImage src="icon.png"/>
		</host>
	</hosts>
</gadget>

Dapat dilihat pada file xml di atas berisi descriptor dari gadget buatan kita, mulai dari nama gadget, versi, author, copyright, deskripsi, ikon dan sebagainya. Untuk ikon maka file ikon terkait harus berada pada folder gadget (relative path). Yang perlu diperhatikan lagi adalah file utama dari gadget yaitu ‘BilanganRahasia.html’ dimana juga merupakan relative path sehingga file tersebut tentunya harus berada pada folder gadget kita.

Langkah berikutnya adalah implementasi gadget dimana seperti dideskripsikan sebelumnya dibuat menggunakan bahasa markup html (dengan opsional menggunakan css serta javascript). Nama file implementasi ini sesuai dengan nama file utama yang terdapat pada manifest gadget kita (gadget.xml) yaitu BilanganRahasia.html. Berikut adalah isi dari file utama BilanganRahasia.html :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        <title>Gadget Permainan Bilangan Rahasia</title>
        <style type="text/css">
			body
			{
				margin: 0;
				padding: 3px;
				width: 180px;
				height: 166px;
				font-family: verdana;
				font-size: 9px;
				background-image:url('images/blank.png');
				background-repeat:repeat;
			}
			td
			{
				font-family: verdana;
				font-size: 9px;
			}
			textarea {
				padding: 1px;
				width: 168px;
				height: 70px;
				font-family: verdana;
				font-size: 9px;
			}
			textarea#petunjuk {
				height: 30px;
			}
			form {
				margin: 0px;
				padding: 0px;
			}
			table {
				width: 118px;
				border-width: 0px;
				margin: 0px;
				padding: 0px;
			}
			#gadgetBody
			{
				padding: 3px;
				width: 174px;
				height: 160px;
				text-align: left;
				overflow: hidden;
				background-image:url('images/background.jpg');
				background-repeat:repeat;
				border:1px solid #aaaaaa;
			}
        </style>
        <script type="text/jscript" language="jscript">
			var kartu = new Array(6);
			var main = 0;
			var cn = 0;
			var ttl = 0;
			var ccol = new Array("","#FF7777","Brown","Red","Magenta","Black","Gray");
			var knos = new Array("",1,2,4,8,16,32);
			kartu[1] = "     Kartu Pertama    \n 1  3  5  7  9  11 13 15 \n 17 19 21 23 25 27 29 31 \n 33 35 37 39 41 43 45 47 \n 49 51 53 55 57 59 61 63";
			kartu[2] = "     Kartu Kedua      \n 2  3  6  7  10 11 14 15 \n 18 19 22 23 26 27 30 31 \n 34 35 38 39 42 43 46 47 \n 50 51 54 55 58 59 62 63";
			kartu[3] = "     Kartu Ketiga     \n 4  5  6  7  12 13 14 15 \n 20 21 22 23 28 29 30 31 \n 36 37 38 39 44 45 46 47 \n 52 53 54 55 60 61 62 63";
			kartu[4] = "     Kartu Keempat    \n 8  9  10 11 12 13 14 15 \n 24 25 26 27 28 29 30 31 \n 40 41 42 43 44 45 46 47 \n 56 57 58 59 60 61 62 63";
			kartu[5] = "     Kartu Kelima     \n 16 17 18 19 20 21 22 23 \n 24 25 26 27 28 29 30 31 \n 48 49 50 51 52 53 54 55 \n 56 57 58 59 60 61 62 63";
			kartu[6] = "     Kartu Keenam     \n 32 33 34 35 36 37 38 39 \n 40 41 42 43 44 45 46 47 \n 48 49 50 51 52 53 54 55 \n 56 57 58 59 60 61 62 63";
			function kartuberikut() {
				cn++;
				if (cn == 7) Akhir();
				else {
					document.x.krt.value=kartu[cn];
					document.x.krt.style.backgroundColor=ccol[cn];
					document.x.teks.value="Apakah bilangan yang Anda pikirkan ada di kartu?";
				}
			}
			function Restart() {
				main=0;
				cn=0;
				ttl=0;
				document.x.krt.style.backgroundColor = "#FFFFFF";
				document.x.krt.style.color = "#000000";
				document.x.krt.value = "Pikirkan sebuah bilangan antara 1 dan 63. 6 kartu akan ditampilkan. Setelah kartu terakhir, bilangan Anda akan muncul...";
				document.x.teks.value = "Klik Mulai";
				document.x.stbt.value = "Mulai";
			}
			function Ya() {
				ttl = ttl + knos[cn];
				kartuberikut();
			}
			function Mulai() {
				document.x.krt.style.color = "White";
				document.x.stbt.value = "Restart";
				main = 1;
				kartuberikut();
			}
			function Akhir() {
				main = 2;
				if(ttl < 10) ttl = " " + ttl;
				ttl = " " + ttl;
				var satu = ttl.charAt(1);
				var dua = ttl.charAt(2);
				document.x.krt.value = "\n   BILANGAN YANG ANDA \n    PIKIRKAN ADALAH: \n       -- ["+satu+""+dua+"] --";
				document.x.krt.style.color = "Yellow";
				document.x.teks.value = "Klik Restart untuk mulai lagi";
			}
			function klik() {
				event.cancelBubble = true;
				event.returnValue = false;
			}
			document.oncontextmenu = klik;
        </script>
    </head>
    <body>
		<div id="gadgetBody">
			<b>Bilangan Rahasia</b><br>
			<form name="x">
			<table cellpadding="0" cellspacing="0">
				<tr><td>
					<textarea name="krt">Pikirkan sebuah bilangan antara 1 dan 63. 6 kartu akan ditampilkan. Setelah kartu terakhir, bilangan Anda muncul...</textarea>
				</td></tr>
				<tr><td>
					<b>Petunjuk :</b><br>
					<textarea id="petunjuk" name="teks">Klik Mulai</textarea>
				</td></tr>
				<tr><td>
					<input type="button" value="Ya" onclick="if(main==1) Ya()" style="font-size:10pt;">
					<input type="button" value="Tidak" onclick="if(main==1) kartuberikut()" style="font-size:10pt;">
					<input type="button" name="stbt" value=" Mulai " onclick="if(main==0) Mulai(); else Restart()" style="font-size: 10pt; background:lightyellow;">
				</td></tr>
			</table>
			</form>
		</div>
    </body>
</html>

Penulis tidak akan menjelaskan secara rinci algoritma yang terdapat pada permainan ini (pada script file BilanganRahasia.html) karena berfokus pada pembuatan gadget, untuk itu langkah selanjutnya adalah pengujian awal dari implementasi gadget yang kita buat. Pengujian dapat dilakukan menggunakan browser tertentu. Yang perlu diperhatikan adalah bahwa ukuran layar gadget yang kecil (dapat dilihat pada defenisi width/height tag body pada bagian defenisi css) sehingga keseluruhan operasional gadget harus mencukupi untuk ukuran layar tersebut.

Setelah pengujian awal berhasil, tiba saatnya packaging gadget agar dapat dipublikasikan. Packaging gadget windows adalah sebuah file arsip dengan ekstensi gadget (namaGadget.gadget mirip dengan nama folder). Caranya adalah dengan menggunakan windows explorer, masuk ke folder gadget (/BilanganRahasia.gadget/), pilih semua file dalam folder gadget tersebut kemudian compress sebagai file zip dengan nama BilanganRahasia.gadget.zip. Setelah itu file arsip tersebut di-rename menjadi BilanganRahasia.gadget (menghilangkan ekstensi .zip). Alhasil gadget kita sudah selesai dan siap untuk dipublikasikan. Berikut tampilan dari file akhir gadget serta tampilan gadget setelah diinstall dan ketika digunakan.

Gadget Bilangan Rahasia

Gadget Bilangan Rahasia

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s