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!



Comments

Popular posts from this blog

A Good Day

I have a beautiful small house in the hills. It is about 3 km from Manali, in Himachal Pradesh. It is not much. Probably calling it a cottage is stretching it too far. I have got a couple of bedrooms, a small drawing room cum kitchen where we dine as well. There is storage and a small garage that is mostly empty. I have got another small room with just a single bed and a study built on the first floor. It is just about ten feet by ten feet but it has got a retractable ceiling and a wall made of glass with the rest of the roof being something of a balcony. This is the place where I like to spend most of my time.
In the front, there is a garden with some flowers in the front and trees lining the boundary wall. My mother has planted a few vegetables in the back that we regularly use in the kitchen. We mostly require only rice and eggs from the market.

A typical day starts with me waking up and going for a morning stroll. I often spend my nights in the room on the roof. So the first thing I…

The suffocating roadblocks and dead end jobs

Life throws new challenges everytime you decide to do something new.

When you plan to try anything new, you area aware of the challenges that you are likely to face. But Life usually will have other plans. When you expect a right turn, Life will show you a left. When you least expect x to turn up at your door, you find y.

And then there is a dead end job.

This is one job that I at times enjoy. Because I get to work directly in the technologies that I like to work with. At the same time, I feel terrible about the senior management and my future prospects here. What is the worst is that I don't see any way out of this either.

It is not that I have not forwarded my resume over to the other firms. I have. But I have not received any meaningful reply yet. Any response that I have so far been able to elicit are of no interest to me whatsoever.

I feel I have to chalk out a path for myself again. Problem is, the task becomes more and more difficult with age. I can take less risk than I c…

My Little Wife

Amar choto bou chole bake bake... If you are looking for some meaning in the words written above - please stop. It is of no use.

This is a short dedicated to my wife whom I did not get to marry.

Being typically Bengali, she is puchu to me.

If you are reading this, please keep in my mind that I am not one bit drunk. And I don't particularly feel like writing either. This you see here is not prose. Just an open faucet. Or a gaping wound sp... okay. Scratch that. Open faucet it is.

She has got a small round face. Her eyes are symmetrical. A bit like almonds. They look lively and restless when open and calm or serene when closed. The nose is neither pointed not large. It sits right in the middle of the face with even elevations on both sides. It is not too small to notice nor is it too large to get in the way. Her lips are small, but not thin. There is an amount of volume to them that you would not usually expect.

Her face looks normal something from a distance. It looks small from c…