>>Welcome back. In this video,
we're going to take the same app we made in the last video,
our single-page Xamarin Forms application,
and implement the MVVM architecture.
So you'll notice, the app running on my simulator,
looks very similar to the app that we made in the last video
with a slight difference because I've added in a list.
So now when I click "Save",
I can save multiple notes into my note-taking app.
As we'd expect when I tap "Delete", everything goes away.
Now, what is MVVM?
MVVM is an acronym that stands for Model-view-viewmodel.
So in my app here,
I've added in the corresponding folders.
We now have a Models folder,
we have a ViewModels folder,
and we have a Views folder.
Now, Views is our UI code.
This is the same UI that we
implemented in the last video here in C#,
but we've removed those click handlers.
You'll notice in this code,
there's just bindings everywhere.
We don't necessarily have any code
that runs any actions when the user taps on a button.
We just have bindings, bindings, bindings everywhere.
Those bindings are talking to our ViewModel,
because in MVVM, we separate the UI code from the ViewModel code.
In the ViewModel, that's where our business logic happens.
That's where all the code that runs when we tap on buttons,
or if we wanted to interact with APIs,
if we want to update the screen,
all that code executes in the ViewModel,
and just tells the screen how to update.
So the View and the ViewModel
don't know what each other are necessarily doing,
but they're always shouting back and forth to each other
to let each other know about what updates they've made.
So let's first start by looking at our models.
Here, I've created a NoteModel.
I've created this NoteModel and the model
in MVVM just describes an object.
So in this case, we're taking notes,
and what does a note have?
Well, a note is going to have text.
So I've created this public string Text.
Now, we could also add in something like DateTime,
here we go, and we can keep track of maybe the TimeStamp,
for example, of our note,
or maybe we want to add in a Title.
So all these things that define what is in our NoteModel,
we define here in the NoteModel class.
So in MVVM, this is the model.
So the NoteModel doesn't do anything.
There's no behavior in here.
It just describes the values of the note.
Now, let's look at our View and our ViewModel
side-by-side to understand what's really
going on and how they communicate together.
So the way MVVM works,
the UI is separate from the Business Logic.
So the View is separate from the ViewModel,
but they shout back and forth to each other with
updates anytime values change.
The way we connect to each other,
the way we loosely couple the View and
the ViewModel is via the BindingContext.
So I've set the BindingContext of the View
equal to our MainPageViewModel.
So now, when the MainPage shouts out any updates, so, for example,
when we add text to the editor and it shouts out,
"Hey, the editor's text has changed."
That ViewModel is listening and it knows what to do.
The way the ViewModel knows what to
do is because of these bindings.
So by setting a binding under a note editor,
we have said that anytime your text property is
updated shout out to the ViewModel that NoteText has changed.
Our ViewModel has a property called NoteText.
So when the ViewModel is listening and
hears that NoteText has changed,
it updates this value in the ViewModel.
So this string in the ViewModel will always be the same value
as the value that we see on the screen in our View. Pretty cool.
So likewise, we've added in bindings to our buttons.
So our buttons, they now shout out,
"Hey, SaveNoteCommand has executed."
Say that again. So our buttons now will shout out,
"Execute SaveNoteCommand" anytime the user taps on the button.
Just as we expect in our ViewModel,
we have a property called SaveNoteCommand,
and this is what will execute anytime the View shouts that out.
So likewise, with Delete button,
we have a EraseNotesCommand,
EraseNotesCommand here in the ViewModel,
and something new in this app is our list,
which Xamarin Forms calls a CollectionView,
it has a item source called NotesCollection.
So that item source, that is
just the items that appear in the list.
As you'd expect, we have
a property in the ViewModel called NotesCollection.
So again, anytime NotesCollection is updated,
it shouts back to the View to let it know,
and then the View displays the updated list.
So let's take a look at what happens here.
I'm going to put a breakpoint here in my ViewModel.
Now in my View,
as soon as I start entering text,
we should hit this breakpoint, and there we go.
So I typed in the letter H, and right away,
what happened was the View
shouted out to the ViewModel said, "Hey,
update NoteText with this new text value
because the user typed it in."
Down here in the ViewModel,
we can see that our new value is H. Cool.
So that means the NoteText will
always be in sync in the ViewModel,
with the actual value that the user has entered into the View.
So let's keep running, and let's see what happens when I enter in,
let's enter in a little bit more text here.
Let's get rid of that breakpoint first,
so we don't keep it in. There we go.
"Hello world". So now,
let's add in a breakpoint up here into our command.
So we have our SaveNoteCommand which is bound to our Save button.
So when I tap the "Save" button,
the View will shout to the ViewModel and
say, "Execute the SaveNoteCommand."
So when I tap this, our SaveNoteCommand executes,
and we hit this breakpoint where we create our new NoteModel,
and we pass in the text for our note,
passing the NoteModel to our NotesCollection.
Then, because we've saved it,
we go ahead and clear out the text of the user's note.
So when we click "Play", there it is.
So what we've done,
we've implemented MVVM into our single-page application.
Our UI code is now separate from our business logic.
Our View is separate from our ViewModel,
and this is important because it helps us maintain our apps.
If we want to now update our UI,
we can do that without having to
worry about changing anything in the business logic.
Likewise, if we wanted to update the business logic,
we can do that without having to worry
about affecting anything in the View.
Thanks for joining me today,
and stay tuned for our next video where we
add a second page to this application,
and learn how to navigate back and forth between pages.