Thursday, December 16, 2010

A Silverlight MVVM Feed Reader from Scratch in 30 Minutes

I thought it might be useful for users (and potential users) of Jounce, MVVM, and Silverlight in general if I were to show the full process of building an application. When people ask me about how complicated MVVM is, I reply "it's easy when you know it and use the right framework." I hope this video illustrates that. I also find Silverlight in general to be an amazing technology because I can build a useful application so quickly. You'll see in the video I could have done it faster using short cuts, designer, etc. I am still waiting for someone to show me how to do the same thing in HTML5 in the same amount of time.

After recording this video, I noted two issues that have been corrected in the source and the example below. These would not impact the overall time but I did catch them only after I went live. Here are the fixes:

Text Update

In both FireFox and Chrome, hitting TAB won't advance from the text box properly as it does in IE, so the "GO" button never activated unless you clicked outside of the application. This is easily fixed by resetting the error state on a key press. In the XAML, I just wired a text change event:

<TextBox Grid.Column="1" Grid.Row="1" TextChanged="TextBox_TextChanged"...>

In the code-behind, I simply update the data-binding source:

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    ((TextBox)sender).GetBindingExpression(TextBox.TextProperty).UpdateSource();
}

The view model then gets this tweak to clear the errors to enable the button (it will put the errors back if you click and there is a problem):

public string FeedUri
{
    get { return _feedUri; }
    set
    {
        _feedUri = value;
        RaisePropertyChanged(() => FeedUri);
        ClearErrors(() => FeedUri);
    }
}

Missing Summary

For some reason IE brings back summary information, but Chrome and Firefox do not from the feed. Therefore, I needed to add this little fix to avoid a null object reference exception when the summary information is missing:

Summary = ConvertHtml(item.Summary != null ? item.Summary.Text : string.Empty)

Finally, in the video I typed "encode" instead of "decode" on the http utility. These are the only changes to the source and example below from what you see in the video.

RSS Feed Reader in 30 Minutes from Jeremy Likness on Vimeo.

You can download the source code here.

The finished product is here:

Enjoy!
Jeremy Likness

9 comments:

  1. I would like to see what you did, but I tested with 3 feeds and always get a "FeedURI [Async_ExceptionOccured] :(

    ReplyDelete
  2. It would help if you shared the feeds you are trying - the ones that I test work fine.

    ReplyDelete
  3. YouTube said the video was removed cause of its length. Could you please split it and reupload? I would realy like to see the process. Thanks a lot.

    Georg

    ReplyDelete
  4. Yes, I am working on Vimeo and will post it soon. Thanks!

    ReplyDelete
  5. Hi,

    None of them worked. For example:
    http://feeds.bbci.co.uk/news/rss.xml
    Actually the ones from your page work fine. Since I haven't seen the video, I have no idea what was your intention: should it work with external rss feeds, or just the ones with the "same origin rule"?

    ReplyDelete
  6. It should work on any valid RSS that has a cross domain policy allowing Silverlight. I purposefully didn't deal with the nuances of an out-of-browser application with elevated trust nor an application with a server proxy - the feed you gave doesn't have a cross domain policy. Here is an example of a public one that does:

    http://rss.cnn.com/rss/cnn_topstories.rss

    ReplyDelete
  7. Thank you. That was my guess. Waiting for the video, then I challenge myself for the JS version. Before starting that I wanted to know whether it's possible to do the same client-only solution in JS. But because the SL app also works just with same-origin/xdomain allowed feeds it's clearly possible to create a js app with the same functionality :).

    ReplyDelete
  8. Great! I'm looking forward to that, please post the link here when it's ready, will be great for people to see the comparison.

    ReplyDelete
  9. Doesnt work with your own feed any more for some reason.
    Anyway great post, great guidance/framework, which sparked off quite some discussion in the company i work for ... as it should since we build 'monoliths'.
    Thanks!

    ReplyDelete