1
00:00:04,720 --> 00:00:05,720
What's up everyone.

2
00:00:05,740 --> 00:00:07,750
Joining me here with the slopes dot com.

3
00:00:07,750 --> 00:00:12,820
Welcome back to class and this lesson and we are going to get working on our new feature.

4
00:00:12,820 --> 00:00:13,260
All right.

5
00:00:13,450 --> 00:00:20,350
So Andy what we got so far is being able to just post our thoughts but not being able to really do anything

6
00:00:20,350 --> 00:00:22,010
with them besides Life them.

7
00:00:22,150 --> 00:00:28,320
But our new feature if we check out our mockup we have his comments.

8
00:00:28,420 --> 00:00:28,850
OK.

9
00:00:29,020 --> 00:00:36,640
So you can click on one of our thoughts and we can see here that we have a new little icon in our thoughts

10
00:00:36,820 --> 00:00:42,630
that has a little speech bubble to the note how many comments there are for that particular thought.

11
00:00:42,760 --> 00:00:48,400
And if you click on it and it's going to navigate to this view which displays the comments and displays

12
00:00:48,400 --> 00:00:53,700
the user name the person who made the comment the time stamp and then the comment text.

13
00:00:53,910 --> 00:00:57,370
And at the bottom we have a place where we can add those comments.

14
00:00:57,700 --> 00:00:57,970
All right.

15
00:00:57,970 --> 00:01:03,940
So here's what we're going to be working on in this lesson is getting all of the UI and groundwork laid

16
00:01:05,210 --> 00:01:06,410
and for this to work right.

17
00:01:06,460 --> 00:01:08,350
So let's get to it.

18
00:01:08,350 --> 00:01:14,710
All right so first thing up in our main Visi Let's go ahead and make the modifications to be able to

19
00:01:14,710 --> 00:01:16,740
display the number of comments.

20
00:01:16,870 --> 00:01:23,680
So in mind that storyboard here inside of our stack of view we have our likes image and our likes on

21
00:01:23,700 --> 00:01:25,000
them label.

22
00:01:25,000 --> 00:01:33,400
I'm going to copy and paste the likes image and then I'm going to move it down so that it shifts over

23
00:01:33,400 --> 00:01:41,330
one more and then I'm going to copy and paste the likes and the label and also move it to the bottom.

24
00:01:41,340 --> 00:01:41,760
All right.

25
00:01:41,800 --> 00:01:42,900
Just like that.

26
00:01:42,920 --> 00:01:48,280
Now I want to select this one here and we're going to change the image to an icon.

27
00:01:48,490 --> 00:01:51,310
And let's check if it has any outlets and it currently does not.

28
00:01:51,310 --> 00:01:52,300
So that's good.

29
00:01:52,390 --> 00:02:00,400
Then we're going to grab the label and we are going to see if it has any outlets and it does not either

30
00:02:00,760 --> 00:02:03,410
and that's fine as it is.

31
00:02:03,940 --> 00:02:11,230
I should just select the comment icon again and let's change the content mode to Aspect fit.

32
00:02:11,230 --> 00:02:11,590
There we go.

33
00:02:11,590 --> 00:02:12,620
That looks better.

34
00:02:13,060 --> 00:02:16,960
All right so now we need to go ahead and open up our thought.

35
00:02:17,140 --> 00:02:18,530
Let's see this will be in our view.

36
00:02:18,520 --> 00:02:19,850
We want our thoughts so.

37
00:02:19,960 --> 00:02:28,030
So we're going to add the outlets for this comment here so that we can set the number of likes.

38
00:02:28,100 --> 00:02:37,500
And so I'm going to control and drag here and I'm going to say comments from the label and I say connect

39
00:02:38,650 --> 00:02:45,670
and then we get to close our assistant editor and jump to our thoughts so that swift and here in our

40
00:02:46,570 --> 00:02:59,320
can sell under likes them label I'm going to do comments and label that text is equal to a string and

41
00:02:59,330 --> 00:03:08,620
we're going to say I thought that some comments I'm going to say that and let's let's run it and see

42
00:03:08,620 --> 00:03:09,660
if it's working.

43
00:03:10,150 --> 00:03:13,900
All right going up the log ins when we say G dot com.

44
00:03:13,960 --> 00:03:17,980
One two three four five six and log in.

45
00:03:17,980 --> 00:03:21,580
All right it looks like we got these showing up let's see if these works or I know none of these have

46
00:03:21,580 --> 00:03:29,620
any cutting comments but we can manually change the number of comments here in our database so I'm just

47
00:03:29,620 --> 00:03:37,060
going to slip one at random and said the number of comments to say two and then that should update automatically

48
00:03:37,060 --> 00:03:39,830
in our simulator and yet there we go.

49
00:03:39,820 --> 00:03:43,020
So now we have set the number of comments to 2 for this guy.

50
00:03:43,030 --> 00:03:48,840
All right so it works and we change this back to zero and the update.

51
00:03:49,990 --> 00:03:52,340
And that is back to zero now.

52
00:03:52,450 --> 00:03:54,010
All right so that looks good.

53
00:03:54,010 --> 00:04:01,390
Next thing we want to do is make it so that when we click on one of these we can pass a thought object

54
00:04:01,750 --> 00:04:04,660
to our comments at VC.

55
00:04:04,660 --> 00:04:12,330
So the way to do that is we are going to implement the select row and the prepared for a sec.

56
00:04:12,940 --> 00:04:16,530
But first let's go ahead and add in our main story board.

57
00:04:16,690 --> 00:04:23,960
Let's go to an ad that B women zoom out a little bit here pull this guy appear.

58
00:04:24,280 --> 00:04:28,630
And then we're going to drag in a new controller.

59
00:04:28,940 --> 00:04:31,000
Put you right here below.

60
00:04:31,390 --> 00:04:35,070
And this segue came from our button here.

61
00:04:35,100 --> 00:04:43,780
But for the add comments AVC we are going to control and drag from our view controller and go to this

62
00:04:43,780 --> 00:04:48,320
new one and to show all right to give it a segue identifier.

63
00:04:48,330 --> 00:04:49,800
So I selected the segue.

64
00:04:50,010 --> 00:04:54,890
And here in the identifier we're going to say two comments.

65
00:04:55,100 --> 00:04:55,490
OK.

66
00:04:55,540 --> 00:04:57,480
Now one will need that here in just a minute.

67
00:04:57,720 --> 00:05:01,470
And then we're going to create a controller file for someone to write the our control or folder and

68
00:05:01,470 --> 00:05:06,660
say new file go to Koka touch class iOS and then next.

69
00:05:06,690 --> 00:05:15,720
And this is going to be called comments Visi and next and create.

70
00:05:15,720 --> 00:05:16,530
All right very good.

71
00:05:16,520 --> 00:05:22,230
I don't want to delete all the stuff that we're not using and get rid of that save that.

72
00:05:22,320 --> 00:05:23,780
Jump back into our main PC.

73
00:05:23,810 --> 00:05:31,610
Or I'm sorry the main storyboard and we are going to select the controller Goodwins identity and Specter

74
00:05:31,610 --> 00:05:35,480
change of the class to two comments visi.

75
00:05:36,900 --> 00:05:37,510
All right.

76
00:05:37,770 --> 00:05:45,240
And then under our comments VC Like I said we want to be able to pass from our main Visi a fact object.

77
00:05:45,390 --> 00:05:52,010
So here and we're going to create a header for variables.

78
00:05:52,140 --> 00:05:57,790
And here we're going to say Laar thought of type thought.

79
00:05:57,960 --> 00:05:58,420
OK.

80
00:05:58,830 --> 00:06:03,060
And we were going to implicitly unwrap that and see here.

81
00:06:03,240 --> 00:06:08,970
Then back in Maine we see more we're going to do is when we select one of the thoughts from the table

82
00:06:08,970 --> 00:06:17,430
of view we are going to grab the thought from our thoughts array corresponding to that item in the Table

83
00:06:17,430 --> 00:06:19,990
View and pass it to our comments.

84
00:06:20,010 --> 00:06:25,820
Vc the way to do that is first we need to implement a couple of methods.

85
00:06:25,860 --> 00:06:31,650
So it's like the row at this is the function that is called When you click on one of the table view

86
00:06:31,740 --> 00:06:32,530
items.

87
00:06:32,760 --> 00:06:40,350
And so here we're going to do is we're just going to say perform Segway with identifier and the identifier

88
00:06:40,920 --> 00:06:44,380
string is two comments.

89
00:06:44,460 --> 00:06:47,170
That's the identifier that we set for that segue.

90
00:06:47,430 --> 00:06:54,360
And our center where we were going to be sending in the Segway is the thoughts

91
00:06:57,150 --> 00:07:02,640
array and the item at the index path that road.

92
00:07:03,110 --> 00:07:03,940
OK.

93
00:07:04,440 --> 00:07:08,720
And then we need to prepare for the segues I say prepare for segue.

94
00:07:08,940 --> 00:07:12,070
And this method is called Right before any segue.

95
00:07:12,390 --> 00:07:17,160
And we need to do a check because we have a couple of segues coming from this view controller so let's

96
00:07:17,160 --> 00:07:26,310
do a check for the Segway identifier so we're in see if a Segway identifier is equal to and the identifier

97
00:07:26,310 --> 00:07:28,160
that we want is two comments.

98
00:07:28,320 --> 00:07:36,890
So if we are going to the comments Visi then we're going to say if that Destination DC is equal to segue

99
00:07:36,890 --> 00:07:39,530
to that destination.

100
00:07:39,730 --> 00:07:47,610
Right so we're we're creating a variable for the destination B C in this case the comments of B C and

101
00:07:47,610 --> 00:07:49,850
we are casting it as a common.

102
00:07:50,850 --> 00:07:55,120
We're getting reference to our destination where we're going we're getting a reference to that view

103
00:07:55,200 --> 00:08:03,380
controller and then we're going to say if that thought is equal to sender as a thought.

104
00:08:03,690 --> 00:08:04,150
OK.

105
00:08:04,290 --> 00:08:06,810
So we're saying our center is going to be a thought.

106
00:08:06,810 --> 00:08:09,570
The thing that we send in our Segway is a thot.

107
00:08:09,990 --> 00:08:17,400
And then we say and then we're going to assign the destination Visi Dot thought equal to the thought

108
00:08:17,400 --> 00:08:18,510
that we send.

109
00:08:18,510 --> 00:08:23,900
So now we're saying the thought that we send from this controller we are going to set the destination

110
00:08:23,910 --> 00:08:30,020
Visi which is this controller This thought we are setting to the one that we send over.

111
00:08:30,020 --> 00:08:30,410
OK.

112
00:08:30,540 --> 00:08:36,340
So basically we're passing this thought from our main C to this Fisi and setting it equal to this variable

113
00:08:36,360 --> 00:08:37,670
in this view controller.

114
00:08:37,810 --> 00:08:38,670
OK.

115
00:08:39,270 --> 00:08:41,110
And that looks good.

116
00:08:41,220 --> 00:08:42,210
That should do it.

117
00:08:42,600 --> 00:08:48,050
So now when we click on one of the simulator here I want to click on one of these.

118
00:08:48,050 --> 00:08:54,810
We're going to say wait to the comments AVC and the comments AVC will now have the thought that we clicked

119
00:08:54,840 --> 00:08:55,600
on.

120
00:08:55,830 --> 00:09:02,220
And the reason we're going to need the thought that we'd click on is so that we can reference the subcollection

121
00:09:02,220 --> 00:09:09,360
of comments that we are going to create for each document when we add a comment to that document.

122
00:09:09,360 --> 00:09:13,110
So now let's go ahead and create the comments AVC interface.

123
00:09:13,170 --> 00:09:20,040
So jumping back to our mockup we have it's pretty simple we just have a table view and then down on

124
00:09:20,040 --> 00:09:23,170
the bottom we have a text field and a button.

125
00:09:23,250 --> 00:09:27,370
So let's do it jump into our main storyboard file.

126
00:09:27,630 --> 00:09:35,460
Going to zoom in here to our comments the see and I'm going to do a search for the table view and drag

127
00:09:35,460 --> 00:09:39,820
that in and kind of put it right up here in the corner.

128
00:09:40,080 --> 00:09:46,530
You can drag it down a little bit and then down here at the bottom we're going to put in a custom of

129
00:09:46,560 --> 00:09:52,180
you UAV you and this is going to hold our text field and our button.

130
00:09:52,410 --> 00:09:56,430
We're going to put it right down here at the bottom and I'm going to constrain it.

131
00:09:56,440 --> 00:10:04,480
I'm going to say zero from the left bottom and right and we're going to set the height to 44 and add

132
00:10:04,480 --> 00:10:10,890
those four constraints and I'm going to do a search for a text field and I'm going to drag that into

133
00:10:10,900 --> 00:10:17,840
the view and I'm going to try out it's a proper attributes inspector I'm going to change the color too

134
00:10:18,230 --> 00:10:19,220
dark gray.

135
00:10:19,220 --> 00:10:27,620
The Funt to custom and Avenir next change the size to 14.

136
00:10:27,890 --> 00:10:29,090
And that looks good.

137
00:10:29,090 --> 00:10:34,150
We're going to put a placeholder text of add comment on that.

138
00:10:35,300 --> 00:10:39,780
And I think that looks good maybe drop the font size a little bit more.

139
00:10:39,800 --> 00:10:40,840
Maybe 12.

140
00:10:41,050 --> 00:10:42,070
Good.

141
00:10:42,290 --> 00:10:50,120
All right and then I'm going to go ahead and add constraints I want to say 20 from the left 20 from

142
00:10:50,120 --> 00:10:58,250
the right and then I'm going to center it vertically in the container and we go and then we're going

143
00:10:58,250 --> 00:10:59,890
to get rid of the border.

144
00:10:59,900 --> 00:11:05,630
So right here am with the attributes inspector going to set the border style to it and then I'm going

145
00:11:05,630 --> 00:11:17,060
to pull in a button for our Send button and I'm going to change that to a type of add contact just going

146
00:11:17,060 --> 00:11:19,630
to use the the default here.

147
00:11:19,670 --> 00:11:20,900
Nothing too fancy.

148
00:11:21,110 --> 00:11:26,260
And we're going to change the tent color to our dark gray.

149
00:11:26,820 --> 00:11:27,350
OK.

150
00:11:27,500 --> 00:11:29,660
And we're going to constrain this.

151
00:11:29,790 --> 00:11:35,850
You heard me talk from the left or the right and center it vertically in container.

152
00:11:36,080 --> 00:11:37,520
And that should do it.

153
00:11:37,620 --> 00:11:38,300
All right maybe.

154
00:11:38,300 --> 00:11:44,000
I think this that comment should be a little bit bigger actually going to change that to 13 maybe 13.

155
00:11:44,000 --> 00:11:45,020
Looks good.

156
00:11:45,020 --> 00:11:46,560
All right that looks good.

157
00:11:47,360 --> 00:11:49,220
OK so now we need our prototype cell.

158
00:11:49,230 --> 00:11:49,550
Right.

159
00:11:49,670 --> 00:11:53,960
So I'm going to search for a pro to see here.

160
00:11:54,260 --> 00:11:55,420
Table.

161
00:11:55,450 --> 00:11:56,590
Table use.

162
00:11:56,680 --> 00:11:59,840
Let's see here we go.

163
00:11:59,990 --> 00:12:07,930
Drop that in and I'm just going to make the height and I said that to about 85 looks good.

164
00:12:08,480 --> 00:12:15,200
And we can actually if we take a look at our mockup you can see that we have a username a time stamp

165
00:12:15,230 --> 00:12:16,150
and a comet.

166
00:12:16,220 --> 00:12:23,030
And if we take a look at our main Visi table view we have a user name a time stamp and a comment pretty

167
00:12:23,030 --> 00:12:23,830
similar.

168
00:12:23,870 --> 00:12:30,480
So I'm thinking we just save us some time here and we grab the username here.

169
00:12:30,530 --> 00:12:37,980
The time stamp and the text and we copy it and then jumped onto our table B-cell.

170
00:12:37,990 --> 00:12:41,960
Make sure you have content view selected and say paste.

171
00:12:41,990 --> 00:12:48,730
All right so now we have those three elements and just rearrange these a little bit.

172
00:12:49,440 --> 00:12:55,260
Let's see here jack that up there move the username up here.

173
00:12:55,920 --> 00:12:58,790
That's good.

174
00:12:58,800 --> 00:13:04,700
You know it's if these have any constraints you trailing you know I was curious of all of these constraints

175
00:13:04,700 --> 00:13:08,490
actually and there you go.

176
00:13:08,720 --> 00:13:18,050
All right so we are going to constrain to the left zero and from the top let's go eight and add those

177
00:13:18,050 --> 00:13:23,390
two constraints and then we're going to control drag from the time stamp to our username name label

178
00:13:23,390 --> 00:13:29,480
and when to say center vertically and then I'm going to constrain from the left and we're going to say

179
00:13:29,590 --> 00:13:31,130
8.

180
00:13:31,340 --> 00:13:32,770
Now pop that up right there.

181
00:13:33,080 --> 00:13:38,000
And then for this guy I'm just going to constrain zero and zero.

182
00:13:38,090 --> 00:13:41,030
And I think that looks good as is.

183
00:13:41,030 --> 00:13:44,190
I'm just going to say 10 and a half and seven is fine.

184
00:13:44,270 --> 00:13:48,140
I'm going to add those four constraints and we are good to go.

185
00:13:48,680 --> 00:13:54,320
So let's go ahead and open up our comments that we see in our assistant editor and create our Iby outlets

186
00:13:54,700 --> 00:14:01,420
hold option and click on comments Visi And let's go ahead and get our table views.

187
00:14:01,420 --> 00:14:10,160
We want to control and drag and say table view that's an outlet and going to make a little space here

188
00:14:10,580 --> 00:14:16,010
and add a header for outlets just because that's just what I like to do.

189
00:14:16,010 --> 00:14:18,830
Just a little styling preference on my part.

190
00:14:19,910 --> 00:14:25,620
And then I'm going to create a ibl from our comment text.

191
00:14:25,620 --> 00:14:29,650
Heres what to say and comment.

192
00:14:30,200 --> 00:14:38,650
Text that's an outlet and then we grab our button and get it creating action and action from our buttons.

193
00:14:38,690 --> 00:14:39,880
I was going to be an action.

194
00:14:39,880 --> 00:14:45,180
I'm going to say send or add comment.

195
00:14:46,290 --> 00:14:47,460
Tapped.

196
00:14:47,490 --> 00:14:49,770
That's an action message connect.

197
00:14:50,490 --> 00:14:57,090
And just in case we need it later I'm actually going to McCay outlet for the container of you for our

198
00:14:57,780 --> 00:15:03,830
textfield down here and I'll call this key board you.

199
00:15:04,290 --> 00:15:04,550
All right.

200
00:15:04,560 --> 00:15:09,420
So I think we got all of the outlets for the main airport for our comments visi.

201
00:15:09,810 --> 00:15:15,920
Next thing I want to do is get a custom class for our comment cell here.

202
00:15:15,970 --> 00:15:16,250
OK.

203
00:15:16,350 --> 00:15:22,930
So I'm going to come up to view and when I right click and see a new file I do a kobo touch class next.

204
00:15:23,130 --> 00:15:26,550
And this is going to be a subclass of wide table view.

205
00:15:26,580 --> 00:15:32,420
So I'm going to call this comment cell and say next.

206
00:15:32,760 --> 00:15:33,510
And create

207
00:15:36,430 --> 00:15:41,300
and that's good we aren't going to be using the set selected method so when I delete that delete this

208
00:15:41,300 --> 00:15:47,350
code here and save it and then we're going to jump into main story board I'm actually going to open

209
00:15:47,350 --> 00:15:54,290
it in the assistant editors with the whole option and click on I mean does storyboard and then connect

210
00:15:54,290 --> 00:15:56,890
them here to our comments.

211
00:15:57,070 --> 00:16:06,770
See I'm going to select our cell and go to his identity inspector and change the class to comment.

212
00:16:06,820 --> 00:16:12,580
So and now we can add our outlets to our custom comments so class.

213
00:16:12,590 --> 00:16:21,250
So you're going to say outlets and we're going to add our user name because I feel somewhat controlling

214
00:16:21,250 --> 00:16:28,240
and dragging from here and saying user name text and that's an outlet.

215
00:16:28,310 --> 00:16:29,920
Then the time stamp

216
00:16:32,990 --> 00:16:37,260
text outlet and lastly

217
00:16:39,720 --> 00:16:40,340
comment

218
00:16:43,270 --> 00:16:47,530
and connect and that's good.

219
00:16:47,540 --> 00:16:54,010
So now we have our IBL is hooked up to our custom Cell class so we're going to close our assistant editor.

220
00:16:54,540 --> 00:16:54,780
All right.

221
00:16:54,790 --> 00:16:59,580
I think I think we're going to call a good for this lesson right here in the next lesson we will continue

222
00:16:59,820 --> 00:17:05,790
adding comment class and the rest of the table view methods and delegates and everything else that we

223
00:17:05,790 --> 00:17:08,610
need to get this ready right and so I'll see you in the next one.