1
00:00:07,070 --> 00:00:10,510
Hey everybody what's going on this is Caleb with slopes dot com.

2
00:00:10,540 --> 00:00:16,840
And in this video we're going to connect some things to our view controller so that we can modify them

3
00:00:16,870 --> 00:00:23,590
we can connect them to our view and update our view based on the data passed in from our model which

4
00:00:23,590 --> 00:00:24,490
is really really cool.

5
00:00:24,490 --> 00:00:27,140
We're going to tie it all together in this video.

6
00:00:27,280 --> 00:00:31,430
So go ahead and pull open your X code project and you know what.

7
00:00:31,450 --> 00:00:36,760
Before we begin I never once have used did receive memory warning so I'm going to go ahead and just

8
00:00:36,760 --> 00:00:41,620
delete that and get rid of it and you can also go ahead and delete this comment in view to load.

9
00:00:41,620 --> 00:00:46,490
We're not going to need that as well and go into main storyboard.

10
00:00:46,810 --> 00:00:53,620
So what we're going to do is we're basically going to just create an app that presents information about

11
00:00:53,620 --> 00:00:59,760
a certain Apple product that we are going to hard code into the project so to display this data.

12
00:00:59,770 --> 00:01:05,860
I'm going to go ahead and basically pass in what's called a UI label and the label is just a way of

13
00:01:05,860 --> 00:01:07,680
displaying static text.

14
00:01:07,700 --> 00:01:08,170
OK.

15
00:01:08,430 --> 00:01:11,100
Well I guess it's not static because it can be updated.

16
00:01:11,170 --> 00:01:15,550
It says static but we can update the text property whenever we want.

17
00:01:15,550 --> 00:01:21,280
So let's go ahead and let's drag on a label and you can see if you drag it on the main view that will

18
00:01:21,280 --> 00:01:25,420
eliminate if you drag it on the little subdue that will illuminate as well.

19
00:01:25,430 --> 00:01:32,680
OK so we can just drag it on like so and we can go ahead and center it there and we can stretch it make

20
00:01:32,680 --> 00:01:34,570
it look nice and pretty.

21
00:01:34,570 --> 00:01:35,590
Very very cool.

22
00:01:35,590 --> 00:01:40,120
So I'm going to go ahead and actually copy and paste this a few times because each label is going to

23
00:01:40,120 --> 00:01:41,820
say something a little bit different.

24
00:01:41,980 --> 00:01:44,360
Go ahead and copy and paste it drag it beneath.

25
00:01:44,440 --> 00:01:45,850
Copy and paste.

26
00:01:45,850 --> 00:01:48,070
Don't really worry about the alignment.

27
00:01:48,070 --> 00:01:50,910
For now we're going to fix that in just a moment.

28
00:01:51,040 --> 00:01:57,250
And so now we have five labels and to modify them I'm going to go ahead and select all five select the

29
00:01:57,250 --> 00:02:00,570
attributes and inspector and I'm going to center the fun.

30
00:02:00,760 --> 00:02:05,500
And I'm also going to change the font because I don't really like the system font that's provided by

31
00:02:05,500 --> 00:02:07,610
default so you're going to learn how to do that too.

32
00:02:07,800 --> 00:02:13,860
Go ahead and click text click font custom family and then choose whatever font you want.

33
00:02:13,930 --> 00:02:19,210
I particularly like Avenir next and you'll see that in my other target topics I use it all the time.

34
00:02:19,210 --> 00:02:19,870
Click Avenir.

35
00:02:19,870 --> 00:02:25,730
Next we're going to change it to be bold and I'm going to bump it up to maybe size 22.

36
00:02:25,900 --> 00:02:26,540
OK.

37
00:02:26,860 --> 00:02:29,140
Click click OK or done.

38
00:02:29,140 --> 00:02:34,630
And what we're going to do now is we're going to make it really really easy to evenly space and organize

39
00:02:34,690 --> 00:02:37,050
these labels and that's what a stack view.

40
00:02:37,120 --> 00:02:40,540
So we have all five labels here selected and nothing else.

41
00:02:40,810 --> 00:02:45,350
And all we need to do is click right here there's a button that says embed in stack.

42
00:02:45,370 --> 00:02:49,180
So click it and you'll see all the labels go together like that.

43
00:02:49,180 --> 00:02:53,680
Now they're not super pretty they're all smushed together and they're not exactly as tall as our label

44
00:02:53,680 --> 00:02:56,290
here but that's where constraints come into play.

45
00:02:56,290 --> 00:03:01,600
So go ahead and choose the stack view from the document outline and go ahead and just position it about

46
00:03:01,630 --> 00:03:04,420
there and click the pin button.

47
00:03:04,960 --> 00:03:05,690
OK.

48
00:03:05,920 --> 00:03:08,040
We're going to pin it 20 from all sides.

49
00:03:08,030 --> 00:03:16,900
So go ahead and do 20 20 20 and 20 and go ahead and click add four constraints and watch what happens.

50
00:03:16,900 --> 00:03:22,960
You'll see it stretches out to be 20 from all sides of the edge of our label but they are not equally

51
00:03:22,960 --> 00:03:23,710
spaced.

52
00:03:23,710 --> 00:03:26,250
This one is much bigger than the other four.

53
00:03:26,320 --> 00:03:32,050
And to fix that we can go into the attributes and Specter and we can select the distribution dropdown

54
00:03:32,620 --> 00:03:33,530
click fill.

55
00:03:33,580 --> 00:03:37,990
And you can choose what's called Fill equally and watch what happens when I do that.

56
00:03:38,140 --> 00:03:42,520
Boom they're all spaced perfectly evenly which is awesome.

57
00:03:42,520 --> 00:03:46,330
Now we need to update these labels to actually include relevant information.

58
00:03:46,480 --> 00:03:54,760
So I'm going to make this say I really want the K that's just going to have static text.

59
00:03:54,760 --> 00:03:58,340
This label is going to say the iPhone model.

60
00:03:58,540 --> 00:04:00,460
So I'm going to leave that as static text.

61
00:04:00,460 --> 00:04:07,900
I really want the iPhone model an iPhone color case so that's where I like the space gray or silver

62
00:04:07,900 --> 00:04:16,710
might go and we'll say and it costs and will do dollar iPhone.

63
00:04:17,140 --> 00:04:18,430
Price.

64
00:04:18,590 --> 00:04:21,220
Ok now I'm just putting this text here you don't have to.

65
00:04:21,220 --> 00:04:25,450
And we're actually going to override and change everything in here but this is just to show you what

66
00:04:25,450 --> 00:04:26,540
it should look like.

67
00:04:26,560 --> 00:04:30,970
I really want the iPhone model in iPhone color and it cost iPhone price.

68
00:04:30,970 --> 00:04:34,650
Let's let's go ahead and build and run just to make sure our labels are in the right place.

69
00:04:34,690 --> 00:04:39,850
And then after we do that we're going to go ahead and connect these so that the controller can communicate

70
00:04:40,060 --> 00:04:43,050
with the view and pass in data from the model.

71
00:04:43,150 --> 00:04:49,060
OK go ahead and build and run the simulator should pop right up and we should be able to see if this

72
00:04:49,060 --> 00:04:50,690
worked the way we hoped.

73
00:04:50,980 --> 00:04:52,250
So here we go.

74
00:04:52,270 --> 00:04:54,950
It's popping open and beautiful.

75
00:04:54,970 --> 00:04:56,550
That's exactly what we wanted.

76
00:04:56,560 --> 00:04:57,600
That looks great.

77
00:04:57,700 --> 00:04:58,660
So perfect.

78
00:04:58,660 --> 00:05:01,120
We can go ahead and stop the app from running.

79
00:05:01,210 --> 00:05:06,830
And now let's go ahead and let's connect our labels to our view controller OK.

80
00:05:07,060 --> 00:05:13,030
To do that we're going to go ahead and open up what's called the assistant editor and it allows us to

81
00:05:13,030 --> 00:05:17,140
basically view relevant code files to a particular other file.

82
00:05:17,140 --> 00:05:23,320
So this main storyboard connects to the controller does swift file and so go ahead and click this button

83
00:05:23,320 --> 00:05:27,660
here with the two connected rings and it pulls open the assistant editor.

84
00:05:27,670 --> 00:05:28,700
All righty.

85
00:05:28,780 --> 00:05:29,460
So here we go.

86
00:05:29,470 --> 00:05:34,990
And as you can see it automatically presents the code file associated with this controller.

87
00:05:34,990 --> 00:05:40,540
Now since these views are a part of the view controller what we can do is we can actually connect these

88
00:05:40,540 --> 00:05:44,160
directly to the view controller using something called an IP outlet.

89
00:05:44,320 --> 00:05:50,440
OK if I right click from a particular label and then drag you'll see it makes a connection there's a

90
00:05:50,440 --> 00:05:55,720
connection line and it says insert outlet or outlet collection.

91
00:05:55,750 --> 00:05:56,950
Drop it right there.

92
00:05:56,950 --> 00:05:58,090
Above you did load.

93
00:05:58,240 --> 00:06:01,010
And we're going to go ahead and call this iPhone.

94
00:06:01,010 --> 00:06:05,780
How about just lower case iPhone name label.

95
00:06:06,340 --> 00:06:08,470
OK so now that is properly named.

96
00:06:08,470 --> 00:06:14,920
You can tell it's an instance of you label right now that there is a connection between these two.

97
00:06:14,920 --> 00:06:20,500
Now you can see that when I hover over the dot iPhone name label is now accessible to our view controller.

98
00:06:20,500 --> 00:06:25,470
So this is kind of like a connection we have just plugged the label into the view controller.

99
00:06:25,480 --> 00:06:30,280
Next we're going to right click on the iPhone color label and drop it over there.

100
00:06:30,280 --> 00:06:39,260
Call it iPhone color label and connect it you can just press enter or click the connect button and then

101
00:06:39,260 --> 00:06:45,260
finally go ahead and click on the iPhone price label right click drag and drop and call this iPhone

102
00:06:45,920 --> 00:06:52,760
price label click connect to save it and now what we can do is we can actually go ahead and close the

103
00:06:52,760 --> 00:06:59,570
assistant editor go into controller swift and now we can access these labels.

104
00:06:59,570 --> 00:07:03,650
We can set the text property we can even change the color if we wanted to we can do whatever we want

105
00:07:03,920 --> 00:07:09,720
from the controller because remember the controller can take information and it can pass it to the view.

106
00:07:09,740 --> 00:07:14,170
It can also receive information from the model and pass it to the view as well and back and forth.

107
00:07:14,170 --> 00:07:15,030
So and so forth.

108
00:07:15,140 --> 00:07:22,460
So let's go ahead let's think about what we want to do here in view to load which by the way this is

109
00:07:22,460 --> 00:07:28,070
a function that is called whenever the application starts running and the view is first loaded onto

110
00:07:28,070 --> 00:07:28,840
the screen.

111
00:07:29,000 --> 00:07:35,780
It is called what we can do is just like before when we created our model we can create an instance

112
00:07:35,930 --> 00:07:43,010
of Apple product and we can set the labels to have the text properties filled with the information from

113
00:07:43,130 --> 00:07:43,700
that model.

114
00:07:43,700 --> 00:07:46,820
So let's create a constant inside view and load.

115
00:07:46,820 --> 00:07:52,540
Go ahead and type let Apple product equal Apple product.

116
00:07:52,550 --> 00:07:53,260
Whoops.

117
00:07:53,480 --> 00:07:59,450
We need the one with the capital a there to reference the class and go ahead and put a and opening parentheses

118
00:07:59,960 --> 00:08:01,330
and press enter.

119
00:08:01,340 --> 00:08:06,550
Now we can go ahead and give it a name just like before iPhone 10.

120
00:08:06,680 --> 00:08:10,870
The color is going to be space gray of course in a string.

121
00:08:11,150 --> 00:08:15,680
And the price will be nine hundred ninety nine and ninety nine cents.

122
00:08:15,980 --> 00:08:25,060
So now that that is done what we can do is we can call our label so go ahead and call iPhone name label.

123
00:08:25,370 --> 00:08:31,160
And if you look inside of an iPhone name label by putting a dot you can see there are lots of properties

124
00:08:31,460 --> 00:08:33,320
lots of different things we can do.

125
00:08:33,590 --> 00:08:35,880
We can go ahead and set attributed text.

126
00:08:35,900 --> 00:08:41,420
We can set it baseline adjustment we can set the font we can set it to be either enabled or disabled

127
00:08:41,440 --> 00:08:44,240
we can say is it highlighted is there are highlighted text color.

128
00:08:44,330 --> 00:08:49,910
There are so many properties but the one we care about right now is text.

129
00:08:50,130 --> 00:08:50,410
OK.

130
00:08:50,420 --> 00:08:55,670
And let me go ahead and select that the current text that is displayed by the label.

131
00:08:55,760 --> 00:08:59,980
Press enter and set this to be equal to wait for it.

132
00:09:00,110 --> 00:09:01,230
Apple product.

133
00:09:01,360 --> 00:09:11,040
Dot name so we can take the information from our model and pass it to our view and present it using

134
00:09:11,040 --> 00:09:12,120
the view controller.

135
00:09:12,120 --> 00:09:13,580
How cool is that.

136
00:09:13,800 --> 00:09:22,720
Let's go ahead and set up the color and price label as well by typing iPhone color label text equals.

137
00:09:22,860 --> 00:09:26,380
And remember if we look back at our storyboard How is this set up.

138
00:09:26,460 --> 00:09:26,840
We have.

139
00:09:26,840 --> 00:09:32,920
I really want the iPhone model so we can just include the name iPhone X. but this label says in.

140
00:09:32,970 --> 00:09:34,080
And then the color.

141
00:09:34,080 --> 00:09:36,540
So I really want the iPhone X in space Great.

142
00:09:36,750 --> 00:09:39,590
So we should put in the text here to reflect that.

143
00:09:39,600 --> 00:09:43,830
So go ahead and create a string type in and a space.

144
00:09:43,830 --> 00:09:47,040
And now what we're going to do is called string encapsulation.

145
00:09:47,070 --> 00:09:53,550
We can take a value and we can encapsulated in a string using this special syntax forward slash and

146
00:09:53,550 --> 00:09:57,780
then two parentheses inside the parentheses we can pass in any parameter.

147
00:09:57,790 --> 00:09:59,640
Could be a number value.

148
00:09:59,640 --> 00:10:05,250
It could be a string value can be really anything and we can convert it into a string or at least the

149
00:10:05,250 --> 00:10:08,690
closest thing to us to a usable string value.

150
00:10:09,000 --> 00:10:15,220
So what we're gonna do is we're going to go ahead and pass an Apple product dot color.

151
00:10:15,450 --> 00:10:18,780
And now this is going to print out in space gray.

152
00:10:19,140 --> 00:10:20,490
Pretty cool.

153
00:10:20,490 --> 00:10:24,680
Next we have iPhone price label text.

154
00:10:25,020 --> 00:10:30,960
And remember if we go in here we just need to print out the iPhone price but we need that dollar sign

155
00:10:30,960 --> 00:10:32,210
in the front of it right.

156
00:10:32,220 --> 00:10:38,580
So go ahead and go into the controller again and we're going to go ahead and say equals do another string

157
00:10:39,180 --> 00:10:44,060
put a dollar sign and we're going to encapsulate the value of our price.

158
00:10:44,070 --> 00:10:51,990
So go ahead and put a forward slash and to print the CS and pass in Apple product price and you'll notice

159
00:10:51,990 --> 00:10:59,250
that even though it's a double k a number value we can convert it into the text based representation

160
00:10:59,250 --> 00:10:59,910
of that.

161
00:11:00,120 --> 00:11:01,260
So you know what guys.

162
00:11:01,260 --> 00:11:04,000
Believe it or not we are good to go.

163
00:11:04,200 --> 00:11:06,480
Let's go ahead and build and run this and see if it works.

164
00:11:08,460 --> 00:11:10,820
Our simulator's should pop up momentarily.

165
00:11:13,140 --> 00:11:14,160
Here we go.

166
00:11:14,160 --> 00:11:15,160
All right check it out.

167
00:11:15,360 --> 00:11:17,300
Oh look at that it works.

168
00:11:17,730 --> 00:11:18,210
Awesome.

169
00:11:18,210 --> 00:11:20,140
I really want the iPhone X.

170
00:11:20,330 --> 00:11:20,800
Or 10.

171
00:11:20,810 --> 00:11:26,530
Sorry in-space gray and it cost nine hundred ninety nine dollars and 99 cents.

172
00:11:26,550 --> 00:11:33,600
So we are successfully communicating with our view from our model through our view controller.

173
00:11:33,600 --> 00:11:38,980
The watchmaker's at work winding the watches guys very very cool stuff.

174
00:11:39,000 --> 00:11:45,980
This has been a brief overview of how NBC works fundamentally in theory and in practice.

175
00:11:46,050 --> 00:11:53,070
I hope you've learned a lot and stay tuned for future target topics on more advanced topics.