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
Hey Now Wolf Bytes,
ReplyDeleteNice Vid on the Win Mobile Train! Good to see some you & Nikita representing FLA. Good Post too.
Thx 4 the info,
Catto