All right, guys, welcome back.
So I'm still in debug mode.
And up until now, what we've done is modify or up to the point where we can now see the list of cars
that we have where we hardcoded them, but we've got our fixed cars button to work.
So in this lesson, I'm going to focus more on the aesthetics of the app.
And really and truly, of course, aesthetics is a matter of either personal taste versus actual requirements.
So don't mind me too hard.
I'm just showing you ideas.
But of course, let your creativity take the lead.
Right?
So let us modify, first of all, our our grid.
Well, not the grid, the frame.
So we have the frame and I want to put this frame inside of a grid.
So let me do that.
Let me.
Create a grid, and I'm going to give this grid a putting of ten.
And then we can expand and then I'll save and then we can watch it refresh.
There we go.
So now it's in a grid with a putting of ten.
So you can see that putting, working everything.
It's no longer switching max to either side.
It's now kind of inside the display, inside the layout.
And then we have each frame more distinctly noticeable.
So that's one.
One very simple fix.
I think it has a big impact, though, for our button.
What can we do?
So I don't like the way the button is kind of stuck to the bottom of the page.
I can probably I mean, just briefly and so it comes on here.
I can probably give this button a margin and give it a margin of let's try name.
Let's see what we get.
All right.
That looks a little better.
So now it has a little margin away from anything that is near to it.
So remember that margins push other objects away, whereas the padding creates more space between the
borders and the content itself.
Right.
So I think that's a little neater display.
All right.
So no other control that we need to look at is called the refreshed view.
So I've kind of typed up already and I'm just going to walk you through it.
So first of all, it's an open floor because it's a container.
I put it inside of our grid.
Here's our CollectionView.
Right?
So I put it between the grid and the CollectionView.
So our refreshed view is what would allow us to drag down on the screen and actually refresh the content
that is there.
So you can see that animation when I drag down, but what we wanted to do is actually refresh the content
and reload our CollectionView accordingly.
So refresh view one.
I'm telling you that we can span the two columns because the new container we're going to give it the
command binding that the button has for the get car list command.
So whenever you refresh, I want that command and then we have a property here or an attribute rather
is refreshing that and binding to our property on the view model.
So for this property I'll just jump over and show you that one.
First of all, remember that we define a field and we give it the annotation observable property.
So that's on the car list view model.
So this is the first observable property that we're creating on that view model.
By doing this, we get the corresponding property right?
Now what happens is that when you activate the refresh, it's actually going to send over a true because
you just activate a refresh so it knows that it is refreshing.
So this is going to be true once it hits the command.
So remember that like with ease loading, it would default to false, which is why we had to set it
to true and then set it back to false.
So in this case is refreshing and starting off as true.
So finally we set it to Falls, right?
We don't have to set it to true or anything because it's already coming over as true.
So we just started the falls at the end of our loading and refreshing operation.
So now with that done, I can take this collection view, cut it and then paste it inside of our refreshed
view.
So now this entire collection is wrapped up inside of the refreshed view accordingly.
And what we can do is remove the grid.
Cause spun because now we have the parents are responding to columns and this is just going to be as
big as a parent.
Right.
Another thing that I have done in anticipation of our next lesson is add frame gestures.
So remember that our frame would be the outline surrounding any one of our items, right?
However, all we're seeing is make and model.
We also have maybe the year.
Well, in our demo we didn't put in the year, but we also have the VIN and a lot of other details about
the vehicle that we may want to see.
We can have those, right.
So the fact is that you don't usually list out every single detail, but you would have a page showing
the detail of the selected car.
Now, the way you select that vehicle, at least on a mobile phone, would be usually the top.
So we have what we call frame, the gesture recognizers.
So inside of the frame, we're just going to create this new section frame, dot, gesture, recognizers,
and then we have the top gesture recognizer.
They have several just circle measures that you could use.
So you have the top, you have click, you have child drag drop.
I think even swipe right, you can swipe and then maybe determine the direction that you're swiping
in.
So whether they swipe up on left or right, you can make different decisions based on those gestures,
right?
So with our tap gesture and even with the tap, we can even see the number of steps required.
So is it a double tap?
Is it ten times, etc., but without specifying it will default to one.
So once we tap, we want to execute a certain command, and then a command parameter here allows us
to parcel with the data.
So typically when you want to see the details of something in our web application, you would possible
over the idea that you would go and fetch the details of that record based on the idea that it got in
a mobile app.
You could actually pass over the entire object if you wanted to, and that is the one we're going to
do while we have our static list later on.
We look at the idea option, but there are tons of options available.
So you can go ahead and meet those changes.
Of course, as you made those changes, you see if you are running in the debug more than in, you can
always just refresh and test and see if you see any difference, right?
So those are some changes that we can make.
So when we come back, we'll finish this up.