MVVM is the key to succeed
In this chapter, we will discover a major design pattern for mobile application development, the Model-View-ViewModel! (usually referred as “MVVM”)
MVVM is a design pattern which provides the developer with a logical separation of the code into 3 layers:
The View, which refers to the user interface, i.e. everything that will be displayed on the screen (e.g. the
The Model, which refers to the kind of data to be displayed in this View,
And finally, the ViewModel which is the link between the View and the Model. For example, to retrieve data from the Cloud or react to user interactions.
One of the main advantages of MVVM is isolating the view (i.e. the user interface) from the business logic. In the context of our first page, we finally obtain two files:
HomeView.cswhich defines exactly how our page will be displayed (i.e. a background colour, an image at the top, a bottom button),
HomeViewModel.cswhich contains all the logic to run our page (in this case, the behaviour of the button when the user presses it).
By following this principle, the breakdown of your code is clear and you reduce the number of lines of code per file. You wouldn’t want a file with more than 10,000 lines! 😄 Besides, there is no risk of affecting the logic of your app if you only change the colour of a button.
Good catch! Indeed, some pages are so simple that they do not require a Model. In such cases, only the View and ViewModel are required.
We now understand how to split our code into several layers. For example, defining a button in a View and declaring its action in a ViewModel. But can you tell how they will work together?
Indeed, that’s almost it! It takes place in two steps:
First, a ViewModel is associated to its View (usually with the View’s
Then we define the behaviour of each element of the View into the ViewModel, using the principle of Data Binding.
Data Binding is a technique for linking two objects so that when one is changed, the other is also changed. It may sound a bit vague, but you’ll understand its role better in the next section. For now, let’s move on!
Now that you know the basics of MVVM, I can show you how to apply it concretely in the application.
Let’s start by creating a file to be the ViewModel for our
HomeView. To do this, first create a new folder called ViewModels in the project, then add a new file to it.
This will be an empty class named
Then, replace its content with the following one:
Well, there’s nothing special here. It’s just a C# object class with an *Enter() *method that prints some text on the screen right after the user clicks the “ENTER” button.
And you’re right, but as it is, it remains unusable! Remember, there’s absolutely no link between the
HomeView and the
Fortunately, there is a library provided by Microsoft that will greatly simplify our lives: the MVVM Toolkit.
This library has already been added to the project and you can easily verify this by opening the NuGet packages management window. Just right click on the project’s dependencies:
And here is the library! It is called CommunityToolkit.Mvvm:
Now let’s see how to prepare our class
HomeViewModel to act as a real ViewModel:
First, make it inherit from the class
then, define it as a partial class.
You should have the following:
usingfor being compiled. Indeed, a reference to CommunityToolkit.Mvvm.ComponentModel is required for ObservableObject to become truly understandable by the application.
These two steps are necessary for MVVM Toolkit to generate source code with just specific keywords. In short, you write a single word and it automatically generates dozens of lines of code, isn’t that great? 🤘
For example, we will define our Enter() method as a command by adding a simple
[RelayCommand] attribute. Here’s how:
With just one word, we now have an Enter() command which supports the Data Binding technique! And this is only possible thanks to the MVVM Toolkit library that takes care of generating all the necessary source code.
Demo is coming soon!
Almost there! Only remaining is to activate the Enter() command when the “ENTER” button is clicked.
Let’s first reopen the file
HomeView.cs to link the view to the
HomeViewModel via the BindingContext:
Then define the action for
EnterButton with BindCommand to trigger the Enter() command that is specified in the
And there you have it!
Well, yes in theory! But our app still lacks several key features: an authentication system, a database, etc…
For example, once we will have created the main page of the application, we’ll need to configure its access from the home page! And this is what we will see in the next chapter.
More articles in the series: