By Jayan Kahatapitiya
MVVM Architecture
Model-View-ViewModel (MVVM) is a software architectural pattern created by Microsoft engineers in order to facilitate the decoupling of UI and business logic responsibilities during the software development process. Programs written using MVVM are easily testable and maintainable. For more historical information about MVVM (which is not the purpose of this post), you can visit this page, from Microsoft.
The way the architectural pattern works can be easily explained. The models are the representation of the data. View Models (VM) are abstractions that have the intention to expose only what are necessary for the Views (presentation layer) to display the data on the screen with ease.
Thus, the data (models) are shaped to generate View Models that are used by Views to display the data on the screen. As simple as it may seem, this separation provides great benefits like decoupling the view and view logic.
MvvmCross uses this architectural feature to its advantage, where it makes the views and view models shared among various platforms by simply handling the underlying platform specific connections by itself.
What is MvvmCross
There are numerous MVVM frameworks available to use in Xamarin projects including built in Xamarin.Forms. The one we are focusing here is MvvmCross, a comprehensive cross platform – open source framework that works very well with Xamarin.
The main feature of mvvmcross is that you are separating your logic not only from the views (as in MVVM and MVC patterns), but also from specific platform implementation. Your business logic will be implemented in your PCL (Portable Library Class), and each platform can reference it as its logic, while implementing its native side accordingly which facilitates code sharing.
This article is an overview of MvvmCross with some basic information of related technical concepts including MVVM pattern itself. However the concepts of MVVM you will learn are applicable to any other framework.
As the name implies MvvmCross is a cross platform app framework and first we need to have a look what cross platform really means in the context of mobile world.
Why MvvmCross?
- Open source framework
- Promotes code sharing as far as the view model layer.
- Cross platform Android, iOS, Windows, Xamarin.Forms
- Code got thinner XML got bigger
- Data binding – removes the need for writing boiler plate code
- Increased testability
- IOC framework built in
- Allows using plugins for various components
Data binding
Data binding is the process that establishes a connection between the application UI and business logic. Basically it allows binding a UI element with a data in memory. It is the foundation for supporting the MVVm pattern. But it is not exclusive to Xamarin or MvvmCross.
If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change.
For example, if the user edits the value in a TextBox element, the underlying data value is automatically updated to reflect that change. This mechanism helps to keep the UI and related view models in sync all the time removing the need for code that would be needed otherwise.
Data binding also enables a ViewModel to react to ‘events’ which occur in a View – e.g. for a ViewModel to respond to events such as a button being pressed. The technique generally used for this is for the ViewModel to expose special Command properties which can be bound to corresponding Command properties on the View.
For example, a CheckBox might have a CheckedCommand and this might be bindable to a RememberMeChangedCommand on the ViewModel.
Binding modes in MvvmCross
- One way: This binding mode transfers values from the ViewModel to the View
- Two way: Both ViewModel to View and vice versa
- One time: Only performs at the initialization of data and subsequent changes of the ViewModel will not be reflected in the View.
- One way to source: Same as one way, but in opposite direction, that is View to ViewModel
MvvmCross provides the support for all the modes above and also provides the support for binding events and delegates to the UI elements.
MvvmCross Data binding in Android example:
Note the syntax local:MvxBind=”Text Tip” where “Text” is the property name of the control the value is going to be bound and the “Tip” is the property of the view model.
Converters
Very often when performing data binding, the source property could be in a different format than we need to display it to the user. For e.g. Date, time or currency values which needs to be prefixed with currency symbols, globalizations etc. For this purpose we can use converters provide by MvvmCross framework. Converter is a class which attached to the binding and then applies the changes to values before reaching the target of binding.
Setting up MvvmCross
MvvmCross application’s are normally structured with:
- Shared ‘core’ Portable Class Library (PCL) project – containing as much code as possible: models, view models, services, converters, etc
- UI project per platform – each containing the bootstrap and view-specific code for that platform
You can create a new project using Xamarin built in templates select PCL for the template type.
In the Package Manager Console, enter Install-Package MvvmCross.Core or from the Package manager window search for MvvmCross and add the nugget package to all projects.
Add Services
Create a folder called ‘Services’ in the PCL library. Within this folder create a new Interface which will be used for calculations.
Add View Models
Create a folder called ‘ViewModels’ in the PCL library. We will include our ViewModels related to the UIs in this folder. In this folder add TipViewModel class as follows
App Initialization
Add a class named App in the root of the PCL library and it will be the new starting for the app. All service initializations, IOC container bootstrapping code should go there and finally you can navigate the page you want.
IoC container
When the app is running, a part of the MvvmCross framework called the ViewModelLocator is used to find and create ViewModels.
The ViewModel used above in the example uses constructor injection. The IoC framework will provide the services instantiated which are registered to it when asked by a ViewModel. Here we have registered our service in the initialize as Mvx.RegisterType<ICalculation, Calculation>();
So that in App initializer there is no need to worry about passing Calculation service to the TipViewModel as the IoC framework takes care of it.
Adding Setup class
Every MvvmCross UI project requires a Setup class. This class sits in the root namespace (folder) of our UI project and performs the initialization of the MvvmCross framework and your application. Add this class in the root of Android UI project.
Adding Android Layout (axml)
To achieve the basic layout for the example application, we’ll add a new AXML file – Tip_View.axml in the /Resources/Layout folder in android UI project.
Adding View class
With our AXML layout complete, we can now add the C# Activity which is used to display this content. To create our Activity – which will also be our MVVM View, Create a Views folder within your Android UI project. Within this folder create a new C# class – TipView.
Not that the name of this class MUST match the name of the ViewModel. As our ViewModel is called TipViewModel our class must be named TipView). This class will inherit from MvxActivity:
At this point you should be able to run your application. When it starts… you should see:
Conclusion:
MvvmCross is a good framework for Xamarin cross platform application development which has so many standard features built into it. It also can be extended by using widely available plugins as Nuget packages for various hardware interfaces or controls.
The data binding features with the other standard features like navigation, converters etc. makes this an ideal competitor as a MVVM framework to various available libraries.
Using MvvmCross enables to use its built in IoC container so that there is no need to use a separate framework, which reduces the complexity and learning curve.
While admiring its advantages, it is important to note that this framework mostly suits large scale apps where more customizations could be expected based on the platform.
Reference:
https://msdn.microsoft.com/en-us/library/hh848246.aspx
https://github.com/MvvmCross/MvvmCross
https://docs.microsoft.com/en-us/dotnet/framework/wpf/data/data-binding-overview
