Modifiers & Inspector

[00:00:00]
>> So we are kind of writing HTML, or more JSX in case you have experience with react. We are defining our views directly in swift code. Gradients swift structures. Okay, now because I'm now running. My view in the simulator, the preview is paused. So you can resume that from here.

[00:00:28]
Resume and now you can continue using the preview. So right now I'm breaking this part known as content view. But part of the deal here is that you can create your own views, your own reusable views. Think about components. So what view you a component, a visual component.

[00:00:52]
That's kinda idea, yeah question.
>> So thinking about this print hey you clicked in the debug code, let's see I deployed it on my phone and then tapped on that button. Please wear that might log out, on my phone.
>> It's log out in the console the parameters as a user, you don't see the console.

[00:01:16]
If you have your phone connected through USB, you can actually see that console. So it's for debugging purposes. Not for the user. We are going to make something happen now. Okay, so typically what you want is to render something different on the screen, okay and we will do that, before doing that.

[00:01:36]
What if we want to change colors? What if we wanna change palings, machines, properties, on most UI toolkits, classic UI toolkits, typically we have attributes. Or properties that we said somehow, so for example if we wanna that Hello word text in a different color we are looking for a property maybe in the constructor or.

[00:02:05]
Maybe you'll say okay, let's create a variable with that text, and let's see if the text has a property that can change the color or something like that, but this is not how swift UI works. Swift UI worked with something known as modifiers, what is a modifier? A modifier is a function that receives a view and returns another view, a modified view.

[00:02:36]
So the idea is that we are not going to set the color of the text. We are gonna create another text with a different color, another structure. So, text will have a function that we can search here for example, foreground color, foreground color, receives a color and returns a text.

[00:03:05]
So it's not more the find the text, it's not a setter. It's creating another text structure as it makes sense for now. Let's see that in action, it receives a color. Okay, so we don't know yet what color is. What I'm going to do here is, I'm going to close for a second.

[00:03:26]
This panel so we have more space to work on this, the color accepts if you just select.it has an some kind of an enum, so we can pick one of these color like green and you can see it's green. But what is important here is to understand that we are not actually changing the text, we're creating a new text thanks to its modifier and you will understand what that means in one second.

[00:04:00]
Look at this, what if we added padding? How to add a padding to a view through another modifier, and we can say padding. Padding is another function, so it's a function. That is when applied to the result of the other function. So this is a chain. I'm not sure if you have played with jQuery in the past or in the present.

[00:04:32]
Well in jQuery we use these chain thing where we change different methods. This is the same idea this is actually the same line I mean from an expression point of view, it's just one expression. We construct a text. Then we create another text with a green foreground color.

[00:04:55]
And we take that green text and apply padding, that returns another text. So every time we modify a view, we receive another view. Okay, how do you know all the modifiers that we have? Well, of course you can just check with that. So every time you apply a modifier because you receive another view, you can apply another dot and execute another function.

[00:05:22]
So you can actually search here. Also, if you use again, the library but now instead of adding a view I'm going to add modifiers. This is the list of modifiers, so I can search modifiers do you want to change the border. Do you wanna know let's say corner radius, we will use that in a minute.

[00:05:47]
You want using grayscale where I have just set the color, so it doesn't make any sense. But actually, opacity. From here, I can drive opacity. I nodded here, like so. Or I can also drag you to the preview. If I can take the opacity and drag it to the preview, it's doing the same thing.

[00:06:10]
Okay, so now I can change this value, okay, this is from zero to one half strong friend. Everything here, not everything but negative 80% of the things that you can do with the views, is actually applying the modifier, okay? So, so far we've seen how to add a modifier by adding the code, just dot and look for the function, That modifies the view or by using the library.

[00:06:40]
Remember the library is this plus sign at the top right of the screen. We have another way we can open what is known as the inspector. So using now, command click, not option click, Command click. I can command click over the view, the text. And I have a lot of options, okay?

[00:07:06]
A lot of options. For example, there is an embed in H-stack that is just creating an H tag that contains a text. I will need that, so I will go back. We will use many of those options, Command Click, there is a main conditional, there is a repeat, what's that?

[00:07:30]
Let's try, repeat, look at that. It has a four each, with something kind of weird that says, zero to five, and it's repeating that text five times and because it's an edge talk, it looks like this, but I can move this for each. Within the beanstalk that we have here and now it looks like that.

[00:08:00]
So for each he's repeating the views inside five times. But anyway, he wasn't looking for that. Command click again over text. And there is something that says, show swift UI inspector, that can also be trigger by using, look at those little icons there. That's control option. So control option click will automatically trigger the inspector quicker.

[00:08:35]
This inspector. Let me do some work over the text. For example, I can change the font. I can say that it's the large title. Here is the color. I can change the alignment. I can change some properties. These properties are just, adding or modifying the modifiers. Again, I'm not explain you the way to do this.

[00:09:08]
It's up to you. If you prefer the inspector, if you prefer to write code, if you prefer to look into the library, it's just the same everything goes to the same place. So now everything is multi line foreground purple large title, you can see it has a larger font.

[00:09:29]
So, ctrl option click goes automatically to the inspector. And here at the bottom, it says, add modifier. So there you can see where another way to add modifiers and here have a long large list of modifiers that you can apply to that. Again, these are just different ways to access the list of possibilities.

[00:10:01]
I know that at this point, you're still not getting why this is different from just setting attributes? Okay, let me show you something. Instead of foreground color, we can also play another modifier for the background. It's not called background color, it's just background, okay? But within the background, we can set an image or we can set a color.

[00:10:24]
For example, I can set a blue background color, that's not going to look nice. Why say yellow? So do you see anything weird there? Regarding the padding, for those of you that are coming from CSS, there is something weird, what's going on? Where is the padding? By the way, I didn't set the number on the padding, right?

[00:10:54]
But actually, by default, it's applying the default padding that is based on the IOS guidelines. But if you want you can change the number. So now we have 30 something, we don't know the unit yet but let's say 30 pixels is a pixel but it's a pixels, so what's wrong?

[00:11:15]
What about the background color is it the binary margin?
>> To the padding the background color stuff.
>> Yeah, so, typically we expect the background color to appear there. Well, here you will see the magic of modifiers. What if we change the order? We are not setting properties of our views, we are creating new views.

[00:11:46]
So adding the padding, so creating a view with a padding before applying the background color or not will not create the same effect. Okay, we're not setting properties or attributes. We are creating new views. So the order in which we apply the modifiers is important. And look at this, you cannot do this with CSS.

[00:12:10]
You can apply padding twice because again, this is not a setter. I'm not setting the padding. I'm creating a new view with a new padding and after I got the new view, I can have another view with another panning. So, do we have marsh in here is with you I know we use panning, but it depends on where you're using padding.

[00:12:34]
Okay, it's kind of a Martian. Compare with CSS, okay, any question at this point?
>> So a lot of views if you keep adding modifiers, so is that a performance problem or?
>> No it's not a performance problem because we are shaft grading structures. High performance structures, and yeah, we are copying data but we are copying integers and strings and-

[00:13:02]
>> You create them and they can be getting discarded, right after-
>> They get discarded, right after we haven't get into that point. I mean in terms of do we have garbage collector in Swift? The answer is no. However, we have something that at the end, I mean for the basics of Swift it looks like we have garbage collector but is not.

[00:13:24]
Is something known as arc, automatic reference counting that instead of, so the garbage collector is something that runs with your app, it's a process that runs with your app. This is not the case. This is a static analyzer that runs with a compiler. That kind of for most of the situations kind of solves the problem.

[00:13:43]
So, but also, because it's not a class, it's not actually creating objects in higher memory. Just stuck with basically-
>> I'm just thinking if there's this is like a scope, all this stuff, so once you exited-
>> Exactly, when it gets to the final structure.
>> Yeah.
>> That goes to the framework that finally render-

[00:14:08]
>> I will clear it right after this.
>> Yeah, so the thing about done, so this is high performance. So if the question is about performance, this is high performance. I know that from an OOP point of view, you look at these and says, yeah, we are creating objects and objects and objects and objects and object but that's not the case.

[00:14:29]
These are not instances of classes, these are structures that are much simpler. Okay, that's it make sense? Do you have any questions at this point? Nope, nothing on the chat. Okay, so we are going to delete this and make something more interesting but we are just playing with this for the first time.

[00:14:58]
>> One question.
>> Is they lost their preview code trying to follow the inspector can Can I quickly be shown how to get the preview back editor?
>> Well, yeah, probably my guess is that you press for some reason, command return. Command return hides the premium. Okay, where's my preview?

[00:15:24]
So actually, if you open this little menu that you have know it's a menu there, that's a menu. Okay, so if you click there, there is a submenu from with apps options for the editor and here you need to select Canvas and Canvas is a preview. And that's how Canvas go can you get the preview back.

[00:15:53]
Okay, so you click their Canvas.