MVVM – Oh God yes!

While I was learning Xamarin forms I could not shake the thought: “Well a complex app in this must be a nightmare to debug”…

Enter the MVVM development, it stands for Model View ViewModel and is in principle very close to MVC Model Viewer Controller.

Let’s take my Workout Domain class:


public class Workout
{
public bool IsTemplate { get; set; }
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
[ForeignKey(typeof(WorkOutType))]
public int TypeId { get; set; }
public DateTime Date { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string Comments { get; set; }
public string ImageDirectory { get; set; }
}

What it basically does it creates ViewModels bound to Views via a simple BindingContext Expression:

        public WorkoutsOverviewViewModel ViewModel
        {
            get { return BindingContext as WorkoutsOverviewViewModel; }
            set { BindingContext = value; }
        }

and then in the code behind you simply use this to initialize the ViewModel

 public WorkoutsOverview()
{
var workoutStore = new SQLiteWorkoutStore(DependencyService.Get<ISQLiteDb>());
var pageService = new PageService();
ViewModel = new WorkoutsOverviewViewModel(workoutStore, pageService);
InitializeComponent();
}

Simple and clean you can find the PageService, ISQLiteDb and one of it’s 3 implementations on my GitHub.

Now in my new WorkoutsOverviewViewModel:


public class WorkoutsOverviewViewModel : BaseViewModel
{
public ObservableCollection<Workout> Workouts { get; private set; } = new ObservableCollection<Workout>();
private readonly IPageService _pageService;
private Workout _selectedWorkout;
private IWorkoutStore _workoutStore;
private bool _isDataLoaded;

public ICommand LoadDataCommand { get; private set; }
public ICommand AddWorkoutCommand { get; private set; }

public WorkoutsOverviewViewModel(IWorkoutStore workoutStore ,IPageService pageService)
{
_pageService = pageService;
_workoutStore = workoutStore;
LoadDataCommand = new Command(async () => await LoadData());
AddWorkoutCommand = new Command(async () => await AddWorkout());
}
public Workout selectedWorkout
{
get { return _selectedWorkout; }
set { SetValue(ref _selectedWorkout, value); }
}
private async Task LoadData()
{
if (_isDataLoaded)
{
return;
}
Workouts.Clear();
_isDataLoaded = true;
var workouts = await _workoutStore.GetWorkoutsAsync();
{

}
foreach (var c in workouts)
{
Workouts.Add(c);
}

}
private async Task AddWorkout()
{
await _pageService.PushAsync(new WorkoutDetailsPage());
_isDataLoaded = false;
}
}

Look how in the constructor for the class we pass PageService which is in charge of handling the Xamarin forms and workoutStore in charge of handling the database operations.  So we use Xamarin and SQLite but to the class these are just methods it invokes, they can but don’t have to be Xamarin/SQLite related cuz they are defined elsewhere!

Why is it so appealing to me? To my personally despite it on a first glance being more complicated it is simpler. I have my WorkoutOverviewsViewModel and everything related to that this page is there on top of everything related to the database and page navigation is stored in a separate object. So the “meat” of my app while right now depends on Xamarin forms and SQLite, can be without too much of a problem bound to for example Azure!

Love it! And it also brings fond memories of MVC which I love as a way of delivering a web page.

So my first app in Xamarin is MVVM already!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s