Binding Data to Views

[00:00:00]
>> By the way, we have a scroll here because now we have some padding and margins, so I'm not seeing the Hola Mundo or the Batum. Or maybe you say, maybe because this is not interactive. So if I hit this little button there, you can make it interactive.

[00:00:18]
So I can scroll. Nope, by default we don't have a scroll. But I can replace this HStack with a ScrollView. So we do have a view for this, and now I get a scroll. But look how easy it is to just change, it's like changing the name of a tag in HTML, right?

[00:00:42]
Yeah, you need to know which name you need to use, but we do have a ScrollView. But we need to actually call it manually. We need to add it manually, okay? Does it make sense? Again, this is just a dirty example. Now I'm going to delete that and start creating our project.

[00:01:03]
But we need to first see it in action quickly. So what if I remove what we have, maybe I don't even need the ScrollView. So I will just stay with the VStack, okay? So VStack, remember, we don't see it but there is an initializer there. If this is JavaScript that it's not, this will be something like new VStack, okay?

[00:01:35]
We are not seeing the new, we are not seeing the parenthesis. But we have that there, okay? Within the VStack, I'm going to create a text field, okay, that actually ask the user for typing a text. It needs an argument. Okay, it's a string, for example, enter your name, and a binding to a string.

[00:02:08]
You say, hmm, what's that? And also we have angle brackets. Those are generics, in case you've seen those in other platforms. So it's binding. So what I want is to render your name, I can say hello and the name of the user, okay? So something really simple. So we can create more variables in our views.

[00:02:38]
So I can create the name of the user. Like a name, let's start with a name. So I'm creating a new variable called name. And here in hello, I can use the template to actually put the name. I can also use the plus sign to concatenate the strings, but that looks better, more swifty.

[00:03:05]
>> Did you say you can concatenate something?
>> Yeah, I can. So I can also concatenate here.
>> I see, okay.
>> Yeah, it works. It will work only if you're concatenating strings. What I mean is that when you use a template, you can also put here numbers and other things that will be converted to strings automatically.

[00:03:26]
But if you are concatenating, you will need to convert the manually, okay? So what is that binding? I need to tell the TextField that I wanna bind this here. So when the user is typing the name, I want the content of that TextField to fill the variable, okay?

[00:03:48]
To do that, we need to set that this is not just a normal variable, this will change the state of this view. We are going see that lots of times during the rest of the project. This is creating a variable. This is similar to a steak hook in React, for those of you with experience with React.

[00:04:11]
And here the binding is done with the dollar sign. So I have just created this variable with that modifier, it's an annotation at state, and then I'm using the dollar sign prefix for binding. Now sometimes when you're changing a lot of code, such as adding more variables to your views, the preview stops.

[00:04:35]
So you need to resume the preview. Wait for it, remember it need to compile. And sometimes you see an error like this. It says, cannot preview this file. And you can click on Diagnostics. And if you click Diagnostics, you will see a message. So in this case, it's fairly complaining, remote human readable error, okay?

[00:05:06]
So remote human are not you, are the ones there, right? They are remote human, I guess. So actually what's going on is that this is a preview crash. So most of the time, you can just rebuild the app, close the tab, open the tab again, okay? Or sometimes even reload XCode.

[00:05:28]
And this is actually true. As an iOS developer, you sometimes need to reload XCode every once in a while, every couple of times per day. It's common that it crashes. So you can even close XCode, open the project again and see if that helps. So now I'm going to open ContentView again, And try to resume.

[00:06:00]
Also you can try, and now you can see it's working. So the magic worked, [LAUGH]. I didn't change anything else. It says hello unnamed, okay? So also you can see that it says unnamed in the text field. So it's not empty the TextField, that's because it has a binding and the variable says unnamed.

[00:06:23]
If I say an empty string, I resume, it says enter your name and hello no one. But if I enter interactive mode, I should be able to type Max. And as I'm typing, you will see that it's changing dynamically. Also I can run this in the real simulator.

[00:06:48]
It's weird to say real simulator. And we can see this in action here. By the way, where is the built to our keyboard? By default, when you open iOS simulator for the first time, it's using your hardware keyboard, your Mac. So it's emulating like you have like a Bluetooth keyboard connector.

[00:07:09]
But if you want, you can select Command+K or go to the menu, the here, IO > Keyboard, and you can toggle the software keyboard. So you can actually see the virtual keyboard anyway. So if I type my full name, you can see the binding. So you can see that the TextField has the binding to the text label, the static text.

[00:07:36]
So if I'm changing, one is changing the other one. And so there is a re-rendering process happening behind the scenes automatically. Okay, do you have any question or any problems at this point? How do you feel? Is it weird? What's the weirdness level at this point from one to ten compared to what you know?

[00:08:03]
>> Modifiers.
>> Modifiers are the weird part. But you get used to love the idea. Mostly with this idea that you iterate over that view, changing the view, creating a new one, creating a new one, creating a new one, then you can apply the same modifier again, because now it's different.

[00:08:25]
That how we build these kind of things. And now let's say that we wanna reuse this many times. I know it's not a big deal and it's not part of our project anyway. You can take that VStack that is like the container, and use Command+click and I can select the one that will actually, well, Make Conditional, we're going to do that.

[00:08:53]
We can embed another thing inside and it creates a container. So these are simple tools that we have here, right? So you just Command+click, and you see all the options that you have. If we look at our code, we have now a variable, okay? That is not just any variable name, it's in a state variable, which means that changing that variable will trigger a re-render of the body of this view.

[00:09:27]
And also that variable is being used twice within the template string and the text view, and also as a property in the TextField view. But one has a dollar sign and the other one has no dollar sign. Why is that? Because the text is just using the value to render the value, it will never modify the value.

[00:09:53]
On the other hand, the TextField is actually modifying the value. So that's why it needs the dollar sign that creates a double binding, a two-way binding. That's the idea, okay? So this was just to understand quickly how this looks like, but the idea of reusability, it's part of the framework.

[00:10:20]
So what if we create another structure, and I will talk about the previous structure in a minute. So another structure and I will call this Greeting. I will just copy the protocol that we have there that is in a structure, conforming to the view protocol, and then it has a body of type some View, with something inside.

[00:10:47]
What if I just move this here and then I can create a Greeting? Now I have a view. It's giving me an error because it has a parent with name, because I should move also the name variable, the dependency, okay? So look at that. Now I have exactly the same thing, if I resume, I have the same thing on the screen.

[00:11:15]
But the thing is that if I Command+click here, I can embed into a VStack. Remember a VStack will organize layout elements one after the other. It's similar to a Flexbox, okay, with a vertical axis in HTML, I can create more than one Greeting. Each Greeting having its own state.

[00:11:45]
So now I have different names. Each instance of my view is reusable. Each one has its own state. They're not sharing the state. Each version of this Greeting is there. Does it make sense? So that's how we make views and views that we can reuse.