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.
—————–
gadget.xml
—————–<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Hello Gadget World</name>
<namespace>http://www.builttoroam.com/hellogadgetworld</namespace>
<version>0.1.0.0</version>
<author name="Built to Roam">
<info url="http://www.builttoroam.com" text="Built to Roam" />
<logo src="icon.png" />
</author><copyright>Copyright (c) 2009 Built to Roam. All rights reserved.</copyright>
<description>This is a sample gadget that says Hi to the world!</description>
<icons>
<icon width="90" height="90" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Main.htm" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>
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:
—————–
Build.bat
—————–cd .HelloWorld
del ..helloworld.widget /Q
..7za.exe a -tzip ..helloworld.widget -r0 @..files.txt
copy ..helloworld.widget ..helloworld.widget.zipcd .HelloWorld
del ..helloworld.gadget /Q
..7za.exe a -tzip ..helloworld.gadget -r0 @..gadget_files.txt
copy ..helloworld.gadget ..helloworld.gadget.zip
pause
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).
—————–
gadget_files.txt
—————–gadget.xml
Main.htm
icon.png
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.