個人檔案The Martin Schray Way相片部落格清單更多 工具 說明

部落格


2月28日

Very, very basic Vista Gadget

 

Have you been wanting to build your own Vista Gadget, but didn’t know where to start?  I didn’t either, but after just a little research I built a simple (and ugly) digital clock gadget.  The source is attached and the instructions below will walk you through it.  It shows military time, but with very little work could be made to show AM/PM instead.

 

Here is what it will look like in the sidebar

 

Instructions:

 

1.       To use it just hit the Windows Key and R.  This is open the run prompt. 

2.       Paste in the following: %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets and hit enter.  This gets you to the directory where gadgets are stored.

3.       Create a directory called DigitalClock.gadget

4.       Place both files (below) in this directory

5.       Go to the sidebar and hit plus

6.       Look for a Gadget called Digital Clock and double click on it to install it in the sidebar

DigitalClock.html

<html>
<head>
 <title>Small Clock</title>
 <style>
  body {
   width:130;
   height:50;
  }
 </style>
</head>

<script>

function init()
{
 var timeNow = new Date();
 var hour = timeNow.getHours();
 var min = timeNow.getMinutes();
 var sec =  timeNow.getSeconds();


        //gadgetContent.innerText = sec;

 
 // pad with leading very if necessary
 if (hour < 9) hour = "0" + hour;
 if (min < 9) min = "0" + min;
 if (sec < 9) {sec = "0" + sec};

 gadgetContent.innerText = "Time: "+ hour + ":" + min + ":" + sec;

 window.setTimeout("init()",900);

}

</script>

<body onload="init()">
 <span id="gadgetContent" style="font-family: Verdana; font-size: 10pt;"></span>
</body>
</html>

gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Digital CLock</name>
    <namespace>Example.You</namespace>
    <version>1.0</version>
    <author name="Your Name">
        <info url="www.example.com" />
    </author>
    <copyright>2006</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="0.3" />
        </host>
    </hosts>
</gadget>

Windows Vista Gadgets

 
I have been playing a bit with Windows Vista gadgets and have built a couple of very simple ones.  I have made the following gadgets: digital clock, Free space on C:, and one to display my IP.  By far the most useful think that I have found is window.setTimeout("function", milliseconds).  This lets you call another method after a number of milliseconds expires.  By have the method you are callling call windows.setTimeout again you can easily setup a timer, which is handy in things like a clock or a gadget that needs to check the amount of disk space every minute.