An Annotated Line of Business Application

MiniTutorialLogo

The Silverlight HyperVideo Player has met with strong support and interest. This mini-tutorial is the first in a series that will walk through the design and delivery of this project.

This series will pretend that the design existed before we began coding, and will not take you through its evolution over the months between December 2009 and March 2010. In short, this series is a “drop-line” exercise highlighting how the program works with a focus on teasing out general principles of creating mid-sized line of business Silverlight applications.

Understanding the Silverlight HVP

If a picture is worth a thousand words, a video must be worth an order of magnitude more. This video, created as part of the HVP sample set, explains the concepts behind the HVP.

Design Guidelines

I’m a big believer in diving right into the code, but I did want to mention just a few of the design/coding guidelines I imposed on myself when writing this, and we can explore their motivation, implications and outcome as we go:

Overarching message of the code: Silverlight is an application development framework: treat it like one.

  • Write Clean Code
  • Use Test Driven Development
  • Let the Design Emerge
  • Understand that the first version is just the launching point for subsequent versions
  • Community involvement (including design and coding) should grow over time
  • When possible, illustrate “best practices”

Getting Started

The premise of agile programming dove-tails neatly with the approach I’ve been advocating for two decades: get it working and keep it working.  I can’t claim any high minded values behind this; it is just what works for me. Worse, it is what I end up doing, even when I’m supposed to be doing design-first.  I simply can’t design in a vacuum and I get very tired and crabby when I do try to design in advance because it doesn’t work. It never works because

  • I learn more about how I want the design to be as I write code
  • Requirements change
  • The bigger the design, the more likely I am to get it wrong
  • Requirements change
  • The bigger the design, the more reluctant I am to change it
  • And requirements change

The old argument was “don’t paint yourself into a corner.”  On reflection, what I found was I was always painting myself into corners, but if I only painted for a few minutes before fixing the problem I was a lot better off than if I’d spent all day at it.

Emerging Design

I love the term emerging design because it sounds so much better than “figure it out as you go.”

We’ll come back to the most effective technique I know of for making all this work in large complex applications when we talk later about Test Driven Design, but let’s get started.  Here is what I know:

  • I want the program to be created from independent components, and MEF will provide a great solution to that.  MEF is non-trivial, however and I don’t want to deal with anything that complex until I have something working.
  • Creating a media player is lots of fun, lots of folks have done it, most of the implementations suck. There are Microsoft folks working on an open source solution (The Silverlight Media Framework that they, for some bizarre reason, refer to as the “Smurf”) that not only doesn’t suck (except its acronym) but is really good.  Let’s use that.
  • MVVM is hot stuff.  Moreover, it’s hot stuff for all the right reasons. Let’s use that.

The First Thing To Get Working

One of the premises of “Emerging Design” that I like  a lot is this: don’t design anything until you’re going to implement it.  Do not say to yourself “I know I’m going to need this, so let me put in all the hooks I’ll need.”  Reason: when you predict what you’ll need, you are usually wrong. Work done today does not save you work later, but work not done today may never need to be done at all.

In that spirit, the first thing to do is to create an application that has the Silverlight Media Framework player in it, and get that working in a very simple page.

I’m going to re-create the source bit by bit, and make that incremental source available with each mini-tutorial (see bottom of this posting)  but please understand that these are not the versions that I created the first time. I’ve condensed the process here to facilitate focusing on what matters, and to reduce confusion. You can find all my dead-ends, mistakes and changes of heart enshrined in the source code history here.

Since adding a SMF is a well documented and short set of steps, I’ll just take my lead from the SMF documentation and create a simple Silverlight Application named HVPT1 (Tutorial 1). That will create two projects: HVPT1 and HVPT1.web.  The startup project will be HVPT1.web, the startup page will be HVPT1TestPage.aspx and the first Silverlight page will be in the HVPT1 (client side) project, the file mainpage.xaml

Getting the SMurF Libraries

For the SMF to work, we need the four SMF libraries, which can be downloaded from here, as well as the IIS Smooth Streaming Player Development Kit which is available here.  The Smooth Streaming Player Development Kit (SSPDK) is unpacked by double clicking on the downloaded .exe.  Place all five DLLs (the four from the SMF and the unpacked SSPDK into the same directory.

In HVPT1 add a reference to all the DLLs except SilverlightMediaFramework.data.dll and then replace the header of HVPT1.MainPage.xaml with the following:

<UserControl x:Class="HVPT1.MainPage"
    xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="640"
    d:DesignHeight="480">

Note that the second line declares a namespace alias “p” that refers to the Microsoft.SilvelrightMediaFramework.Player.  You can now declare the player and its source, which must be a streaming media file. Here’s the entire .xaml file:

<UserControl x:Class="HVPT1.MainPage"
    xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="640"
    d:DesignHeight="480">

    <Grid
        x:Name="LayoutRoot">
        <p:Player>
            <p:CoreSmoothStreamingMediaElement
                AutoPlay="True"
                SmoothStreamingSource="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest" />
        </p:Player>
    </Grid>

</UserControl>

Build the application and watch the streaming movie. There is nothing more satisfying than getting something (anything) working!

SMurF

SaveBlue


Download the source code

This work is licensed under a Creative Commons license.
Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in HyperVideo Player, Mini-Tutorial and tagged , . Bookmark the permalink.

8 Responses to An Annotated Line of Business Application

  1. That’s a genuinely impressive answer.

  2. Bobbo says:

    Always refshreing to hear a rational answer.

  3. Sam says:

    Jesse, is Microsoft planning to add a certification for Silverlight anytime soon?

  4. daro says:

    Hi,

    I have copied your code, and it doesn’t work. I heve this error:
    Error 1
    The tag ‘CoreSmoothStreamingMediaElement’ does not exist in XML namespace ‘clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player’

  5. Pingback: uberVU - social comments

  6. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #573

  7. Pingback: Tweets that mention An Annotated Line of Business Application | Silverlight Geek -- Topsy.com

Leave a Reply

Your email address will not be published.