Bu yazımızda Microsoft Windows Vista ile hayatımıza hızlı bir giriş yapan Gadget kodlamasından bahsedeceğiz. Örnek bir gadget olarak dijital saati geliştireceğiz.
Müfettiş Gadget ile hayatımıza merhaba diyen gadget kelimesinin tam anlamı da aslında çizgi filmdeki o karakterden çok da farklı değildir. Gadget aslında hayatımızı kolaylaştırmak için yapılan cihazlara verilen genel bir addır. Örneğin, tuttuğunuzda bir lazer ışık yayan bir anahtar karanlıkta da kapınızı açmanızı sağlayacaktır. Yine benzer bir terim de gizmo'dur. Gizmo de gadget ile benzer bir tanımlamaya sahiptir. Tek farkı gizmo'ların hareket eden parça(cık)lar içermesidir. Bu tanımlamaya göre aslında dijital saat bir gadget iken analog bir saat (hareket eden bir akrep ve yelkovan olduğu için ) gizmo'dur.
Ancak bizim bu makalede bahsediğimiz gadget Microsoft Windows Vista ile hayatımıza giren ve tam tanımındaki hayatımızı kolaylaştıran Windows Sidebar üzerinde yer alan gadget'lardır. Gadget aslında bir dizi html, xml, js ve resim dosyalarından oluşan
bir klasördür. Bu yazımızda sizinle birlikte dijital saat (her ne kadar dijital
saat tanımı gereği gizmo olsa da) gadget'i geliştireceğiz.
Öncelikle gadget'imizin yer alacağı dizine gidelim. Bunun için çalıştır'a aşağıdaki
dosya yolunu yazıp boş bir klasör oluşturalım.
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
Windows ile gelen varsayılan gadget'lar Program Files altında yer almasına karşın
biz sadece kendi kullanıcımız tarafından kullanılacak bir gadget oluşturacağız.
Gadget'i oluşturmak için en kolay yöntem'i uygulayacağız. Bunun için bir xml ve
bir html dosyası yeterli olacaktır. Öncelikle xml dosyamızı oluşturalım. Xml dosyasının
ismi gadget.xml olmak zorundadır. Windows Sidebar buna göre neyi yükleyeceğini bilmektedir.
Bir de aşağıda da görebileceğiniz gibi bu xml gadget hakkında bilgileri içermektedir.
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Sample Digital Clock</name>
<namespace>Microsoft.Academic</namespace>
<version>1.0.0.0</version>
<author name="Yunus Emre ALPÖZEN">
<info url="www.msakademik.net" />
</author>
<copyright>© 2007</copyright>
<description>My first gadget</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="digitalClock.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
Şimdi de gadget.xml dosyasında referans verdiğimiz digitalClock.html dosyasını oluşturalım. Bu kodun açıklamasını yapma gereği bile duymuyorum. Gayet standart bir html kodudur.
<html>
<head>
<title>Hello, World!</title>
<style>
body
{
margin: 0;
width: 130px;
height: 20px;
}
#gadgetContent
{
width: 130px;
top: 15px;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
</style>
</head>
<body bgcolor="black">
<table id="gadgetContent" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="black">
<img src="imgs/dg8.gif" id="hr1" />
<img src="imgs/dg8.gif" id="hr2" />
<img src="imgs/dgc.gif" />
<img src="imgs/dg8.gif" id="mi1" />
<img src="imgs/dg8.gif" id="mi2" />
<img src="imgs/dgc.gif" /><img src="imgs/dg8.gif" id="ss1" />
<img src="imgs/dg8.gif" id="ss2" />
<img src="imgs/dgpm.gif" id="ampm" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function fn_getTime(){
var hr, mi ,ss, am_pm, timeStr
now = new Date()
hr= now.getHours()+100;
mi= now.getMinutes()+100;
ss= now.getSeconds()+100;
if(hr==100){hr=112;am_pm='am';}
else if(hr<112){am_pm='am';}
else if(hr==112){am_pm='pm';}
else if(hr>112){am_pm='pm';hr=(hr-12);}
timeStr= ""+hr+mi+ss;
hr1.src="imgs/dg" + timeStr.substring(1,2) + ".gif";
hr2.src="imgs/dg" + timeStr.substring(2,3) + ".gif";
mi1.src="imgs/dg" + timeStr.substring(4,5) + ".gif";
mi2.src="imgs/dg" + timeStr.substring(5,6) + ".gif";
ss1.src="imgs/dg" + timeStr.substring(7,8) + ".gif";
ss2.src="imgs/dg" + timeStr.substring(8,9) + ".gif";
ampm.src ="imgs/dg" +am_pm + ".gif";
window.setTimeout(fn_getTime,1000);
}
//fn_getTime();
</script>
Tabi ki de bu örneği çalıştırabilmeniz imgs klasörüne sahip olmanız ve altında dg1.gif, dg2.gif... gibi rakamları içeren imaj dosyalarına sahip olduğunuzu kabul ediyoruz. Bu örneğimizi buradan indirebilirsiniz.
Sonuçta aşağıdaki gibi bir gadget'a sahip olacağız.
Aynı şekilde AJAX kullanarak dinamik içerik gösteren bir gadget da hazırlayabilirsiniz. Gadgetler ile yapabilecekleriniz hayal gücünüzle sınırlıdır :)
Hiç yorum yok:
Yorum Gönder