0
1
00:00:00,350 --> 00:00:00,660
All right.
1

2
00:00:00,690 --> 00:00:08,750
So, now that we've completed designing our user interface, we're finally ready to start doing some programming.
2

3
00:00:08,880 --> 00:00:15,720
And we're going to be writing some code to allow us to change some of the properties of those User Interface
3

4
00:00:15,750 --> 00:00:19,280
Elements that we've added earlier on.
4

5
00:00:19,350 --> 00:00:26,010
Now we already know that when we select any of these User Interface Elements, such as these Image Views or
5

6
00:00:26,010 --> 00:00:31,490
the button, we can head over to the Attribute Inspector and change its properties.
6

7
00:00:31,500 --> 00:00:39,420
So, for example, if I wanted this leftmost Image View to show the DiceTwo image rather than the DiceOne
7

8
00:00:39,420 --> 00:00:47,220
image, all I have to do is to select the User Interface Element that I want to change, which is this one
8

9
00:00:47,340 --> 00:00:52,200
right here, and then I can simply type a different image.
9

10
00:00:52,200 --> 00:00:55,440
So, for example, I wanted to show DiceTwo,
10

11
00:00:55,650 --> 00:01:02,230
well, then I would tell it that the image for this Image View should be DiceTwo instead of DiceOne.
11

12
00:01:02,340 --> 00:01:10,260
But if you imagine that our app is already running on a user's iPhone, say, a million miles away because
12

13
00:01:10,260 --> 00:01:12,210
they downloaded it from the App Store,
13

14
00:01:12,480 --> 00:01:19,310
we can then get a copy of their app and change it in Xcode and then send them the new version, right?
14

15
00:01:19,320 --> 00:01:21,060
This doesn't work.
15

16
00:01:21,060 --> 00:01:28,050
So in our Main.storyboard, we're essentially designing all the components that need to be on the screen.
16

17
00:01:28,230 --> 00:01:32,450
And while we're designing it, we're able to change a lot of these properties.
17

18
00:01:32,610 --> 00:01:38,580
But if we need to change these properties on the fly while the app is running, then we're going to have
18

19
00:01:38,580 --> 00:01:40,330
to resort to code.
19

20
00:01:40,350 --> 00:01:47,580
So let's change this back to our DiceOne and let's figure out how we can do exactly the same thing
20

21
00:01:47,940 --> 00:01:51,380
but using only our code.
21

22
00:01:51,420 --> 00:01:57,130
So, firstly, our code file is going to be this one, the ViewController.swift.
22

23
00:01:57,540 --> 00:02:04,680
And when you create any Xcode project, it always comes with some template code for you to get started
23

24
00:02:04,680 --> 00:02:05,010
with.
24

25
00:02:05,610 --> 00:02:10,710
Now, notice how these are actually two completely separate files.
25

26
00:02:10,710 --> 00:02:17,010
The ViewController.swift is our code file and the Main.storyboard is our design file.
26

27
00:02:17,010 --> 00:02:23,640
Now, given that we can only write our code in this ViewController file, how can we access the components
27

28
00:02:23,760 --> 00:02:26,340
in the Main.storyboard file?
28

29
00:02:26,340 --> 00:02:30,720
Well, here's where something called the assistant editor comes in handy.
29

30
00:02:31,290 --> 00:02:37,170
So if you open up the Main.storyboard and head over to the right corner, here you see a number of
30

31
00:02:37,170 --> 00:02:41,010
lines and we can adjust the editor options.
31

32
00:02:41,280 --> 00:02:46,770
So if you click on it, you can go ahead and select the Assistant View.
32

33
00:02:46,770 --> 00:02:51,370
What this means is that we have our design file on the left.
33

34
00:02:51,480 --> 00:02:58,590
So if you take a look up here, you can see that we're inside the Dicee iOS13 project and inside the
34

35
00:02:58,590 --> 00:03:00,170
Main.storyboard file.
35

36
00:03:00,630 --> 00:03:06,900
But on the right here, you can see that it's automatically figured out that the companion code file is
36

37
00:03:06,900 --> 00:03:09,290
the ViewController.swift file.
37

38
00:03:09,390 --> 00:03:15,870
So that's what's showing on the right. In order for us to be able to refer to specific User Interface
38

39
00:03:15,900 --> 00:03:18,060
Elements in our design file,
39

40
00:03:18,180 --> 00:03:25,160
we have to create something that's called a IB outlet or an Interface Builder outlet.
40

41
00:03:25,170 --> 00:03:33,090
So this Main.storyboard is also known as the Interface Builder because we're using it to build the
41

42
00:03:33,090 --> 00:03:34,560
User Interface.
42

43
00:03:34,560 --> 00:03:44,280
And so in order to create our IB outlet, all we have to do is to hold down the control button on our
43

44
00:03:44,280 --> 00:03:51,300
keyboard, not the command button, and then we're going to click on the Image View DiceOne, and then we're
44

45
00:03:51,300 --> 00:03:55,890
gonna drag it over to our code file.
45

46
00:03:55,920 --> 00:04:02,160
Now, make sure that you don't let go until you're ready to drop it. And the place where we want to put
46

47
00:04:02,160 --> 00:04:06,230
it is just below this class ViewController
47

48
00:04:06,230 --> 00:04:11,280
on line 11 and before this override function, viewDidLoad,
48

49
00:04:11,400 --> 00:04:14,400
so anywhere between 11 and 13.
49

50
00:04:14,670 --> 00:04:21,870
And then we're going to let go and we get a pop up asking us what name we should give this connection.
50

51
00:04:21,900 --> 00:04:29,090
Now, this is going to be the name that we'll use in our code file to refer to this specific Image View.
51

52
00:04:29,250 --> 00:04:33,990
I'm going to call it the diceImageView1.
52

53
00:04:34,050 --> 00:04:42,200
Now, notice the way that I've named this. I've started with a word that is completely lowercase
53

54
00:04:42,360 --> 00:04:47,240
and then every subsequent word has the first letter capitalized.
54

55
00:04:47,250 --> 00:04:49,510
Now why do we do this?
55

56
00:04:49,620 --> 00:04:55,390
This is a really easy way of being able to see where each word ends and the next one begins.
56

57
00:04:55,590 --> 00:05:00,670
And you'll see this pretty much commonly across all programming languages not just in Swift.
57

58
00:05:01,350 --> 00:05:08,880
So if we go ahead and click connect, then you'll see that we've created an Interface Builder Outlets.
58

59
00:05:08,970 --> 00:05:16,170
So it's a way for us to be able to access this particular User Interface Element by referring to the
59

60
00:05:16,170 --> 00:05:24,510
name that we gave it which is diceImageView1. Now, this particular way of naming things is called camel
60

61
00:05:24,510 --> 00:05:25,200
casing
61

62
00:05:25,290 --> 00:05:26,640
in programming.
62

63
00:05:26,640 --> 00:05:29,210
Think about a camel and its humps,
63

64
00:05:29,280 --> 00:05:36,000
then you might be able to, with a lot of imagination, see that the first word should be lowercase and
64

65
00:05:36,060 --> 00:05:41,160
every subsequent word is a hump, so it needs to be capitalized.
65

66
00:05:41,160 --> 00:05:47,250
This means that programmers can avoid those situations like those long Twitter hashtags where you can't
66

67
00:05:47,250 --> 00:05:52,200
really tell what it says because all the words are lowercase and you don't know where it starts and
67

68
00:05:52,200 --> 00:05:53,210
where it ends.
68

69
00:05:53,310 --> 00:05:59,190
And similarly, for stationary websites which are called Pen Island, you will have less issues if you were
69

70
00:05:59,190 --> 00:06:06,390
able to keep it camel-cased. Now, coming back to these connections created from the design file to the
70

71
00:06:06,390 --> 00:06:11,610
code file or these Interface Builder connections like this one that we just created,
71

72
00:06:11,610 --> 00:06:15,570
they are a really common source of errors, especially for beginners.
72

73
00:06:15,660 --> 00:06:19,920
So let's say that we've created this IB outlet and at some point, I've decided, you know what,
73

74
00:06:19,920 --> 00:06:26,430
actually, I've made a typo, and now I want to make it read diceImageViewOne, but instead of 1, I want
74

75
00:06:26,430 --> 00:06:28,360
to use the actual word.
75

76
00:06:28,890 --> 00:06:34,680
So now I'm looking at my code and it looks great and there's no errors. But when I actually run my app
76

77
00:06:34,680 --> 00:06:38,930
right now, you'll see that your app will crash. And this is what it looks like.
77

78
00:06:38,940 --> 00:06:44,200
It'll say something like signals SIGABRT and down here, you'll get a whole bunch of stuff being outputted,
78

79
00:06:44,490 --> 00:06:51,420
but if you scroll right to the top, it says, "Terminating app," because of this reason. And the reason is
79

80
00:06:51,420 --> 00:06:57,000
because something is not key value coding-compliant for the key diceImageview1.
80

81
00:06:57,030 --> 00:07:04,110
So looking at this clue, we should be reminded that previously, we had something in here called diceImageView1
81

82
00:07:04,110 --> 00:07:06,690
with that number
82

83
00:07:06,690 --> 00:07:09,990
at the end, but we changed it, right, in the code.
83

84
00:07:10,050 --> 00:07:15,600
Now, what you don't know is that behind the scenes when we create each of these outlets, there's actually
84

85
00:07:15,600 --> 00:07:21,240
code that's being written in the Main.storyboard, and you can view it by right-clicking and opening
85

86
00:07:21,300 --> 00:07:22,800
as Source Code.
86

87
00:07:22,800 --> 00:07:24,440
So we scroll right to the bottom.
87

88
00:07:24,450 --> 00:07:30,930
You can see that one of the connections has a reference to something called a diceImageView1.
88

89
00:07:30,930 --> 00:07:37,800
So that old spelling there. And because we changed it here, it can no longer find it inside this file which
89

90
00:07:37,800 --> 00:07:41,310
is why your app crashes with this particular error code.
90

91
00:07:41,580 --> 00:07:47,520
So I recommend getting really used to seeing this particular type of error when your app crashes and
91

92
00:07:47,520 --> 00:07:50,660
looking at what it is that it has a problem with.
92

93
00:07:50,670 --> 00:07:56,250
So when you do have this issue, then what you want to do is to simply right click and just delete this
93

94
00:07:56,250 --> 00:07:57,180
connection.
94

95
00:07:57,330 --> 00:08:02,280
And now when you run your app, even though this connection is now broken, it won't crash.
95

96
00:08:02,340 --> 00:08:07,500
You can relink it by simply starting from the circle and pointing it back to the element you want
96

97
00:08:07,500 --> 00:08:13,110
to link it to. But in the future, if you actually want to rename one of these outlets or anything else
97

98
00:08:13,110 --> 00:08:14,350
you name for that matter,
98

99
00:08:14,400 --> 00:08:19,200
the best way is to simply right-click on it, and if you're new to Mac that means holding down the control
99

100
00:08:19,200 --> 00:08:24,290
key on your keyboard and clicking on this, and then go to Refactor, Rename.
100

101
00:08:24,480 --> 00:08:29,970
And in this case, it's going to pick up all of the places where this word is used including the
101

102
00:08:29,970 --> 00:08:32,820
Main.storyboard as well as the ViewController.swift.
102

103
00:08:32,910 --> 00:08:38,340
And now if you rename it, it will make the changes everywhere where this name is used.
103

104
00:08:38,340 --> 00:08:43,450
So now when you click rename, then you've done it safely and when you run your app, it won't crash.
104

105
00:08:43,470 --> 00:08:49,380
So just keep in mind this point when you encounter these problems. And remember that when your app crashes,
105

106
00:08:49,380 --> 00:08:55,710
you can always scroll to the very top of the debug area and look at what the reason is. The most useful
106

107
00:08:55,710 --> 00:09:00,030
parts are at the top here. And here, it tells you this particular reason.
107

108
00:09:00,030 --> 00:09:05,070
So when you look at the reason, you can exclude all the parts that are unique to your app, for example,
108

109
00:09:05,160 --> 00:09:11,730
the name of your app and the particular instance, et cetera, and look at the message. So it says something about
109

110
00:09:11,730 --> 00:09:15,610
this class is not key value coding-compliant for this key.
110

111
00:09:15,630 --> 00:09:19,650
Now, this is the same message that it's going to tell everybody that has this problem.
111

112
00:09:19,950 --> 00:09:26,520
So if you go ahead and just copy it and paste it into Google, then you'll find that other people have encountered
112

113
00:09:26,520 --> 00:09:27,830
the same problem,
113

114
00:09:27,870 --> 00:09:33,600
in fact, more than a thousand people, and you'll see people's explanations and solutions for how to solve
114

115
00:09:33,600 --> 00:09:36,750
these problems. Coming back to our code,
115

116
00:09:36,840 --> 00:09:43,260
we've got this line of code that's been written automatically by Xcode when we simply control, dragged
116

117
00:09:43,440 --> 00:09:48,030
and dropped it inside our code file, linking the two files together.
117

118
00:09:48,240 --> 00:09:54,930
When you hover over this little circle, you can see that it's now highlighting the particular element
118

119
00:09:55,000 --> 00:10:01,890
that's actually linked to this particular name. So we can now use this name and change the properties
119

120
00:10:01,950 --> 00:10:09,120
of this particular Image View. And the place where we're going to do it is inside the curly braces of
120

121
00:10:09,210 --> 00:10:12,060
this thing called viewDidLoad.
121

122
00:10:12,180 --> 00:10:19,770
Now, this is what we would call a block of code and it's essentially a bunch of lines of code. Say, currently,
122

123
00:10:19,770 --> 00:10:26,970
it's got two lines of code inside the block and they're all going to be activated depending on a condition.
123

124
00:10:26,970 --> 00:10:30,410
Well, in this case, the condition is when the view loads up,
124

125
00:10:30,420 --> 00:10:37,500
so when your app first shows up on the phone. And what we want to do is we want to change one of the
125

126
00:10:37,500 --> 00:10:43,440
properties of this diceImageView1 when the view loads up.
126

127
00:10:43,440 --> 00:10:50,040
So right now you can see that in our design we've got the first dice image showing up,
127

128
00:10:50,040 --> 00:10:51,050
so DiceOne.png.
128

129
00:10:51,330 --> 00:10:58,840
But I want to be able to show, say, DiceSix as soon as my app loads up. In order to do that,
129

130
00:10:58,890 --> 00:11:07,860
I can use the dot notation. The way that we would write our code is "Who needs to be changed?" Dot. "What
130

131
00:11:07,860 --> 00:11:10,860
property about this thing needs to change?"
131

132
00:11:10,860 --> 00:11:17,050
And finally, after an equal sign, we set the new value, so what it should be changed to.
132

133
00:11:17,160 --> 00:11:22,470
So let's try and apply this. In this case, the "Who" is going to be the diceImageView1.
133

134
00:11:22,470 --> 00:11:29,910
So this one right here. And so we're gonna type 
diceImageView1. And you can see that as soon as I
134

135
00:11:29,910 --> 00:11:37,080
start typing, Xcode is going to search through all the possibilities and bring the most likely possibilities
135

136
00:11:37,140 --> 00:11:38,240
up to the top.
136

137
00:11:38,340 --> 00:11:41,550
And, indeed, this is exactly the one I wanted to type.
137

138
00:11:41,550 --> 00:11:49,140
So now you can hit either the tab key or the enter key for it to insert automatically. And it's a really
138

139
00:11:49,140 --> 00:11:55,890
good idea to use or to completion with Xcode because it means that you don't make silly mistakes like
139

140
00:11:55,890 --> 00:12:02,760
typos where you have a "V" here or you have an "O" here. And another way to tell if you've made a typo is
140

141
00:12:02,760 --> 00:12:09,600
that when you have an actual piece of code that is recognizable by Xcode, it gets highlighted in a different
141

142
00:12:09,600 --> 00:12:10,500
color
142

143
00:12:10,500 --> 00:12:11,840
once you've finished typing it.
143

144
00:12:11,910 --> 00:12:18,750
In this case, it's the sort of dark sea green. But if you make a typo, say, I had a lowercase "V" instead of
144

145
00:12:18,840 --> 00:12:25,370
uppercase V, it doesn't know what it is, and it will give you an error telling you, "Use of unresolved identifier,"
145

146
00:12:25,650 --> 00:12:28,180
which means "I have never seen this thing.
146

147
00:12:28,260 --> 00:12:30,170
I don't know what you're talking about.
147

148
00:12:30,240 --> 00:12:32,340
Check your spelling."
148

149
00:12:32,340 --> 00:12:37,460
So that's another potential downfall that you can avoid by simply using autocomplete.
149

150
00:12:37,500 --> 00:12:44,010
Now, we've got the "Who" we want to change and then we add a dot and we tell it what we want to change
150

151
00:12:44,130 --> 00:12:45,510
about this thing.
151

152
00:12:45,780 --> 00:12:51,150
And in fact, as soon as you write the dot, Xcode actually gives you a whole bunch of things that you
152

153
00:12:51,150 --> 00:12:53,000
can choose from to change,
153

154
00:12:53,010 --> 00:12:56,630
so all the possibilities, but it's a little bit overwhelming.
154

155
00:12:56,880 --> 00:13:04,230
The easier way to do this is to pop up on the Attribute Inspector again and select the element that
155

156
00:13:04,230 --> 00:13:09,390
we want and change, that Image View, and then just simply look at the names of all the properties.
156

157
00:13:09,410 --> 00:13:11,230
So you've got this thing called Image.
157

158
00:13:11,340 --> 00:13:17,640
You've got this thing called Content Mode or Alpha or Background and we can use that name here as well
158

159
00:13:17,760 --> 00:13:18,900
as the "What."
159

160
00:13:18,960 --> 00:13:24,780
So the "Whats" that we want to change in this case is actually that image property.
160

161
00:13:24,780 --> 00:13:32,550
So after the dot, I'm simply going to write image. And you can see that X code also tells me that this
161

162
00:13:32,550 --> 00:13:37,350
is perfectly legal. There is indeed something called image I can change.
162

163
00:13:37,350 --> 00:13:44,580
And down here, it gives you a brief description of what it will do. So by setting this image property,
163

164
00:13:44,670 --> 00:13:51,750
I will change the image displayed in the image view which sounds pretty much exactly like what we want
164

165
00:13:51,750 --> 00:13:53,100
to do, right?
165

166
00:13:53,190 --> 00:13:59,640
And if I scroll around, then you can see that for each of these different properties, it tells me what
166

167
00:13:59,730 --> 00:14:02,580
it will do when I try to change it.
167

168
00:14:02,580 --> 00:14:04,930
But I want to change the image.
168

169
00:14:04,950 --> 00:14:10,700
Now, I've got the "Who I want to change" after the dot. I've got the "What I want to change."
169

170
00:14:10,710 --> 00:14:16,380
And finally, I'm going to add an equal sign and tell it what is the value, what do I want to change it to.
170

171
00:14:16,410 --> 00:14:20,870
So in my case, I want to change it to the dice six image.
171

172
00:14:20,940 --> 00:14:27,240
So this one right here. Now, how can I tell it to change it to that image?
172

173
00:14:27,240 --> 00:14:31,780
Well, there's something really handy called an image literal.
173

174
00:14:31,890 --> 00:14:40,320
And that allows us to define the actual literal image that we want to set as the value of this image
174

175
00:14:40,320 --> 00:14:41,170
view.
175

176
00:14:41,190 --> 00:14:42,390
I'm gonna start typing
176

177
00:14:42,390 --> 00:14:49,350
and I'm gonna write "imageliteral." So all one word and you can see that we've got the image literal being
177

178
00:14:49,350 --> 00:14:52,140
suggested to us. Once that's highlighted,
178

179
00:14:52,140 --> 00:14:57,110
either you can double click on it or you can simply toggle around and hit enter.
179

180
00:14:57,210 --> 00:14:59,910
And now we have a little image that we can select.
180

181
00:14:59,940 --> 00:15:06,240
So if you double click on it, then it pops up with all the possibilities that you can choose from
181

182
00:15:06,300 --> 00:15:09,510
nd I'm going to select the six dice to put in there.
182

183
00:15:09,570 --> 00:15:12,540
So now we've set the who, the what,
183

184
00:15:12,540 --> 00:15:14,400
and finally, the value.
184

185
00:15:14,400 --> 00:15:24,120
And if I run my app right now, once my view loads up, this block of code will trigger and one of the instructions
185

186
00:15:24,150 --> 00:15:27,470
in that block is to change my diceImageView1.
186

187
00:15:27,540 --> 00:15:31,250
This one. It's image property to DiceSix.
187

188
00:15:31,380 --> 00:15:35,940
And you can see that as soon as my app launches, that's exactly what it does.
188

189
00:15:35,970 --> 00:15:43,110
And even though the first dice is shown in our design but, in fact, when our app launches, we see DiceSix
189

190
00:15:43,200 --> 00:15:45,750
because we change it in our code.
190

191
00:15:45,750 --> 00:15:52,350
Now, another important thing to highlight at this point is what we mean by a block of code or when I
191

192
00:15:52,350 --> 00:15:56,490
say write something inside a particular block of code.
192

193
00:15:56,490 --> 00:15:58,800
What does it mean to be inside?
193

194
00:15:58,800 --> 00:16:02,910
So, here we have the same viewDidLoad.
194

195
00:16:02,910 --> 00:16:06,780
And you can see that in between these curly braces,
195

196
00:16:06,780 --> 00:16:09,390
this is where the code will go.
196

197
00:16:09,390 --> 00:16:16,750
So it's a case of when the view loads up, then trigger or the code in between the curly braces.
197

198
00:16:16,740 --> 00:16:21,530
But often you'll have lots of lines of code and it gets a bit confusing
198

199
00:16:21,560 --> 00:16:26,730
if we had to extend it really, really far out this way to keep it all on one line.
199

200
00:16:26,910 --> 00:16:33,330
So often the formatting you'll see in any programming language is something like this where you have
200

201
00:16:33,420 --> 00:16:37,770
the block of code enclosed, again, by curly braces,
201

202
00:16:37,770 --> 00:16:41,410
but the curly braces are now split across multiple lines.
202

203
00:16:41,460 --> 00:16:44,060
But notice that when the brace faces right,
203

204
00:16:44,130 --> 00:16:45,630
that's the opening part,
204

205
00:16:45,660 --> 00:16:47,500
that's the start of the block.
205

206
00:16:47,730 --> 00:16:54,720
And when you see a curly brace facing left, then that's the end of the block of code. And everything in
206

207
00:16:54,720 --> 00:17:00,230
between these two curly braces are the code that will be triggered. And in next code,
207

208
00:17:00,240 --> 00:17:02,220
there's two really helpful tips.
208

209
00:17:02,220 --> 00:17:08,640
One is if you find the closing brace and you just go left and right on it, it will flash to you where
209

210
00:17:08,640 --> 00:17:10,470
the corresponding open brace is.
210

211
00:17:11,040 --> 00:17:16,580
Alternatively, if you double click on the closing brace, it'll actually highlight the entire block.
211

212
00:17:16,590 --> 00:17:22,440
So these are all the lines of code that will be triggered when the view loads up.
212

213
00:17:22,770 --> 00:17:29,420
Now, don't worry too much about some of these other keywords for now like "weak" or "override" or "super."
213

214
00:17:29,430 --> 00:17:33,810
We're going to go through them when we have enough knowledge to understand what they do. But all that
214

215
00:17:33,810 --> 00:17:40,380
we need to know right now is this particular block of code will trigger when the view loads up and we
215

216
00:17:40,380 --> 00:17:47,460
can add as many lines of code as we want into the block in order for the code to happen when the view
216

217
00:17:47,520 --> 00:17:48,090
loads up.
217

218
00:17:48,450 --> 00:17:52,320
So, currently, we're just setting the image of the image view.
218

219
00:17:53,580 --> 00:17:55,530
So here's a challenge.
219

220
00:17:55,560 --> 00:18:00,750
I want you to change the alpha property of this image view.
220

221
00:18:00,840 --> 00:18:08,040
So if we go into the Attribute Inspector after we select this particular image view and I go to the
221

222
00:18:08,160 --> 00:18:12,900
Alpha section, this refers to the transparency.
222

223
00:18:12,990 --> 00:18:18,940
So one means it's completely opaque and zero means it's completely transparent.
223

224
00:18:18,960 --> 00:18:21,890
I want you to set it to point five,
224

225
00:18:21,900 --> 00:18:24,180
so half transparency.
225

226
00:18:24,180 --> 00:18:30,780
How can you do this but not using the Attribute Inspector by using the code?
226

227
00:18:30,780 --> 00:18:38,130
So keeping in mind the Who.What=Value format and keeping in mind what particular property
227

228
00:18:38,130 --> 00:18:44,750
we want to change, try and complete this challenge. if you have managed to successfully complete the challenge,
228

229
00:18:45,060 --> 00:18:51,630
you should be able to see that left-sided image view dim to about half its original opacity, at least
229

230
00:18:51,630 --> 00:18:52,520
compared to the right size
230

231
00:18:52,520 --> 00:18:59,850
as soon as you launch the app. But in the Main.storyboard, you should still see it fully opaque
231

232
00:18:59,970 --> 00:19:02,570
and the Alpha property should still be one.
232

233
00:19:02,580 --> 00:19:04,740
So it's all dependent on your code.
233

234
00:19:08,420 --> 00:19:14,420
Now, I recommend giving these challengers a real good try because these are the moments where you learn,
234

235
00:19:14,510 --> 00:19:18,290
it's not watching tutorials, it's actually giving it a go yourself.
235

236
00:19:18,500 --> 00:19:24,140
But once you're done and if you want to check your solution against mine, then head over to the course
236

237
00:19:24,140 --> 00:19:31,910
links and there will be a link to a solution file on GitHub, and you can scroll through it to see the
237

238
00:19:31,910 --> 00:19:35,210
actual solution and compare it against yours.
238

239
00:19:35,240 --> 00:19:44,300
The next challenge is to set the image of the right-sided dice view by creating an IB Outlet called
239

240
00:19:44,330 --> 00:19:52,580
diceImageView2. Try and think about what you learned in this lesson and change this image to DiceTwo,
240

241
00:19:52,670 --> 00:20:01,790
the second dice image, which is this one, when it loads up, but make sure it still shows DiceOne in
241

242
00:20:01,790 --> 00:20:03,110
your Main.storyboard,
242

243
00:20:03,230 --> 00:20:10,910
and it's only when you run the app does it change that to DiceTwo. And apply what you learn about the
243

244
00:20:10,910 --> 00:20:16,280
Who.What=Value equation and see if you can complete this challenge.
244

245
00:20:19,130 --> 00:20:20,630
And here's the solution.
245

246
00:20:20,630 --> 00:20:26,990
Just as before, we're going to hold down control and click and drag two underneath the previous line
246

247
00:20:27,500 --> 00:20:33,530
and we're going to give this one the same name other than the final number which is
247

248
00:20:33,740 --> 00:20:34,590
diceImageView2.
248

249
00:20:35,000 --> 00:20:37,330
And we're going to click connect.
249

250
00:20:37,340 --> 00:20:41,920
So now we have a reference to that right-sided image view as well as the left.
250

251
00:20:42,020 --> 00:20:47,050
And when our view loads up, we can also tap into the right side,
251

252
00:20:47,150 --> 00:20:51,320
so the diceImageView2 and change its image,
252

253
00:20:51,590 --> 00:20:54,940
and we're going to change it to a another image literal.
253

254
00:20:55,220 --> 00:21:00,610
But this time, we're going to double click and select the DiceTwo image.
254

255
00:21:00,620 --> 00:21:07,530
So now when I run my app, I'm expecting the left one to show the DiceSix, right one to show DiceTwo.
255

256
00:21:07,610 --> 00:21:10,300
And that's exactly what I see.
256

257
00:21:10,310 --> 00:21:10,910
Perfect.
257

258
00:21:11,720 --> 00:21:18,020
While you're learning, it might be helpful to write some comments for your future self in case you take
258

259
00:21:18,020 --> 00:21:22,850
a break and you come back to your code a month later and all of this starts looking like it's a foreign
259

260
00:21:22,850 --> 00:21:28,580
language again, even though right now you know exactly what's going on. The way that programmers do this
260

261
00:21:28,640 --> 00:21:30,060
is through commenting.
261

262
00:21:30,110 --> 00:21:37,550
So we would write two forward slashes and notice how everything I type now will become grade out,
262

263
00:21:37,670 --> 00:21:40,070
so not interpreted as code.
263

264
00:21:40,280 --> 00:21:46,370
And this allows us to leave notes for our future self or for other people who we're collaborating with.
264

265
00:21:46,370 --> 00:21:57,050
So, for example, I might say that an IB Outlets allows me to reference a UI Element, and then maybe downhill,
265

266
00:21:57,050 --> 00:22:01,350
write something like this is the who,
266

267
00:22:01,540 --> 00:22:03,540
and then this is the what,
267

268
00:22:03,580 --> 00:22:05,430
and this is the value.
268

269
00:22:05,470 --> 00:22:09,130
This really depends on you from person to person,
269

270
00:22:09,130 --> 00:22:15,880
people leave different comments. But a well-commented piece of code might make the code look a bit longer,
270

271
00:22:16,030 --> 00:22:22,180
but it does mean that it's easier to understand exactly what's going on without having to spend a lot
271

272
00:22:22,180 --> 00:22:24,720
of brainpower trying to piece it together.
272

273
00:22:24,910 --> 00:22:30,780
Feel free to leave comments to yourself as you go along. But in order to keep the code not overflow,
273

274
00:22:30,970 --> 00:22:36,160
given that I've got such a large font size, I'm actually going to delete these and change all of that
274

275
00:22:36,160 --> 00:22:37,450
back.
275

276
00:22:37,450 --> 00:22:44,170
And we've now learned about changing things in our User Interface programmatically. In the next lesson,
276

277
00:22:44,200 --> 00:22:49,750
we're going to look at how we can detect user interaction and respond to it appropriately. For all of
277

278
00:22:49,750 --> 00:22:50,900
that and more,
278

279
00:22:51,010 --> 00:22:52,140
I'll see you on the next lesson.