Getting started with widgets on Windows Mobile 6.5

  • Artykuł

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

Comments

  • Anonymous
    June 03, 2009
    Hi If Im going to create an application for WM6.5 and add it to the program's start menu. How large images should I have in the icon for the application so it looks nice? I currently have 64x64 as max size in the icon and it looks pixelized. So what icon sizes should I include in my app?

  • Anonymous
    June 04, 2009
    Depends on the device, the recomended sizes are (This is comming from the marketplace guideliness). 36x36@96 45x45@96 64x64@96 60x60@128 60x60@192 90x90@192

  • Anonymous
    June 04, 2009
    Thank you, this was nice and easy! Is there a reason why Widget Icons are not showing up on WM 6.5 Standard? I have the screen shots of that in my review of WM 6.5 Standard, here: http://tinyurl.com/WM65SRev1

  • Anonymous
    June 04, 2009
    Yes, unfortunatelly the standard start menu only supports ICO files (not PNGs or JPGs like the PPC one)... to make things a little bit more commical, because of a bug that could not be fixed on time, PPC does not support ICOs for widgets... Even though this is kinnda weird there is a solution that makes it all work... just include both! on the manifest file, just add <icon src="icon.png/><icon src="icon.ico"/> (the png should be listed first)

  • Anonymous
    June 04, 2009
    That does not look like it worked for built-in Search Widget: Here is it's own manifest: http://geekswithblogs.net/images/geekswithblogs_net/campuskoder/WindowsLiveWriter/WindowsMobile6.5StandardReview_9751/image_52.png And this is how it looks like: http://geekswithblogs.net/images/geekswithblogs_net/campuskoder/WindowsLiveWriter/WindowsMobile6.5StandardReview_9751/image_40.png

  • Anonymous
    June 04, 2009
    The search widget .ico file is malformed on the emulator image (it has pngs inside rather than bmps), just try it with some other icon and it should be fine

  • Anonymous
    June 04, 2009
    About the installer issue (where you can install the same widget two times) make sure you give your widget a unique id (it has to be a well formed URI) ex <widget version="1.0"        xmlns="http://www.w3.org/ns/widgets"        id="http://mysite.com/coolwidget1"> THis is important since we use that field to see if the widget is already installed or not and to check the version number in case the widget is to be updated

  • Anonymous
    June 05, 2009
    Please tell me that Widgets can be installed onto the device's storage card :)

  • Anonymous
    June 05, 2009
    For the moment widgets can only be installed on main memory

  • Anonymous
    June 05, 2009
    Just moved our X1 panel sources into a the widget structure.   Our implementation navigates to urls that are on our main website.  On the X1 that was not a problem since the container was really the browser.  However in the widget world once the user taps an external url they leave the widget container and go into Pocket IE. Is there anyway to navigate to web urls without leaving the widget container? I just started playing with this stuff so perhaps I missed something.

  • Anonymous
    June 05, 2009
    Officially can't navigate inplace to any URL inside a widget... that said, I'm pretty sure you can  by using an iframe to load web content to. use it with care though because ee did not test this scenario.  Also, navigation on smartfons will probably be broken because there is no visible cursor  on widgets.

  • Anonymous
    June 05, 2009
    Hi..Im amazed of d people bhind computers..Pls help me about my n6600 phone..I forgot my locked code for my phone's mmc.. I cnt open it..How cn i open my mmc?Pls help

  • Anonymous
    June 07, 2009
    Just posted on referencing a sample activex control from your widget: http://community.softteq.com/blogs/nick/archive/2009/06/08/extending-the-widget-model-on-windows-mobile-6-5.aspx

  • Anonymous
    June 08, 2009
    information regarding widgets on windows mobile is really very helpful for people like me, good post, keep doing it more. thanks regards www.247mobilesnews.com

  • Anonymous
    June 08, 2009
    Few more information that I wanted to know abt Widget Capabilities.

  1. Access to GPS device of the phone, so that Location aware application can be developed.
  2. Access to multmedia codecs of device. For capture and playback of multimedia content.
  3. Access to messaging features of the device so that Messaging application can be developed which can handle particular type of sms.
  4. Access to file system. Comments are highly appreciated.

  • Anonymous
    June 09, 2009
    I've got stuck on a funny problem: WM 6 SDK supposes it is installed on the C: drive. More precisely it can be installed elsewhere, but can't be used unless it is on the C: drive. Solutions such as using subst etc do not work. What can I do if I do not want to reinstall my PC?

  • Anonymous
    June 09, 2009
    I want to know that if i want to code something in C, how can i link it to my  widget. Somehow i m more comfortable with c/c++ than Java Script

  • Anonymous
    June 10, 2009
    The comment has been removed

  • Anonymous
    June 11, 2009
    Thank you for such a great post I would share this

  • Anonymous
    June 12, 2009
    Hello.. I just copy your code in the folder and zipped them into a wgt file.but when i run the zip file in the WM 6.5 Image.It told me is not Compatible with this device.. Can you tell me why? it's really strange.

  • Anonymous
    June 12, 2009
    I haver seen that happen when you zip the folder rather than just the file. please open your zip file and make sure all the files are in the root/

  • Anonymous
    June 12, 2009
    thanks i solve that problem. but i think it's not support for Chinese Zh-cn right? because if i change the description to chinese, it can not install. Thanks so much.

  • Anonymous
    June 12, 2009
    ASPX is not supported right now.. if ASPX is supported in the mobile device as a widget, i think it will be more powerful. It here just supported static page right now? only html and javascript?

  • Anonymous
    June 13, 2009
    The comment has been removed

  • Anonymous
    June 13, 2009
    Hi, I'm not too sure if anybody has asked this yet, but what about windows mobile 6.1... I just bought the htc touch hd( and in my opinion is an iphone competitor) which uses this ops. and lo and behold i find this blog for a windows mobile version higher than what i thought was the latest ops system for Microsoft phones. So here's my question will the widgets work on my phone or will Microsoft release an update to allow widgets.

  • Anonymous
    June 14, 2009
    Hello I solve that problem but it seems config can not support Chinese,but im not sure for that.because i'm always write the code in English :),so just forget it. And i saw that blog yesterday and you can see i'm writing some alticles on Chineses on How to build WM application with widget.but i think it's a little bit compliate read data with ajax 4 and data ent because most of us are using standard javascript or JQuery or other js lib build web application. BTW,how can i get more document about the template of blind data?i read that blog and i know it's read from server and it's a template.but i'm really can not understand why should i write like that. thanks so much,sorry for my poor english.

  • Anonymous
    June 16, 2009
    is there a way to connect the Emulator to the internet so that I can test it with connecting it to and Exchange server?

  • Anonymous
    June 16, 2009
    It looks like Widget doesn't support Regular Expression if i write code like var reg = new RegExp("<"+ele+">.*</"+ele+">","g"); It won't works...

  • Anonymous
    June 16, 2009
    it looks like no way to connect to data except using ajax 4 and wcf,make a easy widget complicate.. and also XMLDom is not support in the widget engine. how could i parse the XML file?

  • Anonymous
    June 17, 2009
    vaugnh - I used the method described in http://javascriptkit.com/javatutors/re.shtml for regular expressions and that seems to work, hope that helps. tomz - Widgets support XMLHttpRequest wich allows you to connect pretty much to anything, Also, you can use DOMDocument to parse XML (http://msdn.microsoft.com/en-us/library/ms534370(VS.85).aspx) Nick - You can connect an emulator to your internet connection using ActiveSync following the instructions on my post to cradle the device (this will share the host internet connection) or, if you are connected to an internet router or corporate network then you can give the emulator a network connection by  going to the emulator properties menu (File->Configure...) and the selecting the "Network" tab, in there you should select the first checkbox and select ok.  Note that you need VirtualPC 2007 installed for this to work.

  • Anonymous
    June 22, 2009
    Can someone can post a link to a widget project file?! that would help m ea lot to start! THX

  • Anonymous
    July 09, 2009
    The comment has been removed

  • Anonymous
    July 09, 2009
    Hi! my name is edgardo panchana, i have a problem, when i try to install the widget in my device this show me a message telling me that this is not compatible? can anybody help me? i have the windows mobile 6.5 OS in spanish. Thanks!

  • Anonymous
    July 11, 2009
    I'm having a lot of problems to install this software in my mobile...

  • Anonymous
    July 13, 2009
    The comment has been removed

  • Anonymous
    July 13, 2009
    Hi: How can I read the address list of the phone? Is widget not able read the content in file system? Thank You~

  • Anonymous
    July 23, 2009
    FuzeMobility just created an amazing list of 50 widgets! more details in here: http://mobilespoon.blogspot.com/2009/07/free-windows-mobile-65-widgets.html

  • Anonymous
    July 25, 2009
    Great post,  thank you! I'm wondering about installation though - you say the widgets installer is disabled by default - that seems odd! So how can I deploy a widget (as CAB? maybe) wich will a) enable the widget installer and b) start the install of the widget without the user having to go through all these steps? Thanks!