Sharovatov’s Weblog

Exploring Windows Desktop Gadgets

Posted in IE8, javascript, widgets, windows 7 by sharovatov on 27 May 2009

With this post I’m starting a series of posts about one great Microsoft technology – Windows 7 Gadgets. I’ve already created an introduction post earlier and I recommend you to read it to find out the history of desktop gadgets. But now I will describe the technology, its theory and practice in more detail.

First of all, let’s get our hands dirty and create a simple gadget.

Creating a simple gadget

One of the things that was always bothering me was checking comments to my blog entries. There’re usually two ways to check for new comments on your blog – either by subscribing to comments RSS feed or by going to admin web-interface of the blog and checking for comments there. I don’t like first option because I’m subscribed to more than a hundred feeds in my Outlook so I only read them at the weekends when I’ve got enough free time. And I don’t particularly fancy logging to my blog every three-four hours to check for new comments. So Windows 7 Desktop Gadget with my blog comments feed would perfectly suit my needs.

Although this might not sound as a killer app to you, but it does its job and also perfectly shows how simple it is to build a gadget.

First of all, as I’ve already said, Windows 7 Gadget is nothing more than just a HTML page with Javascript and CSS. So I use the same approach as if I had to parse my blog comments on a website – a simple HTML, a bit of CSS and a bit of AJAX. So gadget building comes down to building a client-side web-app and packing it.

Creating a web-app

I created a simple page with a pretty straight-forward javascript. If you take a look at window.onload js code, you’ll see the following:

window.setInterval( function(){ getRSS(url); }, 5*60*1000);

meaning that every five minutes getRSS function is called.

This is the “main loop” of our program. As our gadget is a desktop program written in javascript and since  Javascript blocks UI when being executed, setInterval/setTimeout is the only one way to set the “main loop”.

That’s how the javascript in this web-app works:

  1. getRSS function creates XMLHTTPRequest object and sends HTTP GET request to http://sharovatov.wordpress.com/comments/feed/.
  2. wordpress responds with XML file containing last ten comments from my blog
  3. parseRSS function parses the XML and passes the resulting object to displayRSS which just dumps it to document.body

It takes 15-20 minutes to write such a tiny piece of code. So now we’ve got a small web-application which is a very basic version of RSS reader.

As you may notice, the script doesn’t work on sharovatov.ru. Cross-domain security restrictions is a reason for that – the script is located on one domain (sharovatov.ru) and it tries to request data from another domain (sharovatov.wordpress.com). However, if you save main.html page and rss.js file to your machine, run main.html from IE8 and confirm JS execution, you will see the comments feed displayed.

As we’re done with functionality, it’s time to convert our small client-side web-app to a gadget.

Converting to a gadget

All we need to do now is to add a special manifest file. It’s just an XML file with your gadget description. Here’s mine.

That’s all. Now we pack these three files into a zip archive and rename its extension to .gadget. Here’s a link to what I came up with. Save it as test.gadget and double-click on it. If you then confirm gadget installation prompt, it will appear on the screen and the feed is downloaded and displayed.

That’s the basics of creating a gadget, if you feel interested, read MSDN or follow my posts – I will keep on writing about gadgets and in the next post I’ll show what my comments reader gadget will look like eventually :)

This is the screenshot of a 20-minutes job:

image image

Every five minutes the gadget is updated so I can clearly see whose comment is the last one and reply if needed. Very handy :)

Stay tuned and we’ll proceed.


Share :

About these ads
Tagged with:

7 Responses

Subscribe to comments with RSS.

  1. [...] Original post by Sharovatov’s Weblog [...]

  2. [...] Follow this link: Exploring Windows Desktop Gadgets « Sharovatov's Weblog [...]

  3. progg.ru said, on 28 May 2009 at 5:09 am

    Exploring Windows Desktop Gadgets « Sharovatov’s Weblog…

    Thank you for submitting this cool story – Trackback from progg.ru…

  4. [...] Original post by sharovatov [...]

  5. [...] Exploring Windows Desktop Gadgets  [...]

  6. Адриан said, on 3 May 2010 at 12:15 am

    Очуметь просто! Уже все, блин, уже в курсе, кроме меня :)

  7. where to buy manolo blahnik said, on 11 February 2013 at 8:35 am

    Good blog you have here.. It’s hard to find excellent writing like yours nowadays. I truly appreciate people like you! Take care!!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: