Make My Windows Mobile 6.5 Widget Into a Windows Vista/Windows 7 Gadget

Having shown how easily you can build a widget that wires up some data using Entity Framework, ADO.NET Data Services and the new Ajax4 javascript classes, DataView and DataContext, I thought that I would take a shot at getting my widget to work as a gadget on Windows Vista/Windows 7.  Essentially a gadget is very similar to a widget in that it’s a zip file containing HTML, css, javascript and supporting files (eg images). The two notable differences are that the file extension is .gadget and that the configuration file is gadget.xml instead of config.xml.

The steps for converting the previously created widget into a gadget are:

Step 1: Create a gadget.xml file

Add a new xml file to the ProductWidget web site and call it gadget.xml.  The contents should look similar to the following:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>AdventureWorks Product Gadget</name>
  <namespace>
http://www.builttoroam.com/ProductGadget</namespace>
  <version>2.0.0.0</version>
  <author name="Built To Roam">
    <info url="
https://blogimages.builttoroam.com/nick" text="Nick’s .NET Travels" />
    <logo src="BTRLogo.png" />
  </author>

  <copyright>Copyright (c) 2009 Built To Roam.  All rights reserved.</copyright>
  <description>Basic product gadget based on ajax 4</description>
  <icons>
    <icon width="64" height="64" src="BTRLogo.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Products.htm" />
      <permissions>full</permissions>
      <platform minPlatformVersion="0.3" />
    </host>
  </hosts>
</gadget>

Step 2: Make minor layout changes to ensure content is visible

Unlike a widget, where it will be rendered in full screen on the Windows Mobile device, a gadget needs to know what size to render itself.  A simple way to do this is to define the width and height on the body tag in the Product.htm file.

<body >image

Again, apologies for the awful design work.  You’ll also not that for some reason when you click on a category it doesn’t highlight the category or load the products associated with it.  Something in the Ajax4 library must be malfunctioning for it not to work properly as a gadget (any suggestions are welcome!!).

Leave a comment