Skip to main content

Make a gadget

Creating gadgets for Windows is very easy. So easy, in fact a class 8 kid can make them, provided he knows basic stuff like HTML, JavaScript and CSS. Even then there are issues that are faced when you start doing things the first time. So I may just be able to get you started. By the end of it, you will probably say to yourself that this was just sooooo easy.

First thing first. You must know HTML, CSS and basic JavaScript, otherwise what I will write here will look like Sumerian to you. So if you wish to take a look and brush up your skills, here are the links to go. I'll wait.



Yes I am a particular fan of w3schools, mainly because they have got a code testing playground, invaluable for immediate testing and experimentation

Now that you are ready, lets get started.

The Bare Layout of a Windows Sidebar Gadget
A gadget is simply a webpage with its scripts, stylesheets and everything, only that it is zipped into an archive such that the .zip extension is smartly changed to .gadget. So if you already design webpages, all you need to know is how to create a manifest file and zip everything into a .gadget file. A manifest is nothing scary, just a file that contains data about the data or metadata. It will contain information like who you are, who programmed it, the name of the gadget, the HTML file to be used, the version number and all the information you want to share, all in neat tags. I'll come to that later. 

So, now the bare layout is this,

Basic layout of a Windows Sidebar gadget
Yes, this whole thing is compressed into a zip archive and the extension is changed to .gadget.

So first let us create the Webpage

HTML

I intend to keep this very very simple. So lets create a simple HTML. But wait, I don't like those Hello World programs. So lets make something simple, but still pretty cool.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <style type="text/css">
    </style>
    <script>
      <!--
      //-->
    </script>
  </head>
  <body>
   </body>
</html>

Now that's a skeleton HTML. So I will add a style, a script, javascript that is and some page elements.
First lets write the javascript.

JAVASCRIPT

function runChrome() 
var shell = new ActiveXObject("WScript.shell"); 
if (shell)
shell.run("chrome.exe"); 
return true;
else
{
alert("Google Chrome is not installed on your system."); 
}
}


Pretty simple. Just getting some help of the Windows Scripting Host. It just fires chrome.exe, provided it is installed, otherwise a nasty alert will popup on the screen.

CSS

In this very basic example, I don't feel like using an external CSS file. But for more serious projects, it is almost a rule to keep CSS files in their own directories and sourcing them from the HTML code. But here our CSS code is too basic to warrant any extra attention.


<style type="text/css">
body
{
       margin: 0;
       width: 133px;
       height: 133px;
}
    </style>
Just setting the size of the gadget and nothing else.

Now it is safe to go back to the HTML.

HTML


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <style type="text/css">
body
{
       margin: 0;
       width: 133px;
       height: 133px;
}
    </style>
    <script language="JavaScript" src="js/chrome.js"></script>
    <script>
      <!--
      function roll(img_name, img_src)
    {
    document[img_name].src = img_src;
    }

      //-->
    </script>
  </head>
  <body background="images/bg.png">
    <table border="0">
      <tr>
        <td>
<img height="128" src="images/background.png" onclick="return runChrome()" name="sub_but" 
onmouseover="roll('sub_but','images/newBackground.png')" 
onmouseout="roll('sub_but','images/background.png')" 
onmousedown="roll('sub_but','images/background.png')" 
onmouseup="roll('sub_but','images/newBackground.png')">
</td>
</tr>
    </table>
  </body>
</html>

Let's name it mychrome.html

Now look carefully, I have inserted an extra javascript inside as well. It just has a function roll that just accepts the name and source image as parameters and sets them to the tag owner. Such one line functions are useless and shorthands are prefereable but here I still felt like mentioning. 

The rest is simple and self explanatory, call the mouse action events and pass the parameters to the function. Ofcourse, make sure you have the images as seen in those pngs.

Now just create the XML file such that the name of the HTML is mentioned exactly in the XML like this.

XML


<?xml version="1.0" encoding="utf-8" ?>
<gadget> 
<name>myChrome</name> 
<namespace>Sarthak Ganguly</namespace> 
<version>1.0.0.0</version> 
<author name="Sarthak Ganguly"> 
<info url="http://sgownblog.blogspot.com" text="Vist my blog" /> 
<logo src="images/logo.png" /> 
</author> 
<copyright>&#0169; 2011</copyright> 
<description>Chrome launcher application gadget with Metro UI</description> 
<icons> 
<icon width="128" height="128" src="images/logo.png" /> 
</icons> 
<hosts> <host name="sidebar"> <base type="HTML" apiVersion="1.0.0" src="myChrome.html" /> <permissions>Full</permissions> <platform minPlatformVersion="0.3" /> 
</host> </hosts> 
</gadget>

Now just zip everything. A <filename>.zip is created. Now rename it to <filename>.gadget. The icon will immediately change and you will have your gadget ready. For example download this gadget and see the interiors by just extracting it.


Hope you enjoyed reading this article. Please share if it helped you. Happy Coding!



Popular posts from this blog

Salesmen of God

Christian evangelicals are similar to parasites[1]. The similarities are simply astounding. Among all predatory religions, Evangelical Christianity has done, by far, the greatest harm to humankind[2]. Like leeches, the Evangelical sucks the lifeblood of an unchristian society till it descends either into chaos and incessant civil conflict or the relegation of the culture to the pages of history(Bowden, 1985). Even in the 21st century this unashamed activity continues(Bhosle, 2003).[3]
Evangelicals usually have a similar methodology when it comes to proselytization. Like parasites, the target is usually one belonging to the most vulnerable section of society. This does not necessarily mean that they try harvesting only the most down trodden of the society(Kelly, 2001). And most certainly, the objective is never the upliftment of the persons involved. The target groups may, for example, belong to ethnic minorities, refugees (both economic and political), caste groups, the poor and the si…

Ali The Kargil Boy

I met Ali in the Leh airport,he drove us in our hotel. The very next morning we went for sightseeing. He used to drive very fast. I repeatedly told him to drive slow, he followed for  a short time; again continued in his own speed.
On the way to Nubra valley the road was very stiff and the altitude was very high. As I was sick before our tour it was difficult for me to bear that fast ride.After coming back I complained our tour  operator for his driving and asked for another driver.




Our tour operator assured me that he would tell him to drive  comfortably.The next day Ali came drove the car and I enjoyed my entire remaining  trip.
Sometimes he used to push the accelerator and I just told "Ali.....ahista"...he became consous. We used to chat during this long drive. I asked him "How old are you Ali?he replied "22years mam."He told me "At the age of 16 I started driving without lisence,I used to drive big vehicles ,now I drive tourist cars during the seas…

When birds come home

It is mid March in Mumbai. It is supposed to be hot and humid. As it usually is all the year round with monsoon and December exceptions.
But it's cloudy today. To be fair, yesterday was also cloudy but today is dark. As dark as it usually is just before a downpour. It may rain and I don't have an umbrella with me. It's not that a change of weather is bad. I like rains. But the suddenness is rather strange.
I am not the only one confused with the weather change. The birds seem to be totally messed up by the onset of darkness. It was about 9 AM in the morning. The birds had just perched on the trees for their daily routine. The cloud came. They possibly understood that to be the beginning of the evening and end of day. Next thing I know, I see hundreds (yes, literally hundreds) of birds rushing back to their nests.
This is not a unique scene. I have seen this umpteen number of times in the monsoons. This is the first time I have noticed it in March (as far as I can remember) an…