MVVM for Windows Phone Developers – Use it Guys! (Part 2)

OK, here we are with our second part on MVVM for Windows Phone developers. Some of you already gave me great feedback about what they want to see in the next parts of this series. Most of you wanted to show how to use PCL’s, that can be shared between Windows Phone and Windows 8. Therefore we will include PCL into this series. One other thing to mention: Sorry for the late posting, but I was visited already twice this year by Angina and flu, so I could not publish every few days, like I wanted. I will announce every blog-post on Twitter: @awsomedevsigner. This is what we have done so far in in Part 1:

• We learned something about mocking
• We learned about MVVM-Light
• We created a project for SQLight, that allows us to use SQLight to store our data on Windows Phone 8
• We created the base architecture for our application
• We learned how to create a separate test-project

Sharing code between Windows Phone 8 And Windows 8

To be able to share code between WP and Win8, we need to add a PCL (Portable Class Library) to our solution. Open your solution in Visual Studio, right click on the solution, choose “Add new project…” and type “portable” into the search box on the right. Name it something like “MVVMWindowsPhone.Core.Portable” and click “Ok”. Visual Studio will show you a dialog after the project creation, that should something similar like this:

You can ignore the “Mono for Android” option (which should not be visible in your dialog) and we don’t want to develop for Xbox 360 here. One important thing to note is the Windows Phone combo-box. You have to select “Windows Phone 7.5 and higher” here, because we use later the portable version of MVVM-Light. A version < 7.5 will cause problems with MVVM-Light portable. Click “Ok” and the PCL library will be created. If you need to change the settings for the target frameworks, you can do so anytime by viewing the properties of the PCL library.

On the “Library” tab you will find a section “Target Framework”, that will show your current configuration. By clicking “Change…” the PCL-dialog will show up, where you can change your framework settings according to your needs.

Adding MVVM-Light portable

MVVM-Light portable is a MVVM-Light implementation from Oren Novotny, that can be used with PCL’s. To install this package, we will use NuGet. Right click your “References” folder and choose “Add NuGet Package…” In the NuGet-Dialog select “Include Prerelease” in the combo-box placed over the packages list. Ensure that you have chosen “Online” as the package source on the left. Then type “mvvmlight pcl” into the search-box on the right.

Click on “Install” and if everything goes fine – MVVM-Light PCL was successfully installed. If so, a little green, round checkmark will appear on the MVVM-Light PCL package. Now you can delete the “Class1.cs” file from the PCL library, because we don’t need that one anymore.

Setting up the base structure for our PCL library

We need a base structure for our “Models” and “ViewModels” we want to share now from within our PCL. Right click your PCL-Project, choose Add=>New Folder and name it “Model”. Repeat the process and add another folder named “ViewModel” and a folder named “DAL” (Data Access Layer). Or like always – what ever you personally prefer.
After finishing this steps, your solution should look something like that:

You see, that we have created a folder structure that reflects our architecture we built in part one. All the necessary interfaces, models and view-models will be made available for the two platforms we use here.

Adding a Windows 8 Project

To share code between WP8 and Win8, we need to add a new Windows 8 store project. Select your solution, click the right mouse button and choose Add=>NewProject. On the left side click the entry “Windows Store” and select the “Blank App (XAML)” template. Give your project a name like “MVVMWindows8” (or whatever you prefer) and click “OK”.

Further readings about PCL’s

You can find a plethora of further readings on the net about PCL’s. Here are some readings I would like to recommend for everybody interested in learning more about PCL’s:

• Cross-Platform Development with the .NET Framework (MSDN)
• How to Make Portable Class Libraries Work for You (Daniel Plaisted’s Blog)
• Creating portable code in Windows Store Apps (PCL + MVVM + OData Services) (codeproject, article by Sara Silva)
• Example Windows Store App & Portable Class Library: How to access and use PCL resources (Iris Classon)

Reference the PCL-Library in our WP8 and Win8 project

Right-click the “References” entry in your WP8 project and choose “Add Reference…” from the context-menu. Click on “Solution” on the right and select your PCL-Library (whatever you have named it). Repeat the process for your Win8 project. Press “CTRL”  + “SHIFT” + “B” and build your solution. Everything should build without any errors.
Congrats! You created your first portable library!

Creating our SQLite library for Windows 8

First of all, we need to install the SQLite runtime for WinRT like we have done before with the runtime for Windows Phone 8. In Visual Studio select Tools=>Extensions and Updates…, select “Online” on the left, and type “SQLite” into the search-field on the left. After some time, you will see the package “SQLite for Windows Runtime”. Click on “Download” and the package will be installed. The VSIX installer will be started, indicating the installation of “SQLite for Windows Runtime”. Click “Install”. Click “Close” and after that click “Restart Now”. Visual Studio will be restarted to update the references to the SQLite WinRT runtime.
Now we need to add a new project to our solution, to host SQLite for WinRT. Right-click your solution, choose Add=>New Project…, select “Windows Store” on the left and choose the “Class Library” template. Name it something like “SQLiteWin8” (or any name you prefer) and click “OK”. Expand your “SQLiteWin8” project and right click on “References” select “Add Reference…”. In “Reference Manager” choose “Windows” on the left. Inside the “Windows” node choose “Extensions”.  In the center a bunch of libraries will be shown (depends on your system). We need to select “SQLite for Windows Runtime” and “Microsoft Visual C++ Runtime Library”.

Click “OK”.  Now we just need to add “SQLite.cs” and “SQLiteAsync.cs” again from the SQLite-net project we downloaded in part one. You can find the files inside the “src” directory inside the sqlite-net folder you have downloaded. Rebuild your project now, everything should work-out fine. We are ready now to add a reference to our “SQLiteWin8” library to our Windows 8 project. Right-click “References” inside you “MVVMWindows8” project, choose “Add Reference…”, select “Solution” on the left, and add the “SQLiteWin8” project as a reference.

Unit tests for Windows Store apps

Through the shift of features we have now (PCL, sharable code), we need to add unit testing for our Windows 8 project, too. Microsoft has already prepared everything to make this task as simple as possible. Just right-click your solution, and select Add=>New Project… from the context menu, and choose “Windows Store” on the left. Select “Unit Test Library (Windows Store)”, name it “UnitTestingWin8” (Or anything you want) and click “OK”.

Adding Moq to our unit test projects

In the last post we talked about Moq and to used it in our unit tests. Moq is also available via NuGet, and installs for nearly any .NET version from the NuGet package. For Windows Phone 8 there is no official support yet. We can workaround this, by downloading the Moq binaries directly from here: Moq download. Download the zip-file and extract the contents to your local drive. Then add a reference to the assembly “Silverlight4\Moq.Silverlight.dll”  to your Windows Phone unit testing project. Visual Studio will show you a warning, just click ok and Moq will be added to your testing project.

Mocking for Windows Store apps

The problem with WinRT is, that there is currently no mocking framework is available. Our base architecture will allow us to isolate our test-objects in an easy way also by hand. This is what we will do for WinRT.
I would suggest also, that you take a look at this article: Isolating Code under Test with Microsoft Fakes. Just to get an idea about the latest stuff with “Fakes” and “Shims” supported by Visual Studio 2012.
In the next part, we definitely start coding. So far everything structural is prepared.

The post MVVM for Windows Phone Developers – Use it Guys! (Part 2) appeared first on @awsomedevsigner.