blogs | Michael Wolf

Friday November 16, 2007

Silverlight Twitter Badge

Like allot of the web, a couple of us at Cynergy got addicted to twitter a while back. Yet, the only blog badges they supply are Flash based. So I decided to attempt to see how silverlight 1.1 would do in this very common scenario. So I present to you the Twitter Silverlight (skinnable!) Badge.



Plus, I couldn't help but make a mix branded silverlight twitter badge to celebrate the mix 08 announcements.

Silverlight for web Gadgets/Badges: the good and the bad
While I show how some of this is done, let’s look at 2 sets of roadblocks. We all know Silverlight 1.1 is in Alpha, so there are still allot of things in flux. Some of these things I'm hoping stay and get expanded , others get fixed.

BAD
Silverlight 1.1 restricts access to any resource, aside from media, to the site of origin aka no cross domain access. This is very restricting in several ways. First the most obvious, you can't connect to any web service json / xml / rest outside of your host, without creating a bridged service. So there is currently no way to hit the twitter api, or any other api for that matter, without deploying some asp.net/php/java/ror code to your web server. To solve this problem, for the Badge I just made up a simple http handler that did something like this (but obviously not this :) ).

       string content = string.Empty;
       string url = context.Request["url"].ToString();
       
       WebClient client = new WebClient();
       content = client.DownloadString(url);

       context.Response.ContentType = "text/xml";       
       context.Response.Write(content);        

Thus rewriting the twitter xml api as if it we're coming from our site. Simple enough, but obviously not something Johny can paste into his MySpace profile. Which leads us to the next complication of the cross domain issue. A silverlight 1.1 app must download the dll's which make up its meat from the same domain. So even if you got silverlight to hit a JavaScript proxy to then hit the api, I'm not sure you could get around the dll's being cross domain. So where as would normally drop in some javascript or an object tag for this kind of Badge/Gadget in flash or ajax, you know have to use an IFrame to embed the Silverlight Badge.

<IFRAME 
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 200px; HEIGHT: 320px; BORDER-RIGHT-WIDTH: 0px" 
src="http://dotnet.cynergysystems.com/silverlight/twitter/Gadget.aspx?twitterid=mix08&version=mix" 
frameBorder="0" 
scrolling="no"
></IFRAME>

Most community sites will strip out iframes from content, for obvious security reasons. Thus limiting your potential audience to folks who can use your fancy new gadget. I'm fully expecting these cross domain issues to be sorted out before go time. Ideally we should be able to not only call Web services and content from trusted domains, but also the dll's and loose xaml.

Good!
Ok enough with the bad, let’s see some good. The way that the xaml is so separated from the logic of a user control is pretty sweet. It allows for very clean separation of concerns. Which then makes things like "skinning" pretty easy. So for example in the Twitter Badge, we can load in a skin based off of the version from the server.

	HttpWebRequest request = new BrowserHttpWebRequest(new Uri(string.Format("{0}Skins/{1}.xaml",AbsoluteUrl,version)));
	HttpWebResponse response = request.GetResponse();
	FrameworkElement element = this.InitializeFromXaml(new System.IO.StreamReader(response.GetResponseStream().FirefoxClean()).ReadToEnd());
	Root = element as Canvas;

This xaml could also be pulled from any place, database, webservice, seperate "skin" dll,even user input.

The designer of the skin needs only know what are the required object names and types. All they would need to do is open up the template in Blend, change the animations and over all experience, and Then pass it back to the producer of the gadget. They would just need to make the xaml available to the app, and Bada Bing new skin. This makes this process much cleaner, and opens up allot of possibilities.

Conclusion Silverlight 1.1 is shaping up to be a killer platform all around, not just for serious RIA work, but for the badge / gadget world.

Interested in using the badge or contributing a skin, give us a shout we'll see what we can do?