Hi. Within this lecture, we're going to see how we can actually connect these views into our coding section. So, what do I mean by that? Right now,

we have created our views. We have put whatever we want in the design section, in the main storyboard. But in the coding section, in the ViewController, that Swift for example, we don't have any image,  we don't have any label, we don't have any button. So, we're going to write some code but we don't know how to refer them, how to reach them. That's what we're going to learn in this lecture. By the way, this ViewController that swift is the main file that we're going to be writing our code but we haven't seen anything related to it yet. So, there is a class over here, there is a func function over here. We don't know what it means.

It really doesn't matter because within the next section we're going to deep dive into the coding, into the swift programming language, and we're going to learn everything related to it. Just follow me along right now and we're going to see everything related to those later on. So, I am going to add a new editor like we have done before and I am going to choose the ViewController for the right-hand side and on the left-hand side, we have the main storyboard.

I am going to close this pane. And in fact, we can close this pane as well so that we can have a little bit more space over there. So, what I am going to do, I am going to make this a little bit bigger so that we can have this coding section visible. And by the way, this little thing is for you to scroll in a way that you want, we haven't actually used it because we can do this with the mouse pad as well. So, that's how you scroll around.

But right now what I want to do, I want to bring this imageView, bring this label, and bring this button into the coding section. So, if you hit 'Control' on your keyboard and if you choose one of the views, you can drag and drop any view here. So, what you want to do, you want to put this just right under the class, not above the class or not here. You want to put this right under the class. Because that's where it belongs. It belongs to the class.

I am going to talk about it in a minute. But if you just drop it, you can see you're creating a connection, an outlet connection, which is what we want. So, I am going to call this imageView, you can write it like that. You can give it any name you want actually. You can call this your own name, but we want something relevant. So, since this is an imageView, it's a view that contains an image, I am going to name this imageView and say 'Connect'.

Right now my imageView is connected to the code and I can reach that imageView. When we write the code, you will understand it in a better way. But right now, I am just going to do the same thing for the label as well. I am going to control drag here and just drop it. So, you cannot drop it somewhere else. You have to drop it just below the class.

And you have to write whatever you want, like my label or your name, it doesn't matter but since it's a label, I am just going to write myLabel. So, as you can see these are the names that we have chosen and these are connected right now. And in fact, we're not going to even do anything with the label at all. What we want to do with this app when somebody taps on the change button, it will change the imageView. We don't have anything to do with the label at all. But we just connected it as an example. So, right now I am going to bring the change, but not here, here.

Just above the curly braces over here and just below the other curly braces just between them. So, as you can see now connection type seems like an action rather than an outlet. So, if you don't see the action over here, you have to click on it and choose the action. Action means something's going to happen when we click on that view. So, I am going to call this changeButton or changeButtonClicked. Anything you want, this is your call.

But I am going to be explicit and I am just going to say changeButtonClicked because that's actually what it makes sense. Once you do that, you can hit 'Connect'. Right now my every view is connected to the coding section and as you can see it created another function. We don't know what a function is yet. We have another function over here which is viewDidLoad. We have some function that we have created but we don't know what it does. Function is a block of code. It consists some code and you can call it in a specific time.

For example, in the changeButtonClicked, we will call this when somebody taps on the change and in viewDidLoad actually it represents what will happen when this view is loaded. So, when we first open our app, when we first run this button, the viewDidLoad is going to get executed. So, if we had anything that we want to happen when we first open the app then we would have written it under the viewDidLoad, but we don't want anything like that.

We want something to happen when a change button or any button is clicked, so that's why we're not even going to use this viewDidLoad. But we're going to use the function that we have created. Again, this lecture isn't for learning programming or learning Swift. We're going to deep dive into all of these concepts like functions, classes, variables later on. You don't know anything yet. Just try to follow along so that you can write your first application so that you get to know the X code, then we can deep dive into the swift development.

So, what I want to do, I want to change the image of the imageView under the changeButtonClicked function. And one of the things that we commonly experience, you want to change the variable name or the name that you have chosen. For example, maybe you want to change the imageView, maybe you have misspelled it, and then you want to change the name of this. In order to do that, you have to go to this Connections inspector. Open the right hand pane and go to Connections inspector.

After you choose the imageView, as you can see there are a lot of tabs over here, we're going to see what all of those things are doing later on when the time comes. But right now I want to go to the connections because I will select the imageView and I will just break the connection to change the name of this view. So, if you want to change the name after you connect it, first you're going to have to reset the connections.

So, that's how you do it. That's how you just break the connection that you have done before. So, if you click over here, it will be disconnected. And by the way, you don't have to do that. I am just showing you if you want to change the right now or in future, then you're going to have to delete the code, and then you're going to have to drag control, drag and drop it one more time to choose the name you want. If you don't do that, it will give you an error. So, you're going to have to say imageView and just click 'Connect'. So, that's it. We can see and we can just close this down and we are now ready to write the actual code that is going to change the image here. Let's do that within the next lecture.