1
00:00:07,780 --> 00:00:08,720
Hey everyone.

2
00:00:08,720 --> 00:00:09,570
How y'all doing.

3
00:00:09,590 --> 00:00:12,130
Johnny B here with slopes dot com.

4
00:00:12,140 --> 00:00:16,600
And in this lesson we are going to continue with our SMAC chat app.

5
00:00:16,610 --> 00:00:21,260
We are going to create the had channel view in this lesson.

6
00:00:21,260 --> 00:00:26,990
All right so let me see if I can pull up our mockups one second.

7
00:00:27,000 --> 00:00:28,400
You can open these up

8
00:00:34,250 --> 00:00:38,150
and this is what we are going to build right now.

9
00:00:38,150 --> 00:00:38,420
All right.

10
00:00:38,420 --> 00:00:42,940
It's just another model similar to our profile model.

11
00:00:42,980 --> 00:00:50,600
We have a title we have a couple of text fields a button to create the channel and one to close it.

12
00:00:50,600 --> 00:00:57,410
And we'll also have the touch just recognize it to dismiss like the like the profile one.

13
00:00:57,410 --> 00:00:59,910
So let's get to it.

14
00:00:59,990 --> 00:01:06,150
We are going to again create a view controller file with Sid.

15
00:01:06,200 --> 00:01:14,090
So here and the controller put them in a right click and say new file and do a Cocco touch class and

16
00:01:14,090 --> 00:01:15,470
saying next.

17
00:01:15,830 --> 00:01:28,460
And what do we call this and channel Visi and also create a file then next and create and then I'm going

18
00:01:28,460 --> 00:01:37,700
to grab these and drop it into it's Zeb's folder and let's go and just get to get cracking on this.

19
00:01:37,730 --> 00:01:39,260
This is a peer.

20
00:01:39,260 --> 00:01:43,630
All right so let's go ahead and look for a UI view.

21
00:01:43,840 --> 00:01:50,630
And this is going to be the container to hold hold all of the UI elements to me and UI elements like

22
00:01:50,630 --> 00:01:53,730
the labels and the text fields and such.

23
00:01:53,780 --> 00:01:56,090
And I was going give it a background.

24
00:01:56,120 --> 00:01:57,770
We got that weird bug again.

25
00:01:57,800 --> 00:02:03,950
So we're going have to leave this file and then go back into the add channel c that we are going to

26
00:02:03,950 --> 00:02:10,850
give this a little bit of an off colored white so that we can view it and let's go ahead and constrain

27
00:02:10,850 --> 00:02:11,430
it right now.

28
00:02:11,440 --> 00:02:21,070
I'm going to say 20 from the left 20 from the right school about maybe 150 from the top.

29
00:02:21,650 --> 00:02:26,760
And then we're going to set the height equal to about 320

30
00:02:29,410 --> 00:02:32,940
C Java this version.

31
00:02:33,090 --> 00:02:38,790
I think that's a little too far from the top so I suggest that you go back to size Inspektor top space

32
00:02:38,800 --> 00:02:41,220
to say maybe 80.

33
00:02:41,570 --> 00:02:43,130
And I think that looks pretty good.

34
00:02:43,460 --> 00:02:46,940
All right so now let's go ahead and add in those elements.

35
00:02:46,940 --> 00:02:54,790
And actually if we take a look at this you know what I was going to I was going to cheat I was going

36
00:02:54,790 --> 00:03:03,070
to copy those from our profile view but let's just let's just do it.

37
00:03:03,130 --> 00:03:10,070
All right so let's go ahead and look for a label view of this label is going to come up here.

38
00:03:10,520 --> 00:03:14,500
They're going to need a couple of text fields.

39
00:03:14,810 --> 00:03:24,910
So one text field here another textfield here and we're going to a couple of buttons one button up here

40
00:03:24,910 --> 00:03:33,120
and one button down here and then we're going to need a couple of views to be our divider lines cases

41
00:03:33,150 --> 00:03:39,970
you can chop that down right here and hold option and drag to make a copy of it actually you know what

42
00:03:39,970 --> 00:03:40,780
let's delete that.

43
00:03:40,810 --> 00:03:46,930
And first of all set all the properties up on this and then we'll copy it.

44
00:03:47,350 --> 00:03:51,230
All right so this is going to be that blue color that we've been using.

45
00:03:51,670 --> 00:04:03,790
And let's go ahead and set some sizes on this with is 250 and the height is to make two of those cup

46
00:04:03,880 --> 00:04:10,960
controls or commencing command B to make your copy just drop that right down here and then for these

47
00:04:10,960 --> 00:04:21,940
two let's grab both of these text fields and here in the color we're going to change the color of the

48
00:04:21,940 --> 00:04:25,240
font to the purple.

49
00:04:25,240 --> 00:04:29,320
The font is custom and Helvetica new is fine.

50
00:04:29,680 --> 00:04:33,970
And then we're going to set none for the border style here.

51
00:04:34,360 --> 00:04:36,910
And then let's put some placeholder text in there.

52
00:04:36,910 --> 00:04:37,970
This one is.

53
00:04:38,170 --> 00:04:43,590
This is the the name of the channel.

54
00:04:44,080 --> 00:04:50,060
And then this one right here is the description.

55
00:04:50,190 --> 00:04:51,170
Right.

56
00:04:51,480 --> 00:04:58,530
So just move those over here and then let's change this up here.

57
00:04:58,530 --> 00:05:05,020
This is going to say create channel K can change the color too.

58
00:05:05,070 --> 00:05:06,280
I keep doing that.

59
00:05:06,360 --> 00:05:07,080
Click here.

60
00:05:07,080 --> 00:05:14,910
That's right right one purple and font that's going to be custom get a new.

61
00:05:14,910 --> 00:05:21,600
Let's bump that up to maybe like 22 and the style is bold.

62
00:05:21,800 --> 00:05:22,090
OK.

63
00:05:22,100 --> 00:05:26,290
And then I'm going to press command equal to size it.

64
00:05:27,010 --> 00:05:33,210
And then let's get right here we can get rid of the button text and under image.

65
00:05:33,210 --> 00:05:41,460
This is going to be close button and you can drag that right here and let's go ahead and constrain it

66
00:05:41,490 --> 00:05:48,390
over here from the top it from the right width and height is good.

67
00:05:48,780 --> 00:05:53,680
And then let's go ahead and throw these in a stack for you.

68
00:05:53,700 --> 00:06:02,730
So the name textfield description textfield and the two dividers and someone to say down here in bed

69
00:06:02,760 --> 00:06:08,940
in stack and that's going to throw off the size of our divider views like it usually does.

70
00:06:08,940 --> 00:06:10,830
So now we have to do some constraints.

71
00:06:10,830 --> 00:06:15,390
All right so we're going to select all four of these elements to sit there because we're all going to

72
00:06:15,390 --> 00:06:26,500
be with of two hundred and fifty that I set the height Manzie Manzi.

73
00:06:26,980 --> 00:06:28,890
I think I set the height.

74
00:06:29,170 --> 00:06:32,290
OK let's try that again with.

75
00:06:32,490 --> 00:06:34,140
Two hundred and fifty.

76
00:06:34,140 --> 00:06:34,980
There we go.

77
00:06:35,400 --> 00:06:45,720
And then with the two views selected constrain the height to two you can going to add two constraints.

78
00:06:45,710 --> 00:06:49,200
That looks better right now with that stack you selected.

79
00:06:49,200 --> 00:06:55,030
Let's go ahead and give us some spacing Maybe you like 12 maybe a little bit more.

80
00:06:55,050 --> 00:06:57,030
Something like 18.

81
00:06:57,040 --> 00:06:58,560
See how that looks.

82
00:06:58,680 --> 00:07:00,470
Maybe a little too much.

83
00:07:00,780 --> 00:07:03,170
Let's try 15.

84
00:07:03,200 --> 00:07:07,640
I think this still might be a little too much let's try 14.

85
00:07:07,680 --> 00:07:07,890
All right.

86
00:07:07,890 --> 00:07:08,570
Now it's pretty good.

87
00:07:08,700 --> 00:07:14,140
I'm going to take that and you agree here and us do this button here this.

88
00:07:14,470 --> 00:07:16,040
See here.

89
00:07:16,140 --> 00:07:33,510
The text is create channel the background color is our blue color the text color is white and the font

90
00:07:33,600 --> 00:07:39,610
is custom Helvetica new and the style is bold.

91
00:07:39,870 --> 00:07:41,350
Looks good.

92
00:07:41,420 --> 00:07:49,800
Now let's go ahead and set some constraints for our size the width is 250 and the height is 50.

93
00:07:49,910 --> 00:08:00,180
Can add two constraints center horizontally in container add one constraint and then set it from the

94
00:08:01,020 --> 00:08:02,700
bottom 20

95
00:08:05,270 --> 00:08:06,300
actually.

96
00:08:06,330 --> 00:08:07,990
Don't set this.

97
00:08:08,150 --> 00:08:10,240
Now we can set this one and that's fine.

98
00:08:10,370 --> 00:08:11,240
OK.

99
00:08:12,050 --> 00:08:20,880
Now we're going to do is we're going to go ahead and constrain this top one so maybe 40 from the top

100
00:08:20,880 --> 00:08:29,040
we'll see how that looks and then we'll set it horizontally in container that looks good on the stack.

101
00:08:29,070 --> 00:08:37,820
You can see how centered horizontally and vertically looks right now looks pretty good.

102
00:08:37,860 --> 00:08:40,800
I think this stack go up a little bit.

103
00:08:40,870 --> 00:08:48,660
So let's go ahead and come over here to our size inspector and find the align center to Y and see maybe

104
00:08:48,690 --> 00:08:50,780
minus 10.

105
00:08:50,780 --> 00:08:51,160
There we go.

106
00:08:51,160 --> 00:08:53,440
I think that looks that looks better.

107
00:08:53,570 --> 00:08:54,530
Yeah.

108
00:08:54,690 --> 00:08:54,890
All right.

109
00:08:54,890 --> 00:09:02,370
And then our create channel button we can set the class for this one to be surrounded button and set

110
00:09:02,370 --> 00:09:07,420
the corner radius to 5 on that looks good.

111
00:09:07,830 --> 00:09:08,530
All right.

112
00:09:08,670 --> 00:09:15,570
Let's go ahead and switch the background color on the container view back to white.

113
00:09:16,200 --> 00:09:19,050
And then we need to add in our background view.

114
00:09:19,050 --> 00:09:26,040
So here in the library I'm grabbing a view and I'm dragging it over here into the hierarchy and placing

115
00:09:26,040 --> 00:09:29,410
it above or behind the front of you.

116
00:09:29,410 --> 00:09:29,860
OK.

117
00:09:30,150 --> 00:09:37,620
And I'm just going to rename this background you B.G. view and then I'm going to control and drag to

118
00:09:37,620 --> 00:09:44,140
the Super view and say leadings paste a container control and drag trailing space to a container control

119
00:09:44,150 --> 00:09:50,560
and drag space to container control and drag and bottom space to container.

120
00:09:50,910 --> 00:09:55,730
And that's essentially the same thing as clicking on this and saying all of these.

121
00:09:56,320 --> 00:10:03,140
But the reason I do it that way is because then I have control over which what I'm setting the top and

122
00:10:03,150 --> 00:10:04,480
left and right constraints too.

123
00:10:04,500 --> 00:10:09,650
If you do it in here it just automatically tries to set it to the nearest neighbor OK.

124
00:10:10,020 --> 00:10:15,240
And then with the back can be selected I'm going to select our size inspector and set each of these

125
00:10:15,360 --> 00:10:24,480
two zeros so zero here Zero here zero here and zero here.

126
00:10:24,480 --> 00:10:24,680
All right.

127
00:10:24,690 --> 00:10:30,060
And then we're going to wow with the second to be selected go to its attributes Inspektor change the

128
00:10:30,060 --> 00:10:41,220
background to black and the Alpha to 0.4 and then select the Super view and the main view here and change

129
00:10:41,250 --> 00:10:44,400
its background color to clear color.

130
00:10:44,520 --> 00:10:45,960
All right it's looking pretty good.

131
00:10:45,990 --> 00:10:47,770
I'm going to save that.

132
00:10:47,940 --> 00:10:53,770
And now let's go ahead and add the Iby outlets and some of the actions for this.

133
00:10:53,850 --> 00:10:59,450
For this view it's going to hold the option and write or hold option and click on the channel beside

134
00:10:59,530 --> 00:11:08,610
of the file and then we're going to go ahead and add some had some of these actions and I guess we need

135
00:11:08,790 --> 00:11:12,770
to delete this on used code here.

136
00:11:12,800 --> 00:11:15,610
I'm going to start with the close motile button.

137
00:11:15,620 --> 00:11:21,010
I want to control and drag and say close mode all pressed.

138
00:11:21,310 --> 00:11:30,070
I'm going to set that to an action and connect then we're going to need outlets for that name and description.

139
00:11:30,070 --> 00:11:34,920
So he appeared that tompion to say outlet's whips out.

140
00:11:35,050 --> 00:11:45,580
Let's And with the name textfield selected I'm going to control and drag and say name text connect I

141
00:11:45,830 --> 00:11:46,520
say

142
00:11:49,220 --> 00:11:58,160
Chan description or just Chan desk for short hand connect and then I'm going to select the background

143
00:11:58,160 --> 00:12:05,600
view and control and drag and say be all right to stick there and then while we're here we'll go ahead

144
00:12:05,600 --> 00:12:09,750
and create the action for the Create channel.

145
00:12:10,010 --> 00:12:15,760
Even though we're not going to get to it this lesson create channel preste.

146
00:12:16,040 --> 00:12:21,050
And that's an action and connect.

147
00:12:21,050 --> 00:12:21,400
All right.

148
00:12:21,410 --> 00:12:23,800
So go ahead and go back to our standard editor.

149
00:12:23,840 --> 00:12:27,130
Open up our ad channel VCDs Swift.

150
00:12:27,710 --> 00:12:30,520
And for the close model we know how to do that.

151
00:12:30,530 --> 00:12:33,850
That's easy just to dismiss.

152
00:12:34,260 --> 00:12:37,490
It's true and completion is new.

153
00:12:37,570 --> 00:12:38,500
Very good.

154
00:12:38,940 --> 00:12:41,530
And this one we're going to ignore for now.

155
00:12:41,690 --> 00:12:46,870
So the rest of this is just going to be some UI visual set up.

156
00:12:46,940 --> 00:12:53,300
So we're going to create a function here called the phone set up by you

157
00:12:56,710 --> 00:12:58,130
and we're going to hear it.

158
00:12:58,130 --> 00:13:04,810
We're going to set the placeholder attribute in font color and then we're also going to create the tapestry

159
00:13:04,880 --> 00:13:09,090
recognizer for that background view so that you can tap on it and dismiss that.

160
00:13:09,110 --> 00:13:09,610
All right.

161
00:13:09,770 --> 00:13:11,000
So let's get to it.

162
00:13:11,000 --> 00:13:19,290
First off let's go ahead and do the DA touch gesture recognizer and say let close touch equal and that's

163
00:13:19,290 --> 00:13:24,710
can be a UI tap gesture recognizer hand.

164
00:13:24,710 --> 00:13:28,280
See here we need the target and selector.

165
00:13:28,650 --> 00:13:32,260
But go let's go ahead and create the function first.

166
00:13:32,570 --> 00:13:40,490
So this is going to be sorry to say at Objective-C and the function we're going to say Close tap and

167
00:13:41,470 --> 00:13:53,270
then we're passing a recognizer of type you I tap gesture recognizer and all we're going to do here

168
00:13:53,300 --> 00:13:59,950
also is say dismiss animated true completion.

169
00:14:00,840 --> 00:14:01,500
Ready.

170
00:14:01,520 --> 00:14:03,600
So there's our selectors.

171
00:14:03,830 --> 00:14:16,720
The target itself and the action is hash tag selector and then we're going to say had channel Visi got

172
00:14:17,060 --> 00:14:18,600
close tap.

173
00:14:18,660 --> 00:14:19,410
All right.

174
00:14:19,490 --> 00:14:20,730
Perfect.

175
00:14:20,840 --> 00:14:32,030
And then we need to add the gestures around CBG view that and gesture recognize the recognizable Rowenta

176
00:14:32,060 --> 00:14:35,580
and is of course close touch.

177
00:14:35,660 --> 00:14:42,210
All right so now let's go ahead and add the the placeholder font color.

178
00:14:42,380 --> 00:14:51,050
So if you remember how to do that we're going to say name text not attribute to good placeholder.

179
00:14:51,130 --> 00:14:54,870
And so we need to create and attribute ID string to do that.

180
00:14:55,200 --> 00:14:58,860
So we're going to say this this true beauty and string.

181
00:14:59,090 --> 00:15:01,920
And we're going to initialize with here.

182
00:15:01,990 --> 00:15:05,370
This guy right here with a string and then it's attributes.

183
00:15:05,370 --> 00:15:05,610
All right.

184
00:15:05,610 --> 00:15:16,900
So the string is going to be let's use this for the name texture and say name and the attributes here.

185
00:15:17,280 --> 00:15:18,920
That's going to be you.

186
00:15:19,420 --> 00:15:34,680
And this as true muted string key stopped for ground color says the key and the value is our SMAC purple

187
00:15:34,680 --> 00:15:36,900
placeholder color that we created.

188
00:15:36,900 --> 00:15:37,280
All right.

189
00:15:37,350 --> 00:15:41,940
And then I'm going to copy this for the description placeholder as well.

190
00:15:41,940 --> 00:15:46,910
And so we're just going to say challan desk right here.

191
00:15:47,150 --> 00:15:51,730
And the string is description.

192
00:15:51,810 --> 00:15:55,690
And that should do it right there.

193
00:15:56,580 --> 00:15:58,250
All right so now let's.

194
00:15:58,300 --> 00:16:04,620
Oh don't forget to set up the view or to call the function that we just created.

195
00:16:04,650 --> 00:16:07,000
All right looking good.

196
00:16:07,330 --> 00:16:15,180
So go ahead and make it so that we can actually make this model appear right so in our channel BCU that's

197
00:16:15,180 --> 00:16:22,200
where that's where it's called from someone opened up our channel PC-DOS with the file and then I don't

198
00:16:22,200 --> 00:16:29,960
believe we have a B action for the addition of new channels so we're going to need to add that so a

199
00:16:29,970 --> 00:16:35,370
holding option and clicking on that storyboard are going to open the assistant editor and close this

200
00:16:35,370 --> 00:16:42,960
left panel and the right panel will give us a little more room and then see here if we get the background

201
00:16:42,990 --> 00:16:45,250
could snap into place there goes.

202
00:16:45,270 --> 00:16:45,480
All right.

203
00:16:45,480 --> 00:16:49,010
So this is the button we want the ADD channel button.

204
00:16:49,020 --> 00:16:52,790
So I'm going to control and drag and let's put it

205
00:16:56,930 --> 00:17:08,090
put it right here and we're going to say add channel pressed and this is an action and touch up inside

206
00:17:08,150 --> 00:17:09,750
and connect.

207
00:17:09,750 --> 00:17:11,300
All right.

208
00:17:11,300 --> 00:17:16,010
So just like we did here with the profile VC we're going to do the same thing.

209
00:17:16,010 --> 00:17:19,390
We are going to instantiate the controller.

210
00:17:19,420 --> 00:17:23,700
It's going to go back to our standard editor first one on our left and right panes.

211
00:17:23,780 --> 00:17:25,750
Now we can leave it right closed.

212
00:17:25,770 --> 00:17:36,910
All right we're gonna instantiate the view controls from the let add channel call and channel B C stanchly

213
00:17:37,430 --> 00:17:45,350
and then we're going to set the modal presentation style to say add a chain.

214
00:17:45,390 --> 00:17:53,090
No dupped modal presentation style is equal to dobbed custom.

215
00:17:54,020 --> 00:17:56,480
And then we're going to just presented and say present

216
00:17:59,370 --> 00:18:06,180
is the one we want present controller to present is add channel.

217
00:18:06,700 --> 00:18:09,940
Animated is true and completion is new.

218
00:18:10,340 --> 00:18:15,640
I can say that and I think that's all we need let's go ahead and run it.

219
00:18:18,640 --> 00:18:21,250
All right clicking here on the menu.

220
00:18:21,420 --> 00:18:31,950
And he dismisses that dismisses the placeholder font color looks great.

221
00:18:32,450 --> 00:18:41,300
Let's make sure those look good create channel doesn't do anything as expected.

222
00:18:41,300 --> 00:18:41,850
All right.

223
00:18:42,020 --> 00:18:43,490
That looks real good.

224
00:18:44,630 --> 00:18:46,660
And I think that's all we are going to do.

225
00:18:46,660 --> 00:18:52,550
And in this video and the next video some exciting stuff we're going to work with sockets for the first

226
00:18:52,550 --> 00:18:53,110
time.

227
00:18:53,270 --> 00:18:59,000
And you guys are going to see how cool it is and actually how easy it is also to talk with sockets and

228
00:18:59,000 --> 00:19:05,420
have that open line of communication between our client app and the server so that we can see real time

229
00:19:05,420 --> 00:19:08,150
changes so we're excited for that.

230
00:19:08,210 --> 00:19:13,990
And I will see you next time right after I commit and at our changes.

231
00:19:13,990 --> 00:19:14,490
All right.

232
00:19:14,690 --> 00:19:15,140
See you later.