1 00:00:00,330 --> 00:00:05,280 Right, we're pretty close to completing our app, believe it or not, we have a screen with a button 2 00:00:05,280 --> 00:00:09,240 in it, but now we need that button to actually do something. 3 00:00:09,570 --> 00:00:16,920 And the way we do that is by having an action outlet, which is basically fancy speak for saying something 4 00:00:16,920 --> 00:00:18,750 that listens to the click of the button. 5 00:00:19,140 --> 00:00:25,950 Now, remember, I said we don't put a certain code in the view controller button clicks are definitely 6 00:00:25,950 --> 00:00:26,310 code. 7 00:00:26,310 --> 00:00:31,230 We do put in The View controller because that's the view controllers job, right? 8 00:00:31,230 --> 00:00:31,950 Control of you. 9 00:00:32,160 --> 00:00:36,480 Listen to events and button clicks, taps and things like that. 10 00:00:37,110 --> 00:00:42,930 So I've opened The View controller, but you might wonder how do I connect that particular button to 11 00:00:42,930 --> 00:00:43,740 The View controller? 12 00:00:44,490 --> 00:00:45,480 Well, it's pretty simple. 13 00:00:45,480 --> 00:00:48,960 So close the view controller and up on the top, right. 14 00:00:48,990 --> 00:00:51,030 You have this little plus icon. 15 00:00:51,390 --> 00:00:52,530 Add Ed on. 16 00:00:52,530 --> 00:00:52,890 Right. 17 00:00:53,130 --> 00:00:57,710 And if you tap that, it should open a new window for you. 18 00:00:58,620 --> 00:01:01,740 Then what you can do is grab your view controller. 19 00:01:01,770 --> 00:01:09,470 Just tap it, just tap the file view controller and then let's go find our screen for Main Storyboard. 20 00:01:09,480 --> 00:01:09,900 Hello. 21 00:01:10,140 --> 00:01:10,640 Hello. 22 00:01:10,650 --> 00:01:11,220 There it is. 23 00:01:11,640 --> 00:01:12,020 Right. 24 00:01:12,030 --> 00:01:13,140 We got our main storyboard. 25 00:01:13,140 --> 00:01:13,980 I'm going to zoom out. 26 00:01:17,590 --> 00:01:18,130 There we go. 27 00:01:18,590 --> 00:01:24,480 OK, so with a bit of jiggery pocari, you can actually get these two things side by side. 28 00:01:24,490 --> 00:01:31,080 Now if you don't have enough room again at the bottom of the screen here underneath the main storyboard, 29 00:01:31,360 --> 00:01:33,220 you can hide the document outline. 30 00:01:33,220 --> 00:01:35,670 It's very, very tiny icon. 31 00:01:35,680 --> 00:01:36,520 Thanks Xcode. 32 00:01:37,330 --> 00:01:43,270 And if you click it, you can actually show that without showing all that extra information. 33 00:01:44,050 --> 00:01:44,270 Right. 34 00:01:44,370 --> 00:01:50,130 So all we have to do is click the button, hold down control, not command, but control. 35 00:01:50,200 --> 00:01:51,850 This is the left control I'm using. 36 00:01:52,420 --> 00:01:53,350 Click on the button. 37 00:01:54,550 --> 00:02:02,590 And drag it over and you'll notice it says insert action outlet or outlet collection, I'll tell you 38 00:02:02,590 --> 00:02:06,830 what those mean in a second, but you have to drop them, not outside the class. 39 00:02:06,850 --> 00:02:12,730 It won't let you do that, but inside the class and not inside any of the functions. 40 00:02:12,740 --> 00:02:14,140 So it's going to be its own function. 41 00:02:14,590 --> 00:02:18,670 And when you release the mouse button, you get a tiny font apple. 42 00:02:19,780 --> 00:02:22,150 You have action outlet, outlet, collection. 43 00:02:22,480 --> 00:02:23,500 Well, this is an action. 44 00:02:23,500 --> 00:02:24,640 A tap is an action. 45 00:02:24,640 --> 00:02:25,360 So we want that. 46 00:02:26,230 --> 00:02:28,410 And then we have the object view controller. 47 00:02:28,810 --> 00:02:30,040 Don't worry about that for now. 48 00:02:31,880 --> 00:02:33,590 Although, wait, wait, wait, wait. 49 00:02:33,620 --> 00:02:34,370 What have I done here? 50 00:02:35,210 --> 00:02:39,500 No, I think we're good action outlet view controller name. 51 00:02:39,930 --> 00:02:41,760 We can give this function and name. 52 00:02:42,320 --> 00:02:43,550 So what are we going to say? 53 00:02:44,120 --> 00:02:45,920 Button tapped. 54 00:02:47,120 --> 00:02:50,760 And then type is going to be button up button. 55 00:02:51,500 --> 00:02:52,930 I'll explain what these are in a sec. 56 00:02:53,910 --> 00:02:58,770 Now, here's the weird one, look at all these options we have for the event that this responds to. 57 00:02:59,990 --> 00:03:03,620 So you might think of a button is just a tap, but it ain't just a tap. 58 00:03:03,980 --> 00:03:09,230 There's an event for when you first touch it as an event, if you move your finger is an event. 59 00:03:09,230 --> 00:03:12,710 If you release your finger, there's an event that covers all of those. 60 00:03:13,320 --> 00:03:14,760 There's loads and loads of events. 61 00:03:15,440 --> 00:03:18,680 Apple has a very strange way of naming things. 62 00:03:18,860 --> 00:03:22,220 It's called Touch Up Inside for the classic tap. 63 00:03:23,380 --> 00:03:24,220 It is what it is. 64 00:03:25,310 --> 00:03:31,820 And just don't worry about that, then hit connect, right, so now we have our first little bit of 65 00:03:31,820 --> 00:03:32,360 code. 66 00:03:33,140 --> 00:03:39,380 This is an I.B. action, an interface builder action on the left side. 67 00:03:39,470 --> 00:03:40,940 That is an interface builder. 68 00:03:41,210 --> 00:03:44,630 On the right side, it's an action from the interface builder. 69 00:03:44,780 --> 00:03:45,650 So that makes sense. 70 00:03:46,280 --> 00:03:53,510 There's the name of it, button tapped and the sender gives you a connection to the actual button that's 71 00:03:53,510 --> 00:03:54,130 being pressed. 72 00:03:54,140 --> 00:03:59,690 So if you want to change some text on the button, for example, you could easily do that within code 73 00:03:59,840 --> 00:04:02,610 without going on a long journey to make that happen. 74 00:04:03,920 --> 00:04:06,290 You'll also notice there's this little gray icon. 75 00:04:06,290 --> 00:04:08,890 And when I hover over it, this is on line 17. 76 00:04:09,560 --> 00:04:11,840 You can see the button light up. 77 00:04:13,250 --> 00:04:20,570 Right, that indicates that connection also, if you click the button itself in this state and at the 78 00:04:20,570 --> 00:04:25,490 very top right, there is a little circle called connections. 79 00:04:25,490 --> 00:04:32,390 Inspecteur, if you click that, it tells you touch up inside is connected to view controller button 80 00:04:32,570 --> 00:04:33,020 tapped. 81 00:04:33,320 --> 00:04:35,690 You can remove that connection if you wish. 82 00:04:36,290 --> 00:04:38,140 So that's how you edit your connections. 83 00:04:38,540 --> 00:04:39,470 So if we play that. 84 00:04:41,300 --> 00:04:42,680 Where's our simulator? 85 00:04:42,710 --> 00:04:49,550 There it is now we should see the button on screen and we can tap it and nothing happens. 86 00:04:49,550 --> 00:04:54,080 But in the background that is being called. 87 00:04:54,960 --> 00:05:02,040 OK, so that's how we connect user interface elements to the code, and this is the pattern you're going 88 00:05:02,040 --> 00:05:04,350 to see all over the place with iOS.