1 00:00:05,960 --> 00:00:07,070 Hey what's up everyone. 2 00:00:07,070 --> 00:00:11,760 Mark Price here at the slopes dot com and we're making fantastic progress on our application here. 3 00:00:11,770 --> 00:00:13,130 Coder's way up. 4 00:00:13,650 --> 00:00:17,420 And what we need to do now is actually feed it with data. 5 00:00:17,420 --> 00:00:24,090 Now like I said normally you would have an application hit the Internet a server and Dallas and that 6 00:00:24,100 --> 00:00:24,350 day. 7 00:00:24,360 --> 00:00:25,820 We don't have a server right now. 8 00:00:26,040 --> 00:00:29,350 But on the flip on the opposite side some apps don't actually do that. 9 00:00:29,360 --> 00:00:33,220 They actually have the data hardcoded with the app because there's a limited data set. 10 00:00:33,330 --> 00:00:35,650 Or maybe they don't have a server and they're just doing a few limited things. 11 00:00:35,650 --> 00:00:41,210 This might be like let's say you're building an app for a law firm or an app for a local business where 12 00:00:41,210 --> 00:00:43,880 they only have so much data and they're not going to probably update it a lot. 13 00:00:43,910 --> 00:00:45,910 Well that's our case right now. 14 00:00:46,020 --> 00:00:48,040 And so we're actually going to build the data in the app. 15 00:00:48,050 --> 00:00:49,140 There's nothing wrong with that. 16 00:00:49,160 --> 00:00:52,760 It wouldn't probably be the reality of what you're doing because you're you're probably talking to a 17 00:00:52,760 --> 00:00:56,900 server when you're building up a storefront but we're going to build out our data model just like as 18 00:00:56,900 --> 00:01:00,800 if we're downloading it from the Internet and we're going to do it here in the app and that's what we 19 00:01:00,800 --> 00:01:04,840 might actually do for if you're running an app for a local business that doesn't need continuous data. 20 00:01:04,840 --> 00:01:07,130 So it's a win win all around. 21 00:01:07,130 --> 00:01:11,450 So let's go back to our going to stop it from running just to make the computer run a little bit faster 22 00:01:11,450 --> 00:01:12,160 here. 23 00:01:12,330 --> 00:01:16,520 And so we know it's running but we also know that it's not feeding data from where it needs to go. 24 00:01:16,580 --> 00:01:20,780 And so I already know that we're going to need some type of model soon to be a reusable class or struct 25 00:01:21,170 --> 00:01:24,500 that can feed our table with data. 26 00:01:24,500 --> 00:01:27,230 So let's go ahead and create a new folder here. 27 00:01:28,690 --> 00:01:32,500 Next it will before we do that let's create the model itself so I get to go to the model folder in a 28 00:01:32,500 --> 00:01:33,780 new file. 29 00:01:34,000 --> 00:01:38,500 Inside this model file We're going to switch file and what we're going to do is we're going to call 30 00:01:38,500 --> 00:01:39,660 this the category. 31 00:01:39,820 --> 00:01:42,840 So basically I'm creating a category that's a reusable struct. 32 00:01:42,850 --> 00:01:44,860 In our case we'll use a struct. 33 00:01:45,190 --> 00:01:46,070 OK. 34 00:01:46,460 --> 00:01:47,360 This looks good to me. 35 00:01:47,380 --> 00:01:51,000 And so we're going to say structure and we're going to call this category. 36 00:01:51,550 --> 00:01:59,980 And what we're going to do is we're going to create a couple of variables one for the variable for the 37 00:02:00,910 --> 00:02:05,620 title and a variable for the image the name of the image that's in our that's in our assets folder right 38 00:02:05,620 --> 00:02:06,390 here OK. 39 00:02:06,490 --> 00:02:11,530 We need to grab these names we need to feed those into the table so the image you knows which file to 40 00:02:11,530 --> 00:02:12,090 grab. 41 00:02:12,180 --> 00:02:12,520 OK. 42 00:02:12,520 --> 00:02:16,190 And so we're going to create an array of categories that stores that information. 43 00:02:16,240 --> 00:02:16,620 OK. 44 00:02:16,690 --> 00:02:20,890 This is exactly what you would do if you were downloading data from a server and then parsing it you 45 00:02:20,890 --> 00:02:26,030 would create some type of model or class that can be recreated over and over and store that data. 46 00:02:26,070 --> 00:02:26,520 OK. 47 00:02:27,640 --> 00:02:36,160 Okay so first things first is let's go ahead and create our title in our image name so public var title 48 00:02:36,880 --> 00:02:37,720 of type string. 49 00:02:37,720 --> 00:02:39,690 In fact let's be more explicit. 50 00:02:40,150 --> 00:02:43,020 Well here's another Here's another topic of discussion. 51 00:02:43,120 --> 00:02:44,730 We could say category title right. 52 00:02:45,010 --> 00:02:52,300 But maybe that's a little too explicit because the struct itself is already category so we know we know 53 00:02:52,300 --> 00:02:57,340 that the if we said just the title that it's the category title since we already are named it category. 54 00:02:57,340 --> 00:02:58,710 Why repeat yourself right. 55 00:02:58,720 --> 00:03:01,600 So I think it's ok actually in this case to just say title. 56 00:03:01,660 --> 00:03:02,350 All right. 57 00:03:02,460 --> 00:03:07,030 So me of type string and we're not going to make it an option or implicitly interrupt optional we're 58 00:03:07,030 --> 00:03:11,730 going to make sure the data is there when it's initialized so we're going to leave it like so and then 59 00:03:11,730 --> 00:03:17,040 let's do another public var image name of type string as well. 60 00:03:17,870 --> 00:03:18,190 OK. 61 00:03:18,220 --> 00:03:20,370 But I think there's a problem here. 62 00:03:20,620 --> 00:03:23,230 I don't think it's good practice to keep these public. 63 00:03:23,420 --> 00:03:26,110 OK to just let anybody set these things. 64 00:03:26,220 --> 00:03:33,850 OK well what I'm saying is you know if we create a category if I was to create a category like this 65 00:03:33,900 --> 00:03:39,310 and this is public titles here and let's just right now just for sake of demonstration I'm putting the 66 00:03:39,310 --> 00:03:40,510 exclamation marks there. 67 00:03:40,660 --> 00:03:45,370 And if I was to go into categories B C and let's say I wanted to create a category so I said let cat 68 00:03:45,760 --> 00:03:48,390 equals category like so. 69 00:03:48,520 --> 00:03:52,300 OK then I guess a that tidal pools. 70 00:03:53,230 --> 00:03:53,530 OK. 71 00:03:53,590 --> 00:03:55,420 That's typically not a good practice. 72 00:03:55,420 --> 00:03:58,800 You don't want to be able to just set public variables for anywhere. 73 00:03:58,840 --> 00:04:04,880 And the reason why is because you want to control the data that's in your class you want to you have 74 00:04:04,890 --> 00:04:06,550 the creator of that class or that struck. 75 00:04:06,550 --> 00:04:11,690 You want to control how it's accessed because you don't want anybody shoving junk data into here. 76 00:04:11,840 --> 00:04:15,050 OK and it's probably hard to understand right now but that's OK. 77 00:04:15,070 --> 00:04:18,190 Just take my word for it that we want to protect our data a little bit better. 78 00:04:18,190 --> 00:04:21,060 So what I'm going to do is delete these examples here. 79 00:04:21,100 --> 00:04:25,990 What I'm going to do is go back to my category and instead of making these public what I want to do 80 00:04:26,230 --> 00:04:35,110 is a private sit on these here private and so and what this means is I will no longer be able to set 81 00:04:35,140 --> 00:04:40,570 these variables to other classes ok or from a view control or things like that I can retrieve them and 82 00:04:40,570 --> 00:04:41,240 use them. 83 00:04:41,410 --> 00:04:45,780 But I can't set them and I think that gives me better control of the data that's in here. 84 00:04:45,780 --> 00:04:49,900 I don't want any you know so your buddy who's a programmer comes in the app and doesn't know what he's 85 00:04:49,900 --> 00:04:54,190 doing and starts setting up the wrong titles and hear things like that and you can't really control 86 00:04:54,190 --> 00:04:54,540 it. 87 00:04:54,610 --> 00:05:01,180 But if you design your struct or your class in a way that that serves your application the way that 88 00:05:01,180 --> 00:05:05,740 you want it to and protects it then you can be sure that it's it's acting as needed. 89 00:05:05,770 --> 00:05:08,240 And again you don't have the complete understanding here. 90 00:05:08,250 --> 00:05:14,380 But the rule of thumb here is you want public variables that can be fetched but you don't want them 91 00:05:14,530 --> 00:05:18,250 typically to be set by outside classes unless that's what your app calls for. 92 00:05:18,340 --> 00:05:18,910 OK. 93 00:05:19,270 --> 00:05:22,450 So what we're going to do is create an initializer here. 94 00:05:22,480 --> 00:05:25,650 All right we have the title the image name. 95 00:05:25,660 --> 00:05:27,320 Now these are parameter names. 96 00:05:27,370 --> 00:05:27,960 OK. 97 00:05:28,120 --> 00:05:32,290 You typically name initialiser parameter names the same as this is this variable the same as this. 98 00:05:32,320 --> 00:05:34,070 Absolutely not. 99 00:05:34,180 --> 00:05:35,380 We're going to pass data in. 100 00:05:35,410 --> 00:05:39,590 And then even though it has the same name we're going to set it up here to this title here. 101 00:05:39,610 --> 00:05:43,600 It's just a good convention to make these the same names as the variables that you want to set in your 102 00:05:43,600 --> 00:05:44,730 initializer. 103 00:05:45,070 --> 00:05:51,920 And so we're going to say self-taught title Beatles title and self-taught image name equals image name. 104 00:05:52,110 --> 00:05:56,700 OK so all we've done so far is we've created a struct called category. 105 00:05:56,800 --> 00:06:02,830 We created a couple of variables that are public for fetching forgetting but they're private for setting 106 00:06:02,920 --> 00:06:06,230 outside classes and structure etc. can't set them. 107 00:06:06,280 --> 00:06:10,690 However when you're creating it from the beginning when you create a new category that's when you can 108 00:06:10,690 --> 00:06:12,270 pass the data into these variables here. 109 00:06:12,280 --> 00:06:16,510 And we are in complete control of how data is getting into our struct here. 110 00:06:16,600 --> 00:06:22,710 And so we're seeing self-taught title self of course is referring to this this class or struct itself. 111 00:06:22,840 --> 00:06:23,370 OK. 112 00:06:23,440 --> 00:06:27,700 So we're saying this title here is going to be equal to the one that we're just passing in and this 113 00:06:27,700 --> 00:06:30,990 image name here is going to be equal to the one that we're passing in. 114 00:06:31,420 --> 00:06:32,170 OK. 115 00:06:32,650 --> 00:06:37,270 So now we've got our our category struct and a little bit data here a little bit of data protection 116 00:06:37,270 --> 00:06:38,340 which is great. 117 00:06:38,560 --> 00:06:43,740 And what we're going to do when we're going to say is just from now on even if you don't understand. 118 00:06:44,260 --> 00:06:45,220 Just do it this way. 119 00:06:45,370 --> 00:06:45,810 OK. 120 00:06:45,910 --> 00:06:50,980 Make it private for setting and public for retrieving and it'll save you a lot of headaches down the 121 00:06:50,980 --> 00:06:51,770 road. 122 00:06:52,210 --> 00:06:53,980 If you didn't make it public all together that's fine. 123 00:06:53,980 --> 00:06:55,350 But I just wouldn't recommend it. 124 00:06:55,640 --> 00:06:57,640 Can we do this in our apps. 125 00:06:57,640 --> 00:07:03,940 So next thing is we've got this data here but how do we actually create a list of data a list of data 126 00:07:03,940 --> 00:07:05,770 to feed our table view with. 127 00:07:05,770 --> 00:07:09,100 And we don't have that right now so what we're going to do is we're going to create what's called a 128 00:07:09,100 --> 00:07:13,300 Service OK and a service is a design paradigm in programming. 129 00:07:13,300 --> 00:07:17,350 It can perform functions for you or provide a service. 130 00:07:17,350 --> 00:07:18,690 It is what you think it is. 131 00:07:18,940 --> 00:07:24,310 And you know similar to you might call a plumber service or an electrician service they'll come and 132 00:07:24,310 --> 00:07:25,850 do a service for you don't own it. 133 00:07:25,930 --> 00:07:30,940 You know you don't you just ask them to do something and they do it for you over and over again. 134 00:07:31,100 --> 00:07:33,870 And that's the same thing that we're doing here as a category. 135 00:07:34,040 --> 00:07:36,260 You create multiple copies of a category OK. 136 00:07:36,260 --> 00:07:40,700 You're creating something over and over and over again whereas a service does things for you. 137 00:07:41,750 --> 00:07:46,340 And so our service is going to store some data and it's going to perform it's going to send us the day 138 00:07:46,340 --> 00:07:47,530 that we need more or less. 139 00:07:47,690 --> 00:07:53,050 So could a new folder or new group we're going to call this Services. 140 00:07:53,050 --> 00:07:54,890 I'm going to put a new file in here. 141 00:07:55,620 --> 00:08:02,290 And it's just going to be a swift file and I'm going to call this data service OK. 142 00:08:02,540 --> 00:08:09,660 And what we're going to do is we're making this class say class data service like so and then we're 143 00:08:09,660 --> 00:08:18,010 going to say static let instance equals when say data service. 144 00:08:18,570 --> 00:08:19,670 OK. 145 00:08:19,740 --> 00:08:25,260 So this might be confusing to you but what we've just done here is the key term to remember what we've 146 00:08:25,260 --> 00:08:27,200 just done is we've created a singleton. 147 00:08:27,200 --> 00:08:29,000 A singleton is another design pattern. 148 00:08:29,340 --> 00:08:31,860 And this is the this is the idea behind it. 149 00:08:31,950 --> 00:08:36,900 So you know the class or struct that's how you would typically use it is you would create multiple copies 150 00:08:36,900 --> 00:08:38,260 of over and over and over again. 151 00:08:38,280 --> 00:08:45,680 Well what we've done is we've created a variable here ok called instance that's what we'd call it. 152 00:08:45,690 --> 00:08:47,030 It's a constant actually. 153 00:08:47,190 --> 00:08:50,000 And we've created a brand new copy of the data service. 154 00:08:50,040 --> 00:08:50,990 But guess what. 155 00:08:51,030 --> 00:08:52,900 We've made it static. 156 00:08:52,920 --> 00:08:53,620 OK. 157 00:08:53,720 --> 00:08:59,550 And what static does is it means there's only ever one copy in memory so you can only ever ever ever 158 00:08:59,910 --> 00:09:01,300 create one data service. 159 00:09:01,380 --> 00:09:01,930 OK. 160 00:09:02,190 --> 00:09:03,120 And that's what we want we want. 161 00:09:03,120 --> 00:09:05,570 One copy in memory because this is going to hold our data for the app. 162 00:09:05,580 --> 00:09:09,440 You wouldn't want 10 different copies of data service all holding different versions of the data the 163 00:09:09,440 --> 00:09:10,710 way your app would be broken. 164 00:09:10,710 --> 00:09:13,800 It would have inconsistent data and bad user experience. 165 00:09:13,800 --> 00:09:20,190 And so by specifying a constant here called instance and then immediately initializing a new class a 166 00:09:20,190 --> 00:09:21,080 data service. 167 00:09:21,270 --> 00:09:26,430 Every time we go in and grab this instance it's going to refer to the exact same object in memory which 168 00:09:26,430 --> 00:09:27,780 is what we want. 169 00:09:27,810 --> 00:09:32,200 Again you don't have to completely understand this but typically when you write a service and you need 170 00:09:32,200 --> 00:09:36,410 to do something for you over and over again you can make it a singleton. 171 00:09:36,420 --> 00:09:41,670 The caveat with singletons is it's there's one copy in memory so if we create this in memory from the 172 00:09:41,670 --> 00:09:45,750 beginning of our app OK it's probably going to be there for the entire life lifetime of the app. 173 00:09:45,750 --> 00:09:48,190 So if you need to save memory. 174 00:09:48,270 --> 00:09:48,770 OK. 175 00:09:48,930 --> 00:09:54,180 You don't want to have a bunch like 100 different singleton class is doing a hundred different things. 176 00:09:54,390 --> 00:09:58,980 OK because your app is starting to take a memory that will never be reclaimed because there's always 177 00:09:58,980 --> 00:10:03,360 one in memory whereas when you create objects and Strax you know those things get cleaned up when they're 178 00:10:03,360 --> 00:10:04,280 not being used anymore. 179 00:10:04,290 --> 00:10:09,670 This will stay for as long as your app is living unless you manually destroyed it somehow. 180 00:10:09,870 --> 00:10:16,530 So I know that's all a bit wordy and there's a lot to go over there but we've just created our instance 181 00:10:16,530 --> 00:10:16,940 here. 182 00:10:17,040 --> 00:10:24,030 And what I want to do is I want to envision what that work table is calling a function that's hitting 183 00:10:24,030 --> 00:10:25,790 a server and it's retrieving data. 184 00:10:25,800 --> 00:10:28,280 Now in our case it's not going to do that but we're going to simulate that. 185 00:10:28,290 --> 00:10:35,490 So I might have a function here called Get categories and we'd go to the server OK and we would return 186 00:10:35,580 --> 00:10:39,510 a we would get a list of categories and then feed them into our app. 187 00:10:39,570 --> 00:10:44,610 And so let's go ahead and actually create that data source let's say that this is our data source from 188 00:10:44,610 --> 00:10:48,130 the server so private let category. 189 00:10:48,810 --> 00:10:55,410 And we're going to create an array filled with data and so we're going to do is we're going to create 190 00:10:55,680 --> 00:11:01,080 a category and knows how it needs a title and an image. 191 00:11:01,080 --> 00:11:08,010 OK so what we're going to do is we're going to pass on a title so we'll say shirts and the image name 192 00:11:08,580 --> 00:11:15,510 is going to be shirts stuffed PND but a comma here because we're just we were pre populating an array 193 00:11:15,510 --> 00:11:16,400 with data. 194 00:11:16,470 --> 00:11:20,030 So the next item in the array we're going to create a new category. 195 00:11:20,310 --> 00:11:23,790 And again you're starting to see multiple copies of an object. 196 00:11:23,790 --> 00:11:29,010 So right now these two categories it's going to create two copies of this struct and it's going to hold 197 00:11:29,010 --> 00:11:30,320 them in different places in memory. 198 00:11:30,420 --> 00:11:30,750 OK. 199 00:11:30,750 --> 00:11:33,120 Whereas the singleton only has one. 200 00:11:33,210 --> 00:11:34,330 That's the difference OK. 201 00:11:34,350 --> 00:11:38,620 In one case we're creating something in another case we're using a service over and over again. 202 00:11:38,970 --> 00:11:39,900 So hoodies. 203 00:11:40,110 --> 00:11:42,920 Image Name hoodies that pinchy. 204 00:11:43,080 --> 00:11:46,560 Now again if you're confused or like Mark how is this real use case. 205 00:11:46,560 --> 00:11:50,660 Well if you have an app where you want to heart get all your data in the app. 206 00:11:50,730 --> 00:11:54,690 Let's say you're a new developer and you have an idea you're not ready to talk to a server yet or your 207 00:11:54,690 --> 00:11:57,080 app small enough you can actually do something just like this. 208 00:11:57,090 --> 00:12:01,740 You can put all your data here in the app and feed it into your table to use things like that. 209 00:12:02,240 --> 00:12:07,430 If if you weren't doing it locally you want to hit a server OK. 210 00:12:07,440 --> 00:12:11,430 You might still do something just like this you'd hold an array but instead of creating them here at 211 00:12:11,610 --> 00:12:16,090 initialization time it would come from the server and then it would populate the array. 212 00:12:16,110 --> 00:12:19,830 You know we would say category's equals and the new array from the server. 213 00:12:19,830 --> 00:12:30,020 So not all that different category title and this one is going to be this image name as hats that PMG. 214 00:12:30,030 --> 00:12:34,040 Now I know these these are the right image names because I drag them in. 215 00:12:34,230 --> 00:12:39,930 And as you can see we've got digital hats and those are PNB files OK. 216 00:12:40,110 --> 00:12:47,420 And the category title An Oregon State Digital and image name is going to be digital. 217 00:12:47,460 --> 00:12:50,710 TNG like so. 218 00:12:51,260 --> 00:12:54,100 OK so now we have a list of categories This is great. 219 00:12:54,510 --> 00:13:01,160 And what we've done here is we've inferred the type of the Saray what we're seeing as categories is 220 00:13:01,160 --> 00:13:04,130 an array of type category. 221 00:13:04,280 --> 00:13:04,770 OK. 222 00:13:04,910 --> 00:13:13,160 So when I say returned cat or good categories the return type is going to be an array of type category 223 00:13:13,400 --> 00:13:14,450 like so. 224 00:13:14,940 --> 00:13:15,150 OK. 225 00:13:15,170 --> 00:13:20,400 So what we're saying is that we're going to return to ever calls this function and array of categories. 226 00:13:20,570 --> 00:13:21,040 OK. 227 00:13:21,190 --> 00:13:24,920 With the official category struct and this is not accessible. 228 00:13:24,920 --> 00:13:30,620 We made it private because we don't want anybody accessing that data directly we want a function here 229 00:13:30,890 --> 00:13:33,870 in case it needed to do any cleanup or manipulation. 230 00:13:34,120 --> 00:13:38,690 But what's really happening here is you know we're simulating we're hitting a server and we're turning 231 00:13:38,690 --> 00:13:44,610 data and you would do that through a function and then all we're going to do in here is a return category. 232 00:13:45,380 --> 00:13:48,070 So we're going to return this array to whoever calls it. 233 00:13:48,190 --> 00:13:54,660 And because this array is a type category this will go away and we are in business here. 234 00:13:54,880 --> 00:13:55,630 OK. 235 00:13:56,270 --> 00:13:57,200 So a lot to cover right. 236 00:13:57,200 --> 00:13:59,030 It's a lot of information. 237 00:13:59,510 --> 00:14:03,980 But our app is really coming together it's looking nice because some good data in here and of course 238 00:14:03,980 --> 00:14:07,380 this is the importance of working with structure clauses that you can make reusable objects. 239 00:14:07,400 --> 00:14:11,540 You write the code once and then you can use it over and over and over again. 240 00:14:11,660 --> 00:14:12,270 OK. 241 00:14:12,490 --> 00:14:17,270 So here in our view controller we've got a table view. 242 00:14:17,440 --> 00:14:20,800 OK but the table you is not being fed with data yet. 243 00:14:20,870 --> 00:14:28,250 So in order to get this working properly we need to introduce something called protocols and delegates 244 00:14:28,850 --> 00:14:31,280 done it new words new things Ziller. 245 00:14:31,290 --> 00:14:32,840 No my head's going to explode already Mark. 246 00:14:32,900 --> 00:14:34,160 Just make it stop. 247 00:14:34,160 --> 00:14:35,050 Sorry. 248 00:14:35,300 --> 00:14:39,020 You're on a adventure of brain explosion and it's going to keep going until the end of this course and 249 00:14:39,020 --> 00:14:40,250 for the rest of your life as a programmer. 250 00:14:40,250 --> 00:14:41,940 Sorry. 251 00:14:42,400 --> 00:14:42,770 OK. 252 00:14:42,800 --> 00:14:44,480 So we got a tape of you how do we feed it with Dave. 253 00:14:44,480 --> 00:14:49,660 Well a table view it needs to know where the data source is hey I need some data. 254 00:14:49,700 --> 00:14:50,830 Give it to me where do I get it. 255 00:14:50,870 --> 00:14:54,830 And also there's other things too it's like hey I need to show cells on the screen. 256 00:14:54,850 --> 00:15:00,650 I need to show something on the screen and fill it with data so that you can have something to look 257 00:15:00,650 --> 00:15:01,020 at. 258 00:15:01,230 --> 00:15:02,240 Well it's not doing there now. 259 00:15:02,270 --> 00:15:03,520 So let's go ahead and do that. 260 00:15:03,680 --> 00:15:10,370 And we do that by implementing some protocols put a comma after you have your controller or table you 261 00:15:10,640 --> 00:15:14,220 data source and you table you delegate. 262 00:15:14,450 --> 00:15:15,250 OK. 263 00:15:15,710 --> 00:15:16,820 These are two protocols. 264 00:15:16,820 --> 00:15:23,420 And even though it says data source and so delegate these are protocols a swift protocol and they're 265 00:15:23,450 --> 00:15:29,750 really based actually on Objective-C the code was written long ago but in swift they're translated as 266 00:15:29,750 --> 00:15:30,260 protocols. 267 00:15:30,270 --> 00:15:31,780 And so these are protocols and swift. 268 00:15:32,150 --> 00:15:36,050 And what we're saying is we're going to abide by a set of rules and we'll talk more about protocols 269 00:15:36,050 --> 00:15:37,580 later in more depth and detail. 270 00:15:37,580 --> 00:15:39,090 So just follow along for now. 271 00:15:39,320 --> 00:15:44,200 So you I table your data source in your table you delegate Kesselman to save this file here. 272 00:15:44,660 --> 00:15:45,500 All right. 273 00:15:45,500 --> 00:15:47,710 And normally these would yell at me. 274 00:15:47,720 --> 00:15:48,000 All right. 275 00:15:48,000 --> 00:15:48,790 Here we go. 276 00:15:49,130 --> 00:15:53,780 And so if we click this little red icon here new with X code 9 is to actually populate the functions 277 00:15:53,780 --> 00:15:55,550 that you need to get this working. 278 00:15:55,700 --> 00:15:58,560 So click that little red air and it says type categories. 279 00:15:58,580 --> 00:16:00,950 VC does not conform to protocol. 280 00:16:00,970 --> 00:16:02,160 You idea will be datasource. 281 00:16:02,210 --> 00:16:08,060 You want to add protocol stubs so what is saying is you're not listening to the rules. 282 00:16:08,080 --> 00:16:13,840 You adopted a set of rules table your data source and you will be a delegate but you're not abiding 283 00:16:13,840 --> 00:16:16,240 by the rules you haven't even implemented them yet. 284 00:16:16,240 --> 00:16:21,340 So I'm going to click fix just great and it put them up here which is kind of annoying. 285 00:16:21,370 --> 00:16:27,580 So my command X and what we're going to do is put them down here and we're going to do some cleanup 286 00:16:27,580 --> 00:16:28,310 here. 287 00:16:28,600 --> 00:16:32,990 As if the current X code version which is beta it shows you know this available etc. etc.. 288 00:16:33,010 --> 00:16:37,680 That may go away in future versions I would expect it would cause it's kind of messy and ugly. 289 00:16:37,690 --> 00:16:39,690 But get rid of the available as well too. 290 00:16:39,830 --> 00:16:41,540 And it's available here. 291 00:16:42,010 --> 00:16:47,340 So it's implemented the two functions that it requires in order to operate correctly. 292 00:16:47,650 --> 00:16:47,970 OK. 293 00:16:47,980 --> 00:16:51,820 Number of rows sections or how many rows do you want the table view to show you need to know that in 294 00:16:51,820 --> 00:16:54,880 advance and then sell FERO index path. 295 00:16:55,060 --> 00:16:58,480 OK sell Pharo at index path. 296 00:16:58,480 --> 00:17:02,890 And what this is saying is hey let's create a cell a reusable cell. 297 00:17:02,890 --> 00:17:04,250 At this particular path. 298 00:17:04,250 --> 00:17:07,520 So item number 10 show the cell and put this type of data. 299 00:17:07,520 --> 00:17:13,860 This is where you actually feed the data into Table View item number one or two or three or four etc.. 300 00:17:14,290 --> 00:17:16,490 Ok so how many rows are in the section. 301 00:17:16,750 --> 00:17:18,180 Well this is pretty easy. 302 00:17:18,190 --> 00:17:22,630 All we have to do it wants an integer and we just want to know how many table view roles we already 303 00:17:22,630 --> 00:17:26,210 know that it's what four we have four on the screen. 304 00:17:26,380 --> 00:17:29,650 Now we could just see it returned four but that's cheating and that's not the way that you would write 305 00:17:29,650 --> 00:17:30,280 code. 306 00:17:30,280 --> 00:17:31,590 Real code robust code. 307 00:17:31,810 --> 00:17:37,730 So we're going to return data service that instance we're going to call that instance function on it 308 00:17:38,170 --> 00:17:40,200 OK or that that variable. 309 00:17:40,360 --> 00:17:43,460 And then we're going to call the function get categories. 310 00:17:43,970 --> 00:17:45,990 OK so what we're doing is we're grabbing the categories. 311 00:17:46,000 --> 00:17:49,210 Well what is category's return when it returns an array. 312 00:17:49,420 --> 00:17:51,880 So we know that we're getting an array right here. 313 00:17:52,000 --> 00:17:53,170 Well this is asking for an. 314 00:17:53,190 --> 00:17:55,800 So how do we get the total number of items in an array. 315 00:17:55,840 --> 00:17:57,100 Simple. 316 00:17:57,100 --> 00:17:58,980 Calling the count function. 317 00:17:59,340 --> 00:17:59,700 OK. 318 00:17:59,710 --> 00:18:05,580 So what we're doing here is we're saying return the total number of items in this array. 319 00:18:05,740 --> 00:18:06,190 OK. 320 00:18:06,310 --> 00:18:07,380 Easy enough. 321 00:18:07,420 --> 00:18:09,030 That's all we're doing we're turning a count. 322 00:18:09,550 --> 00:18:10,630 But what about this guy. 323 00:18:10,720 --> 00:18:14,390 How do we actually grab a cell and put data in it. 324 00:18:14,830 --> 00:18:20,720 Well I think we should write some code in our table cell first before we actually implement this function. 325 00:18:20,720 --> 00:18:26,260 Here's what we're going to do is we're going to go over here to our view or category so what I want 326 00:18:26,260 --> 00:18:30,220 to do is delete this function sets like that don't need this and I don't need this away from the zip 327 00:18:30,220 --> 00:18:30,810 file or. 328 00:18:30,910 --> 00:18:33,550 Right here we're going to create our own function here. 329 00:18:33,740 --> 00:18:37,060 Or to call this update view. 330 00:18:37,240 --> 00:18:37,620 OK. 331 00:18:37,720 --> 00:18:42,340 Basically update the views on the cell and we're going to pass in the category. 332 00:18:42,460 --> 00:18:44,530 Whatever the current category is. 333 00:18:45,020 --> 00:18:45,890 Okay. 334 00:18:45,910 --> 00:18:49,030 And again this is another reason why you should have had reusable things. 335 00:18:49,030 --> 00:18:52,930 Otherwise we'd have to have a title here an image name here and we'd be passing two different items 336 00:18:52,930 --> 00:18:58,000 and over and over again in this case we're only passing one reusable object which is well-written code 337 00:18:58,030 --> 00:18:59,320 and protected. 338 00:18:59,320 --> 00:19:02,910 So we're an updated use basically every time we want to show a cell on the screen. 339 00:19:02,950 --> 00:19:07,600 We're going to call this update use function and pasand a category and it's going to update the views. 340 00:19:07,600 --> 00:19:10,740 So let's show you how easy this is here. 341 00:19:10,840 --> 00:19:11,310 OK. 342 00:19:11,410 --> 00:19:16,470 So we're going to say category image image. 343 00:19:16,670 --> 00:19:23,050 So we're going to set the image on it equals UI image and we're going to do the one that says image 344 00:19:23,050 --> 00:19:29,350 named and all we're going to do is pass in the name of the image that we set in the category so category 345 00:19:29,860 --> 00:19:31,030 the image name. 346 00:19:31,030 --> 00:19:35,190 It's that easy category inch or category title. 347 00:19:35,210 --> 00:19:41,670 The next one text equals category Dopp title. 348 00:19:41,710 --> 00:19:44,480 We did that as well to remember our category here. 349 00:19:44,500 --> 00:19:46,090 It has an image name and it has a title. 350 00:19:46,090 --> 00:19:47,170 Amazing. 351 00:19:47,230 --> 00:19:48,450 Amazing. 352 00:19:48,460 --> 00:19:54,460 All we have to do is grab what we've already set right here and it's as simple as that for an update 353 00:19:54,460 --> 00:19:56,280 that we use every single time. 354 00:19:56,320 --> 00:19:57,630 Easy peasy. 355 00:19:57,760 --> 00:19:57,970 OK. 356 00:19:57,970 --> 00:20:03,070 So let's go back to our categories of now and how we can implement this function down here. 357 00:20:03,070 --> 00:20:05,940 Let me give it a little more space so you can see what we're working on here. 358 00:20:06,220 --> 00:20:07,380 Let's close this. 359 00:20:07,390 --> 00:20:15,610 So here in our table view what we're going to do is say if let cell try and create a cell equals table 360 00:20:15,610 --> 00:20:22,240 view dequeue re-usable cell with identifier we have not created this identifier yet. 361 00:20:22,450 --> 00:20:28,130 So we're going to assume it's name we're going to call this cat a category cell. 362 00:20:28,640 --> 00:20:29,300 OK. 363 00:20:29,540 --> 00:20:34,160 And we're going to cast it as a category cell. 364 00:20:34,280 --> 00:20:41,430 So what we're doing is we're grabbing we're grabbing the table view that is working with this with this 365 00:20:41,440 --> 00:20:44,430 delegate and we're calling dequeue reusable cell. 366 00:20:44,440 --> 00:20:49,720 And this is the function you call to get a reusable cell did you know on a table view on us. 367 00:20:49,900 --> 00:20:53,800 OK in a similar with Android slathers one two three four items visible. 368 00:20:53,800 --> 00:20:55,260 Did you know that. 369 00:20:55,270 --> 00:21:00,070 Let's see if you had 100 items they would not be under here hidden there would only be probably five 370 00:21:00,070 --> 00:21:01,460 or six cells altogether. 371 00:21:01,480 --> 00:21:05,550 And what happens is it takes the one off the bottom that's no longer on the screen and puts it back 372 00:21:05,550 --> 00:21:09,900 on the top so it grabs the item still in memory so it doesn't have to recreate it and slow down your 373 00:21:09,900 --> 00:21:13,000 app and it just hey I got a new I got your old cell for you. 374 00:21:13,140 --> 00:21:15,070 What data should we put in it to update it. 375 00:21:15,180 --> 00:21:16,290 That's all. 376 00:21:16,400 --> 00:21:16,930 What. 377 00:21:16,980 --> 00:21:17,310 Yeah. 378 00:21:17,340 --> 00:21:21,020 It just grabs an original cell you've already used and you update it with new data. 379 00:21:21,030 --> 00:21:22,200 That's how it works. 380 00:21:22,200 --> 00:21:25,320 So what we're doing here is we're grabbing a reusable cell. 381 00:21:25,660 --> 00:21:25,950 OK. 382 00:21:25,950 --> 00:21:30,120 Called category cell which we have not set yet and easy. 383 00:21:30,120 --> 00:21:35,540 Now all we have to do is grab the category for this row and then put it in the update View's function. 384 00:21:35,550 --> 00:21:42,120 So when you say let category how do you think we can grab the appropriate category or what I want you 385 00:21:42,120 --> 00:21:48,120 to do OK on your own pozires video that I want you to figure out how to grab the proper category for 386 00:21:48,120 --> 00:21:57,570 the proper row and store it in this variable. 387 00:21:57,590 --> 00:22:03,650 Did you do it I know some of you did and I know some of you didn't because that's how it always works. 388 00:22:04,040 --> 00:22:05,900 But for those who did congratulations. 389 00:22:05,900 --> 00:22:07,850 You know if you figured it out if you didn't. 390 00:22:07,850 --> 00:22:09,410 That's OK because we're going to do it right now. 391 00:22:09,410 --> 00:22:11,100 So let category. 392 00:22:11,210 --> 00:22:12,320 Equals. 393 00:22:12,710 --> 00:22:13,020 OK. 394 00:22:13,050 --> 00:22:13,940 You ready. 395 00:22:13,970 --> 00:22:19,210 We're going to see data service that instance get categories. 396 00:22:19,340 --> 00:22:21,410 How do we get the right category at the right row. 397 00:22:21,410 --> 00:22:22,390 What do we do. 398 00:22:22,790 --> 00:22:28,950 Well we just grab the item from the array index path Dutrow. 399 00:22:29,460 --> 00:22:30,280 OK. 400 00:22:30,680 --> 00:22:32,400 Does this look really funky to you. 401 00:22:32,500 --> 00:22:32,750 OK. 402 00:22:32,750 --> 00:22:33,740 You're like what's going on. 403 00:22:33,810 --> 00:22:35,130 This is Grady's index. 404 00:22:35,330 --> 00:22:39,200 When you were teaching a phrase you never taught us to put square brackets after parentheses that doesn't 405 00:22:39,200 --> 00:22:39,950 make any sense to me. 406 00:22:39,950 --> 00:22:43,180 Well it's because we're returning an array from a function. 407 00:22:43,190 --> 00:22:49,910 So this would be the equivalent of doing this I could have said Let lead categories equal data service 408 00:22:51,000 --> 00:22:52,680 instance get category. 409 00:22:52,680 --> 00:22:56,730 So it's stores like you know the the array inside of a category. 410 00:22:56,750 --> 00:23:01,640 Here are the categories array and then what I could have done was I could have just you know I could 411 00:23:01,640 --> 00:23:05,290 have set categories like so. 412 00:23:05,420 --> 00:23:05,980 OK. 413 00:23:06,070 --> 00:23:11,030 All that's certain look familiar to me now because that's an array and you're grabbing an index out 414 00:23:11,030 --> 00:23:11,930 of that array. 415 00:23:12,380 --> 00:23:16,830 But why do that when we can do it so much more quickly with one line of code. 416 00:23:17,150 --> 00:23:22,170 So grabbing the categories and there were grabbing the specific item out of that category. 417 00:23:22,640 --> 00:23:23,380 Easy peasy. 418 00:23:23,540 --> 00:23:24,090 OK. 419 00:23:24,380 --> 00:23:27,590 And if it's not easy Don't worry it just takes lots of practice. 420 00:23:27,650 --> 00:23:28,450 OK. 421 00:23:29,000 --> 00:23:30,760 You'll get this down over and over again. 422 00:23:30,950 --> 00:23:34,140 Code repetition code every day study every day. 423 00:23:34,160 --> 00:23:38,010 Let's go ahead and update the cell now so cell that update views. 424 00:23:38,660 --> 00:23:39,880 And it's looking for category. 425 00:23:39,890 --> 00:23:42,480 So we passed in the category that we just grabbed. 426 00:23:42,990 --> 00:23:43,790 OK. 427 00:23:44,330 --> 00:23:46,290 And that's looking really good as well too. 428 00:23:46,310 --> 00:23:50,930 Now a lot of developers are really tempted to do some nasty code that goes something like this instead 429 00:23:50,930 --> 00:23:53,900 of just updating views and letting the view manage itself. 430 00:23:53,900 --> 00:23:55,440 They like to do things like this like that. 431 00:23:55,460 --> 00:24:01,970 Like the say cell dot image the dot image equals you know category dot image name. 432 00:24:02,000 --> 00:24:06,830 So the same thing we did in our view but they like to do it here from the tail view and that's bad practice. 433 00:24:06,830 --> 00:24:08,970 You always want your views to be self-contained. 434 00:24:09,020 --> 00:24:10,280 You should manage themselves. 435 00:24:10,280 --> 00:24:15,050 The controller should say what's going on the screen at different times but every view that you have 436 00:24:15,050 --> 00:24:16,070 should manage itself. 437 00:24:16,100 --> 00:24:21,050 If it's of any consequence or significance which a table you sell is so don't ever do this don't ever 438 00:24:21,050 --> 00:24:27,650 manipulate your table use cells from within your table view for an index path it's nasty and it's nothing 439 00:24:27,680 --> 00:24:28,280 I teach. 440 00:24:28,310 --> 00:24:30,730 And if you learned it you didn't learn it from me. 441 00:24:30,740 --> 00:24:33,030 So do it this way it's much better. 442 00:24:33,030 --> 00:24:38,220 All right and so what we're going to do next is return that cell because the function table view self 443 00:24:38,230 --> 00:24:41,240 wrote next path it wants us to return a cell. 444 00:24:41,550 --> 00:24:50,130 Else let's just return an empty one return category cell like an empty cell like so. 445 00:24:50,620 --> 00:24:54,030 Are you with me so far breaking really good progress here. 446 00:24:54,070 --> 00:24:57,990 We've got our our delegate function implemented well. 447 00:24:58,120 --> 00:25:01,220 Suffer index path and number of rows in S.. 448 00:25:01,240 --> 00:25:05,930 One other thing we need to do is set the data source and delegate of the table view. 449 00:25:05,950 --> 00:25:16,030 So we're going to say if you did load categories table that data source equal self category table delegate 450 00:25:16,480 --> 00:25:20,650 equals self we're saying is hey the data source is this class this category. 451 00:25:20,670 --> 00:25:22,430 VC view controller self. 452 00:25:22,460 --> 00:25:25,470 We're assessing how the data source is also this Self. 453 00:25:25,480 --> 00:25:25,990 OK. 454 00:25:26,110 --> 00:25:31,850 If I took these off we would get an error here because it's like what's going on. 455 00:25:31,850 --> 00:25:35,070 I don't this doesn't make any sense to me where you're sitting these delegates. 456 00:25:35,070 --> 00:25:39,360 You cannot assign value of categories to type you if you data source because it doesn't exist. 457 00:25:39,460 --> 00:25:46,950 But once you implement the protocols OK and those properties do exist and you're setting the class you 458 00:25:46,960 --> 00:25:47,860 set into class on them. 459 00:25:47,860 --> 00:25:52,700 So OK this class itself category b c this view controller. 460 00:25:52,830 --> 00:25:54,380 So that's looking good. 461 00:25:54,430 --> 00:25:56,560 We need to do a little more clean up here in our story board. 462 00:25:56,590 --> 00:26:01,330 We've used this category cell identifier for the reusable cell but we actually haven't given it a name 463 00:26:02,070 --> 00:26:05,320 an identifier in our storyboard so let's go back to the main storyboard. 464 00:26:05,650 --> 00:26:06,360 OK. 465 00:26:06,730 --> 00:26:13,660 Click your cell category cell and open up the right hand side here and we're going to go to the attributes 466 00:26:13,660 --> 00:26:15,880 inspector and see this reuse identifier. 467 00:26:15,880 --> 00:26:22,180 This is where we're going to type in the we go. 468 00:26:22,190 --> 00:26:26,750 We're going to type in the category cell that's the name of the identifier that we wrote in the code 469 00:26:26,750 --> 00:26:27,620 and it has to be the same. 470 00:26:27,620 --> 00:26:29,810 And a lot of developers get this. 471 00:26:29,840 --> 00:26:33,790 They forget this spot right here and they bang their heads. 472 00:26:33,870 --> 00:26:34,950 You have to do this. 473 00:26:34,970 --> 00:26:37,960 You don't put the identifier it doesn't know how to reuse the cell. 474 00:26:38,010 --> 00:26:41,280 OK rookie mistake Hogan. 475 00:26:41,780 --> 00:26:44,000 Let's run it and see if it works within a lot of talking. 476 00:26:44,000 --> 00:26:45,870 We haven't actually read it and see if it works. 477 00:26:54,590 --> 00:26:54,990 OK. 478 00:26:55,070 --> 00:26:57,790 So it looks like we have an error did not work. 479 00:26:58,220 --> 00:27:01,180 So a category table that data source equals self. 480 00:27:01,430 --> 00:27:09,500 And it says it's Neal This would indicate to me that somehow we lost our category table connection in 481 00:27:09,500 --> 00:27:14,640 Interface Builder which seems strange to me because we set it Melissas double check anyway. 482 00:27:14,750 --> 00:27:18,880 I also noticed that and in turn Eric heard editing functionality may be limited. 483 00:27:18,980 --> 00:27:22,290 This is currently a beta software and so it could have bugs as well too. 484 00:27:22,430 --> 00:27:23,610 But it shouldn't be a big deal. 485 00:27:23,840 --> 00:27:26,150 Let's look at our table view OK. 486 00:27:26,500 --> 00:27:30,110 It looks like our connection was lost which it is. 487 00:27:30,140 --> 00:27:31,280 Let's reset here. 488 00:27:31,280 --> 00:27:35,720 Category table to the table you get all I'm glad you saw that. 489 00:27:35,750 --> 00:27:38,110 That's a good way to know when something's wrong. 490 00:27:38,150 --> 00:27:40,920 Mark how did you know that it wasn't there well it was said it was nil. 491 00:27:40,930 --> 00:27:43,320 It said the table view that delegate was nil. 492 00:27:43,330 --> 00:27:49,300 Well I don't think it could be is it wasn't it. 493 00:27:49,320 --> 00:27:51,300 It wasn't in memory wasn't even created yet. 494 00:27:51,370 --> 00:27:51,580 OK. 495 00:27:51,590 --> 00:27:53,990 So it's not working clearly. 496 00:27:54,020 --> 00:27:59,030 So we've got no cells here showing on the screen and it's just blank. 497 00:27:59,300 --> 00:28:00,940 So we should fix that. 498 00:28:00,950 --> 00:28:04,120 Let's go back to our code work reducing debugging 499 00:28:09,210 --> 00:28:10,560 the right hand here. 500 00:28:12,490 --> 00:28:19,630 Oh yes another rookie mistake which US long term developers still make is we didn't set the outlets 501 00:28:19,690 --> 00:28:29,060 on the table of you so was going to in-store board and it's click the sell here or we did and it it 502 00:28:29,120 --> 00:28:30,330 deleted those as well too. 503 00:28:30,360 --> 00:28:32,310 Which is also a possibility. 504 00:28:32,370 --> 00:28:37,880 So category so right click it you know are used aren't even available here. 505 00:28:37,890 --> 00:28:39,800 I think our tax code hosed them. 506 00:28:39,930 --> 00:28:42,450 So let's go back over here and look at that. 507 00:28:42,450 --> 00:28:44,160 We lost our class as well too. 508 00:28:44,280 --> 00:28:47,280 So I clicked the identity inspector here. 509 00:28:47,280 --> 00:28:47,690 OK. 510 00:28:47,700 --> 00:28:53,160 And I'm just resetting the category so somewhere in here X code chopped up our stuff. 511 00:28:53,160 --> 00:28:55,230 So that's why it's not working. 512 00:28:55,230 --> 00:29:00,710 All right now if I right click category sell you'll see the category image and the category title. 513 00:29:01,440 --> 00:29:02,310 Perfect. 514 00:29:02,490 --> 00:29:06,230 OK this is good too you're seeing debugging real time problems that are happening. 515 00:29:06,240 --> 00:29:06,950 Mark why. 516 00:29:07,110 --> 00:29:07,860 Why is this blank. 517 00:29:07,860 --> 00:29:12,690 Well I'm thinking in my head the only reason why I could be blank is if the views are one is the data 518 00:29:12,690 --> 00:29:15,140 is not there but the data is there we've written that code. 519 00:29:15,150 --> 00:29:17,240 Or if the views aren't connected which they weren't. 520 00:29:17,310 --> 00:29:19,170 So there was one or two possibilities. 521 00:29:19,170 --> 00:29:20,270 So let's run it again and see 522 00:29:27,750 --> 00:29:29,170 and there we go. 523 00:29:29,280 --> 00:29:30,930 It's not perfect but you know what is cool. 524 00:29:30,930 --> 00:29:36,180 You can actually scroll a couple problems I see here is these are supposed to have a little bit of spacing. 525 00:29:36,390 --> 00:29:38,510 So let's fix that and let's get rid of this ugly scroll. 526 00:29:38,610 --> 00:29:42,670 I always hate the scroll things on the sides and the bottom so let's fix those as well too. 527 00:29:42,690 --> 00:29:45,420 So how would we fix this how do we create spaces between cells. 528 00:29:45,420 --> 00:29:46,530 Well you really can't. 529 00:29:46,650 --> 00:29:50,260 You can't create a spacer between cells. 530 00:29:50,290 --> 00:29:55,190 What you do is you simulate that space using other means and methods that you already know how to do. 531 00:29:55,200 --> 00:30:00,000 So what I think we're going to do is just add a little more padding causes lift inside a little more 532 00:30:00,000 --> 00:30:02,060 padding on this image itself here. 533 00:30:02,070 --> 00:30:11,190 So in this category image what we can do is just bring a little in from the bottom here and the top 534 00:30:11,190 --> 00:30:11,680 probably. 535 00:30:11,690 --> 00:30:13,650 So let's look at our measurements here. 536 00:30:13,650 --> 00:30:16,620 So we've got this bottom space and top space. 537 00:30:16,620 --> 00:30:22,190 You know what I think I want to do is delete these and the top space and we'll reset them. 538 00:30:22,200 --> 00:30:23,220 This is faster that way. 539 00:30:23,220 --> 00:30:24,560 So click the pin menu. 540 00:30:24,750 --> 00:30:28,230 And what I'm gonna do is I'm going to say three from the top. 541 00:30:29,030 --> 00:30:31,570 And three from the bottom. 542 00:30:31,850 --> 00:30:32,360 OK. 543 00:30:32,570 --> 00:30:37,920 So three from the top three from the bottom bring it up a little bit there let's run it again and see 544 00:30:37,920 --> 00:30:38,430 how it looks. 545 00:30:38,430 --> 00:30:42,920 I didn't put more than three because if you put top on the bottom three would add up to six and would 546 00:30:42,930 --> 00:30:49,380 give it more spacing so I'm just trying it out with three DCO looks as good as these ugly lines in between 547 00:30:49,380 --> 00:30:50,990 which I definitely don't want. 548 00:30:51,010 --> 00:30:53,380 So let's go and get rid of those and that's really easy. 549 00:30:53,400 --> 00:30:57,640 All you have to do to get rid of those lines is click your table view itself category table. 550 00:30:57,900 --> 00:30:58,230 OK. 551 00:30:58,240 --> 00:31:02,440 Could the attributes inspector and see the step the separator how it says default. 552 00:31:02,650 --> 00:31:04,210 Change it to none. 553 00:31:04,250 --> 00:31:06,420 And then let's run it again and see how it looks 554 00:31:12,490 --> 00:31:13,060 wonderful. 555 00:31:13,120 --> 00:31:16,290 OK this is kind of looking like the image here but not very much code. 556 00:31:16,420 --> 00:31:20,620 I think our text is like black and should be dark gray but I don't care. 557 00:31:20,620 --> 00:31:23,150 I'm not going to tell the designer if you don't care. 558 00:31:23,470 --> 00:31:24,400 This is looking good though. 559 00:31:24,430 --> 00:31:27,550 So what we've done here is we've set images dynamically as if we got them from a server. 560 00:31:27,550 --> 00:31:32,620 We also set the titles of those cells that are dynamically as if we got them from a server somewhere 561 00:31:32,650 --> 00:31:36,970 and we're repopulating data and then when you know hypothetically when shirts and clothes and things 562 00:31:36,970 --> 00:31:40,940 products would change on line they would change your automatically which is really cool. 563 00:31:40,940 --> 00:31:42,400 So this is looking good. 564 00:31:42,400 --> 00:31:46,440 One more thing let's get rid of those ugly scrolling things. 565 00:31:46,780 --> 00:31:52,910 So click your table view here and let's go to our scrolling. 566 00:31:53,120 --> 00:31:55,620 Let's take up the scroll indicators there called scroll indicators. 567 00:31:55,640 --> 00:31:59,220 I don't you know I don't remember the name because I don't want to think about it. 568 00:31:59,260 --> 00:32:00,660 OK I take both of those off. 569 00:32:00,660 --> 00:32:02,780 And this is good. 570 00:32:03,350 --> 00:32:06,450 We're good here so we're going to get this video done we've done a lot. 571 00:32:06,490 --> 00:32:07,590 OK we've done a lot. 572 00:32:07,610 --> 00:32:09,630 We've created a custom table view cell. 573 00:32:09,710 --> 00:32:12,900 We pass data into it we implemented delegate functions. 574 00:32:12,910 --> 00:32:14,590 Ok this is great here. 575 00:32:14,630 --> 00:32:17,570 We've implemented delegate functions. 576 00:32:17,600 --> 00:32:22,400 So remember you implement a protocol and then it calls delegate functions so protocol has a delegate 577 00:32:22,460 --> 00:32:24,070 or something that represents the protocol. 578 00:32:24,080 --> 00:32:27,200 You'll learn more about this and then delegate X on its behalf. 579 00:32:27,200 --> 00:32:33,290 In our case the delegate was the category's VC and so we implemented cell index path which basically 580 00:32:33,320 --> 00:32:34,570 dequeue is a cell. 581 00:32:34,690 --> 00:32:35,060 OK. 582 00:32:35,060 --> 00:32:38,030 And then it makes it reusable and then you update the data in it. 583 00:32:38,030 --> 00:32:40,860 OK we said an identifier on here and in this. 584 00:32:40,910 --> 00:32:43,100 And we said how many rows we want to show all together. 585 00:32:43,210 --> 00:32:43,670 OK. 586 00:32:43,670 --> 00:32:48,230 So the delegate and the datasource here of the table and we connected Iby outlets and we did some debugging 587 00:32:48,230 --> 00:32:51,540 to X code just hosed all of our wonderful work. 588 00:32:51,590 --> 00:32:53,110 We knew exactly how to fix it. 589 00:32:53,110 --> 00:32:56,380 So a lot of good stuff here you may have to watch us over and over again. 590 00:32:56,390 --> 00:32:59,890 But when I'm programming I was to build it professionally and on the slopes. 591 00:33:00,080 --> 00:33:04,320 There's not a day that goes by where someone on her team is not working with table views and doing this 592 00:33:04,370 --> 00:33:06,830 exact type of code so that's it for now. 593 00:33:06,830 --> 00:33:08,120 Mark Price a slopes. 594 00:33:08,230 --> 00:33:09,260 Let's move on and board.