1
00:00:00,690 --> 00:00:03,900
‫-: Hi. Within this lecture we are going to see

2
00:00:03,900 --> 00:00:08,900
‫how to connect these views to our coding section.

3
00:00:09,090 --> 00:00:13,470
‫So right now, I have my user interface over here,

4
00:00:13,470 --> 00:00:16,170
‫but nothing happens, when I click on the button

5
00:00:16,170 --> 00:00:19,830
‫or click on the image or click on the label.

6
00:00:19,830 --> 00:00:21,840
‫I want something to happen

7
00:00:21,840 --> 00:00:24,300
‫when I click on the button, right?

8
00:00:24,300 --> 00:00:29,300
‫And I cannot reach my button or my image or my label,

9
00:00:29,880 --> 00:00:31,230
‫in the coding section.

10
00:00:31,230 --> 00:00:35,490
‫I don't have anything in my viewController.swift right now.

11
00:00:35,490 --> 00:00:39,960
‫And that is where I'm going to write my code, right?

12
00:00:39,960 --> 00:00:44,130
‫But in here I only have something called viewDidLoad

13
00:00:44,130 --> 00:00:46,890
‫and we are going to see what it is later on.

14
00:00:46,890 --> 00:00:48,630
‫But I don't have my image.

15
00:00:48,630 --> 00:00:51,480
‫I don't have my button in here.

16
00:00:51,480 --> 00:00:55,050
‫And we are going to see how to have those.

17
00:00:55,050 --> 00:00:57,030
‫In the viewController.swift,

18
00:00:57,030 --> 00:01:00,150
‫we are just going to connect those views

19
00:01:00,150 --> 00:01:02,610
‫to our viewController.swift.

20
00:01:02,610 --> 00:01:03,780
‫And in order to do that

21
00:01:03,780 --> 00:01:07,800
‫I'm going to click on this, to open another editor.

22
00:01:07,800 --> 00:01:09,840
‫And if you click over here

23
00:01:09,840 --> 00:01:13,830
‫you can choose whatever you want to display

24
00:01:13,830 --> 00:01:16,440
‫in the second editor, like this.

25
00:01:16,440 --> 00:01:20,310
‫So you can choose viewController.swift from here,

26
00:01:20,310 --> 00:01:23,670
‫and you can display view controller on the right hand side

27
00:01:23,670 --> 00:01:26,070
‫and you can display the main storyboard

28
00:01:26,070 --> 00:01:28,530
‫on the left hand side.

29
00:01:28,530 --> 00:01:33,030
‫Again, if you couldn't open this, you can come over here.

30
00:01:33,030 --> 00:01:36,300
‫You can choose whatever you want from here,

31
00:01:36,300 --> 00:01:38,730
‫whatever file you want from here.

32
00:01:38,730 --> 00:01:42,873
‫Okay? And here I already have my main.storyboard.

33
00:01:44,040 --> 00:01:47,040
‫And for example, if you click on this image,

34
00:01:47,040 --> 00:01:50,460
‫if you hold your control key in your keyboard,

35
00:01:50,460 --> 00:01:54,840
‫you can drag and drop this image to your class.

36
00:01:54,840 --> 00:01:59,280
‫And as you can see, it shows me where I can drop this. Okay?

37
00:01:59,280 --> 00:02:00,810
‫So I can't drop this.

38
00:02:00,810 --> 00:02:03,870
‫I cannot drop this outside of my class.

39
00:02:03,870 --> 00:02:06,450
‫And we are going to see what a class is later on.

40
00:02:06,450 --> 00:02:07,440
‫Don't worry about it.

41
00:02:07,440 --> 00:02:12,210
‫But right now I'm just dropping it below my class

42
00:02:12,210 --> 00:02:16,380
‫but not in my override function over here.

43
00:02:16,380 --> 00:02:21,380
‫I'm just dropping this under my class, this way.

44
00:02:21,900 --> 00:02:24,600
‫And it asks me for a name.

45
00:02:24,600 --> 00:02:27,300
‫So whatever I write over here,

46
00:02:27,300 --> 00:02:31,560
‫it will be the name of my image in my code.

47
00:02:31,560 --> 00:02:35,130
‫So right now I'm choosing a name for my view.

48
00:02:35,130 --> 00:02:38,160
‫I'm going to go for imageView. Okay?

49
00:02:38,160 --> 00:02:42,713
‫And we are going to do this V as capitalized.

50
00:02:42,713 --> 00:02:46,110
‫So this is a big V, imageView.

51
00:02:46,110 --> 00:02:49,620
‫So this is a general convention in programming.

52
00:02:49,620 --> 00:02:52,473
‫I'm going to talk about that later on.

53
00:02:53,550 --> 00:02:56,820
‫And you have to choose outlet over here

54
00:02:56,820 --> 00:03:00,360
‫if it's not already chosen, and that's it.

55
00:03:00,360 --> 00:03:02,550
‫If I say connect right now,

56
00:03:02,550 --> 00:03:05,340
‫it will just take this imageView,

57
00:03:05,340 --> 00:03:08,583
‫and it'll define this as an imageView, okay?

58
00:03:10,140 --> 00:03:14,490
‫And right now I can hit enter to create more space over here

59
00:03:14,490 --> 00:03:19,490
‫because I'm going to justify more objects in here, later on.

60
00:03:19,920 --> 00:03:24,300
‫And for example, if you just have misspelled imageView

61
00:03:24,300 --> 00:03:27,990
‫and if you want to change the name of the imageView.

62
00:03:27,990 --> 00:03:29,520
‫If you delete this

63
00:03:29,520 --> 00:03:33,780
‫and if you define this one more time using drag and drop

64
00:03:33,780 --> 00:03:35,613
‫it'll break your code.

65
00:03:36,870 --> 00:03:38,370
‫And don't do that right now.

66
00:03:38,370 --> 00:03:43,170
‫If you have written something else by mistake, that's okay.

67
00:03:43,170 --> 00:03:46,140
‫But I'm going to show you how to change this anyway,

68
00:03:46,140 --> 00:03:50,340
‫because this is a common error that we have come across

69
00:03:50,340 --> 00:03:52,890
‫with the new starting students.

70
00:03:52,890 --> 00:03:56,280
‫They misspell things and they try to change the name

71
00:03:56,280 --> 00:03:58,200
‫and they break their code.

72
00:03:58,200 --> 00:04:00,450
‫Why do they break their code?

73
00:04:00,450 --> 00:04:02,610
‫Because once you connect an image,

74
00:04:02,610 --> 00:04:06,900
‫or once you connect any view in your class,

75
00:04:06,900 --> 00:04:11,900
‫in your app, in your swift file here, it makes a connection.

76
00:04:13,080 --> 00:04:16,410
‫And we can use this connection outlets

77
00:04:16,410 --> 00:04:19,980
‫in order to see this connections, okay?

78
00:04:19,980 --> 00:04:22,170
‫So if I delete this connection,

79
00:04:22,170 --> 00:04:26,070
‫it'll be okay for me to delete or change this.

80
00:04:26,070 --> 00:04:30,003
‫But without doing that, I break my code.

81
00:04:30,900 --> 00:04:33,510
‫So for any reason, don't do this

82
00:04:33,510 --> 00:04:35,910
‫but I'm going to show you how to do that.

83
00:04:35,910 --> 00:04:38,850
‫For any reason, if you want to change your name,

84
00:04:38,850 --> 00:04:42,090
‫if you want to change this imageView's name,

85
00:04:42,090 --> 00:04:44,820
‫you have to break the connection first

86
00:04:44,820 --> 00:04:46,680
‫and then delete this line,

87
00:04:46,680 --> 00:04:50,940
‫and then just do the whole thing one more time, like this.

88
00:04:50,940 --> 00:04:52,530
‫I'm breaking this

89
00:04:52,530 --> 00:04:56,220
‫and now I see an empty circle over here

90
00:04:56,220 --> 00:04:58,710
‫which means that I can delete this.

91
00:04:58,710 --> 00:05:03,710
‫And then I can redefine this again by doing the same thing,

92
00:05:04,500 --> 00:05:07,877
‫dragging and dropping and saying imageView. Okay?

93
00:05:09,000 --> 00:05:12,507
‫So this is how you create an imageView.

94
00:05:14,220 --> 00:05:18,300
‫And I believe we are down with the imageView.

95
00:05:18,300 --> 00:05:22,080
‫Next thing to do is to decide whether

96
00:05:22,080 --> 00:05:25,620
‫we define this label in our code or not.

97
00:05:25,620 --> 00:05:27,600
‫And I don't need this label, right,

98
00:05:27,600 --> 00:05:30,270
‫because I'm going to click on this change button

99
00:05:30,270 --> 00:05:31,800
‫and the image will change.

100
00:05:31,800 --> 00:05:35,010
‫So I'm going to definitely need the button

101
00:05:35,010 --> 00:05:36,900
‫and the image view itself,

102
00:05:36,900 --> 00:05:41,900
‫but I'm not going to use label in any way in my code.

103
00:05:41,910 --> 00:05:45,870
‫If I wanted to change the color or the text of the label,

104
00:05:45,870 --> 00:05:47,970
‫I will definitely define this,

105
00:05:47,970 --> 00:05:50,880
‫but right now I'm going to go for the button.

106
00:05:50,880 --> 00:05:54,600
‫So if you drag and drop the button over here, okay,

107
00:05:54,600 --> 00:05:57,704
‫below the function or above the function,

108
00:05:57,704 --> 00:06:01,260
‫it'll create an action for you.

109
00:06:01,260 --> 00:06:04,290
‫As you can see, it gives the option of action

110
00:06:04,290 --> 00:06:05,640
‫when you define a button

111
00:06:05,640 --> 00:06:09,060
‫because that's what buttons are created for,

112
00:06:09,060 --> 00:06:12,270
‫you click on them and something will happen.

113
00:06:12,270 --> 00:06:17,270
‫So choose the action and name this buttonClicked. Okay?

114
00:06:17,880 --> 00:06:19,380
‫So if you say connect,

115
00:06:19,380 --> 00:06:22,800
‫this will create a function for you.

116
00:06:22,800 --> 00:06:26,700
‫Now I'm actually done with connecting my view.

117
00:06:26,700 --> 00:06:28,650
‫So let me close this down.

118
00:06:28,650 --> 00:06:32,400
‫And let me go back to my viewController.swift.

119
00:06:32,400 --> 00:06:37,400
‫So here I have my image view, and here I have my function.

120
00:06:37,530 --> 00:06:40,440
‫So we don't know what is a function right now

121
00:06:40,440 --> 00:06:41,310
‫but that's okay.

122
00:06:41,310 --> 00:06:45,180
‫It's basically doing something when something happens

123
00:06:45,180 --> 00:06:49,173
‫and we are going to see what it is in the next lecture.