This is the first part in a series of posts showing you how to refactor the Silverlight 3 TwitterSearchMonitor application with MVVM.

As mentioned at the start, in this series I am going to work through an example of taking the TwitterSearchMonitor example application, detailed on Tim Heuer’s blog, and refactor this code into an MVVM (Model-View-ViewModel) approach.

Along the way I will also show you have to take advantage of the Silverlight Unit Test Framework, utilise IoC (Inversion of Control) to inject dependencies into your code as well as how to use mocking as you test your ViewModel and associated classes.

Background

If you haven’t already done so, go and take some time to work though Tim’s set of posts to build up the basic application (and get some core learning done) and when you are ready come back here to work through refactoring the application,

If you are completely new to MVVM, then I would suggest running through this Pixel8 podcast which shows creating a simple MVVM application from scratch in Silverlight and also learn from many resources that are already out there.

Frameworks

With all the above out the way, it is time to introduce the tools and frameworks we are going to use in this series. Download and the latest versions of each and extract to a suitable folder:

• Silverlight Unit Test Framework and project templates – our test framework
• Ninject for SIlverlight – our Inversion of Control container
• RhinoMocks for SIlverlight – our mocking framework (there are other of course such as Moq, TypeMock etc but I am familiar with this framework and kind of like it)
• Silverlight Extensions - for commanding support

Solution structure

Now you have the software you need installed, let’s get our solution configured and ready to use. Open up the original codebase for the TwitterSearchMonitor application into Visual Studio, if you followed through all the original tutorials your solution will look like similar to that shown below:

I tend to keep all .NET assemblies that are referenced in a separate folder in the solution, this helps keep things local to the solution and ensures that they are included into source control so each developer on the team gets the same version. As we have both .NET framework  assemblies and Silverlight .NET framework assemblies (that can share the same name!) it is obvious that we need to keep these in separate folders.

Therefore create the following folders in your solution – I am using a root folder called “ReferencedAssemblies”, some people like to call this “Lib” or “Depenancies” but it does not matter and choose the terminology you like.

Copy into the folder ReferencedAssemblies\Silverlight the following Silverlight assemblies from the download frameworks for Ninject, RhinoMocks and the Silverlight Unit Test Framework:

For Ninject

• Ninject.Core.dll

For RhinoMocks

• Castle.Core-Silverlight.dll
• Castle.DynamicProxy-Silverlight.dll
• Rhino.Mocks 3.5.Silverlight.dll

For the Silverlight Unit Test Framework

• Microsoft.Silverlight.Testing.dll
• Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll

So these files are included in the solution, add two solution folders; one for the Silverlight assemblies and one for the .NET assemblies. This is done using Add –> New Solution Folder from the solution explorer

I created a solution folder named ReferencedAssemblies for the .NET framework assemblies and SilverlightReferencedAssemblies for the Silverlight .NET assemblies.

Simple copy the files from the ReferencedAssemblies\Silverlight to SilverlightReferencedAssemblies solution folder – you can simply drag and drop from windows explorer into the solution. The structure for the solution should now look as follows:

Time to add in a new Silverlight Test Project. Follow the steps I detail here and your solution should now have a Silverlight Unit Test project – I named mine TwitterSearchMonitor.Test:

For MVVM, we need to support Commanding – this allows WPF like commands to be used in Silverlight. I will explain this in a bit more detail when we start building our first VIewModel but for the moment simply create a folder call “SLExtensions” and copy the code from the “Input” folder from the Silverlight extensions code base over to your TwitterSearchMonitor project.

Copy the code from the following folder from the extracted Silverlight Extensions code base which was developed for Silverlight 3:

trunk\SLExtensions\SLExtensions\Input

Your solution should look as follows:

Now we need to include references for RhinoMocks (to allow mocking in our tests) and Ninject (to allow IoC and dependency injection) and Ninject (for Ioc) into the solution.

For mocking, we only need to reference RhinoMocks from our test project. Select the TwitterSearchMonitor.Test project and add a reference to Silverlight assembly Rhino.Mocks.3.5.Silverlight.dll

For Ninject, select the TwitterMonitor project and add a reference to the Ninject.Core.dll assembly

Rebuild the solution to ensure everything is working as expected.

Our solution is now configured with all the external dependencies we need to start creating the MVVM version of the TwitterSearchMonitor application with testing, mocking and inversion of control.

In the next instalment we can finally start to add some code to the application now we have the basic solution structure in place.