All right, guys.
So now we need to set up our details page.
And the syntax to do the details is quite verbose.
I kind of type two toed for you, but I'll be walking through it step by step now once again.
In a web application, you typically use the I.D. in a data driven dynamic up, you would use the I.D.
and then you go and fetch the record for which that I.D. is responsible.
Right.
But in our starting up, I'm going to show you how we would actually try to pass our object that is
currently being interrogated.
So we know that we have the data template.
We have a bunch of modern times cards and all that.
Our data source is going from that car, so each frame represents a different car.
We're only seeing two data points.
What we want the whole object so that we can display that object on another page.
So that means we want to pass the whole object as our Parliament to the next speech.
So when we come here in command, we're going to see a binding.
So you open up your curly braces, first of all.
A There are quite a few calibrations, so I'm going to go very slowly so we don't miss any.
So we open up our first pair of curly braces.
Then we say a binding source is equal to and we open up another pair of curly braces, then relative
source and then and sister type equals.
Then guess what?
Another pair of curly braces.
And then we specify the type which is x colon type.
Then we say view model, car list, view model.
So after we do all of that, that is our command syntax then.
Oh, I'm sorry.
So sorry.
That's the first set criteria.
Then we say Como Pass is equal.
So this is where I want to go.
So essentially we're seeing we want to go to this path and this is the data type we want to pass into
the path, right?
Then in command parameter, I'm going to have binding full stop.
And then this means this, right this instance that you are tapping now this is the instance that should
correspond with the data type that I want to pass this command.
Now, this command doesn't exist yet, so we're going to go ahead and create that.
So I'm just going to borrow that.
Remember that we don't actually need more methods.
Command.
What we do in our view model is we create the method.
So it just say async task and then I call it get card details, not get card details command.
But we do decorated with a command so that it needs to generate the actual command property to correspond
with this method.
Come to think of it, I'm thinking that I should have named this kind of differently.
I said get card details.
I'm not really getting the details.
I really just want to navigate to the details page for the car.
So get card details, page command.
Well, that's fine.
That's semantics.
I mean, you could easily have just click, go to details, go to card details.
Right.
Anyhow, let's proceed.
So at this point now, that is we have created the command.
I need to give it its parameters.
So remember that we are expecting a parameter type of car.
So whatever parameter I would have passed in here.
Right.
You'd have to make sure that you are expecting that data type on the other side.
So in this case, it's car.
Later on, we'll see it with a simpler situation ahead.
So I'm going to say if a car is equivalent and all I could return, I could also probably just fire
off an error seeing, well, you know car doesn't exist something that what we can continue.
And then at this point I can see a weird shell that's current.
So I already have that familiarity with that syntax shell, not current.
And then to navigate, I can say go to async.
So this now allows me to go to whichever page I want to go to.
At least internally.
Right.
What I want to do is go to the details page of the car.
So I don't have that page yet.
So I'm going to say car details page.
And while that is there, I've just finished results.
And what is what does this want?
It wants us to specify the name we want to animate.
I can say true, I want to animate and then we can also pass in our parameters.
So the parameters here would be like a value string.
All right, well, a dictionary.
Right.
So string value pair are string object pair or whatever.
Key value pair.
So new dictionary.
And he's going to take the string as the key.
So what is the name of the parameter versus object?
What is the data type?
Because it doesn't know.
And frankly, at this point, it doesn't care what data type.
It just it's prepared for anything, right?
So in this case, it does not care if it's a car or if it's an integer.
It just wants to know what should I expect?
So here our parameter is going to be and I'm just going to use the name of the car and the value will
be car, right?
So the name of car and the value is car.
And there we go.
So all of that, just so we can pass over a whole object or authority dispute.
So let us create our data speed something to the right click.
And remember I said that we have the views for someone to actually put that one inside of the views
folder instead of a new item.
And then I'm going to go to Maui.
Creates a new content page using XAML.
And I did not name it before I created it.
So let me do that again.
Did that kind of quickly a new item?
Content pages.
XAML where Niemi Card details page and then we can add and then we remove the incorrectly created one
so not that it exists in the code behind off the car list view model in the code for the card issue
or other.
I can add the using reference so now it knows where to find our details page.
And so the same way I just put this in views if you want, it could put main page and views.
Not really necessary, but you know you can do what's best for you.
So that is how we would wire up the navigation to go over to our details page.
And of course, we're going to have to create our own our own view model for our eats page and do the
wiring.
So what we need to do now is go ahead and wire up our view model for the details page and then add the
parameter accordingly.
Right.
So in view models, let's create the class.
And we're going to call this card details view model.
And then the first thing I want to do, apart from changing this from internal to public, the next
thing I want to do is to let it know what to expect.
I also want to make sure that it is partial and that it is inheriting from our base view model.
All right.
And I need to add what we call a query parameter.
So just like in each email or.
Well, more like higher level service add programming, you know, like PHP and it you would see those
query strings.
Those are query parameters also.
So our object, which is the object of the car, is our query query parameter data.
I need to set that query property here.
So queer property.
And then what we do is give it the name.
Just like when we were passing over the details, we said the name.
And then we said the data.
Right?
So just assume we're on this side.
I'm going to say the name of car.
That's what we're expecting.
And you can call the caller I.D..
Well, it's still the scar, right?
There's no real I.D. So that is what we need to do to get that wired open.
Expecting a car to come over.
All right.
I'm also going to set an observable property.
Observable property.
And this will be off a car.
So.
They'll say, car, car.
And that's what we're going to use the horse, the better for the page.
All right.
While we're at it, let's go ahead and wire up our details page.
We don't that we're going to do some form of injection here.
So card details, not page, but each of you model.
And then we give it an appropriate name.
Go ahead.
Addressing, using references, and then we set the binding context here, binding context to be equal
to a copy of our card details.
Your model reference.
There we go.
So now our card details speech knows that it's getting everything from.
And we've been through this operation, this kind of exercise before.
So at this point, what happens is that when we navigate here, it's going to fill our observable property
automatically.
So that means now we need to wire up our details page to know what it is waiting for.
So we're still going to add some of our excellent namespaces.
Oh, sorry.
I just remembered also that I can set the title here.
So see to.
When you Lord I wanted the title to be equal to.
And then here we can see.
Let's concatenate a string.
So I went to see.
Details.
Card details.
I never could put in maybe even the card not.
Model.
Car.
Not me.
And so we know that we're looking at which which cars details exactly we're looking at or that should
we make them model apologies.
So car model car make their go.
So back to our XAML page.
All right.
So we can say X amount in space.
And we're going to call it.
I'm just going to call it VM for brevity.
And that's going to be equal to CRL or hyphen namespace.
Colon.
And then we put in where we know our new species are.
So that would be Calista, my sweetheart.
View model parts fuel models variable.
So that is our namespace for view models and the title here.
I'm going to set the binding.
To me title.
What was the title of the page when it got loaded?
Right.
For the label.
Let's just do a test quickly.
And I'm just going to say binding, Vin.
And so.
So after doing all of that, I believe.
Oh, one more thing we need to tell you.
I'm sorry.
So we need to say X data type is equal to and then I would just say VM, colon and then car.
Card details view what?
So let us test that out.
Actually apologies.
So that would give you an error and the error saying that they cannot find the property, Vin, inside
of that view model.
But I do have a property called car, so the car object is there and from the car object I can get the
VIN.
So apologies for that.
So let me just review why we got that error.
So remember that we're getting a car and we're binding that to our object here, the car.
So the data that was passed over is not embedded inside of this object or this property.
And so to access anything, we need to go and get that whole object.
Then we get the thing.
All right.
So we're almost there, guys.
Just a few more housekeeping matters, and I've tried to prepare them for you.
I'll just walk them through for you.
So, one, we need to go to our app Shell to register our new page.
So remember that when we created new pages, we had to put them here, especially if we wanted them
in the navigation bar.
But I've done it in an alternative way where registered the route for our new page.
So this register route has several overloads, but the one that I'm using is the route and the type.
So on the string route and then we want to type.
So here you would put the page name and of course we're using name offset out where, you know, type
save.
And if we have to refactor, it's much easier to maintain in the long run.
So you just see name of car details page, that's the name of the page.
And then the type that represents the page would be type off and the same type, right?
So we can just add that to our up show.
If you're not sure where to find Upchurch, that's yes.
You look for the upsell file and then you go to the upsell that's above that CSV file.
Another thing that we want to do is to register our new view model and our new page.
So let us jump over to our program.
That's yes.
And you'll see that I added these two lines.
Right.
So the first one I've added under the previous view model and this time I added transient.
So remember that we discussed the difference between Singleton Transient and scoped in this case, I'm
doing transient because I want a new instance of the page every time.
So the way that Maui works is that when you request a page, it actually creates the page for you at
the time of request.
So it is possible that I would give you a different car each time or the same car each time.
We don't know.
So we're just going to create a new instance and let the rest happen accordingly.
All right.
So that is what we have for our car details.
You model and our utils page.
One more thing that I want to.
I could suggest that it's not absolutely necessary, but we're going to do it just so we can see what
happens.
We can in the car detail speech, start some of that ceasefire.
We can add this line that well, this method that would allow us to see the UN navigated to.
So there are actually several events that we have access to here.
And if we want to override or do something different, we can always just type override and it will
see all of the methods or the default events that we could actually override.
Right.
So I can say I navigated to navigate that from if you want to do something, when somebody leaves a
page, all of those things you have access to.
So I can just go ahead and hit enter and then it will generate that stub.
This will do the default.
So what would happen is that if you wanted to do some fanciness right here, do funds in this and misspell
fonts in this property first, and then you would call whatever it would do by default, right?
Or you could do whatever it does by default and then do your fancy.
So it really doesn't.
Well, it's up to you, the programmer, to assess what you need to do.
But what happens is that when the page is loaded, this gets fired.
And that is where it actually takes the arguments that were passed over and then sets up whatever it
needs to set up before it proceeds.
Right.
So let us test this out.
So here we load our main page them refresh the cars, web, have our list of cars, and then I go to
Honda Fit.
All right.
So I'm actually tapping this thing and it's not working.
And the reason for that is we're setting the title right here in the View model.
So I am inclined to believe that the data there's some there's some issue happening here with the constructor
set in the title here before even the observable has been born.
So what I will do is not set the title there and I will do it inside of The View.
So these are good moments to have.
And you know me, I'm not going to hide anything from you when I make a mistake, I want you to see
so you can understand what happened.
So what I'll do is actually just write in the title manually here.
So I'll just say car details.
And then we can set up the binding.
All right.
You know, let me keep it simple.
We can make it complicated another time, right?
So just keep it simple this time around.
And as I say, binding car not.
Model.
Right.
It also could stand to reason that we once again put on a two string property on this model that would
return that make and model combination like we spoke about.
Right.
So.
That's up to us to decide how we want it.
But let's just keep it simple so that we get our navigation working so that we make those changes and
then test again.
And there we go there.
So it just navigated to our detail speeds.
I'm seeing Honda that is arm me and I'm seeing the VIN here.
One, two, three.
Of course, it could mean that font size a bit bigger.
So let's just say medium.
Let's see what medium has in store for us.
Medium is a little bigger, let's say large.
Right.
And of course, you know that we could use an integer if we wanted to right here for the size.
So, once again, I'm just giving you guys ideas.
I'm not going to get all fancy with this speech because the data is kind of anemic anyway.
But that's pretty much what we need to do to navigate and see that we automatically have a back button
here.
So we can always go back to the list, click another one, and then it will go all right.
And we can navigate between all our points of data.
Now, this is all well and fine.
Remember that we have the list one.
It's a static list.
And two, we're passing the entire object over each time, which isn't necessarily what we would want
to do every single time.
So when we come back, we're going to start looking at how we can set up a local database, how we can
fill it with some data, and then we can, instead of having a static list and passing data like that,
actually pass only the idea or the minimum amount of data that we need to fetch the details.