Windows Mobile 6.5 – Part VII: Hello World Widget

How often do you get to pick a Blank Solution at the start of a tutorial? :)

Add a new HTML file: this will be for the markup that describes what your widget looks like.

Add a new XML file named config.xml: this will be the manifest – the description of what the widget framework should do with the files in the widget package.

I borrowed the “next menu” arrow icon from Windows DVD Maker which is a PNG file just like we need (found in C:\Program Files\DVD Maker\Shared\DvdStyles\Sports).

 

Remember: go back to the config.xml and change the Icon Element:

   <icon src="NextMenuButtonIcon.png"/>

Now we need to ZIP the folder that contains our files. Since I have already forgotten where it was saved, I used this feature:

OOPS: NO ICON!

I dragged the PNG file from Windows Explorer into Visual Studio’s Solution Explorer, but the drag & drop didn’t copy the file.

OK: manual action: go copy that PNG file into your solution folder. You should have four files:

We don’t need the solution file, but we’ll ignore it for now.

As per the instructions, packaged widgets are just ZIP files, so create a ZIP of the files in your solution folder:

DO NOT DO THIS:

NOTE 0: The files must be in the root of the ZIP file. If you select the folder and use “Send to… Compressed folder” they end up in a subfolder inside the ZIP.

NOTE 1: From what I’ve read, the name of the ZIP file only matters if you don’t specify the name in the config.xml file. I like things neat…

NOTE 2: The extension of the file should be .ZIP, but to make it a widget, rename the file to have the extension .wgt.

NOTE 3: In the default configuration of Windows 7, the file extension is hidden for known file types (extensions with program mappings).

Remove the check mark from “Hide extensions for known file types” in the dialog found under Tools | Folder Options in Windows Explorer:

 

Now at this point, Windows no longer knows the file type, but Windows Mobile 6.5 does: copy the WGT file into the emulated mobile device’s My Documents folder:

In the emulator, open the start menu, File Explorer

I had to use the keyboard to scroll down:

 

If you zipped the whole folder instead of just the files, you will get this error: “Sorry, this Widget is not compatible with this device”.

If all went well, you should see this:

In the config.xml file we requested internet access, but the user has control:

And then we see Hello Widget World:

After you exit you can again find it on the Start menu:

Congratulations, you are on the road to Widget Wealth! :)

Special thanks to Jorge Peraza for politely pointing out the ZIP’d files vs. folder issue – yes, I made that mistake even though he tells us clearly on his blog entry.