MIX 10 Schedule Viewer – WinMo Widget & oData FTW!

Since building a Windows Mobile 6.5 MIX10 Twitter Widget was relatively easy, I decided to take on a bigger challenge, building a Schedule Viewer for MIX.  Why should the iPhone and MonoFolks have all the fun?  This widget is available on Windows Marketplace for Mobile. You can download the source here.

My first task was to identify a source of the schedule data, after a little scouting around I found that MIX published there schedule data via an oData feed.  You can read about the API here.  Once I figured that out it was a simple matter of pulling the JSON from the oData feed and then use jQuery to build up our screens, in total I have about 6-8 hours into this app, most of that was figuring out oData and the exact structure of the data.

Here are some highlights of the app

1. To figure out the data structure I used Fiddler to monitor the calls with oData.
2. After looking at the response text, I used JSON viewer to see the actual nodes of the data.
3. It looks like there might be a bug in the serialization of dates.  JSON Serialization should send the number of milliseconds since 1/1/1970 UTC.  It looks like the JSON serializer used for this feed sends the number of milliseconds since 1/1/1970 PST.
4. To get a better idea of how the oData queries are structured take look the source code.
5. If you copy these files to your local web server, you should be able to run the widget in IE7.0+

If you have any questions, please feel free to contact me

-twb

WinMo Twitter Widget StarterKit

Are you interested in building simple Windows Mobile Apps to monitor twitter hash tags?  Check out the WinMo Twitter Widget StarterKit. 

http://tweetviewwidget.codeplex.com

When I was out at a couple conferences last year, I seemed to always be searching on twitter hash tags to see what was going on.  I decided to built a simple widget that I could quickly open, see the latest “happenings” and close it back down.

For MIX10 this year, an app I built and published it to Marketplace for Windows Mobile.  I used this as a basis and created a simple starter kit.  Not only can this quickly create a widget to monitor hash tags it gives you a good idea of what’s involved with creating widgets.

Enjoy

-twb

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.

The files can be downloaded from: http://tweetviewwidget.codeplex.com

There are five files that make up our widget:

• config.xml – Manifest file that defines the structure of our widget
• favicon.png – Icon to be displayed within the Program Menu within Windows Mobile
• index.html – HTML that defines the content for our widget
• logo.png – A simple graphic to be displayed in our widget
• MIX10Tweets.widget – This is the package that gets deployed, it is really just a zip file that contains the four files where the zip extension has been renamed .widget

config.xml

Let’s start out with our Manifest file.  It’s simply an XML file.  Here’s the file for our widget

<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" version="1.0"
                   uid="DFCE1FCF-6349-4dae-951D-F77AB5DE99C2">
    <content src="index.html" type="text/html" />
    <icon src="favicon.png" />
    <name>MIX 2010 Twitter Updates</name>
    <description>Follow the Twitter hash tag #MIX10 for Mix 2010 live from Las Vegas.</description>
    <author href="http://www.TheWolfBytes.com" email="kevin@TheWolfBytes.com">Kevin D. Wolf</author>
    <version>1.0</version>
    <access network="true" />
</widget>

uid	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.
• performUpdate() will invoke the jQuery method $.getJSON to query Twitter for “tweets” that include the has tag mix10.  The URL for that is simply http://search.twitter.com/search.json?lang=en&q=mix10
• Next we just process the JSON returned from Twitter and display the results.
• We wrap the entire call with a try/catch so if jQuery didn’t get loaded or our call to Twitter fails we display an error message.

That’s it, our resulting widget will look like:

For a complete tutorial on how to build advanced widgets, check out this link on MSDN
http://msdn.microsoft.com/en-us/library/dd721906.aspx

-twb

South Florida Code Camp

I learned my lesson, I need to do a better job of scheduling my travels as to not interfere with Florida code camps.  It sounds like much beer was drank and a good time was had by all.

Credit @devfish for, ah, snapping the picture

Next on the agenda is Orlando Code Camp http://www.orlandocodecamp.com/. I heard a rumor that there might even be a room dedicated for Windows Phone 7 Series.  See you all there!

-twb