1 00:00:01,370 --> 00:00:07,190 So well coming again this list is going to be one of four most important lessons in here. 2 00:00:07,200 --> 00:00:14,750 We're going to deconstruct that I was and understand how the different pieces they tie together we will 3 00:00:14,750 --> 00:00:21,410 not be talking specifically about the classes or object oriented programming but we have to somehow 4 00:00:21,410 --> 00:00:24,280 get a sense of what they are and what they do. 5 00:00:24,290 --> 00:00:28,730 So if there are parts in you that you don't fully understand don't worry about it. 6 00:00:28,880 --> 00:00:35,320 There is a lesson coming up for those the part that we have to understand is the role of The View Controller 7 00:00:35,630 --> 00:00:37,210 and the class part of it. 8 00:00:37,200 --> 00:00:39,860 We'll get to it at some point in the future. 9 00:00:39,860 --> 00:00:42,870 So this could Lexcorp India score. 10 00:00:42,880 --> 00:00:48,380 I'm actually going to close this application of course I'm going to start you out and I'm going to call 11 00:00:48,380 --> 00:00:55,750 this one view controller class and let's see what do we mean by that. 12 00:00:57,100 --> 00:01:03,150 So essentially what you're really trying to understand is the relationship between these files. 13 00:01:03,280 --> 00:01:09,370 How is the View Controller edge and The View Controller them and that view Quenta are in the main storyboard 14 00:01:09,610 --> 00:01:15,770 hall or are they all connected to each other and that's essentially the goal of this lesson. 15 00:01:15,910 --> 00:01:22,690 So to do that I'm going to deconstruct this this app I'm going to try to break it a few times and then 16 00:01:22,690 --> 00:01:23,780 remake it. 17 00:01:23,830 --> 00:01:28,210 So you get a sense of what is connected to what and how things are happening. 18 00:01:28,210 --> 00:01:35,620 One concept that unfortunately I have to force on you right now is a concept of a class and that is 19 00:01:35,620 --> 00:01:42,270 here at interface View Controller of a type you I view controller. 20 00:01:42,490 --> 00:01:45,840 We will talk about this in for and more details in the future. 21 00:01:45,850 --> 00:01:54,390 But just to understand what is happening in here I'm introducing a new object called The View Controller 22 00:01:54,880 --> 00:02:02,120 and it's type or its superclass is you I view controller you would essentially write this you're sort 23 00:02:02,120 --> 00:02:08,170 of you could say at interface and then the interface is going to be what they're very you know like 24 00:02:08,410 --> 00:02:12,030 you can name it and it has to have a superclass the superclass. 25 00:02:12,040 --> 00:02:14,630 In this case is a UI View Controller. 26 00:02:14,800 --> 00:02:19,420 Maybe next time I went to Vienna's object or maybe it would be unnecessary. 27 00:02:19,690 --> 00:02:22,960 That is kind of irrelevant to what we are doing right now. 28 00:02:23,080 --> 00:02:29,530 But what is important for us to understand is that these names The View Controller in here and then 29 00:02:29,530 --> 00:02:34,760 as well as the implementation of fit view controller and the private interface for it. 30 00:02:34,900 --> 00:02:41,140 They're just names that somebody has given to an instance of a View Controller. 31 00:02:41,230 --> 00:02:42,520 What is that. 32 00:02:42,540 --> 00:02:43,480 That is this guy. 33 00:02:43,510 --> 00:02:46,760 That's an instance of the UI View Controller. 34 00:02:46,810 --> 00:02:51,790 So they have given it a name view controller and they have connected them together. 35 00:02:52,120 --> 00:02:56,640 Now for us because we are trying to understand how do they work with each other. 36 00:02:56,680 --> 00:03:02,890 I'm actually going to select this one I'm going to make it a green View Controller and I want to change 37 00:03:02,950 --> 00:03:06,440 all of the names so that they reflect the same thing. 38 00:03:06,520 --> 00:03:09,670 So I'm going to delete these comments in my that age. 39 00:03:09,670 --> 00:03:14,980 I'm going to go through that and delete these comments this time I'm not going to delete my private 40 00:03:14,980 --> 00:03:18,040 interface because I want to see how it works. 41 00:03:18,040 --> 00:03:20,960 And like I said this lesson isn't up. 42 00:03:21,010 --> 00:03:26,830 It's not something that would be challenge against play it's very important to understand the concept 43 00:03:26,830 --> 00:03:27,320 of it. 44 00:03:27,550 --> 00:03:34,210 So like I said if they interface view CONTOURI something that somebody has done something a change that 45 00:03:34,210 --> 00:03:36,260 will mean a view controller. 46 00:03:36,430 --> 00:03:40,910 So now I am saying Well I don't want it to be called just view controller. 47 00:03:41,050 --> 00:03:43,490 I want it to be called Green view controller. 48 00:03:43,630 --> 00:03:47,590 So whenever you have an interface that's like declaring something. 49 00:03:47,590 --> 00:03:49,710 So we do have something. 50 00:03:49,930 --> 00:03:56,380 So because we have the interface which is kind of our Declaration we need to also have it's definition 51 00:03:56,430 --> 00:04:02,500 that definition is actually here in the implementation and it used to be called The View Controller 52 00:04:02,560 --> 00:04:05,840 but now it is called the Green View Controller. 53 00:04:06,100 --> 00:04:12,620 And this is like I said a private interface I'm going to change that into a green view control as well. 54 00:04:12,820 --> 00:04:17,060 So now if we run this application everything works and there are no errors. 55 00:04:17,080 --> 00:04:18,990 Something else will crash now. 56 00:04:19,000 --> 00:04:21,710 But essentially the naming has worked. 57 00:04:21,910 --> 00:04:24,510 So you might be wondering so what happens with these names. 58 00:04:24,520 --> 00:04:29,240 How come these files are still called View Controller age of view control. 59 00:04:29,270 --> 00:04:32,660 And that's because these names are kind of irrelevant. 60 00:04:32,680 --> 00:04:35,820 You can call these files what ever you want. 61 00:04:35,860 --> 00:04:42,880 These are Foy's that are on your hard disk so I can go ahead and say viewing or showing finder and it 62 00:04:42,880 --> 00:04:48,130 shows you a file that says well this is the file and that's all there is to it. 63 00:04:48,130 --> 00:04:52,260 So these things essentially could be called anything. 64 00:04:52,820 --> 00:04:58,120 And another thing of course we name them more meaningfully. 65 00:04:58,120 --> 00:05:02,730 However the moment they change this name something went wrong. 66 00:05:02,770 --> 00:05:09,820 It says the file the view contorted that H is not found anymore because he was trying to import that 67 00:05:09,820 --> 00:05:13,460 fine and import essentially the content of it. 68 00:05:13,480 --> 00:05:17,020 Now we have named that to any teen at that age. 69 00:05:17,020 --> 00:05:20,050 So apparently I have made a spelling mistake here as well. 70 00:05:20,050 --> 00:05:26,710 So I have to write it and we think that age and again everything works. 71 00:05:26,710 --> 00:05:34,000 Of course it doesn't really make sense that we rename our staff to sites revered names and kind of meaningless 72 00:05:34,000 --> 00:05:34,510 names. 73 00:05:34,630 --> 00:05:40,990 So if you want to really do this properly I would go in here and say This one is actually green view 74 00:05:41,050 --> 00:05:46,980 controller that age and of course this one is the green view Quintard that. 75 00:05:47,320 --> 00:05:53,260 And in my view it that and I'm going to import green view of counter-attacked h. 76 00:05:53,440 --> 00:05:57,160 So by now we have managed to arrange everything. 77 00:05:57,180 --> 00:06:04,290 Our interface has been called Green view controller our data and implementation has been called properly 78 00:06:04,350 --> 00:06:12,240 our private interfaces called properly our importers fought real names properly and also our phones 79 00:06:12,240 --> 00:06:13,930 are renamed properly. 80 00:06:14,040 --> 00:06:20,850 So the next thing the most important thing in here is so how does this one know how to connect to the 81 00:06:20,850 --> 00:06:22,530 green view controller. 82 00:06:22,530 --> 00:06:25,280 How does this one know that it has to connect to that one. 83 00:06:25,290 --> 00:06:26,800 We haven't told him that. 84 00:06:26,970 --> 00:06:33,060 So here I'm going to go ahead and select my view contour or this little yellow icon on the top and I'm 85 00:06:33,060 --> 00:06:38,640 going to go to one of the towns on top of here which is called the identity inspector. 86 00:06:38,660 --> 00:06:45,240 And in the eye then the inspector is saying the class for this guy is a view controller but we know 87 00:06:45,240 --> 00:06:46,560 we don't have that anymore. 88 00:06:46,560 --> 00:06:47,830 We renamed it. 89 00:06:47,970 --> 00:06:51,680 So I'm going to say no it's actually green a view control. 90 00:06:51,870 --> 00:06:58,340 So with that now everything is connected to each other and everything is now working based on our new 91 00:06:58,350 --> 00:06:59,130 names. 92 00:06:59,190 --> 00:07:00,320 So you might be wondering. 93 00:07:00,330 --> 00:07:03,060 So what was the purpose of this entire practice. 94 00:07:03,060 --> 00:07:08,190 How is that going to help us with any real application the way it is going to help us. 95 00:07:08,190 --> 00:07:16,260 Is this fun little going here an odd a new view controller and that new View Controller is going to 96 00:07:16,260 --> 00:07:18,300 be a pink background. 97 00:07:18,330 --> 00:07:26,400 Or it could be your contact information I could be the stories of your application it could be the share 98 00:07:26,400 --> 00:07:29,730 of the media off your chat application whatever it is. 99 00:07:29,730 --> 00:07:35,100 So this is my pincher view controller and I have to connect it to someone in here. 100 00:07:35,100 --> 00:07:36,210 Code Pink. 101 00:07:36,260 --> 00:07:38,750 You can tell but I don't have that. 102 00:07:38,760 --> 00:07:42,150 So I have to actually add the doors as a file. 103 00:07:42,330 --> 00:07:44,540 So let's see how we're going to do that. 104 00:07:44,610 --> 00:07:53,190 And when I go to file new file and file new file I'm going to say I had a Cocco touch class from the 105 00:07:53,370 --> 00:07:56,340 U.S. and the cocoa touch class. 106 00:07:56,340 --> 00:08:00,600 I'm going to say the language is Objective-C and the subclass is you. 107 00:08:00,590 --> 00:08:05,980 I view controller and the name is pinch view controller. 108 00:08:06,090 --> 00:08:11,210 So once again just copy all of these so I don't have to retype them. 109 00:08:11,300 --> 00:08:16,910 I'm going to have the command on an all go to file new new file. 110 00:08:17,100 --> 00:08:24,090 And then you find I'm going to say I want to talk Cocco to each class and I want to be called pinchy 111 00:08:24,130 --> 00:08:27,350 view controller because this view contour is pink. 112 00:08:27,390 --> 00:08:30,950 It has to be a subclass of you are View Controller. 113 00:08:31,150 --> 00:08:36,150 The say next and fill out two files to my project. 114 00:08:36,210 --> 00:08:41,670 These two files are these two pins you control at that age and you control that. 115 00:08:41,680 --> 00:08:48,880 And these are the View Controller class files of my upcoming Pinku View Controller. 116 00:08:49,080 --> 00:08:56,760 So let's go to my main a storyboard and in here I'm going to say this guy is actually in the identity 117 00:08:56,770 --> 00:09:01,590 inspector is connected to pinch view controller. 118 00:09:01,650 --> 00:09:08,620 So now the Pincio controller here the pinkish color one is connected to some one called Pincio control 119 00:09:08,720 --> 00:09:13,000 then the green one is connected to some one called Green view controller. 120 00:09:13,140 --> 00:09:16,620 And everyone can work on their own independently. 121 00:09:16,620 --> 00:09:23,310 Essentially I know I'm stretching this a little bit or maybe it seems you know out of place but they 122 00:09:23,310 --> 00:09:30,450 want to explain this really quickly as well that you don't necessarily need to make extra finds using 123 00:09:30,450 --> 00:09:33,840 the r command and cocotte touch class. 124 00:09:33,900 --> 00:09:40,890 These are just text files that text files that they have some values written in them and that's all 125 00:09:40,890 --> 00:09:42,110 there is there is to it. 126 00:09:42,240 --> 00:09:50,220 So for instance I could do this I could say I have another one another view controller view controller 127 00:09:50,310 --> 00:09:53,280 is actually going to be my. 128 00:09:53,700 --> 00:09:55,330 What other callers do I have in here. 129 00:09:55,380 --> 00:10:03,550 My blue view controller in here I'm going to go ahead and say Give me a new empty file that you find 130 00:10:03,570 --> 00:10:05,300 one that's the empty file. 131 00:10:05,550 --> 00:10:11,050 I'm going to call it blue the view controller dot H. 132 00:10:11,310 --> 00:10:12,690 I'm going to add it in there. 133 00:10:12,900 --> 00:10:15,580 I'm going to add another one. 134 00:10:16,060 --> 00:10:20,890 And again an empty file that doesn't have any relations with anyone. 135 00:10:21,080 --> 00:10:25,340 I'm going to call it blue view controller dot. 136 00:10:25,990 --> 00:10:31,960 So just like that default one that the machine made for me are making my own version. 137 00:10:32,130 --> 00:10:36,900 And inside these two here's what I'm going to do in the dark h of the blue of your control. 138 00:10:36,900 --> 00:10:43,790 I'm going to say that interface and that is called the new View Controller superclass. 139 00:10:43,820 --> 00:10:46,640 Easy you I view controller. 140 00:10:46,680 --> 00:10:51,750 Now what I try to type in you I view CONTOURI it doesn't autocomplete for me and soon it's going to 141 00:10:51,750 --> 00:10:58,320 give me an error because it says I don't know which library you're trying to import from if you go to 142 00:10:58,320 --> 00:11:05,240 the other that etches you will see that the library you Kit is imported by the font. 143 00:11:05,430 --> 00:11:12,650 So when you go in here and say well you know what you actually have to import you I. 144 00:11:12,870 --> 00:11:15,440 And for some reason it doesn't autocomplete for me. 145 00:11:15,450 --> 00:11:17,350 So I'm going to have to try it. 146 00:11:17,500 --> 00:11:23,880 Do I get you I get that age and then I'm going to go to Blue view contorted them them I'm going to say 147 00:11:25,080 --> 00:11:27,460 import what do I want to import. 148 00:11:27,480 --> 00:11:33,350 I want to import blue of your cuenta are at that age when I want to write the implementation. 149 00:11:33,420 --> 00:11:37,800 What do I want to write the implementation for you control. 150 00:11:38,000 --> 00:11:39,650 What are the metals that I need. 151 00:11:39,660 --> 00:11:42,180 There's only one method that they actually need. 152 00:11:42,180 --> 00:11:44,310 Even that we don't really need it. 153 00:11:44,370 --> 00:11:50,710 That is called view of the Lord and the only thing we want to do from it is super view that look. 154 00:11:50,880 --> 00:11:56,580 So this now becomes quite identical to what we have in the green view controller. 155 00:11:56,730 --> 00:11:58,890 And what we have in the pink one. 156 00:11:59,110 --> 00:12:03,210 So I was kind of a deconstruction of all of these. 157 00:12:03,220 --> 00:12:10,020 And of course now I can go in yet and say this guy who is bluish in that identity is actually connected 158 00:12:10,020 --> 00:12:11,770 to The View Controller. 159 00:12:12,000 --> 00:12:18,810 So now if we go in here and we say if you run this application now obviously the green one is going 160 00:12:18,810 --> 00:12:23,700 to run. 161 00:12:23,730 --> 00:12:25,510 So now the green light is being shown. 162 00:12:25,710 --> 00:12:33,120 If I move the initial view control over this little thing and you initial view onto it the pink one 163 00:12:33,390 --> 00:12:35,520 you fear on it the pink one is going to run 164 00:12:39,140 --> 00:12:39,730 all right. 165 00:12:39,950 --> 00:12:41,070 And here's what I'm going to do. 166 00:12:41,240 --> 00:12:44,240 I'm going to go in here and I'm going to add some labels. 167 00:12:44,270 --> 00:12:51,990 I'm going to say I have a label here that is like this right. 168 00:12:52,020 --> 00:12:58,910 And this label has much larger text on the background of it is actually white. 169 00:12:59,170 --> 00:12:59,780 All right. 170 00:12:59,940 --> 00:13:03,050 I'm going to copy that here in my blue one as well. 171 00:13:03,210 --> 00:13:06,070 And I'm going to copy it here in the green one as well. 172 00:13:06,330 --> 00:13:07,040 All right. 173 00:13:07,290 --> 00:13:13,950 And then I'm going to load up my assistant editor in here and I'm going to say for the green one for 174 00:13:13,980 --> 00:13:23,970 they want to see is green view controller that H and I want to add this label it's my label. 175 00:13:24,450 --> 00:13:25,350 All right. 176 00:13:25,530 --> 00:13:29,000 And then I want to go to the pinch one for the pink one. 177 00:13:29,040 --> 00:13:35,730 I want to load pinch view controller that H I want to get rid of everything that I know I don't need 178 00:13:35,750 --> 00:13:39,470 to I don't need dollars and they don't need this here. 179 00:13:39,480 --> 00:13:41,650 I want to drive this guy again. 180 00:13:41,680 --> 00:13:46,110 Uncoiling gets my label because this is my label for the pinch. 181 00:13:46,170 --> 00:13:51,010 That was my label for the green and now I'm going to go see a blue one. 182 00:13:51,020 --> 00:13:54,480 And for the blue one and learn a lot the viewpoints are at that age. 183 00:13:54,480 --> 00:14:00,960 The one that I have written myself and when I write the label and that's one again I'm going to call 184 00:14:00,960 --> 00:14:02,190 it my label. 185 00:14:02,430 --> 00:14:04,620 So they're all record my label. 186 00:14:04,800 --> 00:14:11,850 But when I go to my editor and I go to View QUANTRILL the green one in the view of the. 187 00:14:11,910 --> 00:14:13,860 I'm going to save my labor. 188 00:14:14,190 --> 00:14:26,490 That text is going to say this is Urim If we load the blue one he's gonna say my label. 189 00:14:26,490 --> 00:14:32,590 That text is this is blue. 190 00:14:32,820 --> 00:14:40,100 And of course if I do this in the pink Tron we expect him to say this is. 191 00:14:40,350 --> 00:14:41,550 Now the pink one. 192 00:14:41,550 --> 00:14:45,570 Because the machine generated for us it has some extra stuff in it. 193 00:14:45,570 --> 00:14:51,340 You don't need any of them so you can just delete everything just like what you have been doing so far. 194 00:14:51,480 --> 00:14:53,240 So we keep viewed that lot. 195 00:14:53,250 --> 00:14:56,040 We get rid of all the comments on every other method. 196 00:14:56,360 --> 00:15:01,200 And now my initial view contour is the paint one. 197 00:15:01,200 --> 00:15:10,990 So if we run it it should say this is paying hopefully if it all works and if I set my initial on to 198 00:15:10,990 --> 00:15:17,360 be the blue one I run it is going to say this is blue and that's what we need to see. 199 00:15:17,360 --> 00:15:25,310 We get to see how these de-friend view controllers are connected to different view Quintard classes 200 00:15:25,640 --> 00:15:33,590 and how they are independent from each other how each of them have their own age and and how each of 201 00:15:33,590 --> 00:15:40,030 them is properly connected to a certain class hearing the identity inspector. 202 00:15:40,040 --> 00:15:45,230 So the blue event is connected to the blue one the pink phantom the pink one the green once again one 203 00:15:45,530 --> 00:15:52,130 so on and so forth and how each of them have their own properties and functions and methods and they 204 00:15:52,130 --> 00:15:54,770 were completely independent from each other. 205 00:15:54,980 --> 00:15:58,160 So with that in mind we're going to move on to our next lesson. 206 00:15:58,160 --> 00:16:05,050 Where are we going to make connections between these unbe going to know where we are going because in 207 00:16:05,060 --> 00:16:11,440 the previous lesson when we made segues we only knew that from going one going to the pink one. 208 00:16:11,600 --> 00:16:17,510 But we didn't know there an actual Pinchem view controller class this time we're going to know that 209 00:16:17,580 --> 00:16:23,350 I'm going to use that to our advantage so that our segues they know exactly where they are going. 210 00:16:23,480 --> 00:16:26,120 And as a result we can actually go back. 211 00:16:26,330 --> 00:16:28,650 So let's keep it up to here in the next lesson. 212 00:16:28,650 --> 00:16:33,570 I'm going to make another two controllers and do navigation between them.