1 00:00:00,000 --> 00:00:07,880 2 00:00:07,880 --> 00:00:09,800 >> RHED SHI: Welcome to see CS50 seminar-- 3 00:00:09,800 --> 00:00:11,630 Introduction to iOS. 4 00:00:11,630 --> 00:00:13,290 Thank you all for coming. 5 00:00:13,290 --> 00:00:16,610 I hope you're just as excited as I am about iOS. 6 00:00:16,610 --> 00:00:22,300 Last year, I took CS50 as a sophomore, and I basically learned iOS for my 7 00:00:22,300 --> 00:00:23,490 final project. 8 00:00:23,490 --> 00:00:26,350 And it was pretty-- 9 00:00:26,350 --> 00:00:30,530 well, it wasn't easy, but there are lots of support tutorials online. 10 00:00:30,530 --> 00:00:33,760 And I really hope that with this seminar, I'll give you guys a head 11 00:00:33,760 --> 00:00:36,750 start on iOS development 12 00:00:36,750 --> 00:00:40,490 >> So, in terms of iOS development, there are two main things we 13 00:00:40,490 --> 00:00:42,090 want to cover today. 14 00:00:42,090 --> 00:00:43,290 First, the language-- 15 00:00:43,290 --> 00:00:46,650 the language is going to be in Objective-C. We'll actually hear 16 00:00:46,650 --> 00:00:47,750 something really exciting. 17 00:00:47,750 --> 00:00:51,500 So, you can join the whole Apple community of developers and build some 18 00:00:51,500 --> 00:00:52,940 really awesome apps. 19 00:00:52,940 --> 00:00:58,670 >> Also, iOS 7 is beautiful, hopefully, to some of you. 20 00:00:58,670 --> 00:01:01,130 But it's controversial, I know. 21 00:01:01,130 --> 00:01:05,349 And mainly, what I want to do is guide you through Objective-C, and also 22 00:01:05,349 --> 00:01:10,650 Xcode, which is the integrated development environment that you'll be 23 00:01:10,650 --> 00:01:13,460 working in for iOS. 24 00:01:13,460 --> 00:01:19,140 >> And so, just a word on Objective-C. Basically, it's the exact same as C, 25 00:01:19,140 --> 00:01:22,790 but with a lot of other things. 26 00:01:22,790 --> 00:01:27,710 And so, more strictly, it's actually a super-set of C. So anything that you 27 00:01:27,710 --> 00:01:32,280 can do in C right now, which is basically like pset 0 through 6, you 28 00:01:32,280 --> 00:01:34,170 can do in Objective-C. 29 00:01:34,170 --> 00:01:38,620 >> So, don't feel afraid about this new language that you're going to learn. 30 00:01:38,620 --> 00:01:42,120 You've already covered a lot of it, because you've all done C this past 31 00:01:42,120 --> 00:01:45,880 semester, except now you're going to have a lot more to work with. 32 00:01:45,880 --> 00:01:49,270 And I'm just going to lead you through a couple of examples to highlight some 33 00:01:49,270 --> 00:01:53,920 of the key differences that I found were really important when I learned 34 00:01:53,920 --> 00:01:57,180 Objective-C last year. 35 00:01:57,180 --> 00:02:00,910 >> Well actually, so, the other point is, Objective-C is, obviously, 36 00:02:00,910 --> 00:02:02,200 object-oriented. 37 00:02:02,200 --> 00:02:06,340 And we'll discuss a little bit about what that means later. 38 00:02:06,340 --> 00:02:11,340 Basically, it's like how you worked with structs in this past pset, with 39 00:02:11,340 --> 00:02:13,360 nodes and similar other things like that. 40 00:02:13,360 --> 00:02:17,110 Except, in Objective-C, everything is an object, and you're going to be 41 00:02:17,110 --> 00:02:20,720 passing around pointers to objects rather than the values themselves. 42 00:02:20,720 --> 00:02:25,050 So, it's just something important to keep in mind. 43 00:02:25,050 --> 00:02:29,140 >> So, why don't we start with a few differences in syntax between C and 44 00:02:29,140 --> 00:02:30,540 Objective-C? 45 00:02:30,540 --> 00:02:38,310 I want to highlight the #include, you know, standard io.h in C and C++, with 46 00:02:38,310 --> 00:02:44,030 the Objective-C version of that, which is #import, and then some sort of 47 00:02:44,030 --> 00:02:44,790 header file. 48 00:02:44,790 --> 00:02:48,165 In this case, it would be UIKit, you know, slash UIKit.h. 49 00:02:48,165 --> 00:02:53,560 It could also be, you know, MKMapview to you slash MKMapview.h if you want 50 00:02:53,560 --> 00:02:56,370 to do, like, a map inside of your app. 51 00:02:56,370 --> 00:02:57,110 Similar things like that. 52 00:02:57,110 --> 00:03:01,250 >> So, the important thing is include has now changed to import. 53 00:03:01,250 --> 00:03:04,340 But the idea still remains. 54 00:03:04,340 --> 00:03:10,460 You're going to be importing some sort of header file into your program. 55 00:03:10,460 --> 00:03:14,550 >> I also want to highlight the difference between printf and NSLog. 56 00:03:14,550 --> 00:03:19,760 However, as we said earlier, Objective-C is a strict super-set of 57 00:03:19,760 --> 00:03:22,800 C, which means that printf exists in Objective-C, too. 58 00:03:22,800 --> 00:03:24,340 But, most people don't use that. 59 00:03:24,340 --> 00:03:28,245 Most people use this NSLog because it gives you a time stamp, and we'll see 60 00:03:28,245 --> 00:03:29,780 it in action later. 61 00:03:29,780 --> 00:03:33,560 But, it's generally a more useful way to print out variables. 62 00:03:33,560 --> 00:03:38,220 >> And I also want to highlight that NSLog takes in just the same 63 00:03:38,220 --> 00:03:41,650 placeholder values as printf does-- 64 00:03:41,650 --> 00:03:45,900 so %d is for an int, %f is for a float. 65 00:03:45,900 --> 00:03:49,750 However, I do want to highlight this very last one-- 66 00:03:49,750 --> 00:03:52,960 NSLog % at sign-- 67 00:03:52,960 --> 00:03:55,390 that is a placeholder for an object. 68 00:03:55,390 --> 00:04:01,160 And as I said earlier, Objective-C deals pretty much mostly in objects, 69 00:04:01,160 --> 00:04:05,020 and so this will come in use when you want to print out, perhaps, maybe an 70 00:04:05,020 --> 00:04:08,390 NSArray, or NSDictionary, or an NSString. 71 00:04:08,390 --> 00:04:13,750 >> So, also, notice that, in our NSLog statement, we have an at sign in front 72 00:04:13,750 --> 00:04:15,380 of the quotation-- 73 00:04:15,380 --> 00:04:20,769 that is to signify that strings, now, in Objective-C are objects. 74 00:04:20,769 --> 00:04:23,310 They are no longer simply char stars. 75 00:04:23,310 --> 00:04:25,530 They're objects and are treated as such. 76 00:04:25,530 --> 00:04:28,690 >> So, it's really important that when you use NSLog it takes in an NS 77 00:04:28,690 --> 00:04:32,580 string, which means that you'll have to include an at in front of your 78 00:04:32,580 --> 00:04:34,270 quotation marks. 79 00:04:34,270 --> 00:04:38,290 And that's why you see, here, in all of my function calls to this NSLog, I 80 00:04:38,290 --> 00:04:42,400 have an at in front of the quotes, even though the %d and the %f's are 81 00:04:42,400 --> 00:04:45,200 all the same from C. 82 00:04:45,200 --> 00:04:47,930 >> Any questions so far? 83 00:04:47,930 --> 00:04:50,920 I'll try to go through this quickly so that we can have more time to work 84 00:04:50,920 --> 00:04:55,210 with Xcode and Objective-C, so that you guys can get more 85 00:04:55,210 --> 00:04:57,630 familiar with it. 86 00:04:57,630 --> 00:05:01,900 >> Next, I want to highlight something conceptually important. 87 00:05:01,900 --> 00:05:05,130 So, in C, most things are functions. 88 00:05:05,130 --> 00:05:06,280 We make a function call. 89 00:05:06,280 --> 00:05:10,190 We declare functions this way, with the return type first, then the 90 00:05:10,190 --> 00:05:13,570 function name, parentheses, and then whatever arguments and the type of 91 00:05:13,570 --> 00:05:15,590 these arguments we want to pass in. 92 00:05:15,590 --> 00:05:19,970 And Objective-C, because everything is an object or class-- 93 00:05:19,970 --> 00:05:23,970 so class and object are two terms that are mostly synonymous with each other, 94 00:05:23,970 --> 00:05:28,270 so I may use them interchangeably throughout the seminar. 95 00:05:28,270 --> 00:05:34,090 >> But, you'll see that we have methods in Objective-C rather than functions. 96 00:05:34,090 --> 00:05:36,390 And methods belong to objects. 97 00:05:36,390 --> 00:05:38,950 So just as, maybe take for example, node-- 98 00:05:38,950 --> 00:05:40,250 our type [INAUDIBLE] 99 00:05:40,250 --> 00:05:44,390 node from pset 6 or 5-- 100 00:05:44,390 --> 00:05:49,590 we have the word, property, or the next node pointer. 101 00:05:49,590 --> 00:05:53,880 Methods are simply functions inside of some sort of structure. 102 00:05:53,880 --> 00:05:57,510 >> So, in this case, the structure would be the object, and then the method is 103 00:05:57,510 --> 00:05:59,260 something that belongs to an object. 104 00:05:59,260 --> 00:06:02,650 And this is how you would declare, sort of, a method. 105 00:06:02,650 --> 00:06:07,990 You would start with, again, the return type-- so, I tried to color 106 00:06:07,990 --> 00:06:12,990 code the key words here so that you guys can see the, at least, formatting 107 00:06:12,990 --> 00:06:17,650 similarities between function declarations and method declarations. 108 00:06:17,650 --> 00:06:21,990 So, you start with, you know, a return type-- in this case, it's an array, or 109 00:06:21,990 --> 00:06:23,910 an NSArray pointer-- 110 00:06:23,910 --> 00:06:26,710 and then you have this method. 111 00:06:26,710 --> 00:06:30,900 And then, what's interesting here is that instead of having parentheses, we 112 00:06:30,900 --> 00:06:32,900 have these colons. 113 00:06:32,900 --> 00:06:38,450 And then, in front of our arguments, we put, again, in parentheses the type 114 00:06:38,450 --> 00:06:39,370 of our argument. 115 00:06:39,370 --> 00:06:43,160 >> So, right now I'm trying to make the comparison between, you know, n and 116 00:06:43,160 --> 00:06:45,450 number, because they're both like ints. 117 00:06:45,450 --> 00:06:49,580 And then, the other one is an NSUInteger type. 118 00:06:49,580 --> 00:06:56,390 And then, with Objective-C, when you want to have multiple arguments in 119 00:06:56,390 --> 00:07:00,030 your method clause, you, sort of, separate them out kind of like this-- 120 00:07:00,030 --> 00:07:03,790 I'm not quite sure how to describe it, but this is a good example of how you 121 00:07:03,790 --> 00:07:06,530 can have multiple arguments in there. 122 00:07:06,530 --> 00:07:10,360 >> You could, of course, just totally ignore the andArray colon NSArray 123 00:07:10,360 --> 00:07:13,240 array if you wanted just a method that takes in one argument. 124 00:07:13,240 --> 00:07:13,677 Yes, question. 125 00:07:13,677 --> 00:07:18,701 >> AUDIENCE: Are both NSUInteger and NSArray arguments that can be taken in 126 00:07:18,701 --> 00:07:21,530 within the NSArray? 127 00:07:21,530 --> 00:07:22,060 >> RHED SHI: Yes. 128 00:07:22,060 --> 00:07:23,400 So, let me explain. 129 00:07:23,400 --> 00:07:23,790 So, yes. 130 00:07:23,790 --> 00:07:30,260 So, the question was are NSUInteger and NSArray* types of the arguments, 131 00:07:30,260 --> 00:07:31,570 and that's correct. 132 00:07:31,570 --> 00:07:35,700 So, you always want to specify what the type of your argument is. 133 00:07:35,700 --> 00:07:41,570 And here, I'm trying to introduce you to some of the syntax and vocab of 134 00:07:41,570 --> 00:07:45,910 Objective-C, so those are actual types that you'll be dealing with. 135 00:07:45,910 --> 00:07:48,970 >> And as you'll notice, arrays are no longer, sort of, 136 00:07:48,970 --> 00:07:50,780 simple bracket things. 137 00:07:50,780 --> 00:07:52,060 They're objects. 138 00:07:52,060 --> 00:07:56,700 Although, if we go on to the next slide, we can see that we can 139 00:07:56,700 --> 00:08:02,510 hard-code an NSArray in Objective-C with simply an at symbol in front of 140 00:08:02,510 --> 00:08:04,190 the brackets. 141 00:08:04,190 --> 00:08:08,650 I'm not, actually, quite sure whether I syntactically hard-coded an array 142 00:08:08,650 --> 00:08:16,020 correctly for the C version, but that's supposed to be in a C array. 143 00:08:16,020 --> 00:08:19,760 >> So, this is how you would, you know, perhaps use the functions or the 144 00:08:19,760 --> 00:08:21,990 methods that we created earlier. 145 00:08:21,990 --> 00:08:22,250 Right? 146 00:08:22,250 --> 00:08:25,340 So, this is where we declare our function and our method. 147 00:08:25,340 --> 00:08:28,020 And now we want to use them in our program, and this is 148 00:08:28,020 --> 00:08:29,450 how we would do it. 149 00:08:29,450 --> 00:08:32,400 So, in C, you would have, you know, perhaps, a bool b, and you set it to 150 00:08:32,400 --> 00:08:36,549 equal the function, and then you pass in the arguments. 151 00:08:36,549 --> 00:08:39,190 >> In Objective-C, it's pretty much the same thing. 152 00:08:39,190 --> 00:08:43,370 You have NSArray* my_array, and it's going to equal-- now, the only 153 00:08:43,370 --> 00:08:47,460 difference here is this object thing, which I've highlighted in yellow, and 154 00:08:47,460 --> 00:08:51,180 as you can see, in C, there's no other yellow word. 155 00:08:51,180 --> 00:08:54,170 And it's because methods belong with a certain object. 156 00:08:54,170 --> 00:08:59,800 So that's why I need to have an object that, sort of, calls this method on 157 00:08:59,800 --> 00:09:04,360 the number zero, and then the NSArray a, b, c, d. 158 00:09:04,360 --> 00:09:05,350 Any questions on that? 159 00:09:05,350 --> 00:09:12,190 >> We'll see these concepts in action pretty soon when we go into a demo. 160 00:09:12,190 --> 00:09:13,400 OK. 161 00:09:13,400 --> 00:09:17,170 Now, I want to talk a little bit briefly about Xcode 5, which is the 162 00:09:17,170 --> 00:09:21,160 integrated development environment that you'll be working with. 163 00:09:21,160 --> 00:09:26,160 I know a lot of you, or some of you, don't have Macs, which is a problem 164 00:09:26,160 --> 00:09:30,490 because Xcode is not available for Windows and PC. 165 00:09:30,490 --> 00:09:32,785 Don't ask me why, but probably-- 166 00:09:32,785 --> 00:09:33,730 yeah, corporate. 167 00:09:33,730 --> 00:09:35,290 Whatever. 168 00:09:35,290 --> 00:09:39,360 But anyway, so, I apologize if some of you do have to download some sort of 169 00:09:39,360 --> 00:09:43,000 virtual machine for Mac in order to run Xcode 5. 170 00:09:43,000 --> 00:09:46,460 But it is a pretty nifty software to use. 171 00:09:46,460 --> 00:09:51,280 >> And so, before we dive into any sort of demo, I just want to show you a 172 00:09:51,280 --> 00:09:55,700 picture of what Xcode looks like in your window, and then also talk about 173 00:09:55,700 --> 00:09:57,670 what this whole space is. 174 00:09:57,670 --> 00:10:01,600 So, it's kind of like learning how to use Microsoft Word, except you want to 175 00:10:01,600 --> 00:10:04,675 get familiarized with all the different things that 176 00:10:04,675 --> 00:10:06,250 are going on here. 177 00:10:06,250 --> 00:10:11,160 >> So first, I want to point you to the toolbar at the top. 178 00:10:11,160 --> 00:10:14,450 You'll see that, at the top, you'll have the file name-- 179 00:10:14,450 --> 00:10:18,100 or, actually, your project name and then your file name. 180 00:10:18,100 --> 00:10:20,940 Take note of the play and the stop buttons. 181 00:10:20,940 --> 00:10:24,210 Those are the ones that you'll be using to run your app on the 182 00:10:24,210 --> 00:10:25,600 simulator-- 183 00:10:25,600 --> 00:10:26,550 the iOS simulator. 184 00:10:26,550 --> 00:10:29,940 This automatically comes with Xcode 5, so you don't have to worry about 185 00:10:29,940 --> 00:10:32,070 downloading some sort of simulator. 186 00:10:32,070 --> 00:10:34,700 You just press play and then it runs your app. 187 00:10:34,700 --> 00:10:39,230 And you can play around with you, and you'll see how it works later. 188 00:10:39,230 --> 00:10:42,690 >> And then, in the center, of course, is where all of your beautiful code is 189 00:10:42,690 --> 00:10:44,240 going to go. 190 00:10:44,240 --> 00:10:48,340 And then, on the left-hand side, you'll have this, sort of, folder-- 191 00:10:48,340 --> 00:10:50,340 navigation-- 192 00:10:50,340 --> 00:10:53,970 and then, you'll also see that, along with the folder icon, there are a 193 00:10:53,970 --> 00:10:57,680 bunch of other icons there that will be useful later. 194 00:10:57,680 --> 00:11:04,710 >> And then, on the right side is a utility area where you can work with 195 00:11:04,710 --> 00:11:09,620 some of the objects and specify, you know, what the color should be, what 196 00:11:09,620 --> 00:11:12,040 the text font should be, et cetera. 197 00:11:12,040 --> 00:11:15,890 Although, everything that you do in the utility area, you can 198 00:11:15,890 --> 00:11:17,480 do in code as well. 199 00:11:17,480 --> 00:11:21,630 And so, I'll be going through two examples of using, simply, no code at 200 00:11:21,630 --> 00:11:23,730 all-- or very minimal code-- 201 00:11:23,730 --> 00:11:28,290 verses all code, just so that you guys know what you can and cannot do in 202 00:11:28,290 --> 00:11:29,260 Xcode and Objective-C. 203 00:11:29,260 --> 00:11:32,770 >> And then, finally, down at the bottom, you have the debug area. 204 00:11:32,770 --> 00:11:37,270 So, you no longer have to run GDB, et cetera, on your programs. 205 00:11:37,270 --> 00:11:39,180 It automatically does it for you. 206 00:11:39,180 --> 00:11:42,880 And you can also print stuff to this area. 207 00:11:42,880 --> 00:11:46,790 So actually, later, we'll go through mario.c, if you guys still remember 208 00:11:46,790 --> 00:11:49,000 that, in Xcode. 209 00:11:49,000 --> 00:11:50,360 So that should be fun. 210 00:11:50,360 --> 00:11:55,870 >> And then, just to bring it back to Objective-C, I want to highlight what 211 00:11:55,870 --> 00:11:57,440 you can do with if statements. 212 00:11:57,440 --> 00:12:03,160 So, you know, because Objective-C is a superset of C, everything you do is, 213 00:12:03,160 --> 00:12:06,890 literally, the same as C. You just have slight differences. 214 00:12:06,890 --> 00:12:10,810 So, you'll notice the form for an if statement is still the same-- you have 215 00:12:10,810 --> 00:12:14,280 if, and then you have parentheses with a condition inside of, it and then 216 00:12:14,280 --> 00:12:17,150 curly braces for whatever you want to do inside of there. 217 00:12:17,150 --> 00:12:21,680 >> However, I wanted to put this slide up here, simply to illustrate that, 218 00:12:21,680 --> 00:12:25,680 because we're dealing with objects now, we will have to use these things 219 00:12:25,680 --> 00:12:31,240 called like, is equal to string, which is, coincidentally, a method of a 220 00:12:31,240 --> 00:12:33,710 string or an NSString object. 221 00:12:33,710 --> 00:12:38,600 So, word, in this case, is an NSString object, and it has a method called is 222 00:12:38,600 --> 00:12:44,150 equal to string, and then we're passing in a hard-coded string to see 223 00:12:44,150 --> 00:12:48,110 whether those are equal to one another. 224 00:12:48,110 --> 00:12:51,580 >> Any questions so far? 225 00:12:51,580 --> 00:12:52,440 OK. 226 00:12:52,440 --> 00:12:56,190 And, I want to go over a for statement also. 227 00:12:56,190 --> 00:13:01,420 >> So, for example, if we wanted to loop over the length of a string in C, this 228 00:13:01,420 --> 00:13:03,710 should be familiar to you. 229 00:13:03,710 --> 00:13:07,840 And, in Objective-C, I do want to highlight this, sort of, 230 00:13:07,840 --> 00:13:09,235 method called count. 231 00:13:09,235 --> 00:13:13,260 232 00:13:13,260 --> 00:13:15,550 Well, actually, let me just take that back. 233 00:13:15,550 --> 00:13:17,200 Count is a method of array. 234 00:13:17,200 --> 00:13:21,070 However, it's more specifically a property of array, which is why you 235 00:13:21,070 --> 00:13:22,380 can use the dot notation. 236 00:13:22,380 --> 00:13:25,870 But I don't want to get into too much of this conceptual stuff, I just want 237 00:13:25,870 --> 00:13:30,140 to show you how things would look like in Objective-C versus C. 238 00:13:30,140 --> 00:13:35,400 >> And also, I do want to point out that even though I've been using NSUInteger 239 00:13:35,400 --> 00:13:39,860 in front of all my i's in Objective-C, you can also use int, because int is 240 00:13:39,860 --> 00:13:42,290 totally valid in Objective-C, also. 241 00:13:42,290 --> 00:13:42,475 Yes? 242 00:13:42,475 --> 00:13:44,350 >> AUDIENCE: Is it just stylistic, or is-- 243 00:13:44,350 --> 00:13:44,760 >> RHED SHI: Yeah. 244 00:13:44,760 --> 00:13:46,060 So, as you'll see-- 245 00:13:46,060 --> 00:13:49,390 so, the question was is that just a stylistic issue. 246 00:13:49,390 --> 00:13:54,820 As you'll see, I have a, sort of, star asterisk thing down at the bottom, and 247 00:13:54,820 --> 00:13:59,870 that link takes you to a Stack Overflow form, where someone explains 248 00:13:59,870 --> 00:14:03,640 the difference between an int in NSInteger and an NSUInteger. 249 00:14:03,640 --> 00:14:05,540 And so, you can read about that later. 250 00:14:05,540 --> 00:14:07,640 These slides will be, of course, available to you. 251 00:14:07,640 --> 00:14:10,300 252 00:14:10,300 --> 00:14:11,280 >> Let's see. 253 00:14:11,280 --> 00:14:12,150 OK, awesome. 254 00:14:12,150 --> 00:14:15,410 So, this is also included in the slide because I thought this was a great 255 00:14:15,410 --> 00:14:19,370 website that introduces you to Objective-C syntax. 256 00:14:19,370 --> 00:14:24,410 So, actually , why don't we move to Chrome and check out this website? 257 00:14:24,410 --> 00:14:30,650 258 00:14:30,650 --> 00:14:31,300 >> Right. 259 00:14:31,300 --> 00:14:36,670 So, what I want to show you guys here is this image. 260 00:14:36,670 --> 00:14:41,630 So, this is, sort of, going to be what you're going to see inside of any 261 00:14:41,630 --> 00:14:42,890 Xcode file. 262 00:14:42,890 --> 00:14:47,400 263 00:14:47,400 --> 00:14:51,430 Actually, why don't we just take a moment to, sort of, take this in. 264 00:14:51,430 --> 00:14:53,470 >> So, this book-- 265 00:14:53,470 --> 00:14:55,880 that's the object that we're dealing with. 266 00:14:55,880 --> 00:14:59,680 And then, it's obviously going to be inherited from some other object, but 267 00:14:59,680 --> 00:15:01,810 you don't have to worry about that. 268 00:15:01,810 --> 00:15:04,430 And then, it, perhaps, has some member variables. 269 00:15:04,430 --> 00:15:09,160 >> The important thing I want to show you is the instance methods, here. 270 00:15:09,160 --> 00:15:12,670 So, instance methods are denoted by this minus sign. 271 00:15:12,670 --> 00:15:15,550 And then, as you'll notice, we're already starting to see the paradigm 272 00:15:15,550 --> 00:15:17,670 for method declaration, right? 273 00:15:17,670 --> 00:15:22,670 The return type, the method name, , and then the type of the argument, and 274 00:15:22,670 --> 00:15:24,660 then the name of the argument. 275 00:15:24,660 --> 00:15:29,090 And this minus sign means that it's an instance method, which means that 276 00:15:29,090 --> 00:15:32,270 these methods are only available to objects that have been instantiated. 277 00:15:32,270 --> 00:15:35,050 278 00:15:35,050 --> 00:15:39,100 >> To contrast that, methods with a plus sign in front of them are class 279 00:15:39,100 --> 00:15:43,640 methods, which means that you can call these methods, even if you don't have 280 00:15:43,640 --> 00:15:45,970 an object created yet. 281 00:15:45,970 --> 00:15:51,600 So, for a clear example, NSString is a class. 282 00:15:51,600 --> 00:15:55,850 And you can call, for example, class methods on NSString-- 283 00:15:55,850 --> 00:15:58,660 the actual, like, word NSString. 284 00:15:58,660 --> 00:16:02,050 >> However, in order to use these methods, you actually 285 00:16:02,050 --> 00:16:03,460 need to create a string. 286 00:16:03,460 --> 00:16:08,980 For example, NSString star string equals at quotation mark, hello world. 287 00:16:08,980 --> 00:16:10,910 And then, you can use these methods-- 288 00:16:10,910 --> 00:16:11,990 instance methods-- 289 00:16:11,990 --> 00:16:14,790 on that hello world string. 290 00:16:14,790 --> 00:16:17,825 So, that's the difference between instance methods and class methods. 291 00:16:17,825 --> 00:16:20,390 292 00:16:20,390 --> 00:16:21,930 >> And, we just covered this part. 293 00:16:21,930 --> 00:16:25,300 294 00:16:25,300 --> 00:16:33,750 Properties are another thing that are inside of objects, basically. 295 00:16:33,750 --> 00:16:37,530 And you declare them with the at property keyword. 296 00:16:37,530 --> 00:16:39,940 You have these options, here, that I'll explain later when 297 00:16:39,940 --> 00:16:43,110 we go into a demo. 298 00:16:43,110 --> 00:16:43,660 Yes? 299 00:16:43,660 --> 00:16:43,950 Hi. 300 00:16:43,950 --> 00:16:45,440 >> AUDIENCE: Could you zoom in, please? 301 00:16:45,440 --> 00:16:46,130 >> RHED SHI: Oh yes. 302 00:16:46,130 --> 00:16:46,560 Sorry. 303 00:16:46,560 --> 00:16:49,140 >> AUDIENCE: Thank you. 304 00:16:49,140 --> 00:16:50,005 >> RHED SHI: That should be a lot better. 305 00:16:50,005 --> 00:16:51,240 >> AUDIENCE: Yeah. 306 00:16:51,240 --> 00:16:53,940 Thank you. 307 00:16:53,940 --> 00:16:56,815 >> RHED SHI: Yeah, please remind me if I forget to zoom in or zoom out. 308 00:16:56,815 --> 00:17:00,590 309 00:17:00,590 --> 00:17:03,570 So, this is all I wanted to show you for-- 310 00:17:03,570 --> 00:17:05,970 whoa, that's a lot-- 311 00:17:05,970 --> 00:17:06,790 for this website. 312 00:17:06,790 --> 00:17:12,210 So, let's go back to our slides. 313 00:17:12,210 --> 00:17:17,819 >> Actually, now let's take a moment to dive into a demo. 314 00:17:17,819 --> 00:17:25,490 So, we'll start with a new Xcode project. 315 00:17:25,490 --> 00:17:33,040 So, if you'll open up Xcode on all of your machines, it should take you some 316 00:17:33,040 --> 00:17:36,720 page where it says, like, either open up an existing project or a new 317 00:17:36,720 --> 00:17:39,230 project, and you should click a new project. 318 00:17:39,230 --> 00:17:41,477 And then, it should take you to this screen. 319 00:17:41,477 --> 00:17:41,593 Yes? 320 00:17:41,593 --> 00:17:44,279 >> AUDIENCE: If we don't have a Mac, do we just kind of chill? 321 00:17:44,279 --> 00:17:46,870 >> RHED SHI: Or look on with someone, yeah. 322 00:17:46,870 --> 00:17:47,740 Yeah. 323 00:17:47,740 --> 00:17:50,660 You can chill, too. 324 00:17:50,660 --> 00:17:51,570 OK. 325 00:17:51,570 --> 00:17:55,410 >> So, what we're going to do first, now, is, actually, we're going to do a 326 00:17:55,410 --> 00:17:56,600 single view application. 327 00:17:56,600 --> 00:18:01,340 So, if you'll notice, what's great about Xcode and Apple support for 328 00:18:01,340 --> 00:18:05,690 developers is that you have a lot of templates to work with already. 329 00:18:05,690 --> 00:18:09,210 You could, for example, make a master-detail application. 330 00:18:09,210 --> 00:18:10,920 You can make a game-- 331 00:18:10,920 --> 00:18:13,860 and actually, I won't go into games, because games are a different story 332 00:18:13,860 --> 00:18:15,320 for iOS development. 333 00:18:15,320 --> 00:18:18,930 And they're kind of separate, so I won't go into that. 334 00:18:18,930 --> 00:18:22,580 >> Then, you have page-based applications. 335 00:18:22,580 --> 00:18:24,010 You have a tab application-- 336 00:18:24,010 --> 00:18:29,350 so like, for example, Bank of America probably has, like, a tabbed app. 337 00:18:29,350 --> 00:18:32,140 It's the ones where you have the buttons at the bottom. 338 00:18:32,140 --> 00:18:34,750 And then, you have a Sprite Kit game. 339 00:18:34,750 --> 00:18:38,670 >> Or you can work from scratch, which is what we'll do later. 340 00:18:38,670 --> 00:18:42,470 But let's, first, start with a single view application. 341 00:18:42,470 --> 00:18:48,590 Then, it'll ask for a product name, and we can just do test. 342 00:18:48,590 --> 00:18:50,190 Organization name-- 343 00:18:50,190 --> 00:18:54,140 so, organization name, company identifier-- 344 00:18:54,140 --> 00:18:58,100 those are important if you're going to put your app on the app store. 345 00:18:58,100 --> 00:19:01,110 346 00:19:01,110 --> 00:19:05,116 Other than that, your code is going to run absolutely fine without this. 347 00:19:05,116 --> 00:19:09,940 >> This is going to be important if you want-- so, per se, like, put your app 348 00:19:09,940 --> 00:19:14,080 onto your phone or something, and test it out, you know, in real life-- 349 00:19:14,080 --> 00:19:15,360 this will be important. 350 00:19:15,360 --> 00:19:20,110 This tends to usually be associated with some sort of developer account 351 00:19:20,110 --> 00:19:20,970 with Apple. 352 00:19:20,970 --> 00:19:24,740 >> And so, I know, probably, a lot of you won't have any developer accounts. 353 00:19:24,740 --> 00:19:26,460 I know the university has one. 354 00:19:26,460 --> 00:19:27,630 I think CS has one. 355 00:19:27,630 --> 00:19:32,770 But, you can email me and I'll try to figure that out for you. 356 00:19:32,770 --> 00:19:38,210 But right now, I've just put in some placeholder things here. 357 00:19:38,210 --> 00:19:41,250 >> And you can, of course, here, choose whether you want it to be solely in 358 00:19:41,250 --> 00:19:44,410 iPhone, in iPad, or both-- 359 00:19:44,410 --> 00:19:46,630 universal application. 360 00:19:46,630 --> 00:19:56,170 So, for now, let's do universal, just to see both sides of the platform. 361 00:19:56,170 --> 00:19:57,120 >> Let's see. 362 00:19:57,120 --> 00:20:01,510 So, right now, I'm going to save it in some sort of folder. 363 00:20:01,510 --> 00:20:04,500 Doesn't matter where-- you can always move it later. 364 00:20:04,500 --> 00:20:09,380 And, now, we are brought to our Xcode project. 365 00:20:09,380 --> 00:20:12,890 I wouldn't worry about all of this. 366 00:20:12,890 --> 00:20:17,510 I would suggest not touching any of this, unless you know exactly what 367 00:20:17,510 --> 00:20:18,260 you're doing. 368 00:20:18,260 --> 00:20:21,750 So, all of this, just ignore for the most part. 369 00:20:21,750 --> 00:20:26,940 You won't need to touch it, and if you do you mess up some things here, it 370 00:20:26,940 --> 00:20:28,600 gets a little tricky. 371 00:20:28,600 --> 00:20:32,480 >> So, why don't we look into the files on the 372 00:20:32,480 --> 00:20:34,700 left-hand side in our navigator. 373 00:20:34,700 --> 00:20:37,060 Here, we have AppDelegate.h. 374 00:20:37,060 --> 00:20:43,430 We have AppDelegate.m So, as you'll notice, we have header files, which 375 00:20:43,430 --> 00:20:45,720 end in dot h, and we have implementation-- 376 00:20:45,720 --> 00:20:46,970 actually, let me zoom in. 377 00:20:46,970 --> 00:20:56,270 378 00:20:56,270 --> 00:20:57,060 OK. 379 00:20:57,060 --> 00:20:59,940 Let me zoom in. 380 00:20:59,940 --> 00:21:05,810 >> Right, so you have header files and you have implementation files. 381 00:21:05,810 --> 00:21:07,060 Actually-- 382 00:21:07,060 --> 00:21:08,680 383 00:21:08,680 --> 00:21:09,240 OK. 384 00:21:09,240 --> 00:21:11,800 This is a little weird, but bear with me. 385 00:21:11,800 --> 00:21:16,140 Then, because we've chosen a single view application, we're going to be 386 00:21:16,140 --> 00:21:17,340 working with storyboard. 387 00:21:17,340 --> 00:21:22,140 >> So, storyboard is something that Apple has come up with to really help 388 00:21:22,140 --> 00:21:26,550 developers rapidly prototype their applications. 389 00:21:26,550 --> 00:21:29,410 So, this is where you can create an app without writing a 390 00:21:29,410 --> 00:21:31,710 single line of code. 391 00:21:31,710 --> 00:21:35,390 However, in our single view application, we do, of course, have a 392 00:21:35,390 --> 00:21:41,270 file for our view, which is a view controller. 393 00:21:41,270 --> 00:21:45,150 So, we have the header and the implementation file, here. 394 00:21:45,150 --> 00:21:52,350 >> And, I'm going to zoom out now because we'll need to work in the storyboard. 395 00:21:52,350 --> 00:21:55,190 So, here's our view. 396 00:21:55,190 --> 00:22:00,120 If we, simply, run the app right now, there's not much exciting going on. 397 00:22:00,120 --> 00:22:03,270 398 00:22:03,270 --> 00:22:05,040 So, you'll see this white screen. 399 00:22:05,040 --> 00:22:06,110 OK? 400 00:22:06,110 --> 00:22:14,010 >> And, in our utilities area, we can add a bunch of different things to it. 401 00:22:14,010 --> 00:22:19,290 So, when you're dealing with screens in iOS, view controllers are the 402 00:22:19,290 --> 00:22:23,150 objects that encapsulate, sort of, your views. 403 00:22:23,150 --> 00:22:26,980 So, a view controller always has a property called view. 404 00:22:26,980 --> 00:22:29,610 And that view, typically, contains, you know, what you 405 00:22:29,610 --> 00:22:30,810 want to see on a screen. 406 00:22:30,810 --> 00:22:39,210 >> So, well, let's just start by putting, perhaps, maybe a label. 407 00:22:39,210 --> 00:22:41,450 So, let's put a label on there-- 408 00:22:41,450 --> 00:22:44,080 stick it in the middle. 409 00:22:44,080 --> 00:22:49,560 So, now that I've clicked on label, I can go into the properties inspector 410 00:22:49,560 --> 00:22:51,510 and start changing its value. 411 00:22:51,510 --> 00:22:55,040 Let's call it CS50 Colours. 412 00:22:55,040 --> 00:22:58,220 >> And, I can also change the font. 413 00:22:58,220 --> 00:23:02,630 So, instead of doing system, which is the default, we can do a custom one. 414 00:23:02,630 --> 00:23:03,770 We can change-- 415 00:23:03,770 --> 00:23:06,453 you know, UltraLight, make it 32. 416 00:23:06,453 --> 00:23:09,000 417 00:23:09,000 --> 00:23:11,370 And then, we can make our box bigger. 418 00:23:11,370 --> 00:23:14,410 >> AUDIENCE: Do you think you can zoom in just a little more, maybe? 419 00:23:14,410 --> 00:23:14,810 >> RHED SHI: Yeah? 420 00:23:14,810 --> 00:23:16,196 OK. 421 00:23:16,196 --> 00:23:17,450 >> AUDIENCE: Just tap it? 422 00:23:17,450 --> 00:23:19,020 >> RHED SHI: Let's see. 423 00:23:19,020 --> 00:23:20,382 Does this work? 424 00:23:20,382 --> 00:23:22,270 >> AUDIENCE: Just pass the Xcode? 425 00:23:22,270 --> 00:23:23,520 >> RHED SHI: Sure. 426 00:23:23,520 --> 00:23:25,620 427 00:23:25,620 --> 00:23:25,940 OK. 428 00:23:25,940 --> 00:23:26,275 Awesome. 429 00:23:26,275 --> 00:23:27,072 >> AUDIENCE: The label under? 430 00:23:27,072 --> 00:23:28,920 The label? 431 00:23:28,920 --> 00:23:29,480 >> RHED SHI: What's that? 432 00:23:29,480 --> 00:23:32,050 >> AUDIENCE: What drop-down was the label under? 433 00:23:32,050 --> 00:23:35,170 >> RHED SHI: So, the question was, what drop-down was the label under? 434 00:23:35,170 --> 00:23:37,260 It should, simply, be under here. 435 00:23:37,260 --> 00:23:39,330 I guess it's a cube thing. 436 00:23:39,330 --> 00:23:40,910 But usually, this is the default-- 437 00:23:40,910 --> 00:23:43,250 I'm just going down here until I find a label. 438 00:23:43,250 --> 00:23:45,800 439 00:23:45,800 --> 00:23:47,730 Yeah. 440 00:23:47,730 --> 00:23:48,950 >> So now, we have our label. 441 00:23:48,950 --> 00:23:51,040 Let's center it. 442 00:23:51,040 --> 00:23:56,410 And Xcode gives us guidelines for centering objects. 443 00:23:56,410 --> 00:23:59,510 444 00:23:59,510 --> 00:24:01,480 So, now let's run our code again. 445 00:24:01,480 --> 00:24:08,110 446 00:24:08,110 --> 00:24:08,800 >> There we go. 447 00:24:08,800 --> 00:24:10,310 So, we have CS50 Colours. 448 00:24:10,310 --> 00:24:13,720 449 00:24:13,720 --> 00:24:15,420 And now, let's put a button on there, right? 450 00:24:15,420 --> 00:24:17,480 Because we want to make this interactive. 451 00:24:17,480 --> 00:24:19,410 So, let's put a button here. 452 00:24:19,410 --> 00:24:39,020 And we'll call this button "tap here to continue." We'll center it, also 453 00:24:39,020 --> 00:24:39,990 Actually, it's already centered. 454 00:24:39,990 --> 00:24:40,630 Yeah. 455 00:24:40,630 --> 00:24:43,130 >> So, now we have a button. 456 00:24:43,130 --> 00:24:53,000 And if we run this again, we're going to have a nice little button here. 457 00:24:53,000 --> 00:24:56,520 And I can click it, but it doesn't do anything, because we haven't done 458 00:24:56,520 --> 00:24:58,500 anything with the button yet. 459 00:24:58,500 --> 00:25:01,740 >> So, let's create another view, right? 460 00:25:01,740 --> 00:25:04,160 So, let's say I want to tap that button and I want to 461 00:25:04,160 --> 00:25:05,730 go to another page-- 462 00:25:05,730 --> 00:25:06,820 another view. 463 00:25:06,820 --> 00:25:14,440 What I'm going to do is, I can create a view controller, right? 464 00:25:14,440 --> 00:25:19,690 Now I'll click on my button, and then, the important thing is, I'm going to 465 00:25:19,690 --> 00:25:20,910 click-- or-- 466 00:25:20,910 --> 00:25:23,660 yes, press control on my keyboard. 467 00:25:23,660 --> 00:25:24,880 Control. 468 00:25:24,880 --> 00:25:27,005 Click on the button, and then drag. 469 00:25:27,005 --> 00:25:29,960 470 00:25:29,960 --> 00:25:33,550 >> So, remember to hold the control key. 471 00:25:33,550 --> 00:25:35,160 Let's do that again. 472 00:25:35,160 --> 00:25:40,930 So, hold control, click, and drag to what you want to do. 473 00:25:40,930 --> 00:25:41,520 OK. 474 00:25:41,520 --> 00:25:43,610 >> And now, I have several options here. 475 00:25:43,610 --> 00:25:47,900 I can either push, or I can do a modal, or I can do a custom. 476 00:25:47,900 --> 00:25:50,900 Push is only if you have a navigation controller. 477 00:25:50,900 --> 00:25:54,270 Right now, our very first view controller is not inside of any 478 00:25:54,270 --> 00:25:55,610 navigation controller. 479 00:25:55,610 --> 00:25:59,500 So, the navigation controller is the one that gives you the back button on 480 00:25:59,500 --> 00:26:03,910 the iOS app where you have, you know, that top, sort of, thick bar-- 481 00:26:03,910 --> 00:26:06,480 where you can go back, or forward, et cetera. 482 00:26:06,480 --> 00:26:07,740 Right now, I don't have that. 483 00:26:07,740 --> 00:26:11,050 And so, that's why I can't do a push. 484 00:26:11,050 --> 00:26:12,480 >> So, I clicked on push accidentally, here. 485 00:26:12,480 --> 00:26:16,480 And actually, let's run the code, and it should crash on me. 486 00:26:16,480 --> 00:26:19,770 487 00:26:19,770 --> 00:26:22,960 Only if I press the button though, so-- 488 00:26:22,960 --> 00:26:23,420 right. 489 00:26:23,420 --> 00:26:26,480 So, this is bad. 490 00:26:26,480 --> 00:26:31,330 >> And, as you can see, here, we have the error message. 491 00:26:31,330 --> 00:26:35,460 So, "Push segues can only be used when source controller is managed by an 492 00:26:35,460 --> 00:26:40,700 instance of UI navigation controller." So, because this wasn't inside of a 493 00:26:40,700 --> 00:26:44,030 navigation controller, I couldn't do that. 494 00:26:44,030 --> 00:26:48,782 >> So, right now, I'm going back to the folder, going back to storyboard. 495 00:26:48,782 --> 00:26:51,680 >> AUDIENCE: What's the navigation controller, again? 496 00:26:51,680 --> 00:26:55,260 >> RHED SHI: So, right now I'll show you. 497 00:26:55,260 --> 00:26:56,200 Let's see. 498 00:26:56,200 --> 00:27:00,510 So, I'm going to click on this view controller, and then I'm going to go 499 00:27:00,510 --> 00:27:03,920 up to product-- 500 00:27:03,920 --> 00:27:06,240 actually, no, sorry-- editor. 501 00:27:06,240 --> 00:27:08,360 And I'm going to go into-- 502 00:27:08,360 --> 00:27:09,350 actually, did I click on it? 503 00:27:09,350 --> 00:27:10,070 No. 504 00:27:10,070 --> 00:27:11,080 There we go. 505 00:27:11,080 --> 00:27:16,270 I'm going to go up into editor, go down to embed in, and then navigation 506 00:27:16,270 --> 00:27:17,520 controller. 507 00:27:17,520 --> 00:27:20,130 508 00:27:20,130 --> 00:27:20,720 >> OK. 509 00:27:20,720 --> 00:27:27,750 And, my workspace looks really messy, so let's clean this up. 510 00:27:27,750 --> 00:27:29,000 So, all of this is storyboard. 511 00:27:29,000 --> 00:27:32,510 512 00:27:32,510 --> 00:27:33,760 And in this way-- 513 00:27:33,760 --> 00:27:37,030 514 00:27:37,030 --> 00:27:38,280 OK, stop-- 515 00:27:38,280 --> 00:27:49,320 516 00:27:49,320 --> 00:27:50,860 I can quickly build something like this. 517 00:27:50,860 --> 00:27:53,020 And then, now I can go back, you know? 518 00:27:53,020 --> 00:27:55,730 >> But this is kind of boring, right? 519 00:27:55,730 --> 00:28:03,020 So, what I want to do is, I don't want to make, just simply, a view 520 00:28:03,020 --> 00:28:03,870 controller. 521 00:28:03,870 --> 00:28:07,720 Let's say I wanted to actually make a table view controller, so I can put in 522 00:28:07,720 --> 00:28:12,110 some nice colors, into the table. 523 00:28:12,110 --> 00:28:16,210 >> So, now that I've put in my table view controller, I need to connect it back 524 00:28:16,210 --> 00:28:18,560 from this button to the view controller. 525 00:28:18,560 --> 00:28:21,780 So I need to do my control, click, drag thing again. 526 00:28:21,780 --> 00:28:27,318 And now I can do push, because I embed it inside of a navigation controller. 527 00:28:27,318 --> 00:28:32,210 >> AUDIENCE: Navigation controller just allows you to go from place to place? 528 00:28:32,210 --> 00:28:33,540 >> RHED SHI: Yes. 529 00:28:33,540 --> 00:28:38,670 So, more technically, it's an object where-- 530 00:28:38,670 --> 00:28:43,150 so, inside of the navigation controller object, it 531 00:28:43,150 --> 00:28:44,780 keeps track of an array. 532 00:28:44,780 --> 00:28:48,300 And that array holds all the subsequent view controllers. 533 00:28:48,300 --> 00:28:51,560 That's why when you press back, it goes back to the previous page. 534 00:28:51,560 --> 00:28:55,260 Because the navigation controller object, or the code that takes care of 535 00:28:55,260 --> 00:28:58,890 this object, has an array that keeps track of these view controllers, and 536 00:28:58,890 --> 00:29:01,870 can then, you know, DQ the view controller and give you back the 537 00:29:01,870 --> 00:29:02,750 previous one. 538 00:29:02,750 --> 00:29:05,200 >> So, this is technical stuff, but-- 539 00:29:05,200 --> 00:29:07,505 and I'll show you later in code, if we have time. 540 00:29:07,505 --> 00:29:10,270 I'm kind of running out on time, but-- 541 00:29:10,270 --> 00:29:15,610 >> So, with the table view, what we can do is-- 542 00:29:15,610 --> 00:29:18,440 It's usually automatically set to Dynamic Prototype-- 543 00:29:18,440 --> 00:29:20,640 we're going to make it Static Cells, otherwise we're going to 544 00:29:20,640 --> 00:29:22,920 run into some problems. 545 00:29:22,920 --> 00:29:28,470 >> And then, let's say I'm going to have one section. 546 00:29:28,470 --> 00:29:31,000 So, sections is like-- 547 00:29:31,000 --> 00:29:35,160 if you've ever seen the music app, when you have artists, sections would 548 00:29:35,160 --> 00:29:37,830 be the A's through Z's-- 549 00:29:37,830 --> 00:29:38,780 the letters-- 550 00:29:38,780 --> 00:29:42,600 and then, you know, the individual rows would be the artist names. 551 00:29:42,600 --> 00:29:47,460 And so, what's cool here, is that I can access all of the objects inside 552 00:29:47,460 --> 00:29:50,430 of my storyboard through this drop-down menu, too. 553 00:29:50,430 --> 00:29:56,600 >> So, I'm going to click on my section, and I want, you know, maybe five rows. 554 00:29:56,600 --> 00:30:00,770 And then, inside of each row, I want to put a label. 555 00:30:00,770 --> 00:30:04,080 556 00:30:04,080 --> 00:30:06,340 And I'm going to call this Blue. 557 00:30:06,340 --> 00:30:09,530 558 00:30:09,530 --> 00:30:15,630 And then, I want to put a UI view, you know, maybe for, like, a little box. 559 00:30:15,630 --> 00:30:23,840 560 00:30:23,840 --> 00:30:28,710 >> So that I can show people a preview of the color. 561 00:30:28,710 --> 00:30:34,150 And I'll go back to the property and change that color to, oh, I don't 562 00:30:34,150 --> 00:30:35,510 know, this one. 563 00:30:35,510 --> 00:30:38,630 564 00:30:38,630 --> 00:30:43,150 >> And then, notice also, here, when I have the accessories, I can have lots 565 00:30:43,150 --> 00:30:46,160 of the different accessories that you typically see. 566 00:30:46,160 --> 00:30:55,250 The disclosure indicator, the detail, or check mark, or simply just detail. 567 00:30:55,250 --> 00:30:59,080 So, maybe we can do, like, a disclosure indicator, for example. 568 00:30:59,080 --> 00:31:03,540 >> And then, why don't we take these, copy paste them, and put them into the 569 00:31:03,540 --> 00:31:06,740 next table row. 570 00:31:06,740 --> 00:31:08,115 So, we can call this Yellow. 571 00:31:08,115 --> 00:31:10,620 572 00:31:10,620 --> 00:31:12,155 And I might have to extend this. 573 00:31:12,155 --> 00:31:15,730 574 00:31:15,730 --> 00:31:17,290 Let's make it yellow. 575 00:31:17,290 --> 00:31:20,610 And in this way, we can copy paste our way down. 576 00:31:20,610 --> 00:31:24,910 577 00:31:24,910 --> 00:31:25,370 What was it? 578 00:31:25,370 --> 00:31:26,620 Purple. 579 00:31:26,620 --> 00:31:30,020 580 00:31:30,020 --> 00:31:34,740 >> So, these are all the typical CS50 colors that you've seen in class-- 581 00:31:34,740 --> 00:31:37,160 actually, sorry-- 582 00:31:37,160 --> 00:31:38,410 or on the website. 583 00:31:38,410 --> 00:31:49,700 584 00:31:49,700 --> 00:31:51,260 Hopefully you guys can see what I'm doing here. 585 00:31:51,260 --> 00:31:57,270 586 00:31:57,270 --> 00:31:57,890 OK. 587 00:31:57,890 --> 00:31:58,490 Last one. 588 00:31:58,490 --> 00:32:02,040 >> AUDIENCE: How did you add the row initially? 589 00:32:02,040 --> 00:32:04,740 >> RHED SHI: So, the question was, how did I add the row initially? 590 00:32:04,740 --> 00:32:07,500 I went into this table section-- or however I can 591 00:32:07,500 --> 00:32:09,200 select the table section-- 592 00:32:09,200 --> 00:32:11,250 and then, here, I updated the number of rows. 593 00:32:11,250 --> 00:32:19,920 594 00:32:19,920 --> 00:32:22,505 >> And, let me hope that this works. 595 00:32:22,505 --> 00:32:30,620 596 00:32:30,620 --> 00:32:31,480 OK. 597 00:32:31,480 --> 00:32:32,870 Let's see if this works. 598 00:32:32,870 --> 00:32:34,000 Oh, perfect, awesome. 599 00:32:34,000 --> 00:32:35,300 OK. 600 00:32:35,300 --> 00:32:40,330 While I was building up my demo, some things weren't aligned, so, thanks for 601 00:32:40,330 --> 00:32:42,510 the applause. 602 00:32:42,510 --> 00:32:42,920 >> Yeah. 603 00:32:42,920 --> 00:32:44,770 So, let's see. 604 00:32:44,770 --> 00:32:47,550 We'll make this nine just to make everything-- or actually, let's just 605 00:32:47,550 --> 00:32:51,420 turn all of these into disclosure indicators. 606 00:32:51,420 --> 00:32:55,790 And then, what I want to show you, too, was how I can take each of those 607 00:32:55,790 --> 00:32:59,230 table rows and have them interact-- 608 00:32:59,230 --> 00:33:00,150 oh. 609 00:33:00,150 --> 00:33:01,400 No. 610 00:33:01,400 --> 00:33:05,700 611 00:33:05,700 --> 00:33:06,030 >> Oh. 612 00:33:06,030 --> 00:33:07,230 Also, I want to show you-- 613 00:33:07,230 --> 00:33:13,080 here, I can put the title of my navigation controller, right? 614 00:33:13,080 --> 00:33:17,090 So actually, you'll notice, as soon as I embedded this view controller inside 615 00:33:17,090 --> 00:33:22,010 of the navigation controller, we see this navigation bar at the top of our 616 00:33:22,010 --> 00:33:25,340 storyboard representation of a view controller. 617 00:33:25,340 --> 00:33:29,270 And so, this gives us, like, a visual, sort of, guide to our visible screen. 618 00:33:29,270 --> 00:33:34,360 This is obviously going to be the navigation bar. 619 00:33:34,360 --> 00:33:40,950 >> And what I want to do quickly, now, is put in another-- 620 00:33:40,950 --> 00:33:45,880 so this table view controller I did by taking one of these and dragging it 621 00:33:45,880 --> 00:33:49,800 here, and that's what's allowed me to quickly, really, create a table view 622 00:33:49,800 --> 00:33:50,850 controller. 623 00:33:50,850 --> 00:33:54,100 If we do have the time though, you'll see that, programmatically, it's a 624 00:33:54,100 --> 00:33:57,660 little bit more tricky to create a table view controller, because there 625 00:33:57,660 --> 00:34:02,520 are a couple of methods that are required for you to, sort of, write 626 00:34:02,520 --> 00:34:07,130 out in order for the table view controller to be displayed correctly. 627 00:34:07,130 --> 00:34:15,340 >> However, I just want to show you, now, an example of where, if I take this, 628 00:34:15,340 --> 00:34:15,920 for example-- 629 00:34:15,920 --> 00:34:18,290 I've put in another view controller. 630 00:34:18,290 --> 00:34:27,320 And now, let's say I want to control alt my very first blue 631 00:34:27,320 --> 00:34:28,980 table row to here. 632 00:34:28,980 --> 00:34:31,070 And I want to call this Blue. 633 00:34:31,070 --> 00:34:32,570 And then-- 634 00:34:32,570 --> 00:34:34,159 let's see. 635 00:34:34,159 --> 00:34:41,050 I'm at the view now, and I can change the background to blue. 636 00:34:41,050 --> 00:34:45,945 >> And so, notice, here, this drop-down menu also gives you a hierarchy of all 637 00:34:45,945 --> 00:34:47,040 of these objects. 638 00:34:47,040 --> 00:34:50,530 So an important thing to note, here, is that all of these things, here-- 639 00:34:50,530 --> 00:34:54,330 this table view controller, the table view, table view section, table view 640 00:34:54,330 --> 00:34:57,169 cell-- all of these are objects, in code. 641 00:34:57,169 --> 00:35:03,752 So, you know, a label right now is under the content view, et cetera. 642 00:35:03,752 --> 00:35:05,020 So on and so forth. 643 00:35:05,020 --> 00:35:08,765 >> So, if we run this code, we should see something-- 644 00:35:08,765 --> 00:35:15,816 645 00:35:15,816 --> 00:35:17,870 let's see if this-- yeah. 646 00:35:17,870 --> 00:35:18,670 So, there we go. 647 00:35:18,670 --> 00:35:22,120 But, if we don't do that, none of these other things work. 648 00:35:22,120 --> 00:35:22,500 Right? 649 00:35:22,500 --> 00:35:23,800 So only this one works. 650 00:35:23,800 --> 00:35:29,100 And, for the sake of time, I won't go into, you know, putting 651 00:35:29,100 --> 00:35:29,770 down the other ones. 652 00:35:29,770 --> 00:35:32,020 And this is the end of, sort of, storyboard-- 653 00:35:32,020 --> 00:35:33,400 what I wanted to show you for storyboard. 654 00:35:33,400 --> 00:35:36,330 655 00:35:36,330 --> 00:35:43,490 >> And, I do have a worked out example, actually, right here. 656 00:35:43,490 --> 00:35:48,090 So, this is the storyboard that I made previously. 657 00:35:48,090 --> 00:35:52,740 So, as you can see, this was my navigation controller. 658 00:35:52,740 --> 00:35:57,040 Then I had my first view controller, then I had my table view controller, 659 00:35:57,040 --> 00:35:58,980 and then I had all of these-- 660 00:35:58,980 --> 00:36:01,180 so previously, I was doing something very different. 661 00:36:01,180 --> 00:36:04,450 So, excuse those things. 662 00:36:04,450 --> 00:36:07,930 I'll probably clean it up later before I send it off to production. 663 00:36:07,930 --> 00:36:12,800 >> But, if we run this, we'll see that all of the options are 664 00:36:12,800 --> 00:36:14,050 available to us. 665 00:36:14,050 --> 00:36:18,540 666 00:36:18,540 --> 00:36:21,320 Except I didn't make the backgrounds those colors. 667 00:36:21,320 --> 00:36:26,510 So, nice simple application. 668 00:36:26,510 --> 00:36:28,340 >> Now, let's try to tackle this programmatically. 669 00:36:28,340 --> 00:36:31,270 670 00:36:31,270 --> 00:36:32,130 OK. 671 00:36:32,130 --> 00:36:37,570 So, to do that, we're just going to start a new Xcode project. 672 00:36:37,570 --> 00:36:41,920 We'll make it an empty application now, because we don't want to have the 673 00:36:41,920 --> 00:36:42,380 storyboard. 674 00:36:42,380 --> 00:36:46,590 So, I'm simply restricting myself to not use any of the storyboard, and an 675 00:36:46,590 --> 00:36:49,170 empty application will not give me a storyboard. 676 00:36:49,170 --> 00:36:52,256 This is just to prevent myself from cheating. 677 00:36:52,256 --> 00:36:54,428 Let's see. 678 00:36:54,428 --> 00:36:55,360 Wait. 679 00:36:55,360 --> 00:36:55,960 Did I-- 680 00:36:55,960 --> 00:36:56,448 yes. 681 00:36:56,448 --> 00:36:57,698 OK. 682 00:36:57,698 --> 00:37:08,650 683 00:37:08,650 --> 00:37:09,180 >> Right. 684 00:37:09,180 --> 00:37:16,790 So, here, we are left with nothing else but code. 685 00:37:16,790 --> 00:37:19,460 So, let me move this window slightly over. 686 00:37:19,460 --> 00:37:22,020 687 00:37:22,020 --> 00:37:22,260 Right. 688 00:37:22,260 --> 00:37:28,160 As you can see here, the only files we're given are AppDelegate.h and dot 689 00:37:28,160 --> 00:37:30,500 m, and we don't have storyboard anymore. 690 00:37:30,500 --> 00:37:39,580 >> So if we run this, we are still going to get to the white screen, thank God. 691 00:37:39,580 --> 00:37:42,280 OK-- white screen, but nothing else. 692 00:37:42,280 --> 00:37:45,260 And, here is the important part. 693 00:37:45,260 --> 00:37:47,810 This is where the action happens. 694 00:37:47,810 --> 00:37:51,410 In the previous versions, there's usually no code here, but the 695 00:37:51,410 --> 00:37:55,600 storyboard essentially provides the code for this part. 696 00:37:55,600 --> 00:37:57,470 I won't go into details on how. 697 00:37:57,470 --> 00:38:02,890 >> And what we want to do now is, we want to go in here, and this little space 698 00:38:02,890 --> 00:38:05,050 starts creating our app again. 699 00:38:05,050 --> 00:38:06,092 So-- 700 00:38:06,092 --> 00:38:06,318 yes? 701 00:38:06,318 --> 00:38:07,450 >> AUDIENCE: Zoom? 702 00:38:07,450 --> 00:38:07,770 >> RHED SHI: Zoom. 703 00:38:07,770 --> 00:38:09,020 Yeah, sure. 704 00:38:09,020 --> 00:38:13,940 705 00:38:13,940 --> 00:38:14,520 OK. 706 00:38:14,520 --> 00:38:17,380 I'll be typing, so this shouldn't matter too much. 707 00:38:17,380 --> 00:38:17,940 OK. 708 00:38:17,940 --> 00:38:22,720 >> So, first, remember we wanted to create a navigation controller, right? 709 00:38:22,720 --> 00:38:27,090 And also, as you can see here, Xcode does a really great job of 710 00:38:27,090 --> 00:38:28,070 self-filling. 711 00:38:28,070 --> 00:38:31,650 So, as you'll notice, the names of everything are a lot longer than 712 00:38:31,650 --> 00:38:33,910 usual, but Xcode fills it in for you. 713 00:38:33,910 --> 00:38:35,710 So I can just press Enter. 714 00:38:35,710 --> 00:38:40,180 >> So, I want to create a UI navigation controller pointer, and I can call it 715 00:38:40,180 --> 00:38:41,430 navigationController. 716 00:38:41,430 --> 00:38:43,040 717 00:38:43,040 --> 00:38:44,470 Now, what do I do now? 718 00:38:44,470 --> 00:38:49,510 After this equal sign, I need to, first, create it inside of memory. 719 00:38:49,510 --> 00:38:53,790 So, I'm going to do NavigationController alloc-- 720 00:38:53,790 --> 00:38:56,640 so, this is similar to malloc, that you guys used in C-- 721 00:38:56,640 --> 00:38:58,400 and then, I'm going to init it. 722 00:38:58,400 --> 00:39:03,670 >> So, it's really important that any object that you create, you want to 723 00:39:03,670 --> 00:39:04,940 alloc and init it. 724 00:39:04,940 --> 00:39:08,600 That's going to create it and instantialize it inside of memory, and 725 00:39:08,600 --> 00:39:10,480 now you can use it. 726 00:39:10,480 --> 00:39:10,780 All right? 727 00:39:10,780 --> 00:39:14,360 If you don't do that, your object does not exist, and you'll run into a bunch 728 00:39:14,360 --> 00:39:17,290 of problems. 729 00:39:17,290 --> 00:39:20,250 >> And then, I want to create a view controller, right? 730 00:39:20,250 --> 00:39:25,580 So, I want to create a UIViewController star-- 731 00:39:25,580 --> 00:39:29,620 so, everything is a pointer in Objective-C, and I'm going to do 732 00:39:29,620 --> 00:39:31,600 something similar, here-- 733 00:39:31,600 --> 00:39:32,850 alloc, init. 734 00:39:32,850 --> 00:39:38,680 735 00:39:38,680 --> 00:39:40,150 OK. 736 00:39:40,150 --> 00:39:43,450 >> And then what I'm going to do is, I'm going to-- so, remember when we did 737 00:39:43,450 --> 00:39:45,360 the embed in navigation controller? 738 00:39:45,360 --> 00:39:46,920 This is how you do it in code. 739 00:39:46,920 --> 00:39:54,550 You're going to do navigationController 740 00:39:54,550 --> 00:39:55,780 pushViewController-- 741 00:39:55,780 --> 00:39:57,636 >> AUDIENCE: [INAUDIBLE]. 742 00:39:57,636 --> 00:39:59,030 Will this happen for us, or--? 743 00:39:59,030 --> 00:40:00,080 >> RHED SHI: Oh, yeah. 744 00:40:00,080 --> 00:40:00,550 No. 745 00:40:00,550 --> 00:40:02,740 It likes me better. 746 00:40:02,740 --> 00:40:04,670 No, it'll work for you, too. 747 00:40:04,670 --> 00:40:06,700 So, these are all methods. 748 00:40:06,700 --> 00:40:10,400 So pushViewController is a method, and also, more specifically, it's an 749 00:40:10,400 --> 00:40:13,590 instance method of the UI navigation controller. 750 00:40:13,590 --> 00:40:20,030 Because I had to create my UI navigation controller star, and then I 751 00:40:20,030 --> 00:40:24,510 can call this pushViewController on my specific instance of a UI navigation 752 00:40:24,510 --> 00:40:25,010 controller. 753 00:40:25,010 --> 00:40:29,490 >> AUDIENCE: Do we have to do the exact word, or does it already exist for it? 754 00:40:29,490 --> 00:40:31,380 >> RHED SHI: Yes, because it's a method. 755 00:40:31,380 --> 00:40:32,200 It's like a function. 756 00:40:32,200 --> 00:40:33,330 It's like printf. 757 00:40:33,330 --> 00:40:34,390 It's like scanf. 758 00:40:34,390 --> 00:40:36,250 It's like strcompare. 759 00:40:36,250 --> 00:40:40,310 Except it knows what you might want to type, and notice that it'll always 760 00:40:40,310 --> 00:40:42,740 come up with things that are legally allowed for you. 761 00:40:42,740 --> 00:40:47,620 So, if nothing shows up here, then something is wrong. 762 00:40:47,620 --> 00:40:50,550 >> So, pushViewController. 763 00:40:50,550 --> 00:40:52,580 So, now, I want to push my newly created 764 00:40:52,580 --> 00:40:56,850 UIViewController, and then, animated-- 765 00:40:56,850 --> 00:40:57,470 perhaps not. 766 00:40:57,470 --> 00:41:00,110 Because this is going to be the first view controller. 767 00:41:00,110 --> 00:41:03,210 I mean, even if I did make animated, it probably won't show up, because 768 00:41:03,210 --> 00:41:05,050 it's the first screen. 769 00:41:05,050 --> 00:41:06,540 >> And remember the brackets. 770 00:41:06,540 --> 00:41:08,850 So, remember how we used the brackets? 771 00:41:08,850 --> 00:41:11,870 And inside the brackets, the object calls on a method-- 772 00:41:11,870 --> 00:41:15,910 so our object is the navigation controller, and the method is a push 773 00:41:15,910 --> 00:41:17,210 view controller animated. 774 00:41:17,210 --> 00:41:21,920 And see how it takes in two arguments, and they're separated by the, sort of, 775 00:41:21,920 --> 00:41:24,390 words, and a colon. 776 00:41:24,390 --> 00:41:28,300 So, Objective-C tries to make it nice and easy for you to read out loud-- 777 00:41:28,300 --> 00:41:33,020 your code-- and have it semi, sort of, make sense. 778 00:41:33,020 --> 00:41:37,150 >> However, doing just this is not enough. 779 00:41:37,150 --> 00:41:39,780 Let me zoom out now. 780 00:41:39,780 --> 00:41:44,210 Doing just this is not enough to get what we got to previously. 781 00:41:44,210 --> 00:41:48,580 So here, you'll notice that there is actually not going to be any sort of 782 00:41:48,580 --> 00:41:50,190 bar, here, right? 783 00:41:50,190 --> 00:41:54,680 There's no navigation bar, which means that we still have not gotten it. 784 00:41:54,680 --> 00:41:58,850 >> And we can test that out, also, by, perhaps, changing the background of 785 00:41:58,850 --> 00:42:00,460 ViewController, right? 786 00:42:00,460 --> 00:42:01,710 ViewController.background-- 787 00:42:01,710 --> 00:42:03,155 788 00:42:03,155 --> 00:42:03,640 ah. 789 00:42:03,640 --> 00:42:07,690 So, see how ViewController did not have a background color, even though I 790 00:42:07,690 --> 00:42:08,780 wanted to access it? 791 00:42:08,780 --> 00:42:14,080 And that's because ViewController is a container for the view. 792 00:42:14,080 --> 00:42:19,490 So, it has a view property, which then has a background color. 793 00:42:19,490 --> 00:42:25,510 >> And, I can set it, sort of tediously, by calling the color 794 00:42:25,510 --> 00:42:28,130 on the UIColor object. 795 00:42:28,130 --> 00:42:33,210 So, notice here, redColor is a method. 796 00:42:33,210 --> 00:42:36,750 It's a class method of UIcolor. 797 00:42:36,750 --> 00:42:40,820 Because I did not have to create an actual instance of a UIColor in order 798 00:42:40,820 --> 00:42:42,020 to call the method on it. 799 00:42:42,020 --> 00:42:45,050 I just, simply, called it on the type-like name. 800 00:42:45,050 --> 00:42:49,620 I, like, called it on int, if int had, like, a method to it, for example. 801 00:42:49,620 --> 00:42:52,380 >> And so, if we run this code, we'll notice that the background is 802 00:42:52,380 --> 00:42:53,540 actually not red. 803 00:42:53,540 --> 00:42:54,790 It's still white. 804 00:42:54,790 --> 00:42:57,720 805 00:42:57,720 --> 00:43:04,550 And how we can get around that is, notice how there's the self.window. 806 00:43:04,550 --> 00:43:08,260 That is, like, the ultimate container for your application. 807 00:43:08,260 --> 00:43:11,630 It is the ultimate thing that contains everything on the screen, for an 808 00:43:11,630 --> 00:43:13,650 iPhone or iPad application. 809 00:43:13,650 --> 00:43:20,970 >> And, conveniently, self.window has this property called 810 00:43:20,970 --> 00:43:22,650 rootViewController. 811 00:43:22,650 --> 00:43:26,480 And that is going to be the pointer to the very first view controller inside 812 00:43:26,480 --> 00:43:27,270 of your app. 813 00:43:27,270 --> 00:43:32,000 So, what we want to do here, now, is to set that equal to our navigation 814 00:43:32,000 --> 00:43:32,710 controller. 815 00:43:32,710 --> 00:43:33,760 Right? 816 00:43:33,760 --> 00:43:37,490 Because, technically, navigation controller is our very first view 817 00:43:37,490 --> 00:43:38,770 controller. 818 00:43:38,770 --> 00:43:46,160 It keeps track of an array of other view controllers, and we pushed this 819 00:43:46,160 --> 00:43:49,810 view controller into that array in the navigation controller. 820 00:43:49,810 --> 00:43:52,640 >> So, you do not want to do this. 821 00:43:52,640 --> 00:43:54,225 That wouldn't really help you. 822 00:43:54,225 --> 00:43:58,040 You want to do this, if you wanted to do a navigation controller, which most 823 00:43:58,040 --> 00:44:01,100 of you probably will because you'll want to, sort of, have some sort of, 824 00:44:01,100 --> 00:44:04,840 like, menu to go back to or some homepage to go back to, rather than an 825 00:44:04,840 --> 00:44:05,470 empty screen. 826 00:44:05,470 --> 00:44:05,920 Yes? 827 00:44:05,920 --> 00:44:11,460 >> AUDIENCE: Is it uncomfortable for you to zoom in on the-- 828 00:44:11,460 --> 00:44:12,710 >> RHED SHI: Yeah. 829 00:44:12,710 --> 00:44:15,310 830 00:44:15,310 --> 00:44:15,720 So, yeah. 831 00:44:15,720 --> 00:44:22,370 This is the code, and now let's test it out. 832 00:44:22,370 --> 00:44:27,920 >> So, there we go. 833 00:44:27,920 --> 00:44:29,170 Magic. 834 00:44:29,170 --> 00:44:30,960 835 00:44:30,960 --> 00:44:32,690 So, OK. 836 00:44:32,690 --> 00:44:34,420 Thank you. 837 00:44:34,420 --> 00:44:35,000 OK. 838 00:44:35,000 --> 00:44:38,690 So now, what we want to do is-- so, we're kind of limited, here, right? 839 00:44:38,690 --> 00:44:45,130 We could potentially write everything inside of this one function. 840 00:44:45,130 --> 00:44:48,470 But, that's not how iOS development usually works. 841 00:44:48,470 --> 00:44:53,030 >> So, what we're going to do is, we're going to create some new files. 842 00:44:53,030 --> 00:44:57,110 But, more specifically, we're going to create another Objective-C class, or 843 00:44:57,110 --> 00:44:58,010 another object-- 844 00:44:58,010 --> 00:45:00,700 class and objects are interchangeable here. 845 00:45:00,700 --> 00:45:06,460 And, here's how I could, potentially, create another class of U controllers. 846 00:45:06,460 --> 00:45:12,030 >> So, it's a sub-class, as you'll notice, here, it's a sub-class of the 847 00:45:12,030 --> 00:45:15,910 UI view controller, but I can call it any other name here. 848 00:45:15,910 --> 00:45:19,400 I could call this CS50, I could call this view controller, I could call 849 00:45:19,400 --> 00:45:21,640 this blah view controller-- 850 00:45:21,640 --> 00:45:22,400 anything I want. 851 00:45:22,400 --> 00:45:24,140 This is just the name for the class. 852 00:45:24,140 --> 00:45:27,020 However, it's going to be important because, essentially, what I'm doing 853 00:45:27,020 --> 00:45:29,720 here is, I'm creating another class name. 854 00:45:29,720 --> 00:45:34,140 So, it's going to be, like, some sort of type or an object. 855 00:45:34,140 --> 00:45:35,910 So, it should be a little bit generic. 856 00:45:35,910 --> 00:45:37,225 It's not going to be very specific. 857 00:45:37,225 --> 00:45:40,410 858 00:45:40,410 --> 00:45:44,480 >> And also, I do want to point out these two options. 859 00:45:44,480 --> 00:45:48,430 Because we're doing everything inside of code, sometimes it is a lot easier 860 00:45:48,430 --> 00:45:53,540 to bring in an interface file, such that I can literally drag and drop, as 861 00:45:53,540 --> 00:45:54,960 we did earlier with storyboard-- 862 00:45:54,960 --> 00:45:57,810 you know, a label, or a button, or whatever else. 863 00:45:57,810 --> 00:46:01,950 And so, xibs are files that allow you to do that, and you have to hook it up 864 00:46:01,950 --> 00:46:04,310 to this view controller file. 865 00:46:04,310 --> 00:46:06,540 >> So, I'm going to deliberately not check this. 866 00:46:06,540 --> 00:46:12,510 Usually I would check this, and if I only did this for iPhone or iPad, I 867 00:46:12,510 --> 00:46:16,340 would check this and simply have one for, you know, the iPhone or the iPad. 868 00:46:16,340 --> 00:46:19,750 But since I'm doing universal, I'm going to create two of those later. 869 00:46:19,750 --> 00:46:22,220 So, I'm going to deliberately uncheck this. 870 00:46:22,220 --> 00:46:23,940 >> This is also really important. 871 00:46:23,940 --> 00:46:27,490 A lot of times, I've had bugs where this was not checked. 872 00:46:27,490 --> 00:46:31,930 And so, obviously, this file is not, sort of, like, included or imported 873 00:46:31,930 --> 00:46:33,740 inside of this test folder. 874 00:46:33,740 --> 00:46:38,180 And so, my code has absolutely no idea of the existence of this file, and 875 00:46:38,180 --> 00:46:41,080 that causes a lot of pain and hours of debugging. 876 00:46:41,080 --> 00:46:44,360 But, just make sure this is checked so that, you know, the target of this 877 00:46:44,360 --> 00:46:47,510 file is for this application. 878 00:46:47,510 --> 00:46:48,310 >> OK. 879 00:46:48,310 --> 00:46:51,680 So, now we've created two new files. 880 00:46:51,680 --> 00:46:54,050 And these files look pretty empty. 881 00:46:54,050 --> 00:46:59,550 And, actually, let's also continue on by creating the xib files. 882 00:46:59,550 --> 00:47:03,690 So, previously, I was in the Cocoa Touch drop-down. 883 00:47:03,690 --> 00:47:06,880 Now, I'm going to go into the User Interface touch, and as you can see, I 884 00:47:06,880 --> 00:47:08,120 can create a storyboard. 885 00:47:08,120 --> 00:47:11,710 >> So, even I started with an empty application, I can still use a 886 00:47:11,710 --> 00:47:12,340 storyboard. 887 00:47:12,340 --> 00:47:15,480 Although, it gets tricky in terms of how you want to connect 888 00:47:15,480 --> 00:47:16,820 that to your code. 889 00:47:16,820 --> 00:47:18,230 So, I won't go there. 890 00:47:18,230 --> 00:47:22,160 >> But, what we want to do now is create a view. 891 00:47:22,160 --> 00:47:25,720 And you can choose for an iPhone or an iPad. 892 00:47:25,720 --> 00:47:30,180 And typically, to denote the difference-- if you're doing a 893 00:47:30,180 --> 00:47:31,950 universal application-- 894 00:47:31,950 --> 00:47:35,980 you either put an underscore iPhone, or you can do a Twiddly. 895 00:47:35,980 --> 00:47:36,980 It doesn't really matter. 896 00:47:36,980 --> 00:47:40,890 It's simply for you to differentiate which view is for which device. 897 00:47:40,890 --> 00:47:43,470 898 00:47:43,470 --> 00:47:44,430 >> And so, now look. 899 00:47:44,430 --> 00:47:47,550 I have a screen that I can work with. 900 00:47:47,550 --> 00:47:53,530 And so, for example, I can put a label on here, you know, and I can also put 901 00:47:53,530 --> 00:47:54,820 another button here. 902 00:47:54,820 --> 00:47:58,730 I won't bother changing the values here. 903 00:47:58,730 --> 00:48:09,050 >> But, what's important here is that the file's owner-- 904 00:48:09,050 --> 00:48:13,660 so, I'm inside of the iPhone view, iPhone xib file. 905 00:48:13,660 --> 00:48:18,050 And down in this navigation area or drop-down menu, I want to go to the 906 00:48:18,050 --> 00:48:19,090 file's owner. 907 00:48:19,090 --> 00:48:22,630 And this is the really important step here. 908 00:48:22,630 --> 00:48:27,780 I want to make the class view controller, so that this xib file is 909 00:48:27,780 --> 00:48:30,030 going to be associated with my view controller. 910 00:48:30,030 --> 00:48:33,590 911 00:48:33,590 --> 00:48:39,360 And anything that I do inside of my view controller programmatically is 912 00:48:39,360 --> 00:48:42,800 going to be reflected on here. 913 00:48:42,800 --> 00:48:46,270 >> So, however, notice that-- 914 00:48:46,270 --> 00:48:55,995 actually, let's make this view background blue, for example. 915 00:48:55,995 --> 00:49:00,280 916 00:49:00,280 --> 00:49:01,530 Or green. 917 00:49:01,530 --> 00:49:03,870 918 00:49:03,870 --> 00:49:07,950 And then, so if you'll notice, back in this code, this is where we got to our 919 00:49:07,950 --> 00:49:09,200 navigation controller. 920 00:49:09,200 --> 00:49:12,650 921 00:49:12,650 --> 00:49:18,310 >> Even though we did that step, it's still going to be red, not green. 922 00:49:18,310 --> 00:49:20,350 And there's a reason why. 923 00:49:20,350 --> 00:49:28,090 It's because, when we inited our view controller, here-- 924 00:49:28,090 --> 00:49:30,010 sorry, it's a little crazy-- 925 00:49:30,010 --> 00:49:34,520 when we inited our view controller here, we inited it of the general type 926 00:49:34,520 --> 00:49:35,990 UIViewController. 927 00:49:35,990 --> 00:49:36,560 OK? 928 00:49:36,560 --> 00:49:40,560 So we didn't even do it with this class. 929 00:49:40,560 --> 00:49:42,030 >> So remember, this is like a class now. 930 00:49:42,030 --> 00:49:47,160 It can be thought of as a type, just as UIViewController is a type. 931 00:49:47,160 --> 00:49:51,080 And in order to use that, what we need to do is import it-- 932 00:49:51,080 --> 00:49:52,520 import ViewController-- 933 00:49:52,520 --> 00:49:55,750 and, as you can see, it autofills it for me. 934 00:49:55,750 --> 00:49:56,570 So, ViewController-- 935 00:49:56,570 --> 00:50:02,070 and now, here, I can change this UIViewController to ViewController. 936 00:50:02,070 --> 00:50:05,050 And now, here, I can change this to ViewController. 937 00:50:05,050 --> 00:50:07,790 938 00:50:07,790 --> 00:50:09,250 >> Let's run this again. 939 00:50:09,250 --> 00:50:16,970 940 00:50:16,970 --> 00:50:19,690 It's still red. 941 00:50:19,690 --> 00:50:23,370 And the reason why it's still red is because-- 942 00:50:23,370 --> 00:50:26,230 woah, what happened there? 943 00:50:26,230 --> 00:50:31,500 We wanted to associate this xib file with the view controller. 944 00:50:31,500 --> 00:50:37,540 However, in order to actually do that, we need to go into this. 945 00:50:37,540 --> 00:50:42,980 And when we do the init, we want to do initWithNibName, and then we want to 946 00:50:42,980 --> 00:50:48,910 do the at string View_iPhone, for example. 947 00:50:48,910 --> 00:50:51,700 You can ignore the bundle here. 948 00:50:51,700 --> 00:50:54,965 >> And this is going to allow us to, actually-- 949 00:50:54,965 --> 00:51:00,620 950 00:51:00,620 --> 00:51:02,160 uh oh, there's a problem. 951 00:51:02,160 --> 00:51:09,300 952 00:51:09,300 --> 00:51:09,980 Right. 953 00:51:09,980 --> 00:51:17,670 >> And so, there's a problem because, in our view xib file, we have a label and 954 00:51:17,670 --> 00:51:18,720 we have a button. 955 00:51:18,720 --> 00:51:23,660 However, even though we've connected those two, there's nothing inside of 956 00:51:23,660 --> 00:51:27,440 ViewController.h or ViewController.m that reflect those 957 00:51:27,440 --> 00:51:29,160 buttons or those labels. 958 00:51:29,160 --> 00:51:32,425 So, we need to write those in as properties of the view controller. 959 00:51:32,425 --> 00:51:35,290 960 00:51:35,290 --> 00:51:39,490 >> So, this is how you declare a property. 961 00:51:39,490 --> 00:51:43,422 It takes in, usually, these two options. 962 00:51:43,422 --> 00:51:48,690 For the purposes of us and this seminar, I would say that, in general, 963 00:51:48,690 --> 00:51:52,250 most properties are nonatomic and retain. 964 00:51:52,250 --> 00:51:55,420 You can read up by Google searching, you know, the difference between 965 00:51:55,420 --> 00:51:58,620 nonatomic and retain on, you know, Google or something. 966 00:51:58,620 --> 00:52:01,090 And I'll take you to, like, Stack Overflow, where people will have 967 00:52:01,090 --> 00:52:03,605 answers for the differences between those. 968 00:52:03,605 --> 00:52:07,000 But for now, that's what we want to be concerned with. 969 00:52:07,000 --> 00:52:12,790 >> And we want to make a UI label, star, and we can call it whatever we want. 970 00:52:12,790 --> 00:52:15,710 We can call this, you know, label. 971 00:52:15,710 --> 00:52:18,270 972 00:52:18,270 --> 00:52:20,110 And, we'll create another one for the button. 973 00:52:20,110 --> 00:52:24,380 974 00:52:24,380 --> 00:52:29,910 And remember to include the asterisk, because we are dealing with pointers 975 00:52:29,910 --> 00:52:36,740 pretty much everywhere inside of Objective-C. 976 00:52:36,740 --> 00:52:42,110 >> However, that will still not solve the problem, as you can see here. 977 00:52:42,110 --> 00:52:50,540 And the reason is because, whenever we want to connect a xib file label or a 978 00:52:50,540 --> 00:52:55,690 button to the program, or the header and implementation file, we want to 979 00:52:55,690 --> 00:52:58,255 add this piece of code-- 980 00:52:58,255 --> 00:53:00,610 outlet. 981 00:53:00,610 --> 00:53:03,600 Notice that it's a key word. 982 00:53:03,600 --> 00:53:07,970 >> And, as soon as I finish typing that out, it should have these 983 00:53:07,970 --> 00:53:09,100 two circles, here. 984 00:53:09,100 --> 00:53:11,200 Usually, they're not filled in. 985 00:53:11,200 --> 00:53:12,920 I'm not sure why they are. 986 00:53:12,920 --> 00:53:21,370 But usually, you will have to manually connect them by going to this side of 987 00:53:21,370 --> 00:53:23,530 the utilities area. 988 00:53:23,530 --> 00:53:28,430 >> And so, right now, I've got my label selected, and I want to drag this new 989 00:53:28,430 --> 00:53:33,910 referencing outlet to my file's owner, and then click on Label. 990 00:53:33,910 --> 00:53:40,230 So now, finally, this label is connected to this label. 991 00:53:40,230 --> 00:53:44,950 And this label is what we're going to use programmatically to change its 992 00:53:44,950 --> 00:53:49,250 text, its font, its background color, et cetera. 993 00:53:49,250 --> 00:53:52,430 >> So, why don't we do the same for the button? 994 00:53:52,430 --> 00:53:54,770 And as you'll notice, for the button, it's a little more complicated. 995 00:53:54,770 --> 00:53:59,060 Because, I mean, you're supposed to press on a button, so it's got a lot 996 00:53:59,060 --> 00:54:02,950 of options for how users can press on a button. 997 00:54:02,950 --> 00:54:06,570 And then, we'll see later on that we can connect this to our 998 00:54:06,570 --> 00:54:09,140 code to make it work. 999 00:54:09,140 --> 00:54:12,770 >> So, for now though, we want to connect it to the actual button 1000 00:54:12,770 --> 00:54:13,570 inside of our code. 1001 00:54:13,570 --> 00:54:19,640 So we go to the new referencing outlet, and then do the button. 1002 00:54:19,640 --> 00:54:22,068 Now, let's run this again. 1003 00:54:22,068 --> 00:54:23,040 Uh oh. 1004 00:54:23,040 --> 00:54:23,890 OK. 1005 00:54:23,890 --> 00:54:25,140 I don't know what's going on here now. 1006 00:54:25,140 --> 00:54:48,450 1007 00:54:48,450 --> 00:54:49,700 Whoa. 1008 00:54:49,700 --> 00:54:57,380 1009 00:54:57,380 --> 00:54:58,960 Just one moment, here. 1010 00:54:58,960 --> 00:55:02,490 >> Actually, why don't we take a look at another example in 1011 00:55:02,490 --> 00:55:05,800 the interest of time. 1012 00:55:05,800 --> 00:55:06,200 OK. 1013 00:55:06,200 --> 00:55:10,610 So, here's the more readily prepared example for ViewController. 1014 00:55:10,610 --> 00:55:13,230 1015 00:55:13,230 --> 00:55:17,110 As you can see here, I've included the properties for the 1016 00:55:17,110 --> 00:55:18,460 label and the button. 1017 00:55:18,460 --> 00:55:20,370 And then, this piece of code here-- 1018 00:55:20,370 --> 00:55:21,830 this IBaction-- 1019 00:55:21,830 --> 00:55:27,740 was a connection to this button here. 1020 00:55:27,740 --> 00:55:33,940 So as you can see here, Touch Up Inside is connected to the selector 1021 00:55:33,940 --> 00:55:37,390 called Button Pressed. 1022 00:55:37,390 --> 00:55:41,700 >> So, we can actually go through the motion again, here, by taking Touch Up 1023 00:55:41,700 --> 00:55:48,750 Inside and dragging it to File's Owner, and then 1024 00:55:48,750 --> 00:55:51,570 click on Button Pressed. 1025 00:55:51,570 --> 00:55:52,820 Now, let's run our code. 1026 00:55:52,820 --> 00:55:55,710 1027 00:55:55,710 --> 00:56:02,020 So now, this button now works and will take us to the next page. 1028 00:56:02,020 --> 00:56:08,430 >> And, in terms of our view controller, this is the piece of code that took 1029 00:56:08,430 --> 00:56:10,000 care of the Button Pressed. 1030 00:56:10,000 --> 00:56:14,260 And it's important to note here, that I've created another type of view 1031 00:56:14,260 --> 00:56:16,330 controller called a table view controller. 1032 00:56:16,330 --> 00:56:19,900 So, this was similar to back in storyboard, when I dragged one of 1033 00:56:19,900 --> 00:56:23,450 these table view controllers into the storyboard. 1034 00:56:23,450 --> 00:56:24,470 I'm creating another 1035 00:56:24,470 --> 00:56:30,000 >> Pointer to the table view controller, alloc and init-ing it, and then doing 1036 00:56:30,000 --> 00:56:34,490 self dot navigation controller, push ViewController, this new 1037 00:56:34,490 --> 00:56:35,350 viewController. 1038 00:56:35,350 --> 00:56:39,750 And I've set the animation to yes, because now inside of my app, and I 1039 00:56:39,750 --> 00:56:45,670 want to actually see the animation going from the home page to the table 1040 00:56:45,670 --> 00:56:46,920 view controller. 1041 00:56:46,920 --> 00:56:48,830 1042 00:56:48,830 --> 00:56:51,110 >> AUDIENCE: Do you still worry about garbage collection? 1043 00:56:51,110 --> 00:56:51,840 >> RHED SHI: What's that? 1044 00:56:51,840 --> 00:56:54,740 No. 1045 00:56:54,740 --> 00:56:58,970 So, the question was, do you have to work with garbage collection? 1046 00:56:58,970 --> 00:57:03,470 So, Xcode 4 had like ARC, which is automatic reference counting. 1047 00:57:03,470 --> 00:57:06,120 And so, usually when you start a new project, you would check that, because 1048 00:57:06,120 --> 00:57:09,440 no one really wants to deal with freeing memory and stuff. 1049 00:57:09,440 --> 00:57:13,720 But I think in Xcode 5, there isn't even that option on the new project. 1050 00:57:13,720 --> 00:57:16,750 So, it automatically does that for you. 1051 00:57:16,750 --> 00:57:16,920 Yes? 1052 00:57:16,920 --> 00:57:20,970 >> AUDIENCE: Can you export a PDF in your storyboard? 1053 00:57:20,970 --> 00:57:22,020 >> RHED SHI: Yeah, definitely. 1054 00:57:22,020 --> 00:57:28,180 So, all of these will be included in source code, so you guys can check out 1055 00:57:28,180 --> 00:57:30,730 the actual Xcode project for it. 1056 00:57:30,730 --> 00:57:31,105 Yeah? 1057 00:57:31,105 --> 00:57:35,944 >> AUDIENCE: But, I mean, like, can I print a PDF with my storyboard? 1058 00:57:35,944 --> 00:57:38,920 If I just want to export the images to show someone. 1059 00:57:38,920 --> 00:57:39,160 >> RHED SHI: Oh yeah. 1060 00:57:39,160 --> 00:57:41,980 I think, maybe, you can just take a screen shot. 1061 00:57:41,980 --> 00:57:44,350 Yeah, and send them a screen shot or something. 1062 00:57:44,350 --> 00:57:45,600 Yeah. 1063 00:57:45,600 --> 00:57:49,170 1064 00:57:49,170 --> 00:57:50,570 >> So, let's see. 1065 00:57:50,570 --> 00:57:56,470 In the interest of time, I think that's all l can cover today. 1066 00:57:56,470 --> 00:57:59,600 But, I know that's, actually, just barely touching the surface of iOS 1067 00:57:59,600 --> 00:58:00,370 development. 1068 00:58:00,370 --> 00:58:05,630 So, please feel free to contact me if you have any questions about iOS 1069 00:58:05,630 --> 00:58:07,000 development. 1070 00:58:07,000 --> 00:58:12,840 And, hopefully, I'll be able to clean up some of the code for the source 1071 00:58:12,840 --> 00:58:16,830 code files, so that you'll have some really nice examples to work with. 1072 00:58:16,830 --> 00:58:21,020 >> Other than that, if you guys are going to the CS50 Hackathon, I may or may 1073 00:58:21,020 --> 00:58:25,730 not be there, and I can help out with some iOS development, too. 1074 00:58:25,730 --> 00:58:26,980 So, thanks a lot, guys. 1075 00:58:26,980 --> 00:58:31,168