Creating Reusable Views

[00:00:00]
>> And here we can see that we do have a property, a variable with the name body. But we have something weird here saying some Scene. What's that some? Let me explain that quickly, because we are going to see that a lot. Think about classes or any type, it doesn't matter, any type.

[00:00:20]
Let's think about classes, because most of our mindsets are prepared for OOP. So if I create a class A and a class B, and then we create a base class. And then we say that A extends from Base, B extends from Base, okay? So we have a super class and two subclasses.

[00:00:50]
And I have a function, I'm going to delete this. So this is not part of the app, it's just to understand the idea. So if I have a function that needs, for example, or returns, it doesn't matter, like test, that returns A, of course, I can just return A.

[00:01:07]
But what if I wanna return A or B? Well, actually, you use, as you're used to, Base, okay? That's okay, but what happens if I receive here an argument? I don't know, it can be an integer. And based on that argument, we return A or B. Code blocks are mandatory in Swift, even if you have only one sentence, you always need to open curly braces.

[00:01:41]
So we return A or B based on the index, so it works. What is some? Some, when you say I'm returning some Base, it's actually asking you to always return, you can return A or B, but always A or always B. So if you have an E for a conditional, you must return the same kind of base.

[00:02:08]
Does it make sense, kind of? So its weird because we don't have this on other languages so easily. Typically you say, I'm returning a base, it can be A or B. But in the same function, you can have a conditional and return A, or return B. When we say some, we are asking that that function cannot return one kind of base, always A or always B.

[00:02:34]
Pick one and return that one, okay? That's what some means. Any question? It's weird, okay?
>> Or the main one, right? The root one, you can just return the base base, right?
>> You can return the base as well, yeah. But, always base. If you have a conditional, every return should return a base.

[00:02:55]
Okay, anyway, so we have a structure here. And here I'm returning some Scene. So what's a scene? What's an app? Well, you know what an app is, that's simple. You recognize an app. And a scene is something more invisible on iPhones. Actually, it's more useful on iPads. It's kind of a window, so think about that, how many of you are iOS users?

[00:03:24]
Mostly all of you. So have you ever seen two apps running at the same time on your iPhone?
>> You can toggle between them.
>> At the same time on the screen. Can you share the screen with two apps?
>> I don't think you can.
>> No, you can't, that's correct.

[00:03:44]
You cannot. So, on iPad, you can. On iPad you can use side view or slide view. So on iPad you can share the screen, but not on iPhone. So having more than one scene on iPad, when you share the screen, you can have two windows of the same app at the same time.

[00:04:04]
Those are two scenes of the same app, okay? Anyway, on iPhone, we are focusing on iPhone here, typically you have one scene. There are some exceptions to that but it's one app, one scene, okay? Just forget about that. And then it says I have a WindowGroup, but we all know what that is, and there is a ContentView.

[00:04:24]
And ContentView, it's actually what we have in the other file. It's exactly the name of the other file that we have. So if we go there, we can see something different. When we open this, first, a panel appears, this panel, by the way, it's not the inspector's panel.

[00:04:43]
It's like a sub panel within the source code, okay? That says Automatic preview updating post, here. Automatic preview updating post. And there is a Resume button, okay? Again, I'm in the ContentView.swift file. So if you click on Resume, it's going to render my content on a preview. It's taking some time, because it says here, it's running the app on a simulator actually.

[00:05:24]
But instead of jumping to the simulator, I can keep that simulator view within Xcode directly. If it's too large, we can use the pinch gesture, if you have a track pad like this, or here at the bottom, you have sum zoom icons to zoom in and zoom out.

[00:05:44]
So actually we can see on the screen what we have in the middle, okay? And what we do have, it's something known as ContentView. That is another struct. Everything in SwiftUI is a struct, okay? That says that it's a view. What's view? It's a class, it's a superclass?

[00:06:06]
No, it's a protocol. And similar to app, the protocol is forcing me to have a body property, that can be some View. Again, what's some? It means that I need to return a view and always the same kind of view. If I have a conditional, if I'm returning a text, it should always be text, okay?

[00:06:31]
And here it says Hello world, that we can change that. For example, I live in Argentina, so I speak Spanish, so I can say Hola mundo, that's the same thing in Espanyol, in Spanish. And you can see that it's actually changing that live in the preview. While you're typing, you don't need to rerun the app, okay?

[00:06:55]
The preview has some kind of a live reload system, okay? Does it make sense? And here we have something that says Text, capital T. Because it has capital T in parentheses, I know it's not a function. It's actually initializing an object or an structure, okay? In this case, Text is a view, and views are structures.

[00:07:24]
Everything is a structure here. So a text is just that, a text, okay? So this is like, I don't know, a paragraph in HTML, if you want, okay, that has an string inside. So what if I want, by the way, there is a .padding here, okay? Let me remove that for a minute before understanding what that is.

[00:07:48]
What if I wanna add a second text, for example, in English? What if I try this and say Hello world? Every time you make a change, sometimes if there is any errors, for example, here I have an error. Actually what happens is that the preview stops and you need to refresh that.

[00:08:10]
I'm not seeing the two texts in the same place. I'm actually seeing two simulators, which is unexpectable, right? Well, the thing is that the view of the body must return only one view. Similar to JSX, for example, if you're doing React or XML, the root element is a single element.

[00:08:43]
Does it make sense? So we need to group this somehow. So the body should return only one view, not two. And by the way, if these are returned, it's not actually a return, but we will get into that in a minute. How can we put one element besides the other, one element above the other?

[00:09:03]
Well, we have other views that will do that for us, layout views. And there is one known as VStack. Capital V, Vertical stack. Vertical stack will actually receive a content. Before writing, when I'm typing, pay attention for a second. Content, what's the type of the argument? What do you think about the type?

[00:09:33]
>> It's view.
>> It's a view, no. That's the type, the type is actually the one with the blue background. What do you think is that?
>> It's a function.
>> It's a closure. That is kind of a function. Because it's a closure, I can just press Return.

[00:09:53]
And because it's only argument, it's using the same shortcut, or the same technique that we saw before. So we are removing the parentheses, and then we have a codeblock. So if we now move the two text elements within the VStack, finally we have both text in the same place, we stack them vertically.

[00:10:22]
And because there is a VStack, there is an HStack as well, from horizontal. By the way, is this the only way to work with this? I mean, if I wanna add another text, do I need to always type text? What if I want a button, how would that button work?

[00:10:40]
Well, instead of writing SwiftUI code, you can also use drag and drop and some visual tools. For example, here at the top, there is a plus sign that we are going to use a couple of times, okay, here are the top. That will let us add elements from the gallery.

[00:11:01]
So here we can add a lot of elements. The first one, the one that is selected, is for views. So we can add views, that's views. We can add modifiers, and we don't know what that is yet. We can add snippets of code, media, images, and colors, okay?

[00:11:23]
Well, in the first tab, we see a button. Also, we can start typing text or HStack, and we're going to find all the views that we can use in our user interface. So if you want a button, I can just drag this to the code or to the preview, okay?

[00:11:50]
And it's actually inserting that into the body. So we have here one single source of truth for the UI, it's just a Swift file. We don't have any hidden XML, we don't have anything behind scenes that is actually saving the UI. Everything is actually changing the same thing.

[00:12:14]
And by the way, now we have an HStack with a VStack inside. And you can see there is a button there. Can I click the button? If you click elements on the preview, by default, you are selecting them in the code. So by default these preview is not interactive, unless you press that play little button at the top of the preview.

[00:12:42]
That will make now that part interactive, so you can click in the button. Nothing happens yet, but it's clickable. I don't need to run this in the simulator. I have the simulator embedded within the preview, okay? But if you want, you can go back and select Run from the icon, or from the menu product Run.

[00:13:11]
And that will stop the previews and it will open the app in the simulator, in the real simulator, in the separate simulator. And you can see the button works because I can click on it. Okay, but again, you don't need to do that. You can stay with the preview for a lot of time.

[00:13:35]
So what is a button? It's a view, it's an structure. So it has its own constructor. The problem is that it has many constructors, so I don't know which one to use, right? And when you drag it, it will just prepare it with the most usual things, like the name of the button, such as, I don't know, Click Me.

[00:13:59]
And here where it says Action, this is actually what do you wanna do when you click on the button. For example, I can print, hey, you clicked me. So Print goes to the console, not to the screen. It's for debugging purposes. So if I run this on the real simulator, if I click Click, you can see, hey, you clicked me here in this little console preview that we have within Xcode.

[00:14:29]
But the user will never see something on the screen.