Bryant Likes

You may have noticed the new look for the Twilight Twitter Badge on my blog a few weeks ago. I wanted to add a few new looks for the badge and got one of them done but then decided I need to spend some more time on it before releasing it because I didn’t like the way the code was turning out. There were a couple of things I didn’t like:

1. The code was too tightly coupled to the views/skins. This made it hard to add new views/skins without duplicating code.
2. The views/skins weren’t blendable at all.

To start my rework I began with this post by the Expression Blend/Design team on simulating sample data in Blend. The post is a very simple yet workable solution for displaying design time data in Blend so that you can work on the layout of your application. The only change I made was how I detected design mode. After playing around with that sample I decided that to implement this in Twilight I would need to switch to a Model-View-ViewModel approach so I started doing some research into using this approach with Silverlight. In my research I came across this post by Ryan Keeter on using MVVM in Silverlight. It was a nice simple explanation that made sense to me so I set out to combine the expression team example and this MVVM example.

What I ended up with is pretty close to MVVM. I say pretty close because I don’t think it fully fits since the ViewModels hook into some of the Views Storyboard events and also control the Views VisualState transitions. Maybe that fits into MVVM, but it probably breaks some of the rules. However, for this tiny application it makes things a lot easier. I still have multiple Views per ViewModel and the Views have zero code which is what I really wanted.

There are two ViewModels that I’m using: ListViewModel and RotatingViewModel. Then on top of these two ViewModels are four Views: Default, Large, Small, and Tiny.

ListViewModel Views
Default View	Large View

The ListViewModel is for views where there is just a list of tweets while the RotatingViewModel is for views that display a single tweet at a time.

RotatingViewModel Views
Small	Tiny

You can switch between these views by setting the mode initParam equal to the view you want (example: mode=tiny). The Tiny view looks like the twitter counter badge but then pops the bubbles over the surrounding content. This is done using the windowless = true parameter and absolute positioning. Right now the Silverlight will float over the content below it even when the bubble isn’t showing, so you won’t be able to click through to that content. I might be able to figure out a better way to handle it, but for now that is a known limitation.

Since now all the view logic is in the ViewModel, writing tests is a lot easier. I’m still using the same Silverlight test framework, but thanks to this post by Justin Angel I added a few more complex tests using his WaitFor extension. The test coverage is still very light and I’m not testing the views at all, but I feel like I’m starting to get testing in Silverlight.

I’ve also added another option for hosting Twilight on your blog. You can now host it via Silverlight Streaming using an iframe. Add the following HTML to your page:

<iframe src="http://silverlight.services.live.com/invoke/232/Twilight1.5/iframe.html?username=[your username]&count=10&mode=small" scrolling="no" frameborder="0" style='width:200px; height:175px'></iframe>

** Hosting it via Silverlight Streaming doesn’t support the Tiny mode since the Silverlight won’t be able to expand outside of the iframe.

In addition to hosting it via Silverlight Streaming, you can always self-host it or use the xap I have hosted on dreamhost at http://twilight.bryantlikes.com/twilight.xap. If you’re already using the hosted version, you can switch the mode by using the mode initParam as I mentioned above.

Hopefully this will serve as a great twitter badge for your blog and also a decent example of MVVM in Silverlight along with some unit testing examples as well. Feel free to join the project on Codeplex and create your own views. I am still working on at least one more version that will make the colors tweakable and maybe even detect what colors should be used based on the surrounding html.

I just pushed a minor update to Twilight that you can now download on the codeplex site (version 1.1). I really wanted to allow the xap file to be hosted on other servers since many bloggers don’t have the ability to host their own xap files. After reading Scott Barnes’ post about replacing his header with Silverlight I decided I would take a similar approach. Instead of using a callback or trying to get the data directly, Scott followed Jonas’ post on using Yahoo Pipes to proxy data to Silverlight. I took the same approach and during the process refactored some of the code by moving all the data logic out to a separate set of classes. Now when the xap loads it checks to see if it can access the Html Bridge and makes sure it is on the same domain. If it is then it will just use the standard Twitter callback method, otherwise it uses the yahoo pipes proxy I created.

The pipe I created simple takes a username and the number of tweets to return and grabs the twitter xml. I then use an HttpRequest in my code to get this xml from yahoo formatted as json which matches up to the json that I was getting from Twitter with the exception that there are a few wrapper objects I have to go through to get the tweets. I also moved all the update logic out of the page class and into the base data provider class since that made a lot more sense.

I think the new code makes it much cleaner and the end result is you can now just stick the object tag up on your blog and leave the xap hosted on my server if you’d like. Here is the html you can use for the hosted version:

<div id="silverlightControlHost">
  <object id="TwitterBadge" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="200" height="400">
    <param name="source" value="http://twilight.bryantlikes.com/Twilight.xap"/>
    <param name="minRuntimeVersion" value="2.0.31005.0" />  
    <param name="initParams" value="username=bryantlikes,count=10" />
    <div style='position:relative;'>
      <a style='z-index:0;' href='http://go.microsoft.com/fwlink/?LinkID=124807' style='text-decoration: none;'>
      <img src="http://twilight.bryantlikes.com/twilightNoSilverlight.png" alt="Get Microsoft Silverlight" style='border-style: none'/> </a>
     <div style='font-family:Arial;font-size:10px;position:absolute;top:230;left:10;width:175px;'>
      by clicking "Install Microsoft Silverlight" you accept the <br />
    <a href="http://www.microsoft.com/silverlight/resources/License.aspx?v=2.0">Silverlight license agreement</a>
  </div>
  </div>
  </object>
  <iframe style='visibility:hidden;height:0;width:0;border:0px'>
  </iframe>
</div>

Today I had my first sighting of Twilight in the wild over at Denny Boynton’s Blog.  Very cool!

This afternoon I put the Twilight source code up on CodePlex. Twilight is the Silverlight Twitter Badge that I created from my AgFeedReader Mix 10k contest entry. You can download the source and I also packaged up the Xap file along with support files if you don’t want to bother with the code.

I haven’t been able to get it to work when the xap isn’t hosted on the same server as the page itself, so for now there is no hosted scenario. Perhaps I’ll have to create some other proxy like Silvester uses. If you have any good ideas feel free to suggest them or better yet contribute to the project.

In my previous post on the subject I wrote that I was using the LinkLabel control to create the text with the linked embedded in it. There was also an external WrapPanel control that came with the LinkLabel source. However, in the end I switched to using a custom wrap panel that was based on the Silverlight Toolkit WrapPanel but was a much lighter version (I only need horizontal wrapping). I also found another issue with the LinkLabel control and after spending some time trying to fix it I decided that it also was overkill for what I needed. So while I used some of the same ideas I ended up writing some new code to handle this (I did credit both of these projects in both the source code and on the codeplex page).

I also gave the Silverlight Unit Test Framework a try and the source code includes a test project. This was my first real experience with the framework and I definitely found it very useful. If you haven’t used it before I highly recommend Jeff Wilcox’s introduction post on the framework. It was very easy to use and I actually found a few bugs in my code through my tests (I didn’t do full TDD on this project but next time I think I will). When you run the test project it loads up right in the browser and runs the tests. I didn’t do very much UI testing, but I did test my wrap panel implementation by using the TestPanel that is part of the framework. That allowed me add TextBlocks and measure their size to determine how big my panel should be. Then I added an instance of my panel to the TestPanel to test it. This feature is very nice since measuring doesn’t work right unless the child is actually in the control tree, that that alone makes the test framework worthwhile. Even better was the fact that I didn’t have to modify a single line of code in my real project in order to allow the test framework to work. Well done!

I also did some work to create a decent install experience after reading Tim Heuer’s several posts on the subject. If you don’t have Silverlight installed you will get an image that looks like the actual application but has a prompt to install Silverlight. I didn’t spend much time on this part, but it is a lot better than the big giant button you normally would get.

There is still lots of room for improvement and I would like to figure out the remote hosting option as well as create some cool animation for loading. But for now it is a very light weight (13k) Silverlight Twitter Badge.

Enjoy!

When Twitter first came out I signed up but never really caught on until recently. I finally figured out that you really need to follow some people first to get the hang of it. Now I enjoy using Twitter and read peoples tweets using Witty, a WPF Twitter client. Even though I only have a few followers, it still feels like you’re part of a bigger conversation since your own posts get mixed in with the posts of people you’re following.

So now that I’m using Twitter I wanted to put my latest tweets on my blog. Twitter provides a flash based Twitter badge and an HTML version as well, but since I’m a Silverlight developer I thought it would be cool to use Silverlight. I came across Silvester which is a Silverlight Twitter Widget and looks great, but I wanted to create a widget/badge that didn’t require a proxy server.

For my entry in the MIX 10K contest I created a Silverlight feed reader that would allow you to subscribe to a bunch of feeds and it would keep them updated and stored your subscriptions in isolated storage. Since you can’t actually access most feeds directly (unless the host has a client access file which most don’t) I used the Google Ajax Feed proxy to grab all my feeds. This worked great because Google has a client access policy that allows you to get the content plus it puts it all into a single format and returns it as json. All I had to do was generate classes in my application to mirror the object structure of the json and then use a DataContractJsonSerializer to deserialize the json into objects.

So when I started on my Twitter badge I basically took the AgFeedReader project and removed the isolated storage and the feed subscription interface. I really only needed a single feed which I would set using an InitParam. I was able to get my twitter feed using the Google Ajax Feed Proxy, but that proxy only returns the last four items from the feed and omits a lot of the rich data that Twitter provides. So I decided to try another approach.

I started by looking at the script that is part of the Twitter HTML badge. The key was the script they provide to get the feeds which includes a callback parameter. You call the json script and add a callback=YourJavascriptFunction. So in my Silverlight application I add two scripts to the page: the first is the Twitter Json script and the second is a stub javascript function that calls back into my Silverlight application. This gets around the security issue which prevents you from downloading the json directly.

Now back in my Silverlight application I get passed in a ScriptObject which is the json. This ScriptObject is really just an array of Tweets, but since it is an array I actually have to manually convert it to my .Net objects. There is a good MSDN page here that describes all the rules for the interop between javascript objects and .Net objects. Below is my method that gets called from Javascript:

The twitList is my ListBox and the Tweet class is a .Net class that I created that mirrors the json returned by Twitter.

In order to display the Tweets I wanted to not just have text but have clickable links. The Silvester Twitter Gadget has a very nice LinkLabel control that will allow you to have a text area with clickable links. So instead of reinventing the wheel I just used that in place of my normal TextBlocks from the AgFeedReader project. I did change one line of code but for the most part it worked perfectly.

Anyhow, it is a pretty standard Twitter Badge right now, but that is only a few hours of work and I’m hoping to add a few more features to it. I’m hoping to put the xap along with some javascript helper files up on a server somewhere so that anyone can add it to their blog, but if you’re interested let me know and I’ll try to get it done this weekend. If you’re reading this through a feed reader, head over to my blog and you will be able to see the Twitter Badge in action.