Allowing Easy Deployment Of Silverlight View Model Applications
Link: Live Demo
Much has already been written about the Silverlight View Model pattern, that allows a programmer to create an application that has absolutely no UI (user interface). The programmer only creates a ViewModel and a Model. A designer with no programming ability at all, is then able to start with a blank page and completely create the View (UI) in Microsoft Expression Blend 4 (or higher). If you are new to View Model, it is suggested that you read Silverlight View Model Style: An (Overly) Simplified Explanation for an introduction.
The previous articles cover the scenario where an in-house application has its View altered. Only one version of the View is deployed at a time. However, there is another scenario, a desire to allow an end user the ability to create their own View, and/or to deploy more than one View at a time. To understand how this works, we only need to look at the "skinning" employed by any modern Content Management System (CMS). For example, we can look at DotNetNuke.
How DotNetNuke Does It
With DotNetNuke, an end-user can go to a site like Snowcovered.com, and buy a skin for their website.
They simply download a .zip file, and using an administration interface, they upload the .zip file...
... and apply the skin to their site, to give it a completely new look.
Easy Deployment Of View Models
As we have covered in Simplified View Model Style – A Total Design Change Of Your Application With No Code, View Model is more than just skinning. With View Model, we can completely change the Design, and the entire flow of a Silverlight Application without changing a line of code.
What we need is an easy deployment mechanism that allows an end-user, or 3rd party, to create a View for a Silverlight application, and just drop the resulting .xap file in the ClientBin directory of the Silverlight application, and have it applied, by simply selecting it in a dropdown.
That scenario was covered in the article: MEF Simplified: Using The Managed Extensibility Framework to Dynamically Load a Silverlight .XAP
Using MEF to Dynamically Load Different Versions Of A Video Player
For this article, we have created an application that performs these functions:
- Determines what .xap files (custom video Players) are in the ClientBin directory, and displays them in a dropdown
- Uses MEF to dynamically load the selected custom Video Player
- Provides a shared ViewModel that each custom Video Player will use that:
- Uses web services to determine what Videos are in the Videos directory
- Retrieves the selected Video and plays it
Note, the code for the video player is covered in: View Model Style: Silverlight Video Player (part 1) and View Model Style: Advanced Silverlight Video Player (part 2).
Creating A Custom Video Player
With MEF, each project that you want to dynamically load must be unique. You can't just change the name of the .xap file or the .dll assemblies contained inside. Each Silverlight application must truly be unique, or MEF will think that it has already loaded it, and will not load it again (even if you programmatically instruct it to). We need to start with a base project.
You can get a copy of this project here.
We create a new Silverlight Application and add it to the solution.
We add the references required for the application, as well as a reference to the View Model Project (SkinableVideoPlayerViewModel).
If we build the project at this point, we see that the size for our custom Video Player is about 463 KB.
However, if we set all the references to Copy Local = False, and build again...
We see the size has been reduced considerably, to 4 KB. This is why we also separated the View Model into its own project. Doing that allows us to not include it in the .xap of the custom Video Player.
Note that the custom Video Player will now only work if:
- It is launched by the main project.
SkinableVideoPlayer, using MEF
- The main project,
SkinableVideoPlayer, has a reference to any assemblies needed by the custom Video Player
MEF can only work its “magic” if the required assemblies are loaded (Copy Local is set to "True") by another .xap before they are needed. In this case, that .xap is the SkinableVideoPlayer.xap, and as you can see in the screen shots above, it is still a hefty 488 KB because it DOES contain all the required assemblies.
However, without MEF, we would be forced to load the SkinableVideoPlayer.xap at 488 KB AND the VersionOne.xap for an additional 466 KB. If we have 4 players that we want to load, it would be a 488 KB hit each time. Using MEF, we only need to load 16 KB for all 4 players rather than 2330 KB. That is more than a 97% reduction, that translates into a faster load experience for the end user. For more information on this subject, see the article at this link.
We delete the existing MainPage.xaml file (and it's code behind) and create a View folder, and add the MainPage.xaml (and its code behind) from a working version of the Video Player.
We then open up the files we just imported, and fix the namespaces so they match the name of the current project.
We build the project, and we now have a working version of the Video Player.
You can get a copy of this project here (If you want to make your own custom player, this is the project you should use).
A Designer can now completely re-design the Video Player using Expression Blend.
When they are done, to deploy it, just take the small .xap file and drop it into the ClientBin of the main project and refresh the web page.
The Custom Video Players
We decided to make a few custom Video Players, to provide it with this article. Note in each case, the Designer is working with the exact same View Model and they are not changing any code. Their final deliverable is a small .xap file that contains their player.
Haruhiro Isowa
The "Watch the Video not the UI" skin.
Concept: minimalist and hide UI as much as possible
This skin will hide the UI as much as possible. Menus will appear on mouse hover and playback is controlled by clicking on the video screen in a set region.
On mouse hover over the menu will show; allowing to see video list, volume, and progress
Clicking on left side of media rewinds,
Clicking on right side of media fast forwards
Clicking in the middle of media will pause
This is accomplished by having an invisible rectangle in front of the video that responds to the mouse events.
Michael Washington (The Phil Middlemiss Theme)
The only reason I created a player at all, was that I needed at least two players to create the code.
Please note, Phil Middlemiss has no knowledge of this Video Player at all, so if you do not like it, it is not his fault. However, I named it after him because I used a resource library he created.
First, I went to his site and downloaded his sample project.
I took the ChromeGlass.xaml file from his project. That file contains all his styles. I simply placed the file in my project and built the project.
I was then able to right-click on each element that he had a style for, and simply apply the style.
All this took about 3 minutes.
How It All Works
- Web Project
- Contains two web services
- Returns a list of Videos in the Video folder
- Returns a list of .xaps in the ClientBin folder (except the SkinableVideoPlayer.xap)
- Launches the SkinableVideoPlayer.xap that contains the main application. It launches the custom Video Players using MEF. For a full explanation of the code, see this link.
- Main Player Project
- This is the source code for SkinableVideoPlayer.xap. This is also the project that has all the references that the custom Video Players need. Note, a Designer can add references to additional assemblies that are not referenced by the main project, but they will need to set Copy Local to "True" for those references.
- SkinableVideoPlayerViewModel
- This is the shared ViewModel for all the custom video players. This project does all the "work". It also contains the code that calls the web service method that gets the list of videos.
- All the custom Video Players reference this project.
Imagine A World In The Silverlight
With View Model, programmers have had to get used to the odd feeling, of creating a program, that has a UI, that they have nothing to do with. Now software companies will sell software that will have a UI that they have nothing to do with.
Yet, everything will still work!
Technologies such as MEF, combined with patterns such as View Model, combined with tools such as Expression Blend, make a powerful combination. For example, you will be able to buy an accounting application, and have a Design company, analyze your business, and re-design the application's View.
They will even be able to provide a different View tailored for each employee. If an employee knows how to use Expression Blend, they can design their own View without fear that the underlying business rules will be affected. The View Model simply won't allow you to do anything incorrect, and only the View is being altered not the View Model.
Silverlight is more than just another Rich Internet Application (RIA) format, it is a basis of an revolution in software design, and deployment.
Further Reading
