Saturday, June 26, 2010

Advanced Silverlight Applications using the Managed Extensibility Framework

This week I had the pleasure of attending my first CodeStock event in Knoxville, TN. Let me start by saying it was an amazing event. I give many thanks to the attendees, for keeping it a strong and thriving community, the sponsors (including my company, Wintellect), the speakers, and of course the organizers. You can learn more about the event at the page I linked to above. I highly recommend it - great venue and setup, and fantastic people. I connected and made friends with many people in both the .NET and programming community in general.

X-Fit Sample Application

For my talk on advanced applications in Silverlight using the Managed Extensibility Framework, I built a sample application called "the X-Fit Sample Application." I often hear complaints that demos and blog posts focus on one screen and a button. I wanted to build something with more depth than that, and used that application for my presentation.

What does it demonstrate?

  • Region management
  • De-coupling of views and view models
  • Dynamic loading of XAP files on-demand
  • OOB (Out-of-Browser)
  • Recognizing out of browser and behaving differently
  • Loading a plugin from the file system
  • Messaging using MEF
  • "Tracing" using Debug
  • Debugging MEF parts (imports and exports)
  • ...and plenty more

You can click here to view: X-Fit Sample Application

The source code and slide shows from my deck are both available at this link:

Deck and source

To use the application, jump into it and fill out the information. You'll find the first example of dynamic loading because once you save the information, the additional tabs will load with some charts and graphs. If you close the application, then re-launch it, it will automatically detect your user (using isolated storage) and not show the set up screen again.

You can right click and install locally. If you access the BMR tab (graphs showing basal metabolic rate) you'll notice a help link for more information. In the web version, this will simply pop open a new window to a Wikipedia page. In the out-of-browser version, it will introduce a new tab and show the information inline using the web browser control.

The little "plus" and "x" demonstrate different features. The "x" simply throws an error. If you are viewing the application, you'll get a generic message. If you are debugging, it will show the debug dump information.

There is a "SampleApplicationData" project included with the main source. It will build but is not referenced in the project. If you click the "plus" sign, you'll get an open file dialog. You can then browse to the XAP for the sample data, and click it. When you then refresh the application, it will be loaded with "John Doe" and some sample data.

A second code stock example will create a XAP that you can right-click and download here: CodeStock Example (right-click and download). Click the plus, browse to the XAP, and then select it to see the CodeStock logo.

Obviously there is a lot more in the slide deck and in the source code. Understand I'm not trying to establish best practices - for example, the simple messenger may not be the right implementation if you have views that are short-lived (due to event references) and PRISM provides very robust region management "out of the box" you can use. The idea here was to demonstrate what is possible in a sample application that goes a little deeper than a view and a button.

Oh, and thanks to the Silverlight team for the Cosmopolitan theme.

Thanks again, everyone, it was a great experience and I hope to come back in the future.

Jeremy Likness