Tuesday, March 9, 2010

MIX 10 Tweets Widget on Windows Phone Marketplace

If you are heading to MIX and want to see what’s going on a great way to do this is follow a twitter feed. People that use twitter add something called a hash tag to their tweets about MIX. You can search for tweets with the #MIX10 has tag and you can keep track of events. Since you may not have your laptop with you at all times a phone is a great way to track this. Even better a Windows Mobile phone. To make this even easier, I built a simple widget you can download and install a free widget via Market Place for Windows Mobile and install it on your Windows Mobile 6.5 phone. Just search for MIX10 Tweets.

This Widget is now available on Windows Mobile Marketplace and can be downloaded on your phone by searching for it in the Social Networking category.

Here’s an overview of the MIX10 widget that can easily be customized and published to follow your own events.

A unique GUID for this widget, it can be generated with Visual Studio. This needs to be an attribute of the widget node.

content

Add a src attribute that references the HTML for you the widget.

icon

Add a src attribute that reference the 32x32 PNG file to be used as a launcher icon in the Windows Mobile Start Menu

name

Name to be used in the Windows Mobile Start Menu

description

A description to be displayed when the widget is installed on the device

author

Your name, email and a link for a web site.

version

Version of your widget

access

If you need to access the internet as we do for our widget, add the attribute network=”true”

That’s it, pretty straight forward isn’t it?

favicon.png

This is the icon referenced in our manifest file with the <icon> element, it needs to be a 32x32 PNG. Nothing too special here.

index.html

Our widget is really a very simple HTML page, a grand total of 71 lines. I’ll assume you know a little about HTML, CSS, JavaScript and jQuery so I won’t go into too many details. If not just practice your bing-foo and do a little searching.

Here are the highlights that make up our widget:

We are using JQuery so we have to download that from the internet. We are pulling it from the Microsoft CDN at the URL "http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js”

After the page is loaded we call an init() function in the <body> tag, we do this rather than using JQuery to make our startup call in case we aren’t on line and can’t load JQuery.

Immediately we call performUpdate() which will update our tweets, we also call window.setInterval(performUpdate,30000 /*ms*/) so that the screen is refreshed every 30000 milliseconds or 30 seconds.