MVVM Pattern with ReactiveUI and Xamarin.Forms

MVVM Pattern with ReactiveUI and Xamarin.Forms

Building a Cross Platform MVVM app with ReactiveUI and Xamarin.Forms.

Have you ever heard about Reactiveui ? or let’s first say Reactive Extensions (RX)?. If yes then you will be comfortable with the rest of this post, else let me just slightly introduce it to you. Reactive Extensions (RX) is a library which provides you a convenient way to declare callbacks and manage asynchronous executions in your code and it does all of this using the LinQ syntax. It helps makes your source code more readable and avoids ? code (Know what am talking about right. ?). Now Imagine you could leverage all of these with the MVVM architectural design pattern. This is what ReactiveUI permits developers to do and alot more. You can easily build MVVM apps with ReactiveUI and Xamarin.Forms, this post is all about that.

What we will be building

We will build a simple Todo Xamarin.Forms application which will have a login page. Here are the topics we will cover. This app is simple but it makes uses of several features of ReactiveUI

  • Model
  • View
  • View Model
  • Naviation
  • Locator (for the View, View Model, Services).

Here is the Github repository for the app we will build. Check this great example which inspired me.

First, You need to create a Xamarin.Forms app and add the following packages to your solution.

Be the first notified about new posts

Cool Coders

Model

Since we will build a todo app, this model should be very simple.

Note that our model is inheriting from ReactiveObject which is the base class for all ViewModels in ReactiveUI, But we need it here because it implements the INotifyPropertyChanged which we need for one property of our Mode “IsDone”.

ViewModels

The ViewModel will have the properties to which the view will bind and it is the one responsible for the logic performed on the data presented. We will first make a BaseViewModel from which every view model will inherit.

Now we will build the ViewModels for the Login Page and the Todo Page. This ViewModel will have 3 main properties bound to the UI, the Password, UserName and LoginCommands. Follow these steps.

  • Create a class LoginViewModel let it inherit from  ViewModelBase.
  • Add two properties UserName and Password. these properties will need to notify the view when their values change so we will call the RaiseAndSetIfChanged from ReactiveObject.

  • Now we create a command which will serve in login the user, and we do so with the ReactiveCommand  public ReactiveCommand LoginCommand { get; private set; }
  • Remember how a login screen should function, it should only let the user have access when he has correct emai and password and when his email and passwords match certain criteria (i.e it should be validated).
  • Matching correct username and passwords will be done using with this service. “Don’t bother about it now, we will cover it later”.
  • The Login command should only fire when The email and password are valid. This is when the power of ReactiveUI is demonstrated!!!!!!!!. Watch carefully.

  • The ValidLogin Property is what is called a OAPH  this is used when a property’s value depends on another property. Declared as follows.

Here is the full code for the Login ViewModel.

The ItemsViewModel will be for the Todos which the user will use. It has several portions similar to the LoginViewModel, but here is what is new in it.

  • This view model has a property called Todos which is a ReactiveList of Todo Items. This list is an improved version of Observable collections, with addintional events one of which is the capability of listening to when an item changes in the list.
  • When ever a user will mark a todo as completed, the item will be sent to the bottom of the  list and set as inactive on the View. Here is how this is done.

Here is the complete code for this ViewModel.

The View, Navigation And Locator

The Views all inherit from the ReactiveContentPage   We will create a base view from which every view will inherit.

  • Create a LoginPage and ItemsPage, and let it inherit from the ContentPageBase we just create.
  • Let the IViewModel be the ViewModel corresponding to each View.
  • Change Xaml and let the Page be of type ContentPageBase and inside the Xaml, don’t forget to set the TypeArguments in Xaml. Here is the full code for each View.

Login Page

Items Page

The Locator, where our ViewModels are instantiated and Views are located according to their corresponding ViewModels will be our AppBootstrapper.

  • It posseses a property called Router, which is used for navigation.
  • It uses the Locator from splat, the nuget package we installed earlier, this helps as a container.
  • In the constructor, we set the page to navigate to as the first screen as follows. That is how navigation is done in for the registered Views and ViewModels.

Here is the whole code for our AppBootstrapper

Inside your App.Xaml.cs don’t forget to add this

Service

The service is a fake, created just for demo purposes but it could be any type of service which you need, here it is.

The Demo app should be functional and hopefully, this post will help you get started with this awesome Framework.

This Xamarin Forms application to help you manage your expenses and income was built entirely with Xamarin Forms and ReactiveUI. You can download and use it or play with it for free on Android and Windows 10 (Universal Windows Platform). You can get it on Playstore, or on the Microsoft Store

Follow me on social media and stay updated

Here is the Github repository for the app we built.

Reactiveui and Xamarin.Forms Reactive Login page on UWP

Reactiveui and Xamarin.Forms Reactive Login page on UWP

Reactiveui and Xamarin.Forms Reactive todo application on Android

Reactiveui and Xamarin.Forms Reactive todo application on Android

Conclusion

All the simplicity and the beauty which Reactive extensions brings to us, is like a blessing. This post just covers a little bit of what you can do when you combine the power of Reactiveui and Xamarin.Forms . You can for example, decide to listen to changes on a property, then delay, and perform an action by invoking a command. You can also, subscribe to this delay to manipulate your code later. This is extremly usefull in several scenarios. In fact, just have a glance at the documentation on Reactiveui and Reactive Extensions for .Net.

If you liked this post, or it was useful to you, please ? like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter  and like my page on facebook.

Check some other very usefull Xamarin Posts here.

Build a cross platform mobile app for your chat bot here.

Follow me on social media and stay updated
%d bloggers like this: