Getting started with widgets on Windows Mobile 6.5

Now that the Windows Mobile 6.5 Developer Toolkit is out, it is time to start writing widgets!!!

Necessary equipment:

1) The Windows Mobile 6.5 emulator images

2) The web development environment of choice

3) WMDC or Windows Mobile Device Center (on Vista or Windows 7) or ActiveSync 4.5

With that you should be ready to go to get started, the first step is to start the emulator and cradle the device. The emulators can be started from the start menu under the “Windows Mobile 6 SDK -> Stand Alone Emulator Images -> <Language>”. The device emulator manager can be started using explorer to navigate to the following folder “C:\Program Files\Microsoft Device Emulator\1.0” and selecting dvcemumanager.exe.

Once they are both started, open WMDC or ActiveSync and select connection options and, on the “Connect one of the following” combo box select “DMA” and click “OK”.

Now, on the “Device Emulator Manager” select “Refresh” and then find the emulator on the list, should be the GUID under others and right click -> cradle to connect it to the PC.

UPDATE: Thanks to Peter Nowaks for pointing this out, The emulator can be listed under the "Windows Mobile 6 Professional SDK" category, depending if you have the Windows Mobile 6 SDK installed or not... Just look for the "play" icon :).

Once that is done, select “Connect without setting up my device” and you should be ready to go, to test, open internet explorer on the 6.5 emulator and navigate to any site, if all is set up correctly it will navigate to it using our brand new browser.

And now.... the fun part begins!

To write a widget we need to follow three easy steps.

1) Develop your widget code

For this you can use the web development tool of your choice, but as an example we can start with something super simple, as follows (copy it into a widget.htm document)

<html>

<head>

    <title>Cool Widget!</title>

</head>

<body>

I'm a cool windows mobile 6.5 widget

</body>

</html>

 

2) Package your widget

Now we have our extremely functional widget code, now we need to create a manifest file (so the framework knows what to do with it) following the w3C widget standard for packaging and configuration (On 6.5 we support the December 22 2008 draft), but to make things easy, here is a small manifest, copy it into a config.xml file in the same folder as your widget.htm

<?xml version="1.0" encoding="utf-8" ?>

<widget version="1.0"

        xmlns="https://www.w3.org/ns/widgets"

        id="">

  <name>My first widget</name>

  <content src="widget.htm" type="text/html" />

  <access network="true" />

  <icon src="icon.png"/>

  <description>This is my first widget,

               it won't make a lot of money on the

               marketplace but at least is cute!</description>

</widget>

Don’t forget to also add an icon called icon.png on the same folder.

At this point, you should have three files (config.xml, icon.png and widget.htm), now we need to package them, on explorer, select the files, right click and send to a compressed folder (it is important to select the files and not the folder that contains them because we want config.xml to be in the root of the zip container). Now just rename the newly created zip file to “widget.wgt” and you are done with this step.

3) Deploy and run

On “Computer” you should see the cradled device emulator as “PocketPC device”

 

Use it to navigate to “My Documents” on the device and copy the widget file created in step 2 there. Now, on the emulator, open file explorer using the start menu and, listed there you should see your widget file, click on it.

This should start the installation process, once that is done you will see your very first widget on screen!!!

To continue playing with this widget (make it better, etc) you can find the uncompressed files on the “Program Files\Widgets\User\<WidgetID> folder" on the device.

The widget ID is generated at install time and it is an always increasing integer (therefore, the most recently installed widget will have the greatest number). You can replace, add, remove files here for testing at will; the only thing you need for a your widget to pick the changes up is to exit it and start it again, it will have an entry on the start menu.

I will be sharing more information about the widget API, how to extend the widget framework capabilities, debugging tips, best practices, etc in future posts but I wanted to help everyone to get started.

For now, you can also take a quick look at my TechDays session where I describe the API set and some of the capabilities of the framework. To access it you'll need to log into the Microsoft Tech Days site and search for MBL302 Windows Mobile Web and Widgets: Leveraging web technologies to build experiences for Windows Mobile.

Stay tuned, have fun and don't forget to share your thoughts... Also, before I forget, you can upload your cool widget creations to the Marketplace :), visit https://developer.windowsmobile.com for more information.

UPDATE: The MSDN docs are online https://msdn.microsoft.com/en-us/library/dd721906.aspx

Jorge Peraza