InterDash Blogs

Sharing experience

VS2013 – Portable Class Library Setup – MvvmCross

In my prior posts on code sharing for Windows Phone and Window Store applications I was looking to established a Portable Class Library (PCL) shared by Phone (WP8) and Store (Win8) applications. In this post I still am focused on that setup but have found Android and Touch are also covered using this approach. This is exciting and here is what I have come up with as my starting point for developing an application.

Visual Studio 2013 Project / SourceFollowAlong101.zip

Primer

I ran across a great series of videos in the “MVVMCross N+1” by Stuart Lodge at http://mvvmcross.blogspot.com/, specifically N=10 at http://www.youtube.com/watch?v=cNTSxxbJKIY&list=PLR6WI6W1JdeYSXLbm58jwAKYT7RQR31-W&index=12

At the end of walking through the exercise with Stuart I was ready to setup my foundation for multiplatform application development.

Mvvmcross uses ‘Service’ to lookup which classes need to be established as services. The ‘PCL’ Core project creates the interfaces during ApplicationLaunch.


The Starup View (Page) is set here ( FirstViewModel ). The MVVM pattern places the responsibility of Navigation on the ViewModel, so the Startup View is handled in the PLC instead of the application.

View (Page) Navigation

All navigation is handled by the ViewModel. This is very good because a View only has the data it needs to perform its task in contrast to the ViewModel which has all the data available. The ViewModel can route intelligently based on business rules. This removes the need for a View to do any redirection moving that logic into the PCL. This greatly simplifies the View logic which more than makes up for the extra effort needed to manage the navigation in the PCL.

Every View must have a corresponding ViewModel in the PCL. For example, to add a View for Settings it will be named “SettingsView” in our application and we start by creating a class in the PCL called “SettingsViewModel”.

Within the SettingsViewModel, which is derived from MvxViewModel, you can establish a property (green box).


Database to UI

It is important to ‘RaisePropertyChanged(…)’ when setting a property value to notify the UI that it has a new value.

If you want access to the underlying data, include a constructor (red box). A bit of ‘magic’ occurs, where you define the constructor. You will find it doesn’t appear to be referenced by anything. It is initialized by MVVMCross at startup (see the Initialize method above). It looks for classes ending in “Service” and initializes their interfaces.

Solution

At this point we are ready to start building our foundation. The end goal is to create a startup project that has:

  1. The Models and ViewModels in a PCL
  2. A Project for Windows Phone 8 (Phone), and a project for Windows 8 (Store) application sharing the PCL.
  3. Three Views in the two applications
    1. FirstView – Initial Screen showing only on the first time ever entry to the application.
    2. MainView – Application’s opening screen.
    3. Settings – Page for Application settings that persists in a SQLite database.

Starting with Visual Studio 2013 (sorry, I don’t believe that express won’t do) and Windows 8.1 Pro (Hyper-V is necessary for the emulator) create a New Project.

Since we are creating a multi-platform solution I want to start with a ‘Blank Solution’ so the Solution file is at the root and not part of any of the projects. You can search Installed for ‘blank solution’ or expand the templates and click on ‘Visual Studio Solutions’. It is buried under ‘Other Project Types’


 
 

Create a folder in your Projects directory by the name of the application you are creating. In this series I will be creating the ‘Follow Along’ project. I don’t care much for spaces in directory names and such so I most often remove them.

 
 




Add three new projects (order doesn’t matter).

  • Portable Class Library (.Core)
  • Windows Phone 8 (.Phone)
  • Windows 8 (.Store)

    




This create a nice structure for your project. The top level ‘FollowAlong’ can be copied or renamed as you desire, it is just a container. Inside the container you can see the .sln file is above the three project folders.


Adding MVVMCross to the projects

Right click on ‘References’ and using NuGet search for mvvmcross in the online templates.

    


MvvmCross – Phone Project Setup

In the Phone Project open the ToDo-MvvmCross instructions



Step 1 – Add a reference to the Core PCL project (<yourapp>.Core)


Step 2 – Create a Setup.cs file.

There is no action to take here, the file was created. It is good to note that there is a setup.cs file and we will discuss the code in detail later.

Step 3 – Change App.Xaml.cs so that it creates a ‘new Setup(RootFrame)’ during its constructor.

Within the .Phone project open the App.Xaml.cs file and scroll to find the end of the App() method and paste the two lines of code there.


 
 

Step 4 – Change App.Xaml.cs so that it intercepts the first navigation



Step 5 – Add a Views folder – it must be called “Views” …

There is no action to take here. The View folder has been created with an example in place. When we add new views this will make more sense but for now just ignore it.

MvvmCross – Store Project Setup

In the Store Project open the ToDo-MvvmCross instructions

 
 

Step 1 – Add a reference to your Core PCL project


 
 


 

This is an Extension you add to Visual Studio once


Click ‘Tools -> Updates and Extensions’ and search for sqlite online if you don’t see it in your list.


 

 
 

Build – Configuration Manager

For the Emulator you will need to specify x86 platform for the Store application. In the ‘Debug’ configuration change the Platform target. This will remove the yellow exclamation marks. When it is time to release you will have to obtain and compile the SQLite Plugin for ARM and x64 platforms. This is something I will cover in another post. I mention it because I was concerned as I did my tests that I couldn’t build for the ARM (or x64) platforms because of the mvvm.community plugin. After downloading and building the projects I was able to compile ARM by referencing the ARM build I made so I’m now confident that MvvmCross will work with the Surface II.

 
 


 
 


Step 2 – Create a Setup.cs file.

There is no action to take here, the file was created.

 
 

Step 3. Change App.Xaml.cs so that it creates a ‘new Setup(RootFrame)’ during its OnLaunched

In the Store project open the App.Xaml.cs code and scroll to the ‘OnLaunched’ event. Locate and replace the ‘rootFrame.Navigate(typeof(MainPage), e.Arguments);’ statement. In the ToDo instructions the entire OnLaunced event is included but the only significant change is this replacement.



I’m still trying to determine if it is possible to just cut and paste the entire code segment as instructed. The following code is the only difference and I have not determined if the localization needs this initial setting so I cautioned on the side of caution and will experiment later.


Step 4 – Add a views folder and a view …

This instruction is confusing. To start delete the FirstView.xaml and then create it again as a ‘Basic Page’.





After creation you need to change the class the page is derived from.






Within the store Views/FirstView.Xaml.cs expand the ‘Navigation Helper registration section and remove the ‘OnNavigatedTo’ and ‘OnNavigatedFrom’ overridden events.



To test the Store application set the Store Project as the startup project and then press F5 to Debug on the simulator.


Set the Phone project as the Starup Project and debug. Change the Textbox value and see the bound element changes.


 
 

Trouble Shooting

Any CPU


The Store application won’t compile with the ‘AnyCPU’ target after the Mvvm SQLite plugin has been added. Target the ‘x86’ for the simulator and compile both ARM and x86 when publishing to the store.

Next

In Part 2 – I will demonstrate how I use the Multilingual App Toolkit within Visual Studio to support multiple languages.

Leave a Reply

Your email address will not be published. Required fields are marked *

InterDash Blogs © 2014 Frontier Theme