Hi. Within this lecture, we're going to go ahead and create our user interface in the Main.storyboard. So, what do we have in this app?

First, we need to have a Table View in which we can display the names of the apps. So, let's open our library and drag and drop one Table View. So, it will have the constraints of 000 so that it would reach out to the edges. And we're not going to have anything else in this View Controller actually. We're just okay to good to go with this Table View. And then, of course, we're going to add another UI View Controller in which we will display the details. But for right now, let me give the 000 constraints so that our first View Controller will be ready. So, remember we had this UI Navigation Bar over here in which we have this plus button. When we click on this, the new details View Controller opens. So, let me 'Embed In' a 'Navigation Controller' to my View Controller, so that we will have this bar. I'm going to add a button here.

I'm going to show you how to do that later on. But right now I need another View Controller so that if I make a segue from this to another one, it would have the UI tap bar as well. So, let me drag and drop one View Controller over here and let me align this a little bit so I can do a segue from here to there. I'm going to make it show. And as you can see, we got the back button in here. So, let me give an identifier to this segue. I can call these details View Controllers. I'm going to go for two details VC . And I'm all doing this fast because we have been doing this for a lot of times. So, let me create another file in here. And it's going to be a Cocoa Touch Class because I'm going to create this as a UIViewController subclass. I'm going to connect this to my newly created View Controller. So, let me name these, DetailsVC. And make sure the target is selected. And then, I can create and put those files in my folder.

So, let's go to Main storyboard so that we can connect that file to our details View Controller. So, let's choose this View Controller. And let's go to the identity inspector in which we will find the class and assign it to it. And we cannot see the details View Controller. And here, we have a question mark. So, I believe there is something going on, something like a bug in X code. I'm going to show you how to come over this problem. So, let me click and manually write this. So, if I click on this button, it takes me to DetailsVC. However, I'm still suspicious that if there is a question mark in here, it's never a good sign. So, the best way to understand is to create our views and try to connect them with our real ccntroller file. So, let's do that. What do we have in DetailsVC? We have to have an image first of all. So, let me drag and drop one Image View to here and make it a little bit bigger. So, that our art will be displayed in here. And then, next I'm going to need some tax fields in which I will display the name of the art and the artists and the year. So, let me make this a little bit higher over here and a little bit bigger. So, that's good.

Let me go to attributes and find placeholder and called his name. So, this will be the name of the art. Let me zoom in a little bit. So, I have to copy this and paste this because I'm going to go for an artist name in here. I'm going to call this artist. And also I'm going to copy and paste one more time to go for a year. So, we're going to take note of the year as well. So, let's say year. And finally, we we need actually a save button. So that, we can save all this information into core data. So, drag and drop a button and make this a little bit bigger and make it central. And then, I'm going to call this save and hit 'Enter'. So, that looks good. So, here we go. We're going to reset to suggested constraints and this kind of setup in which our user actually chooses their own pictures rather than we are providing them. I suggest you try the width and height constraint as well because we cannot know the size of the picture that is going to come from the user.

So, if you go for a fixed width and height constraint in here by checking these two boxes and adding these two constraints, it would be much more concrete. So, as you can see, it breaks up the view a little bit. So, in order to overcome this problem, I'm going to manually drag and make this a little bit bigger. And then, it will show us some orange constraints, which means that these constraints are not yet updated. So, let me go over here and say update constraints, constants. So, let's see if we have another problem. This is UIImageView is now okay with width and height constraints. But I believe we have some problem in below. Let me see, do we have a problem in here? Now let me see, do we have a problem in tax fields? No, but we have some in save button. So, it's a little bit to the left. So, let me go over here and make this a little bit bigger and drag it to the central and let me do update constraints, constants again. So, that's good. Of course, we can make this view much better. But I'm not going to spend any more time on this because we may still have a bug in here.

Let me try to understand this by adding this assistant editor and choosing details we see from the right hand side. And let me delete all of these comments. And let me have some room in here. And on the left hand side, we have our details view controller. So, let me drag and drop Image View. It seems okay. So, we have the Image View. We have this circular thing that is filled up. So, it means that everything is okay. So, let me bring up the nameText. So far so good, it's going on. Let me bring in the artistText and for the final thing, I'm going to bring in the yearText as well. So, that's working. Let me try to define the save button as an action. So, savebuttonClicked. And here we go. We have a problem in here. As you can see, the circle is not filled as in here. It means that this outlet is not connected. Even though I made this connection, it doesn't work because this is a bug actually. And in order to make this right, I'm going to go for outlets here. And as you can see, it seems connected. Let me choose these DetailsVC and go to the outlets. And here you go, we have a lot of warnings.

So, there is no reason to get these warnings unless there is a bug because we made everything right. And we should solve this problem before we proceed because and by the way, if you're not experiencing this kind of problem that we see this outlet is not being connected or something, you should not do what I'm about to do. I'm just going to delete all of these connections and define this from beginning. However, you should learn how to solve this problem because you may experience this bug for some time because it's been going on for some years right now. It's not related to the latest version. So, I believe this is good for you to understand what causes this problem. So, I'm going to delete every connection in here except the segue. And as I delete, as you can see, this is not filled anymore, it means that the connection is broken. So, I'm going to delete all of these functions and outlets. And I'm going to solve this problem by coming over and fixing the DetailsVC.

So, if you right click on the Main storyboard. If you go to 'Open As', we're opening this as an interface builder. But right now, I'm not going to open this as Interface Builder, but I'm going to open the 'Source Code' and the source code is actually an XML code. So, if you work with under its studio for under development, you know what an XML is? This kind of a code representation of the main storyboard, but we don't generally use this because it's not necessary to use this and it's not very user-friendly in the X-code. But if you come across a situation like this, we have to come to the source code and define some values ourselves in order to solve this problem. For example, we see the View Controller definition in here. We have some custom module, custom module provider under the View Controller. And below, we have the DetailsVC. And again, we have the View Controller custom class and sceneMemberID. But we don't have some of the members, some of the values that we had above.

So, I'm going to add those values manually. And in order to do that, I'm going to copy this and paste this below. So, we can compare them side by side. So, let me paste here. I'm going to delete this later on. As you can see, both has ID, both has custom class but the DetailsVC doesn't have this custom module and custom module provider. So, I'm going to copy these values from here. And I'm going to paste this in the same place that it has to be in here. So, that's now okay. It has sceneMemberID. So, I'm going to delete this and this is how this bug gets fixed. So, if I do product clean and product build, it will get synchronized. And then, we can try to define our outlets and define our action in the Details View Controller now. So, let me go over here and say 'Open As' 'Interface Builder'. And again, if you're not experiencing this problem, you should not bother doing this. But as a general information, I believe it's good to know for you. So, let me go to Details View and let me try to bring this save in here as an action and called the savebuttonClicked. And here you go, now this is connected. So, I believe the bug has now been fixed.

So, let me create my other outlets as well, like Image View. And let's go for nameText. And let's go for artists. So, let me drag and drop your artistText. And then, finally yearText. So, yearText. So, this is now okay. Of course, we have to make sure that this works. And in order to do that, you can come over here and go to the outlets. And you still see those warnings here. But I believe the actual problem has now been resolved but we are unable to see it. So, let me print something here so we can text this, in the savebuttonClicked. And if it's not fixed, it's going to crash because it will not find the necessary function to call when we hit on save. So, we have to make sure that we define the Table View in the viewDidLoad, in the View Controller, not in viewDidLoad. So, Table View here. Okay. And we are done with this. Now I have to add a button on the bar side here, on the right hand side of the bar so that I can click on this button and it will perform a segue to bring me here so that I can test if the save button works. So, we're going to do that in the next lecture.