Getting started with MvvmCross in less than 10 minutes

Mvvmcross has gained popularity very rapidly its became as most widely used package for the cross platform apps and with v4.0 they have made it more robust and easily accessible.Though Stuart lodge has given N+1 days of mvvmcross and are to be considered the best to begin with. so,I thought my implementation to get started with mvvmcross and to know about basics of mvvmcross. Let’s Go:

To begin with mvvmcross I’m going to create  a blank android project . Once you are done with add a PCL inside solution and name it whatever you want  and the reference of the PCL project into the native project as in the screenshot .

referencedPro_001

Now install the mvvmcross package from the nuget. Once you install the mvvmcross plugin from the nuget it will automatically add a Setup file in your native application, and if not you can manually create that file:

 


public class Setup : MvxAndroidSetup
{
public Setup(Context applicationContext)
: base(applicationContext)
{
}

protected override IMvxApplication CreateApp()
{
return new App();

}

}

Make sure here “App” is a  class file in the Core Project which is  a application object and handles the lifecycle of the ViewModels during naviagtion.This set up class works as the bootstrapper for the cross plugin.

Now lets move to the core project which we have created and Add  “App.cs” file in the core project:


public class App : MvxApplication
{
public App()
{
Mvx.RegisterSingleton<IMvxAppStart>(new MvxAppStart<FirstViewModel>());
}

}

Here First ViewModel is the firstview from where you want to start the app and make sure that not be confused with the Splash Activity.

Now what  I’m going to do is that I”ll be taking the current date and time and bind it to the textView  in . Lets create a folder named as “ViewModel” inside which we’ll place our “FirstViewModel” which will get the current date and time and bind the variable to layout.

FirstViewModel

 


/// <summary>
/// Gets the system's current time and date.
/// </summary>
public class FirstViewModel :MvxViewModel
{
private string _time;
public string Time
{
get
{
return _time;
}
set
{
_time = value;
RaisePropertyChanged(()=>Time);
}
}

public FirstViewModel()
{
GetTimeData();
}

private void GetTimeData()
{
DateTimeOffset t = DateTime.Now;
_time = t.ToString("yyy - MM - dd HH: mm:ss");
}

}

Now in the layout just create a simple layout and containing textView like this:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/showTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
//BINDED THE PROPERTY
local:MvxBind="Text Time"/>
</LinearLayout>

Now , we’ll create the Activity for the layout and for that create a folder named as Views –>FirstView.cs


[Activity(Label = "Sample", MainLauncher = true)]
public class FirstView : MvxActivity
{

protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.FirstView);

}

}

Now here is the catch Mvvmcross supports naming conventions to associate the Views with the ViewModel. For example in our case we have named our View as “FirstView”, mvvmcross with locate the viewmodel as long as it is named as “FirstViewModel”. This is simply for one reason the base class that mvvmcross uses have MvxViewModel properties named ViewModel.

However if you want to link the View with ViewModel that have different name then you have to define the the ViewModel property of a View explicitly like this:

Inside the layout’s class file, just add following lines and mvvcross will get the viewmodel for that view:


public new FirstViewModel ViewModel
{
get { return (FirstViewModel)base.ViewModel; }
set { base.ViewModel = value; }
}

 

Thats all !! Run and you’re up with your first mvvcross application in less than 10 minutes.

 

Advertisements