>> Welcome back. In this video,
we're going to take our application and make it functional by
adding a little MVVM to it using XAML.
So what is MVVM.?
It stands for Model View View Model.
So if you're used to MVC,
it's a lot like that but except with
a little more Vs and a little more Ms.
So let's break it down a little bit.
The model in MVVM stands for data,
and now, this is just the data that you're passing around.
The view in MVVM is your user interface
or our page in Xamarin Forms
and it's the page that we happen to build up with XAML.
Now, let's talk about the cool thing in
MVVM and that's the view model.
So the ViewModel is the brains of your app.
It's what's going out and talking to
various web services or doing any application logic for your page,
it's what makes everything work.
It's composed of several properties.
Now, what's neat about these properties are is that
they're bound to UI controls on the view.
So let's say you had an entry and you're typing into this entry.
Well, if that entry is bound to the ViewModel,
that ViewModels property is automatically going to
be updated as you type into it.
The same thing if that ViewModels property changes,
the UI is going to change
automatically as well when it's bound to that property.
It also automatically fires commands.
So let's say you had a button.
A button has a command property.
So when a user taps on it,
the commands action gets fired.
So a ViewModel has properties which are bound to UI displays.
It also has commands which react to users actions on it.
So let's get going and add some MVVM goodness to our application.
So this is the app as we left it last time.
But we're going to add ability to show
a list every time the user types in a note and clicks
"Save" So what I did is I went ahead and
I just created a class called main page view model.
Now, generally with MVVM you're going to
have one ViewModel per page.
Now, with this main page view model,
what you're going to implement is I notify property changed on it.
So what that does is that it's going to let
the view know that anytime a property changed.
So it does have an interface that we have to
notify and what that is is just a property changed.
So once we get that there,
I want to then implement a string to model the note.
So It's going to be public string, the note,
and this is just going to be
a plain property as far as the get is concerned returning
the note but it's where the setter comes in
is where the interesting part happens.
So instead of just setting the note equal to a value coming in,
which I do want to do,
I also want to create an argument of a property changed event ads.
That's going to pass in a name of the property here, the note.
So what this is going to do is I'm going to
let the view who happens to be listening
to it know that the note property changed.
Then finally, I want to invoke that property changed event.
So make sure something is subscribed to it,
invoke it, and just call this and then pass the ads to it.
So now what happens is I have
the note property and it's all hooked up.
So when something's bound to it,
it's going to change anytime the note
changes in the view model and
the view model is going to change this property
anytime the note changes in the view.
So the next thing I'm going to create is a command.
So the commands are going to be, I'm going to call one,
Save Command and I'm just going to make this
a get and another one called Erase Command.
Again, it's going to be a get as well.
So what I'm going to do is create them,
knew them up in my constructor.
So the Erase Command is a little bit easier.
So I'm just going to do Erase Command equals
new Command and into the constructor there,
what I'm going to do is just pass an action that I want to
have invoked every time the command gets called.
So here, all I need to do is say, the note,
this property that we just created,
I'm going to say string.empty, pretty easy.
However, for the Save Command,
I'm going do something a little bit different, is first,
I'm going to create a collection
and I'm going to call it observable
collection of type string
and what this is going to do,
it's going to let me create a list and anytime
this changes it's going to let the list update.
So in might Save Command,
again, it's just going to be a new command here.
First thing I'm going to do is take my old notes.
I'm going to add to it,
and what I'm going to add is the no property because I know that's
changed and it has whatever is been entered in that text field,
and then I'm going to say the note is equal to string.empty.
It's pretty neat, that's all I need to do here.
So my view models all set up for me.
So then in my main page,
first thing I'm going to do is actually import
the namespace of my view model.
So in XAML, imparting
a namespace which is pretty much like a using statement it
looks like XML NS and then I can look for something like
XAML UI which happens to
be my namespace of words to find and then view models.
So the next thing I'm going to do in my XAML
is do a Contentpage.bindingcontexts.
So what this is saying that I'm setting up
the bindings for everything to be
this next class which is the main page view model.
Cool. Now the fun part,
setting up the bindings for everything.
So for my editor,
I'm going to make the text be equal to
binding and you could see what comes up here is an IntelliSense,
I can say the note neat my "Save" button.
I have a command equals binding.
Again, save no command,
and I'm going or make sure I have that defined
as public which I did not.
Make that the save no command and in for my erase one.
I'll get rid of that wide space.
So for now, I'm just going to then add in something
called the collection view that'll let me display everything.
First thing for that is a do
an item source which let's me tell it where I want to get
the data from and so that's going to be a binding and
that's going to be all notes which
is that collection I just created before.
Then it's going to be Collection View that item
template and then data
template and this is all just creating things.
So this would be the same no matter what all the time.
Then finally, within here,
I'm going to do a stack layout and
this is what we talked about before when
we're creating the view, a frame,
and then finally a label and it also gets a user binding
and the syntax here is just dot because it's a string
coming past in and there's no property for that string.
So let's run this and see what happens.
All right. Our application is up and running right now.
So I'm going to enter a note,
and I'm going to say Hello World.
Now, as soon as I did that my note
in the ViewModel should be bound.
I'm going to hit "Save".
I hit "Save" and you can see that Hello
Word came in at the top of the screen.
Well, that's because I didn't set the grids in my collection view.
So using some XAML,
I'm going to do grid that row equals to three and I'm
going to do a grid.column span equals two.
Now, I don't necessarily have to do a grid.column
equals zero because it automatically
assumes that I hit "Save" and I'll
do Hello World yet one more time.
Come down I hit "Save" and
you can see it happened right at the bottom
then maybe I'll just make
my text font size a little bit bigger here.
We'll make that title. Save it.
One last time and you
can see it comes in big it says Hello World and
what's cool my delete also works.
I just have hello,
hit "Delete" and it disappears.
So now we have MVVM working,
we have properties bound to the UI,
we have commands reacting to the user's actions,
and so in the next episode,
we are going to show how to add navigation to our app by
using the Xamarin Forms built
in navigation framework. So check it out.