Google Using MvvmCross in Xamarin Native Project (Xamarin.Android, Xamarin.iOS) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Tuesday, 27 March 2018

Using MvvmCross in Xamarin Native Project (Xamarin.Android, Xamarin.iOS)

Introduction:
MvvmCross is a cross-platform MVVM framework that enables developers to create powerful cross platform apps. It supports Xamarin.iOS, Xamarin.Android, Xamarin.Mac, Xamarin.Forms, Universal Windows Platform (UWP) and Windows Presentation Framework (WPF). 
When we take a look at the basic architecture patterns of Xamarin.Forms, we see some of the same concepts of MvvmCross. Forms implements Mvvm as well, and offers built-in support for Dependency injection, multiple Navigation patterns, Data-binding and messaging between loosely coupled components. Also this allows us to move the ViewModels to a portable project (PCL) and re-use this code throughout all the different UI projects.



Requirements:
  • This article source code is prepared by using Visual Studio Community for Mac (7.4). And it is better to install latest visual studio updates from here.
  • Used MVVmCross version 5.6.3.
Setting up a Xamarin Native Project with MVVMCross?
MvvmCross itself offers support for a wide range of platforms, and as for Xamarin.Forms support we have: 
  • Portable class library
  • Android
  • iOS
  • Universal Windows Project (UWP).
And please follow below few steps to configure MVVMCross.

Step 1: Create the new Portable Class Library and add MvvmCross package.
  • Launch Visual Studio for Mac.
  • On the File menu, select New Solution.
  • The New Project dialog appears. In the left pane Multiplatform Library Portable Library and click on Next.
  • Enter your Project Name (Ex: MVVMCrossDemo). Choose your project location like below and Create new project.

  • Right on your PCL project Packages and click on Add Packages.
  • After that Add Packages dialog windows will open, search for "MvvmCross" and click on Add Package like below. 
  • Now observe that packages will add to your PCL project
  • After that Add Packages dialog windows will open, search for "MvvmCross" and click on Add Package
Step 2: Create the new Xamarin.Android project and add MvvmCross package.
  • Launch Visual Studio for Mac.
  • On the File menu, select New Solution.
  • The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane, expand Android App General > Android App and click on Next.
  • Enter your App Name (Ex: MVVMCrossDemo.Droid). And click on Next button.
  • You can choose your project location like below.
  • Right on your Android project Packages and click on Add Packages.
  • After that packages will add to your Xamarin.Android project like below.
Step 3: Create the new Xamarin.iOS project and add MvvmCross package.
  • Launch Visual Studio for Mac.
  • On the File menu, select New Solution.
  • The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane, expand iOS App General > Single View App and click on Next.
  • Enter your App Name (Ex: MVVMCrossDemo.iOS), select minimum iOS support that you want to support and click on Next button.


  • You can choose your project location like below.

  • Right on your iOS project Packages and click on Add Packages.
  • After that packages will add to your Xamarin.iOS project like below.
We completed the MVVMCross setup for our xamarin native project. Now We need to understand how to use MVVMCross, for that we will take one sample project that need to consume contact list Rest API and display list of contacts on mobile. And if user tap on any contact item need to display full contact details. I was implemented same thing without mvvm from here.

Now let's start to create same app in Xamarin.iOS and Xamarin.Android with MVVMCross framework. 

So I am going to divide this article into three parts like below and I'm planning to publish below articles very soon.
  • Part1: Adding Business Logic to PCL project (Models, ViewModels, Services, Converters, etc).
  • Part 2: Xamarin.Android Views binding with ViewModels in MVVmCross.
  • Part 3: Xamarin.iOS Views binding with ViewModels in MVVmCross.

No comments:

Post a Comment

Search Engine Submission - AddMe