Windows Gadget To Display VWorker Recent Open Projects

Thursday, January 26, 2012
Naveen Kohli

Windows7 Gadgets

Download Gadget For Vworker Recent Projects (22.07 kb)

In this post I will discuss how to write a Windows 7 gadget. It has been long since I wrote a gadget. This week I was looking at putting some scroll view of freelance projects from vWorker web site. They have a piece of HTML code that you can put on your web site to show latest open projects in a scrolling view. When I am working on some project or executing some other tasks on my desktop, then I do not any web site open. I want to have a view of latest open projects on side of my big desktop view. So, developing a gadget made more sense to me. So in this past I will share that gadget with all of you who use VWorker for doing freelance work. And I will show steps to write this windows gadget as well.

Develop Windows Gadget

If you are considering Windows gadget development, then I will strongly encourage to read Microsoft documentation on gadget framework. It will give some good basic background on gadget development. Here are steps that you will need to follow to write a simple Windows gadget like I wrote for displaying latest open freelance projects on VWorker site.

Create a folder with name same as what you would your gadget to be named. For example I create a folder named VWorkeLatestProjects.gadgets
Create a 64x64 image (recommended size by Microsoft) that you would like to use a logo for your gadget. This is the logo that will show up in Windows control panel UI when you look at available gadgets on your machine.

Create a XML file named Gadget.xml in this folder. This file will contain manifest of your gadgets. In simple terms, this file contains all details about your gadget. This file does not contain implementation of gadget itself. Following is how my file looks like.

<?xml version="1.0" encoding="utf-16"?>
<gadget>
  <name>VWorker Recent Projects</name>
  <namespace>microsoft.windows</namespace>
  <version>1.0.0.0</version>
  <author name="ByteBlocks.com">
    <info url="http://www.byteblocks.com" text="Byteblocks.com"/>
    <logo src="logo.png"/>
  </author>
  <copyright>
    © 2012</copyright>
  <description>See latest open projects at vWorker.</description>
  <icons>
    <icon width="64" height="64" src="icon.png"/>
  </icons>
  <hosts>
    <host name="sidebar">
      <autoscaleDPI><!--_locComment_text="{Locked}"-->true</autoscaleDPI>
      <base type="HTML" apiVersion="1.0.0" src="VWorkerLatestProjects.html"/>
      <permissions><!--_locComment_text="{Locked}"-->Full</permissions>
      <platform minPlatformVersion="1.0"/>
      <defaultImage src="drag.png"/>
    </host>
  </hosts>
</gadget>

As you can see from this file content, it lays out blue print of the gadget.

Now comes the implementation of the gadget. There is an entry with tag name BASE that defines the entry point for implementation. You will notice that I have set it to VWorkerLatestProject.html. What this means is that when gadget loads it will load up this HTML file. So, add an HTML file in your folder that is going to be entry point. Following is snapshot of contents of my HTML file.

<html dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="css/vworkerlatestprojects.css" rel="stylesheet" type="text/css" />
    <title>VWorker Latest Projects</title>
  </head>
  <body id="VWorkerProjectFeedGadget">
  <g:background id="VWorkerFeedBG">
  <div id="feedbody">
  <iframe id="VWorkerFeedIFrame" frameborder="1" scrolling="no" width="150" height = "300"
        src = "http://www.vWorker.com/RentACoder/misc/LinkToUs/ScrollingBidRequests.asp?
        txtWidth=150&txtHeight=300&blnHideChannelSubscribe=true&
        blnLaunchLinkInNewWindow=true&blnFullTitle=true&txtBgColor=white">
		Your browser does not support inline frames...However, you can click 
		<a href="http://www.vWorker.com/RentACoder/misc/LinkToUs/ScrollingBidRequests.asp?
         blnHideChannelSubscribe=true&blnLaunchLinkInNewWindow=true&blnFullTitle=true">
		here</a> to see the related document.
		</iframe>
  </div>
  </g:background>
  </body>
</html>

As you can see, implementation is just like developing a regular HTML page. For my gadget it was as simple as putting IFrame content for VWorker site into my HTML page. So you can see how I included that IFRAME tag inside g:background tag of this gadget.

Yes, that was the whole implementation of this gadget. It is ready to be deployed and used.

Deploying Windows Gadget

Deployment of windows gadget is very simple. You just need to copy your gadget folder at either of following two locations depending on scope and visibility of this gadget.

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets (for user gadgets)
%SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets (for global gadgets)

For example in my case, I want every user of may desktop to be able to see this gadget. So I copied it at following location.

C:\Program Files\Windows Sidebar\Gadgets\VWorkerLatestProjects.gadget

Adding Windows Gadget To Desktop

Once you have deployed the gadget, you can follow these steps to put the gadget on your desktop

On your desktop go to Control Panel > Appearance and Personalization. Or right click on your desktop screen.
There you will see option for Gadgets. Click on it and it will bring up dialog box with Gadgets installed on your machine. You will find your own gadget there was well.
Double click on the gadget icon you would like to install. It will appear docked to right side of your desktop screen.

Windows Gadget For VWorker Latest Projects

I have attached this gadget with this post. Download the zip file, unzip it in one of the two locations that I earlier specified and you will be good to go.