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

My love affair with ThinkPads

I had never used a ThinkPad in my life till 2018. To be honest, I did not really see the benefit of using them anyway. Consumer series laptops (with plastic bodies) were the ones that I had always used before. Then I was introduced to the rugged looks of the T60 and T61 original IBM ThinkPad designs that came out way back in 2004 or so. And I loved it. Finding a ThinkPad that old did not appeal to me. I was impressed with the smaller compact X series laptops and decided to have either an X230 or an X220. Both of these are fairly similar and were launched about 8 years back. But they still sport good processors, plenty of memory upgradability, provision to add a maximum of three hard disks and a decent battery backup to boot. My reasons to get this were simpler -  They are rugged, I like to use my laptops well Memory is not soldered. There are plenty of options to upgrade. The keyboards are probably the best in the world. Why not get the latest ThinkPad? Again, simple.  They come with a

How To: Change Fonts On The 5800, 5233 etc

The font that comes with Nokia is nice. But after six months you are bound to crave for a new look to your phone. Now changing fonts on a phone is usually not an easy task, I mean that was how you must have thought. But you know what you can use custom fonts, yes any font of your choice on your Nokia phone without any software. All you need to do is copy and paste a bunch of files. No replacing of system resources necessary! First to increase your greed, I will post some screenshots, Screenshot Gallery o   Font Style Download o Another Font Style Now let me tell you how I did it. Procedure to apply new Fonts Connect the phone in the ‘Mass Storage’ profile to the computer. Alternatively, you can use the memory card reader. Goto the Memory Card, it shows up as a Removable Disk. Navigate to the ‘resource’ folder and open it. Copy the ‘Fonts’ folder into in. Eject the device and restart. You should see the new fonts applied. Procedure to apply your Fonts Ma

Reaching the peaks of my own stupidity or not

 I have never considered myself to be particularly intelligent. Though I have not had myself clinically diagnosed, anecdotal evidence and day to day activities amply demonstrate how stupid I am. Now wait. This does not mean I am indulging in self pity.  No. Far from it. I have had successes in life. I continue to do well in things that I love to do. I have no complaints there. It is just that I do feel my intelligence lacking. My success is, therefore, despite my stupidity and I take some pride in it. Of course defending the statement - 'I am stupid' is difficult. Especially without a test that ascertains the fact for certain. I will make a more nuanced statement as a result. I have less intelligence than the average person around me. That is a more defensible stance and there are tests (even other than IQ) to confirm it. Aptitude tests are a good example. I do horrible in them.  Okay, there is an exception - I got into IITB. But that was me trying for a third time. In any case