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

Burhan Wani – The man and his mission

Burhan Wani – The man and his mission The death of a young ‘hero’? On the 8th of July, Burhan Muzaffar Wani died in the Valley of Kashmir. Thousands poured out on the streets to commemorate his services to the movement that he had come to symbolize of late. The relative calm of the region was shattered with curfews, killings and allegations of human rights abuses. His father was proud for the services his son had offered in the name of their faith, convinced that he would go to Heaven. Amidst all this, the romantic ideals of a young boy, just off his teens began to shake up the youth of the entire country, both in and beyond India. There is a lot of unrest in the Kashmir Valley recently, especially in the aftermath of the death, nay execution of Burhan. All of this is not unexpected in any way. In fact, this was foreseen. Even his glorification, his elevation to the status of a martyr in the service of Islam does not come as a surprise to me.
There is a section of the media and a sig…

Letters, open and counters

In this Information age, the opinions of people are shaped by the discourse that happens in the media – the newspapers, the internet forums, the videos that are shot, the letters, open letters and counter letters. A vast majority of them are full of half-truths and that is not surprising as every side has skeletons to hide. The problem arises when a gullible population (read Indians) digest these printed words both offline and on as the ultimate Truth without question. Secondary sources and even imaginary accounts becomes Gospels to be used to shut anyone who dares to oppose the mainstream discourse.
The Quint has recently published an open letter by a veteran soldier of the Indian Army named Major Gaurav. They apparently waited for a counter to that which was furnished by a Wasim Khan, a ‘Kashmiri’ who now is settled in Mumbai and runs a successful media agency (not surprising). So before we go into braindead blaming attempts, let’s analyze the two pieces one by one and check the m…

The Man and the Qu'ran in Bangalore

I stayed for 3 years in Bangalore. There were places I loved in the city, places that I liked and a few places that I hated. There were also places about which I cannot make up any opinion at all.

Among them was the Jumma Masjid on the Dispensary road. This is not to be confused with the more famous Trust by the same name that is close by.

The area around is always busy and the commercial street is also close. The markets were always full of customers, shopkeepers sold exotic items. Just a few hundred meters and you could also visit the markets selling lots of stolen goods, though the shopkeepers often deny that and then wink to show that they were bluffing. It is a fun place for a man to be in, a bit scary for many women, except in a crowd.

Anyway, I always found the place inviting in a peculiar way, the nearby Salafi mosque preaching the evils of other religions, the stench of the urinals, the cheap stolen goods in the market, the prostitutes on the road, the hustle and bustle of t…