Vista Gadgets are created using XML, HTML, CSS and Javascript, so if you are familiar with all these technologies, you won't have any problem.
OK, now I am going to guide you through the steps of creating a very simple Windows Vista Gadget that displays the current time based on your computer's clock.
So let's first start by creating a new folder with the name of your gadget, in our case let's call the gadget MyClock. Under our root gadget folder, create two folders one named css and the other one named js.
Vista Gadgets use a XML file as a descriptor for the gadget, so let's create a new file under the gadget root folder called myclock.xml with the following content:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>My Clock</name>
<namespace>com.mycompany.myclock</namespace>
<version>1.0.0</version>
<author>
<info url="www.mycompany.com" />
<logo src="logo.png" />
</author>
<copyright>MyCompany © 2009</copyright>
<description>Windows Vista Gadget to check the current time.</description>
<icons>
<icon width="80" height="80" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="myclock.html" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>
In the gadget manifest above we are saying that our gadget is named My Clock, we are also providing information about the author and most importantly we are saying that this gadget is going to reside on the sidebar and that the base point is the file named myclock.html.
As you can see, in the manifest we are referring to two images: logo.png and icon.png. The file logo.png is used when displaying the author information inside the Vista Gadgets directory, it is generally your company's logo, and icon.png is used on the Vista Gadgets gallery to describe the gadget, it is basically the gadget's icon. For these just create a couple of PNG files and place them on the gadget root folder.
For more information about the gadgets manifest check http://msdn.microsoft.com/en-us/library/aa965879(VS.85).aspx
Our next step is to create a Javascript file where we are going to place all the necessary Javascript code to create and to display the clock. Just create a new file under the js directory and name it myclock.js and add the following code to it:
var clockContainer = "";
function gadgetSetup(clockId) {
clockContainer = document.getElementById(clockId);
setClock();
}
function setClock(){
var mytime = new Date();
var hours = mytime.getHours();
var minutes = mytime.getMinutes();
var seconds = mytime.getSeconds();
var label = "AM";
if (hours > 12){
label = "PM";
hours = hours-12;
}
if (hours == 0) {
hours = 12;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
clockContainer.innerHTML = hours + ":" + minutes + ":" + seconds + " " + label;
setTimeout("setClock()", 1000);
}
Now that we have the necessary Javascript code, let's create a new file under the root folder named myclock.html, this file is the main HTML file that acts as base point for the gadget.
Now that you have the HTML file created, add the following code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="css/myclock.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/myclock.js' charset="utf-8"></script>
</head>
<body onLoad="gadgetSetup('myclock');">
<div id="myclock" class="clock">
</div>
</body>
</html>
In the HTML file what we have a DIV tag that is going to hold the clock, also we are saying that when the page is being loaded, call the gadgetSetup function that we previously defined in myclock.js.
Now we have the HTML and the Javascript code to display the clock, but we haven't done much to make it look nice, so let's create a new file under the css directory and name it myclock.css. Add the following code to this file:
body {
margin: 0px;
width: 120px;
height: 50px;
border: 2px solid #000;
}
#myclock {
width: 120px;
height: 50px;
background: red;
color: FFF;
text-align: center;
padding: 20px;
}
We are giving the gadget a size of 120px by 50px and we want to make it red and the text is going to be displayed in white.
Ok, we now have the main contents of our vista gadget clock, so how we install it? Very simple, take all the contents of the gadget root folder and compress it into a zip file named MyClock.zip, change the compressed file extension from .zip to .gadget and double click on the file. Windows Vista will recognize the .gadget file as a Vista Gadget installer and it would ask you if you really want to install this gadget, so click yes.
You should now see your new gadget on your sidebar. If you want you can drag it out the sidebar and put it into your desktop.
Hope this helps!!
No comments:
Post a Comment