Creating Page Views

[00:00:00]
>> Okay, so we have now an app that looks like an app, the next step is to actually create views for each page. Actually in Swift or SwiftUI, we don't use the page concept, but I think that it will become clearer if we call them page. That's why I called OffersPage.

[00:00:19]
But it just need three more pages. What is the page? A view. And at this point, we have more files here. So maybe it's time to start creating subfolders and, by the way, I haven't mentioned this before, but you can actually drag these elements as you want. This is not actually order by name.

[00:00:44]
You can drag elements. And this is actually not even a one-to-one view of the real file system. It's actually a built-on file system. So I can create not folder but groups. You right-click, it's called group. So I create a new group. A new group, for example, I can create one for views.

[00:01:05]
And I can put here the offer. And I can create another one for page views. Sorry, right-click New Group, Page Views, they're not just views also, but just to separate the smaller views, the smaller components, from the larger ones. So on Page Views then, I'm going to put OffersPage, like so.

[00:01:32]
Do I need to change anything on the code? No, that's why it's called groups, it's not a it's just the same, okay? It's just organization for us, for humans, that's all. So what I need is three more files. So I'm going to create a new file, a new SwiftUI view for the home that we can call that more the menu because it's a coffee menu, okay, the menu page.

[00:02:06]
We can create another one, New File, for the CartPage, and finally, another one for the InfoPage, Like so. And now in my ContentView I don't need a text. What I need to render for the tab is the MenuPage. For the OrderPage, CartPage, I'm sorry, let's call it OrderPage.

[00:02:48]
How can I change it? Well, I need to go and change the name, the file, but also every reference. If you want, you can Command+click here and select Rename. Also, you can right-click, Refactor > Rename, just the same thing. And the UI is kind of weird because it looks this collapsing.

[00:03:14]
And now I can just change CartPage to OrdersPage, for example, up to you, like my order or my order page, and it's also changing the file name and all the references to it, okay? So just a nice way to show how to do that. So we have OrdersPage, and then InfoPage.

[00:03:40]
And every time we make big changes in the code, we actually need to the resume the preview, and now we are kind of back on the same thing. But now we have separate views per page, okay? Does it make sense? So we are going to work and maybe instead of Home Page, we can call this menu, I mean it's up to you or coffee menu, or however you wanna call that.

[00:04:04]
Now it's updated there at the bottom. Okay, so now we need to work with the UI. So inside products, what we want is something like this. That looks complicated, but no worries, it's not a big deal. First, we have items, so each product is an item. So something that I can do here, if I want to, is to create a new view that will represent each item as a reusable component, okay?

[00:04:41]
So I'm going to create a new file, a SwiftUI view, ProductItem. We don't typically end with view, unless we need to separate this from something else that has the same name, we don't say it's not a button view, it's a button, okay? It's not a product item view, it's a product item or product itself, or it's up you.

[00:05:08]
And here we need to make the design, in this case we're not going to learn anything new designing this page. Because it's just an image, a text, some padding, some border, colors. So because we are not learning, maybe we can take the code from here, it's this one, ProductItem.

[00:05:27]
So it's a VStack with an image, an HStack with some text. So nothing really fancy, so I can just copy the body. The only thing that I think is new here is that we have cornerRadius. That's pretty cool. We can actually apply rounded corners to any element. It's actually something really simple to do.

[00:05:52]
And also I paste it in the wrong place, cuz I need to replace the whole body like that, okay? So if I resume, it's going to look like this, okay? But what about the image? The image is going to come from the server, okay? But can we do something for the preview?

[00:06:17]
Because I wanna see the image. So here it says, DummyImage, okay, as an example, but can we actually make that DummyImage, really? Well, actually, there is a folder that we were not using so far with the name Preview Content. In Preview Content, we can add assets and even code that will be used only for previews.

[00:06:46]
So here, for example, I can take the image that you have in the assets that says BlackCoffee.png. And I can call this DummyImage, for example. There is one version, I don't need to set three versions of the PNG. So I can just say that this is a single scale, I have only one version, and that's all.

[00:07:13]
That means that now, We will actually going to see this as a dummy image, how to make it work? Well, first, we need to create the data, so we'd have some data model to connect to, okay? So we're going to do that in a minute. Before doing that, let's keep it like this.

[00:07:42]
And now let's work with the MenuPage, okay? So the MenuPage, we have a list of those elements. In this case, I'm not going to use a VStack. I'm going to use a list because it has a scroll, and it has other behavior. And also I need a title.

[00:08:01]
Remember that nice title that we have. That's a navigation view. So I create a NavigationView, inside the NavigationView, I'm going to create a list, okay? And in the list, what I want is a ProductItem, like that. And I need a couple. So I can Command+click here and select Repeat.

[00:08:29]
This is just making a for each, like so. It doesn't look so bad, right? So then the NavigationView needs a navigationTitle modifier. So we can say these are the products. Okay, yeah, we don't have the mesh yet. We don't have real product names, just fake prices, okay? But from a UI point of view, it doesn't look so bad.

[00:09:02]
Again, it's not loading images. And if you want more than five, you can just change this number. And if you enter Interactive Mode, you can actually scroll. Okay, does that make sense? So what else do we need? Well, we need to get into each element, so I need to click on each of these elements.

[00:09:26]
So here if I click Cappuccino, it goes to a Details page, okay? Does it make sense? Yeah, we have a question.
>> Can you explain the difference between assets and preview assets again?
>> Sure, the concept is just the same. The difference is that preview assets will only be available for previews while in development mode.

[00:09:52]
They will not go to the final iPhone application. In fact, you can also add your own Swift files here. You can create a dummy API Swift file, and that Swift file, if you create a class here with, I don't know, DummyAPI or something like that. That DummyAPI will be available only for the preview.

[00:10:15]
And you can use this trick then to some kind of do testing. It's kind of like a more tab or something like that, you can mock APIs pretty simple, but this is more optimized for UI. But anyway, you can use it for other purposes as well. So, what else do we need here?

[00:10:36]
Well, we actually need to get into Details. And Details is another page, remember, we are trying to achieve this behavior that looks very complicated because we have a Back button, okay? But you will see it's actually pretty simple. So we also need some background colors and things like that that we will solve in a minute to actually make it more similar to this example.

[00:11:03]
Also, there are some titles there like hot coffee, and so on, and the image at the top. But before doing that, let's make another page, the Details page, that is actually going to be our last page for today, then we need to finish the other pages. But in terms of creating new pages, that's the only page that we need.

[00:11:26]
So I'm going to create a new file. In SwiftUI view, remember, a page is just a view, it's going to be the DetailsPage. And within the DetailsPage, right now we have just the text. If we want that nice title at the top, okay, the Black Americano, we need at least a NavigationView.

[00:11:56]
Now let's say we keep the text for now, Hello, World. We need navigationTitle, for now let's say Details, we're going to make this dynamic anyway in a couple of minutes. So how can we jump into that DetailsPage, okay? It sounds complicated. Actually, it's pretty simple. So going back to MenuPage, we have a list of product items, the only thing that we need is to wrap that product item into another element that is called the NavigationLink.

[00:12:36]
We need a NavigationLink, and the NavigationLink has a destination. The destination is actually, what is that? What type is that?
>> Closure.
>> A closure. So within the closure, we need to return, right, where we wanna go. So the view that we want to render when the user clicks on that item, and that's a DetailsPage.

[00:13:05]
And in the label, what do we want inside? So inside, we want the ProductItem. So we wanna render a ProductItem and when you click on that item, we want DetailsPage. Just that, let's resume the preview. If I click on one of these items, viola! We have the animation.

[00:13:31]
We go to another page, I have a Back button and the Back button has automatically the preview's title that has a nice animation, okay? So also we have the pick chest tub, I need to use a simulator to actually see that in action, where you can actually pick what's behind.

[00:13:51]
So I click here and I can actually pick, it's not easy with the mouse or with, okay, something like this. So just by adding two lines of code. So to make this navigation then, you need a NavigationLink and another view that will go automatically. So you can see it, now it start looking like an app.

[00:14:17]
Okay, so we have tabs. We have navigation here. We still need to connect to real data, okay, and maybe some small adjustments, but it works, okay? Do we have any question at this point? How does it look like?
>> So what was the difference? Is it indexes, I mean, you have 15 items there, right, you have for each there, right?

[00:14:45]
>> I have a for each, so I have 15 items that are just looking the same.
>> Okay.
>> We still need to connect these to real data.
>> Okay.
>> And we are going to do that next, maybe I wanna render the DetailsPage with something better. So here I also have have already designed, if you go to the next page, the DetailsPage.

[00:15:09]
So it has an image, a ScrollView with an image, a text, an HStack, text, button. So there are not so many different things here, okay? We have some new stuff, but for now, okay, this is the body that I can add here, like so. And I will have, something that we haven't seen before, it's an stepper.

[00:15:39]
And a stepper, it's actually this wheel that you can step between a minimum and a maximum value, okay? It's not available in HTML, so it's something that you need to create manually if you want. It needs a binding to a property, so, I'm missing an S here. So, remember how that works?

[00:16:06]
We need to create a variable that has one special, let's say like annotation that says that it's in a state variable.
>> Is it @State?
>> @State, so @State var. And we're going to set the name, quantity, and we start as 1. And then that stepper can include a binding, remember the binding is the dollar sign.

[00:16:37]
And this is from 1 to 10. Okay, so if you change that, and what I had here in the bottom is add the quantity to cart. So the navigationTitle for now is going to be dummy as well. So let's resume this, okay? It looks like this, and if I go to Interactive Mode, look at my dummy image, that's the dummy image that I have for the preview.

[00:17:13]
So add 1 to cart, can you see the 1 there? Add 1 to cart. If I say plus, because there is a binding, it's changing that text as well, the text of the button. And all the other properties are just padding, so frames, things that we have already seen, okay, to actually design something as you want.

[00:17:40]
We have a dummy image, a text, an HStack with a text as the stepper. The HStack is actually the one that is making these two elements horizontally aligned. And, I think that-
>> There's no total, right? It doesn't add it up, does it?
>> Sorry, what?
>> It doesn't add up the total, right?

[00:18:05]
>> Right now?
>> Right now, yeah.
>> No, the number is fixed. Can we make it without, the problem is that we don't have a price variable. So we're going to do that, okay? We're going to do that. But it's better to have the model first so we have the price somewhere, okay?

[00:18:22]
>> That's double binding-
>> It's double binding because this is actually changing, so the stepper is changing the quantity, that's why it's double binding. Okay, but from a UI point of view, we don't have the cart yet but it's actually doing something, okay, this one. I need to write it again because that's the old version.

[00:18:49]
So you click here and you can move the stepper. And the total is wrong, okay, but I can go in and out.