Windows Mobile Widget 101 – A Gadget Side Note

As I’ve mentioned in a previous post it is quite easy to take your Windows Mobile widget and convert it into a Windows Vista/Windows 7 gadget. In this post I’ll take the Hello World widget I built in the Getting Started and Start Menu Icons posts and walk through converting it into a gadget.

Gadgets are almost identical in structure to widgets, with one exception. Instead of a config.xml manifest file, gadgets use a gadget.xml file. So, the first step in converting your widget is to add a gadget.xml file to your project. Here is a sample file that mirrors the information I used in the config.xml file for the widget.


<?xml version="1.0" encoding="utf-8" ?>
  <name>Hello Gadget World</name>
  <author name="Built to Roam">
    <info url="" text="Built to Roam" />
    <logo src="icon.png" />

  <copyright>Copyright (c) 2009 Built to Roam.  All rights reserved.</copyright>
  <description>This is a sample gadget that says Hi to the world!</description>
    <icon width="90" height="90" src="icon.png" />
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Main.htm" />
      <platform minPlatformVersion="0.3" />

Of course, you now need to modify your build to include this file. Now you have two options here, you can either build a single compressed file and simply change the extension between .widget and .gadget depending how you want to use it. Alternatively you can make your build slightly more intelligent:


cd .HelloWorld
del ..helloworld.widget /Q
..7za.exe a -tzip ..helloworld.widget -r0 @..files.txt
copy ..helloworld.widget

cd .HelloWorld
del ..helloworld.gadget /Q
..7za.exe a -tzip ..helloworld.gadget -r0 @..gadget_files.txt
copy ..helloworld.gadget

This build file now makes use of a file called gadget_files.txt which contains the file specific to building the gadget (ie includes gadget.xml and not config.xml).



You can now run the build batch and it will generate a .gadget file.  Double-click this file under Windows Vista or Windows 7 and it will install and run your gadget.  Unfortunately you’re likely to see something like the following:


This happens because the gadget dynamically sizes to fit the content, which means that if you don’t specify a height or width for the gadget you get very minimal space allocated to it. This is simply fixed by adding size information to the body tag of the Main.htm file.

<body style="height:200px;width:200px;border:1px solid #000000">

Now if you build and run (ie double-click on the gadget file) the gadget you will see the following:


And there you have it – your widget is running as a gadget.  Now there are some additional features of gadgets that we aren’t using here but I’ll come back to them as we get into adding more functionality to the widget.