In this series I will try to demonstrate the MVVM pattern and how it can be applied to cross platform applications using Windows Runtime and Xamarin for android. Full sample can be downloaded here.
Table of Contents
NOTE: I have been playing around a little bit with MVVM-Cross library in past few weeks. Even though it is a little rigid compared to other light weight libraries out there, it provides an excellent foundation for cross platform applications. Not to mention the fact that there are quite a number of plugins for MVVM-cross as nuget packages. So for this series I will be using MVVM-Cross libraries. |
I thought the easiest way to discover and demonstrate the capabilities of MVVM would be to use the Universal App project template from Visual Studio, and transform this application into an MVVM application that spans across platforms.
What do we have in the Hub App?
In the hub app application template, we have three XAML pages, which reference themselves as data context and a data source (i.e. SampleDataSource) which loads the data from a JSON file and creates Groups (i.e. type of SampleDataGroup) of Items (i.e. type of SampleDataItem).
The two projects for Windows Store and Windows Phone both share the same data model and assets such as images and strings.
A quick code metrics analysis yields the following table. The table shows that out of 377 lines of code for Windows application, 245 is in Common namespace and 61 is in Data namespace (i.e. namespace that are in the shared project). For the windows phone application, out of 364 lines of code, in total of 281 lines are in shared namespaces. So we have 81% shared code for Windows application and 77% for windows phone application.
What do we want to have in the Hub App?
We want to have three application platform implementations (i.e. on top of windows and windows phone, we want to have an android app). We want these projects to share a common core with view model implementations and business logic completely decoupled the views.
While implementing this transformation, we will try to move the data source to a SQLite database to avoid local storage problems with android implementation.
We also want to share as much code as possible between the platforms.
Creating the Client Core
First item of business is to create a client core library which will contain the business logic for our application. In this portable library, we want to have the data model, view models and any shared control or converter implementation.
After creating the PCL (portable class library) for the universal app, we need to retarget the project considering the fact that we want to use this same library for other platform implementations.
It is important here to notice that we are using .net 4.5 and windows 8 rather than the defaults 4.5.1 and Windows 8.1. The default platform versions are not compatible with xamarin android and iOS projects.
After the retarget is done, we add couple two nuget packages to the core library with all their dependencies. First one is the JSON.Net library which we will use for deserialization of the data, and the second one is the MvvmCross package (this package comes with couple of other dependencies).
After we install the mvvmcross library, a view model is automatically created. The FirstViewModel item gives a general how-to for the view-models that we are planning to implement. You will notice that the ViewModel classes inherit from the base class MvxViewModel (you can read the _Core.txt file for more details in the Todo-MvvmCross folder).
Next, we will be dealing with moving the data model to the client core and converting the json data to a static data source (temporarily)
happy coding everyone,
Pingback: Developing Universal/Cross-Platform Apps with MVVM – II | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – III | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – IV | Can Bilgin
Pingback: Item Level Command Binding (MVVM) | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – V | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – II | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – III | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – IV | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – V | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – VI | Can Bilgin
Pingback: Developing Universal/Cross-Platform Apps with MVVM – VII | Can Bilgin
Pingback: Xamarin.Forms application with MvvmCross – VIII | Can Bilgin