1
00:00:07,510 --> 00:00:08,500
Hey hey everyone.

2
00:00:08,500 --> 00:00:14,470
Welcome back Johnny be here with slopes dot com and it's less than we are going to actually start displaying

3
00:00:14,470 --> 00:00:16,470
and showing our messages.

4
00:00:16,480 --> 00:00:17,170
This is the big one.

5
00:00:17,170 --> 00:00:20,520
This is where our chat app finally looks like a real chat app.

6
00:00:20,650 --> 00:00:24,190
We're going to be displaying channels and now we're going to be displaying messages it's going to be

7
00:00:24,190 --> 00:00:25,540
pretty cool.

8
00:00:25,540 --> 00:00:27,070
All right so let's get started.

9
00:00:27,070 --> 00:00:33,190
We're going to start out with a custom You table yourself so here I'm going to click on view and see

10
00:00:33,190 --> 00:00:37,180
a new file and it's going to be a cocoa touch class.

11
00:00:37,180 --> 00:00:42,190
The subclasses is going to be my table view cell and we're going to call this message.

12
00:00:42,280 --> 00:00:42,990
So.

13
00:00:43,450 --> 00:00:44,310
All right.

14
00:00:44,380 --> 00:00:56,490
Next thing create and then we need to go into storyboard and actually add our table view and table cells.

15
00:00:56,500 --> 00:00:57,080
All right.

16
00:00:57,300 --> 00:01:08,620
So zoom out a little bit to the open are right pain and do a filter for Table View try to drop a table

17
00:01:08,620 --> 00:01:10,200
view in here.

18
00:01:10,360 --> 00:01:16,900
We're going to set it's constrained to be zero from with constraints unchecked and zero from the left

19
00:01:17,530 --> 00:01:21,730
zero from the top zero from the right hand.

20
00:01:21,820 --> 00:01:27,280
About 30 or so we manage just this later from the bottom and that's because in the next lessons we're

21
00:01:27,280 --> 00:01:31,230
going to be adding a label down here too.

22
00:01:31,240 --> 00:01:35,050
So we'll be able to see who's typing something when they're typing it so that will be critical but we

23
00:01:35,050 --> 00:01:36,670
need to leave a little bit of space for that.

24
00:01:36,670 --> 00:01:44,110
So add those four constraints and then a beta bug we got this happens so if we just click out of the

25
00:01:44,110 --> 00:01:47,620
file and then back in that will be fixed.

26
00:01:47,620 --> 00:01:47,930
All right.

27
00:01:47,950 --> 00:01:50,020
So that's good.

28
00:01:50,030 --> 00:01:52,210
Couple things to set up in the table view.

29
00:01:52,210 --> 00:01:56,440
First off let's go ahead and set the separator style to none.

30
00:01:56,440 --> 00:01:58,780
We don't want any dividing lines.

31
00:01:59,830 --> 00:02:02,470
And then let's go ahead and add a table view cell.

32
00:02:02,730 --> 00:02:03,130
OK.

33
00:02:03,130 --> 00:02:04,920
So here's our table cell.

34
00:02:04,990 --> 00:02:11,130
Let's go ahead and increase the height of it to about 80.

35
00:02:11,170 --> 00:02:12,170
That looks good.

36
00:02:12,250 --> 00:02:22,000
And then let's go ahead and start adding our UI elements that we need if we check out our prototype

37
00:02:22,000 --> 00:02:26,050
or our mockups we can see and see here.

38
00:02:26,050 --> 00:02:34,150
Here we're going to need our image here in the left then a bolded user name slightly smaller time stamp

39
00:02:34,210 --> 00:02:39,680
and then the message text and come so we can use.

40
00:02:39,980 --> 00:02:42,270
Let's get an image in here.

41
00:02:42,380 --> 00:02:45,090
So this image is going to go over here.

42
00:02:48,730 --> 00:02:54,690
We'll set the size for that it's going to be 50 by 50.

43
00:02:55,200 --> 00:02:58,850
That's going to go right up here in the top left.

44
00:02:59,000 --> 00:03:03,060
Then we need a couple of labels three labels actually.

45
00:03:03,410 --> 00:03:12,600
And so we're going to have one label here another label here and then a third label right here.

46
00:03:12,840 --> 00:03:17,530
And normally this bounding rectangle box kind of annoys me that's a bug.

47
00:03:17,580 --> 00:03:21,680
Right now it's actually kind of helpful I'm able to see the outlines of some of these things.

48
00:03:21,690 --> 00:03:21,930
All right.

49
00:03:21,930 --> 00:03:26,870
So let's go ahead and select all three of these labels.

50
00:03:26,910 --> 00:03:33,190
We're going to customize their appearance we're going to change the color to that dark gray color.

51
00:03:33,260 --> 00:03:43,650
The font is going to be custom and Helvetica new and regular is good except for this guy which is going

52
00:03:43,650 --> 00:03:45,720
to be our user name so I'll just put it in.

53
00:03:45,730 --> 00:04:00,900
JOHNNY B has some dummy placeholder text and then we'll set the style to bold go and maybe drop the

54
00:04:00,900 --> 00:04:07,840
font by one end and this one here we're going to drop the size to about 14.

55
00:04:08,490 --> 00:04:12,960
And that looks good will change its dummy font too at times it say like 12.

56
00:04:12,960 --> 00:04:17,310
33 PM looks good.

57
00:04:17,400 --> 00:04:20,240
A press command equal on that one as well going to zoom in here.

58
00:04:20,250 --> 00:04:24,160
Because that would go right.

59
00:04:24,450 --> 00:04:33,220
And then this is going to be our message text and let's drop that down to maybe 15.

60
00:04:33,310 --> 00:04:34,690
I think that looks good.

61
00:04:34,690 --> 00:04:36,970
All right so let's go ahead and constrain these.

62
00:04:37,020 --> 00:04:42,330
So for our image also I want to show you a little trick if you hold down shift and control and then

63
00:04:42,330 --> 00:04:44,650
click on anywhere.

64
00:04:44,730 --> 00:04:50,910
Then you get the kind of the layers of things that you clicked over so if you want to go straight to

65
00:04:50,910 --> 00:04:56,120
your image view you could do that like that instead of having to click and then click click.

66
00:04:56,140 --> 00:04:57,790
You know maybe not getting the right thing.

67
00:04:57,870 --> 00:05:01,640
Just hold control shift and boom you can grab whatever you want.

68
00:05:01,860 --> 00:05:02,170
All right.

69
00:05:02,180 --> 00:05:09,540
Anyways so for this game we're going to set the class is going to be a circle image and we're going

70
00:05:09,540 --> 00:05:19,110
to constrain it was constrained to margins checked left zero top zero within and four constraints.

71
00:05:19,110 --> 00:05:23,730
And then for the for the name we're going to go

72
00:05:26,670 --> 00:05:34,830
let's go let's go 12 from the left and then I'm going to hold control and drag and we're going to say

73
00:05:35,130 --> 00:05:40,430
top so that our top the tops of both of those are lined up.

74
00:05:40,800 --> 00:05:46,590
And then this time label here I'm going to control and direct to Johnny B and space center vertically

75
00:05:47,190 --> 00:05:53,220
and then let's do six from the left of the user name label.

76
00:05:53,220 --> 00:05:55,190
That set looks good.

77
00:05:55,570 --> 00:06:08,550
And then for this guy he goes pull pull him out and we'll go eight from the top 12 from the left and

78
00:06:08,700 --> 00:06:19,740
12 from the right and then we'll set that to the bottom and say add four constraints and then we're

79
00:06:19,740 --> 00:06:26,490
going to get an error here is going to want us to set some vertical hugging compression.

80
00:06:26,490 --> 00:06:28,920
So we're going to let X could do that for us.

81
00:06:28,920 --> 00:06:33,960
I want to see change priority and that should take care of that for us.

82
00:06:33,990 --> 00:06:38,200
So now we got our UI elements that we need.

83
00:06:38,280 --> 00:06:43,050
Let's go ahead and change the table you so class.

84
00:06:43,080 --> 00:06:44,040
We haven't done that yet.

85
00:06:44,040 --> 00:06:50,850
So here at the table your class set it equal to message cell and then the attributes inspector we can't

86
00:06:50,850 --> 00:06:55,360
forget to set the identity of the reuse identifier to get the same message.

87
00:06:55,620 --> 00:06:58,050
So OK that's good.

88
00:06:58,050 --> 00:07:04,050
And then we're going to right click or unsorry hold option and click on the message.

89
00:07:04,050 --> 00:07:10,820
So that's one of the file so that we can hook up our outlets.

90
00:07:10,830 --> 00:07:11,610
All right.

91
00:07:11,680 --> 00:07:12,820
Here we go.

92
00:07:13,050 --> 00:07:20,300
Going to create a little header here outlets and then we're going to control drag from each of the elements.

93
00:07:20,400 --> 00:07:22,970
So here we have the user image

94
00:07:26,150 --> 00:07:30,900
here we have the user name I'm going to go from the hierarchy here.

95
00:07:30,950 --> 00:07:35,360
So user name label

96
00:07:38,900 --> 00:07:45,710
and here from the time stamp I'm going to track over and say time stamp label

97
00:07:48,600 --> 00:07:55,500
and then from the message controlling and dragging and saying message body label

98
00:07:58,790 --> 00:08:00,350
it looks good.

99
00:08:00,370 --> 00:08:06,100
So now when we create our configure cell function we'll have the information that we need to populate

100
00:08:06,160 --> 00:08:07,200
each cell.

101
00:08:07,340 --> 00:08:15,920
So when I close the assistant editor and open our message cell that swift file and it's going to delete

102
00:08:15,940 --> 00:08:20,340
some code we're not doing any selected state for the messages.

103
00:08:20,350 --> 00:08:23,980
So we'll get rid of that and then all we need is a configure cell function.

104
00:08:23,980 --> 00:08:28,890
So when I see func can figure.

105
00:08:29,300 --> 00:08:37,790
So and what we're going to do is we're going to pass into this function a message objects and say message

106
00:08:39,230 --> 00:08:40,180
type message

107
00:08:43,790 --> 00:08:54,660
then we're going to just go ahead and say so the message body label text is going to be equal to the

108
00:08:54,960 --> 00:08:55,840
message

109
00:08:59,380 --> 00:09:10,560
that message the user name label that text is going to be equal to the message

110
00:09:12,940 --> 00:09:21,510
that username the user image.

111
00:09:22,410 --> 00:09:31,200
It's going to be equal to I should say to use an image that image is going to be equal to a UI image

112
00:09:32,670 --> 00:09:35,440
named That's going to be equal to the user.

113
00:09:35,520 --> 00:09:47,190
The message that user avatar and then the background color we're going to use a user image image that

114
00:09:47,790 --> 00:09:56,810
background color is equal to user data service to instance to return a color and the components are

115
00:09:56,850 --> 00:10:03,110
message that Avatar color you go.

116
00:10:03,500 --> 00:10:08,150
And that should do everything except for the time label.

117
00:10:08,380 --> 00:10:14,650
You may have noticed that I'm leaving the timetable out for now just because it requires quite a bit

118
00:10:14,650 --> 00:10:15,610
of conversion.

119
00:10:15,610 --> 00:10:19,780
We have to go from a from a kind of a weird date to the one that we need.

120
00:10:19,810 --> 00:10:21,880
So we're going to cover that in the next lesson.

121
00:10:21,880 --> 00:10:25,640
This lesson we're just trying to get the messages showing.

122
00:10:25,650 --> 00:10:26,260
All right.

123
00:10:26,500 --> 00:10:34,780
So now that we have our custom message cell set up we can go into our chat Visi and we are going to

124
00:10:34,780 --> 00:10:42,160
need a an outlet for our table views to hold option and click on I mean that's storyboard to open up

125
00:10:42,160 --> 00:10:56,130
our assistant editor in here and drag over Ann's table if you can and connect and we're going to close

126
00:10:56,140 --> 00:10:57,440
assistant editor.

127
00:10:57,700 --> 00:10:59,770
And what do we need.

128
00:10:59,770 --> 00:11:00,770
Pop quiz.

129
00:11:01,120 --> 00:11:04,340
We need to conform to a couple of protocols and they are UI.

130
00:11:04,390 --> 00:11:15,220
Table View delegate can you write table the data can and what are we going to do next.

131
00:11:15,220 --> 00:11:20,950
Next up we need to set our delegate and data sources for our table views and see Table View dot

132
00:11:23,650 --> 00:11:32,140
delegate equal to self and table view that data source is equal to self

133
00:11:35,100 --> 00:11:41,180
and then we're going to need to conform to these protocols by adding the required methods right.

134
00:11:41,200 --> 00:11:48,870
So let's go down here and let's say and then.

135
00:11:48,890 --> 00:11:53,090
So for at next path.

136
00:11:53,450 --> 00:12:01,190
And this is where we are going to actually queue up our cell message cells are going to say if let cell

137
00:12:01,200 --> 00:12:13,300
is equal to Table B you dot D Q reuseable cell with identifier string for index path and our identifier

138
00:12:14,080 --> 00:12:20,180
string is message cell for index path.

139
00:12:20,470 --> 00:12:23,370
And we're going to cast that.

140
00:12:23,530 --> 00:12:30,780
And not that we were going to cast that as a message set.

141
00:12:31,660 --> 00:12:40,090
So once we have queued up our our table view cell we're going to say we're going to grab the message

142
00:12:40,090 --> 00:12:41,240
that corresponds with it.

143
00:12:41,260 --> 00:12:50,860
And so if we have messages we're going to say let a message equal message or this instance that messages

144
00:12:51,310 --> 00:12:55,900
and the one we want is index path.

145
00:12:57,000 --> 00:12:57,500
OK.

146
00:12:57,700 --> 00:13:07,950
And then we're going to call cell dog configure and pass into this function that object that message.

147
00:13:08,290 --> 00:13:11,030
And then we're going to return that so.

148
00:13:11,560 --> 00:13:12,300
All right.

149
00:13:12,310 --> 00:13:22,960
And then if we're not able to QSL we're just going to say turn right UI table you so empty your table

150
00:13:22,960 --> 00:13:26,960
you can see this.

151
00:13:27,100 --> 00:13:30,430
And let's see here what do we got going on.

152
00:13:30,430 --> 00:13:31,990
I think this is just going to go away in a second.

153
00:13:31,990 --> 00:13:32,800
There we go.

154
00:13:33,280 --> 00:13:39,490
So we finished up one of our functions the next one we need to know is number of sections and that's

155
00:13:39,700 --> 00:13:41,270
going to be one.

156
00:13:42,040 --> 00:13:45,920
And then finally a number of rows in S..

157
00:13:46,180 --> 00:13:48,330
And so this is just going to be however.

158
00:13:48,580 --> 00:13:58,630
However many messages are currently in our message service message message service instance dot messages

159
00:13:58,750 --> 00:14:02,370
that count could be zero could be 100.

160
00:14:02,620 --> 00:14:08,980
And then the last thing I think that we need to do is here in our get messages when we go and get our

161
00:14:08,980 --> 00:14:11,520
messages we just need to say.

162
00:14:11,680 --> 00:14:20,670
If success then self that table table viewed reload data.

163
00:14:20,890 --> 00:14:26,950
So once we have retrieved messages we're just going to reload our table and load those all up and you

164
00:14:26,950 --> 00:14:27,800
know what I think.

165
00:14:27,820 --> 00:14:29,520
I think that's all we need to do.

166
00:14:29,690 --> 00:14:30,580
Let's let's test this out.

167
00:14:30,580 --> 00:14:31,360
Let's run it.

168
00:14:31,510 --> 00:14:33,580
Let's see if we can actually see our messages

169
00:14:36,820 --> 00:14:44,540
Hey check it is exciting.

170
00:14:44,920 --> 00:14:46,210
Socor.

171
00:14:46,210 --> 00:14:46,540
All right.

172
00:14:46,540 --> 00:14:52,840
So let's let's send a message and I'm going to make this a long message.

173
00:14:52,840 --> 00:14:56,340
This is a long message.

174
00:14:56,770 --> 00:14:58,750
I'm going to copy it.

175
00:14:58,750 --> 00:15:00,100
Can I copy this.

176
00:15:00,140 --> 00:15:03,490
Maybe this is a long message.

177
00:15:03,520 --> 00:15:05,140
I'm just going to do a whole bunch of typing.

178
00:15:05,440 --> 00:15:10,490
And so the point of this is to see if we have an issue which I think we will.

179
00:15:10,660 --> 00:15:12,900
So I'm going to send this.

180
00:15:13,360 --> 00:15:19,660
All right and then we don't have the socket doc on set up so to actually see that message we're actually

181
00:15:19,660 --> 00:15:22,390
going to have to stop and reload.

182
00:15:23,230 --> 00:15:23,730
OK.

183
00:15:23,750 --> 00:15:26,660
Yes so here you see this is a long message.

184
00:15:26,920 --> 00:15:32,050
We need to do some work in our cell to make it so that that actually will show the whole message.

185
00:15:32,200 --> 00:15:36,520
And so we're going to cover a cool little thing that some people a lot of people don't cover in their

186
00:15:36,520 --> 00:15:42,430
chaps is how to make the cell dynamically sized to the height of the text and it's actually not that

187
00:15:42,430 --> 00:15:44,170
hard.

188
00:15:45,430 --> 00:15:52,090
So one thing that we need to do is go back to our main story board and we're going to select our message

189
00:15:52,210 --> 00:15:56,110
label and make sure that the lines is set to zero.

190
00:15:57,010 --> 00:16:06,460
Then back in our chat VCM what we need to do is we need to set a estimated roba height and so we do

191
00:16:06,460 --> 00:16:12,930
that by seeing table view that estimated room height and will say about 80.

192
00:16:13,420 --> 00:16:18,400
And then what we need to do is say table view that

193
00:16:22,060 --> 00:16:30,210
row height and we're just going to you tell it to say your table will be your automatic dimension.

194
00:16:30,220 --> 00:16:30,530
OK.

195
00:16:30,550 --> 00:16:38,050
And so that is what is going to give us the automatic sizing plus having the correct constraint.

196
00:16:38,050 --> 00:16:40,130
So hopefully we've got our constraints right down here.

197
00:16:40,350 --> 00:16:49,290
But basically what you need is just that the that you have a full line of constraints from top to bottom.

198
00:16:49,360 --> 00:16:49,950
Okay.

199
00:16:50,140 --> 00:16:52,450
And and I think we I think we do have that.

200
00:16:52,460 --> 00:16:53,560
Let's go ahead and run this

201
00:16:56,230 --> 00:16:57,030
okay.

202
00:16:57,080 --> 00:16:58,680
And yeah there we go.

203
00:16:59,090 --> 00:17:00,300
So cool.

204
00:17:00,450 --> 00:17:05,780
So now we have our sales actually dynamically sizing to the length of our message.

205
00:17:05,780 --> 00:17:08,100
So that is pretty darn cool.

206
00:17:08,390 --> 00:17:12,840
All right so yeah I mean this looks looks fantastic guys.

207
00:17:13,070 --> 00:17:17,010
So I hope you're pretty happy with what you've gotten so far.

208
00:17:17,090 --> 00:17:18,220
We're not done yet though.

209
00:17:18,310 --> 00:17:25,020
And the next lessons we're going to we're going to do the socket dot on for the channel for the message

210
00:17:25,020 --> 00:17:32,210
is so that we can send a message and see it pop up right away on ours as well as on other devices that

211
00:17:32,210 --> 00:17:33,310
are running the same app.

212
00:17:33,470 --> 00:17:39,470
And so super exciting stuff and excited to show you guys all of that in the next coming lessons.

213
00:17:39,560 --> 00:17:46,390
But for now I'm going to add and commit my changes and then we'll see you all in the next one.