1
00:00:05,810 --> 00:00:11,690
Yo what's up everyone Mark Bryce here at Dover slopes dot com and in this exciting section and video

2
00:00:11,690 --> 00:00:17,120
we're going to start building a brand new app called coater swag and basically the idea of the app is

3
00:00:17,240 --> 00:00:22,210
it's a online store where you can purchase clothing and other items that are programming related.

4
00:00:22,250 --> 00:00:28,770
You know like kind of like our Web site coater swag can go and purchase cool slope swag and stuff.

5
00:00:29,040 --> 00:00:31,920
Anyway let's we're building we're building the app version of it.

6
00:00:32,180 --> 00:00:35,750
And what you're going to learn is you can learn all about table views and collection views basically

7
00:00:35,750 --> 00:00:41,750
how to show lists of data and that's really important because pretty much every app in the world of

8
00:00:41,750 --> 00:00:45,890
any value has to show some type of data whether it's a game like clash Royale where there's a chat room

9
00:00:45,890 --> 00:00:50,000
and showing different pieces of data to your favorite apps like Facebook where it's showing different

10
00:00:50,000 --> 00:00:52,430
people's post those are all types of lists of data.

11
00:00:52,490 --> 00:00:55,210
And so is a core foundational principle.

12
00:00:55,220 --> 00:00:56,540
Let's go ahead and get started.

13
00:00:56,540 --> 00:00:59,200
So first things first we're going to do some good stuff.

14
00:00:59,570 --> 00:01:10,400
So what I'm going to do here is we're going to go into the appropriate directory CD section 5 for me.

15
00:01:10,410 --> 00:01:11,800
You can put this wherever you want.

16
00:01:11,970 --> 00:01:17,460
If you are cloning your own repo you would go to a big bucket or get the a repository and copy that

17
00:01:17,460 --> 00:01:23,790
clone you RL like I have done so here just to show you I've got this new Israel for this brand new repository

18
00:01:23,790 --> 00:01:25,680
that I am bringing in over here.

19
00:01:26,040 --> 00:01:30,340
And what I'm going to do is just clone it down and show what straight from there so.

20
00:01:30,540 --> 00:01:33,770
So here's the A C coder swag project.

21
00:01:33,780 --> 00:01:34,960
Fantastic.

22
00:01:35,070 --> 00:01:38,910
And what we're going to do is first create an X called Project and then we're going to make the X code

23
00:01:38,910 --> 00:01:42,570
project the repository that will push up to.

24
00:01:42,570 --> 00:01:47,990
So let's open up X code beta and or the X code 9 release.

25
00:01:48,000 --> 00:01:53,850
If it is released at this point in time and we're going to create a new X code project single view app

26
00:01:53,850 --> 00:01:57,690
is just fine and we're going to call this code or swag.

27
00:01:58,350 --> 00:02:02,780
And we're not going include any of these just yet.

28
00:02:02,780 --> 00:02:07,320
So we'll leave those unchecked and we're going to put it right here.

29
00:02:09,000 --> 00:02:09,490
Perfect.

30
00:02:09,500 --> 00:02:14,290
Here's our project if I go back to my terminal we should see something in there which we do.

31
00:02:14,360 --> 00:02:21,530
So CD coater swag where you go into the directory and to do it to initialize it as a repository and

32
00:02:21,530 --> 00:02:25,030
then get a remote add origin.

33
00:02:25,100 --> 00:02:28,640
That's what I'm calling my Orjan and I'm putting in the euro.

34
00:02:28,950 --> 00:02:29,190
OK.

35
00:02:29,210 --> 00:02:32,790
So when I do get status now we have some red which is good.

36
00:02:32,840 --> 00:02:42,110
New files get at Dash a get commit dash em and we're going to call this initial commit and get check

37
00:02:42,110 --> 00:02:45,570
out the dash be less than 0 1.

38
00:02:45,590 --> 00:02:47,740
We are creating new branches for all of our lessons here.

39
00:02:47,750 --> 00:02:52,460
You don't have to do that you can create your own branches for features but it's good to have get going

40
00:02:52,580 --> 00:02:52,940
for you.

41
00:02:52,940 --> 00:02:57,530
So now that we got all the setup out of the way let's go ahead and actually start building the project.

42
00:02:57,530 --> 00:03:00,120
So first things first is a little bit of cleanup.

43
00:03:00,160 --> 00:03:05,700
I was cleaning up the view controller as you know we want to make things a purpose and have names.

44
00:03:05,720 --> 00:03:10,010
So and sort of you control we're going to right click and go to rename and we're going to call this

45
00:03:11,150 --> 00:03:22,400
category category B C categories B C category B C categories b c I like that better press enter.

46
00:03:22,400 --> 00:03:24,710
Because again look at the picture there.

47
00:03:24,740 --> 00:03:26,280
We've got categories here.

48
00:03:26,420 --> 00:03:26,720
All right.

49
00:03:26,720 --> 00:03:27,870
And let's talk about that a little more.

50
00:03:27,890 --> 00:03:32,220
So what we have on the screen here is some type of label probably this is what I like.

51
00:03:32,270 --> 00:03:35,120
I like to do when I get the Zions I kind of like to just break it out of my head.

52
00:03:35,120 --> 00:03:37,190
What are these belong to in Interface Builder.

53
00:03:37,190 --> 00:03:39,920
So we've got a label here.

54
00:03:40,400 --> 00:03:45,490
We've got some items here and I know from experience that these are going to be Table View cells.

55
00:03:45,920 --> 00:03:46,820
So this is a cell.

56
00:03:46,850 --> 00:03:48,720
This is a sell sell sell.

57
00:03:48,920 --> 00:03:54,260
And inside of it there's a background image on each one and there's some type of label in the middle

58
00:03:54,260 --> 00:03:58,750
here to describe what it is and then appear with that probably a navigation bar.

59
00:03:59,000 --> 00:04:03,870
So basically when you drill into one of these you could press a back button on the top left and would

60
00:04:03,890 --> 00:04:10,050
take you back and that's the functionality of a navigation controller which is part of the BIOS.

61
00:04:10,070 --> 00:04:15,950
So that's kind of a good overview of what we're going to be doing so let's just mosey on over and do

62
00:04:15,950 --> 00:04:16,560
that.

63
00:04:16,820 --> 00:04:19,340
So I mean storyboard here.

64
00:04:19,550 --> 00:04:24,130
While I also know from experience that I probably want to start off with the navigation controller if

65
00:04:24,170 --> 00:04:27,500
everything's going to be navigating from screen to screen you might as well just get it started.

66
00:04:27,500 --> 00:04:36,980
So what you can do is categories be selected go to editor embed in navigation controller and what you're

67
00:04:36,980 --> 00:04:41,330
going to see here is a new view controller pop up on the screen and then zoom out a little bit here

68
00:04:41,330 --> 00:04:43,030
for you.

69
00:04:43,410 --> 00:04:44,750
Category's B.C..

70
00:04:45,200 --> 00:04:45,770
OK.

71
00:04:45,880 --> 00:04:48,380
And the navigation control I get to put it over here on the right hand side.

72
00:04:48,380 --> 00:04:51,740
So the starting point of the app see this arrow here.

73
00:04:51,920 --> 00:04:55,510
It means that that's the starting view control is actually going to be the navigation controller.

74
00:04:55,610 --> 00:04:56,480
OK.

75
00:04:56,540 --> 00:04:59,990
And on this navigation controller comes with the navigation bar.

76
00:05:00,230 --> 00:05:04,920
So if we look at our image again we know that the navigation bar is this nice red color.

77
00:05:05,290 --> 00:05:09,320
So let's go ahead and see what color this is.

78
00:05:09,360 --> 00:05:11,640
Eighty seven thirty nine forty OK.

79
00:05:11,660 --> 00:05:13,620
Eighty seven thirty nine forty.

80
00:05:13,890 --> 00:05:22,060
So I'm going to go to the navigation bar and on the tent 87 39 40

81
00:05:25,370 --> 00:05:26,720
and it doesn't look quite right.

82
00:05:26,740 --> 00:05:30,740
So I'm a click this navigation bar again and see how the translucence selected I want to turn that off

83
00:05:30,750 --> 00:05:35,480
I don't want it to have that translucent look too I just want it to be more solid so it looks like the

84
00:05:35,480 --> 00:05:37,420
actual window that the designer picked.

85
00:05:37,580 --> 00:05:38,510
OK.

86
00:05:38,510 --> 00:05:43,310
So we got a navigation bar and not automatically said on the categories b c that's because a navigation

87
00:05:43,310 --> 00:05:45,010
controller OK.

88
00:05:45,050 --> 00:05:49,130
It's going to have it's going to host multiple controllers is going to push them on the top push them

89
00:05:49,130 --> 00:05:52,010
on the top push and pop push and pop like a stack.

90
00:05:52,010 --> 00:05:52,470
OK.

91
00:05:52,490 --> 00:05:57,680
And and then they're all going to share a navigation bar and they'll have a title and things like that

92
00:05:57,680 --> 00:05:58,730
as well too.

93
00:05:58,900 --> 00:06:00,140
So really cool.

94
00:06:00,140 --> 00:06:04,010
And what we're going to do here also is this title color.

95
00:06:04,200 --> 00:06:05,850
OK we're going to make it white.

96
00:06:05,930 --> 00:06:11,070
So select white for the title color and then what we can do is on the View Controller here.

97
00:06:11,090 --> 00:06:15,800
The categories Visi see this navigation item you can see this title here.

98
00:06:15,800 --> 00:06:19,480
If you have this item selected here the attributes inspector and you can get a title here.

99
00:06:19,580 --> 00:06:23,480
And if we remember right this coder swak.

100
00:06:23,730 --> 00:06:28,610
So now it's black here which is not the right color but at runtime it will be white because we've said

101
00:06:28,610 --> 00:06:29,570
it to be white.

102
00:06:29,990 --> 00:06:30,800
So this is looking good.

103
00:06:30,800 --> 00:06:33,820
We've gone a little bit in the right direction so far.

104
00:06:34,110 --> 00:06:35,310
So look at it again.

105
00:06:35,330 --> 00:06:40,040
Next thing I want to do is add this label here and it'll square and do that now I'm going to minimize

106
00:06:40,040 --> 00:06:41,480
this a little bit to minimize this.

107
00:06:41,480 --> 00:06:43,050
We can see both.

108
00:06:43,090 --> 00:06:47,820
I like having it visible in front of me as I'm working so I don't have to go back and forth.

109
00:06:48,110 --> 00:06:49,120
OK.

110
00:06:49,940 --> 00:06:50,620
There we go.

111
00:06:50,630 --> 00:06:52,360
It's looking lovely.

112
00:06:53,050 --> 00:06:53,360
OK.

113
00:06:53,390 --> 00:06:55,890
And I've just closed off the navigator on the left hand side.

114
00:06:56,210 --> 00:06:58,420
So we need a label here so let's do that.

115
00:06:58,520 --> 00:07:00,120
So type in the word label at the bottom right.

116
00:07:00,130 --> 00:07:06,440
And the object library and there's a label and it looks like it's a little bit further from the top

117
00:07:06,980 --> 00:07:09,260
just by style wise so that's fine.

118
00:07:09,410 --> 00:07:10,870
Make it a little bit bigger here.

119
00:07:10,970 --> 00:07:16,780
And I'm going make it say shop by category and the attributes inspector.

120
00:07:17,150 --> 00:07:18,980
It's a little bit too small.

121
00:07:19,040 --> 00:07:26,970
And then what I also want to do is I want to I want to move it down give it a different font so it looks

122
00:07:26,970 --> 00:07:28,370
more like the one in the picture.

123
00:07:29,150 --> 00:07:31,670
So let's go to font and change it to Avenir.

124
00:07:31,670 --> 00:07:39,390
So from system to custom and from Helvetica new way you knew we you didn't know how to pronounce shipwright

125
00:07:39,600 --> 00:07:42,940
learned Avenir book book.

126
00:07:43,290 --> 00:07:46,750
Yeah I think book is a good color or a good style.

127
00:07:46,850 --> 00:07:49,820
I'm going to click done and it looks OK.

128
00:07:50,240 --> 00:07:56,090
So what we do is I'm going to pin it I'm going to select the label click the pin menu and zero from

129
00:07:56,090 --> 00:07:56,460
the left.

130
00:07:56,450 --> 00:07:59,670
Make sure constrain the margins is on and 25 from the top.

131
00:07:59,960 --> 00:08:01,010
That looks about right.

132
00:08:01,040 --> 00:08:02,540
I'm going to click that.

133
00:08:02,920 --> 00:08:05,080
And there we have it looks pretty good.

134
00:08:05,090 --> 00:08:08,860
It might be a little bit too close adjusted too.

135
00:08:08,970 --> 00:08:13,000
From 25 to 30.

136
00:08:13,190 --> 00:08:14,750
There we go.

137
00:08:14,940 --> 00:08:16,380
Cool.

138
00:08:16,380 --> 00:08:18,750
Next thing we need to do is actually create a table view.

139
00:08:18,900 --> 00:08:19,890
So let's do that.

140
00:08:19,890 --> 00:08:22,780
Type in the word table and you're going to see a few things here.

141
00:08:22,820 --> 00:08:26,280
You're going to see Table View Controller Table View table view So what are all these things.

142
00:08:26,280 --> 00:08:32,310
Well a table the controller is actually a view controller all by itself that has a prototype cell on

143
00:08:32,310 --> 00:08:37,470
it and it does a lot of management for you and you may be tempted to do this like oh Mark why don't

144
00:08:37,470 --> 00:08:40,420
I just use this instead of dragging a table view onto the screen.

145
00:08:40,810 --> 00:08:46,400
Let me tell you from professional experience almost in every single case in any app I've ever built.

146
00:08:46,500 --> 00:08:52,540
It's never a good decision to build a table view controller to use Apple's default implementation it

147
00:08:52,890 --> 00:08:54,570
because you often need custom ability.

148
00:08:54,690 --> 00:08:55,190
OK.

149
00:08:55,340 --> 00:08:58,340
And so I'm going to I'm not going to teach table controllers.

150
00:08:58,440 --> 00:09:02,700
We're just going to talk about building custom table use which is what you're going to use anyway in

151
00:09:02,700 --> 00:09:08,010
most cases so you can use this if you want if you want simple some simple functionality or you want

152
00:09:08,010 --> 00:09:11,000
to live within the restrictions of a table view controller.

153
00:09:11,220 --> 00:09:12,330
But we're not going to do that.

154
00:09:12,440 --> 00:09:13,280
OK.

155
00:09:13,950 --> 00:09:15,530
Because we want custom ability.

156
00:09:15,600 --> 00:09:21,690
So I'm gonna delete that and said what we're going to do is we're going to drag a table view on to our

157
00:09:21,690 --> 00:09:23,130
view controller like so.

158
00:09:23,420 --> 00:09:24,520
OK.

159
00:09:25,200 --> 00:09:27,410
And I'll put it right about here.

160
00:09:27,600 --> 00:09:32,030
Now we know from the image that the table view actually goes to the edges of the screen.

161
00:09:32,520 --> 00:09:35,610
So that makes our life easy to the edges and to the bottom.

162
00:09:35,610 --> 00:09:43,620
So from edge to edge and then down to the bottom and click the pin menu and we'll say 16 from the top

163
00:09:44,160 --> 00:09:50,570
zero from the left zero from the right and the bottom we're going to say zero as well at four constraints.

164
00:09:50,580 --> 00:09:51,770
Perfect.

165
00:09:52,410 --> 00:09:53,130
Wonderful.

166
00:09:53,250 --> 00:09:56,930
So there's our table view and I like it looks good.

167
00:09:56,970 --> 00:10:01,290
The next thing we're going to do is we're actually going to build a cell a table cell right and center

168
00:10:01,290 --> 00:10:02,150
table for you.

169
00:10:02,160 --> 00:10:07,500
Now if you didn't work with us before you used to have to create a zip file an external file where you

170
00:10:07,500 --> 00:10:11,790
defined your table view cell and then you would load it dynamically at runtime which you can still do

171
00:10:11,790 --> 00:10:16,560
and in fact in the def slopes app that we have we have a few places where we're actually loading a cell

172
00:10:16,560 --> 00:10:17,660
from a zip file.

173
00:10:17,850 --> 00:10:19,590
And there's there's particular reasons for it.

174
00:10:19,620 --> 00:10:23,250
We needed extreme custom ability and we needed it dynamically at runtime.

175
00:10:23,430 --> 00:10:27,960
And also one other thing to point out sometimes when we have a very large app your storyboards can get

176
00:10:27,960 --> 00:10:30,630
really big and they start to run really slow.

177
00:10:30,690 --> 00:10:31,680
Ok really really slow.

178
00:10:31,680 --> 00:10:36,140
So let's say you had 10 different views on here or controllers that all had table views and you hand

179
00:10:36,150 --> 00:10:41,160
built your table cells all in here your storyboards going to start running really slow depending on

180
00:10:41,160 --> 00:10:41,880
what computer you have.

181
00:10:41,880 --> 00:10:47,460
So sometimes it's nice to break things out into their own files so it's not so you're not a slow or

182
00:10:47,460 --> 00:10:49,110
you can have multiple storyboards.

183
00:10:49,260 --> 00:10:53,160
In our case a simple table view cell built right in here is going to be just fine.

184
00:10:53,520 --> 00:10:59,180
So what I'm going to do is take this table B-cell and we are going to drag it into the table view.

185
00:10:59,190 --> 00:11:02,060
Now you couldn't drag it on there unless there was a table view there first.

186
00:11:02,160 --> 00:11:03,030
OK.

187
00:11:03,390 --> 00:11:07,320
And so one thing I want to point out is this word prototype sells that's not going to appear when your

188
00:11:07,320 --> 00:11:08,910
app runs so don't worry about that.

189
00:11:08,940 --> 00:11:11,810
And what's important is what's inside this White space right here OK.

190
00:11:11,960 --> 00:11:16,650
So what we're going to do is we're going to make this look like the image on the left hand side is going

191
00:11:16,650 --> 00:11:17,510
to drag it down.

192
00:11:17,550 --> 00:11:19,230
I'm just eyeballing it here.

193
00:11:19,530 --> 00:11:24,530
What I think that image size is the designer did not give me its exact pixel dimensions here.

194
00:11:24,560 --> 00:11:28,010
And so I'm not going to worry about it I'm just going to eyeball here.

195
00:11:28,140 --> 00:11:32,570
So we got this cell here and we know that we're going to need some type of image.

196
00:11:32,610 --> 00:11:36,470
So I'm going to go down to the object library and type in the word image.

197
00:11:36,480 --> 00:11:39,080
Now I want to drag that on here inside the cell.

198
00:11:39,090 --> 00:11:40,080
This is very important.

199
00:11:40,080 --> 00:11:46,080
If you notice here on the left hand side you see a nested hierarchy Table View table view cell content

200
00:11:46,080 --> 00:11:51,060
view image make sure that your image view and all the things inside your cell are here on this content

201
00:11:51,060 --> 00:11:55,340
view table view still has a base view which is what you'll put your things on here.

202
00:11:55,710 --> 00:11:56,010
OK.

203
00:11:56,010 --> 00:12:03,660
So what we're going to do is we're going to drag this to the edges of the cell line it up where it's

204
00:12:03,660 --> 00:12:05,690
supposed to go like so.

205
00:12:05,970 --> 00:12:11,860
And then we're going to pinnate So 0 0 0 and that of negative point five will say zero.

206
00:12:12,690 --> 00:12:16,620
So it goes to all the edges and corners there and then we'll go ahead and send an image here just so

207
00:12:16,620 --> 00:12:18,190
we can kind of see what it looks like.

208
00:12:18,630 --> 00:12:23,190
But I guess we can't do that because we haven't dragged them in so let's grab all of our assets now

209
00:12:24,270 --> 00:12:30,620
and drag them in and then open up the navigator here and let's go find our assets.

210
00:12:30,640 --> 00:12:33,420
So I must let the assets folder and the what I'm going to do.

211
00:12:33,430 --> 00:12:35,060
You can see the images right here.

212
00:12:35,070 --> 00:12:40,780
I mean it's like all my images and I'm just going to drag them over here to the project shirts hats

213
00:12:40,780 --> 00:12:41,930
things like that.

214
00:12:42,820 --> 00:12:43,870
Done deal.

215
00:12:43,870 --> 00:12:49,120
Now what we're going to do is go back to our store board and on this image of you we're going to select

216
00:12:49,420 --> 00:12:50,610
the digital image.

217
00:12:50,770 --> 00:12:51,890
And of course it's stretched.

218
00:12:51,910 --> 00:12:56,020
And even if it wasn't stretched make sure you always always always change just to Aspect fit or aspect

219
00:12:56,020 --> 00:12:56,710
feel.

220
00:12:56,710 --> 00:13:00,030
In our case we wanted to fill the screen here so it looks good there.

221
00:13:00,250 --> 00:13:01,170
So it looks good to me.

222
00:13:01,270 --> 00:13:06,670
And the next thing we're to do is grab a label type in the word lab for label and we're going to drag

223
00:13:06,670 --> 00:13:12,250
it in the middle of the screen and it can make it a little bit bigger a little bit wider there.

224
00:13:13,440 --> 00:13:16,670
Because I know it may be larger than it is right now.

225
00:13:16,890 --> 00:13:19,260
So it's this label it's really black hard to see.

226
00:13:19,260 --> 00:13:26,580
So first off let's change the color to white and it looks like it's all caps and also has a thicker

227
00:13:26,580 --> 00:13:29,280
font so we're going to go from system to custom.

228
00:13:29,490 --> 00:13:38,070
Keep it consistent with Avenir and let's change it to heavy perfect and make it actually and make it

229
00:13:38,080 --> 00:13:46,600
size 20 and it's called this at Slate Hoodie's it doesn't matter what we put here we're just kind of

230
00:13:46,870 --> 00:13:51,360
eyeballing it to make sure it looks nice center the text and let's see how it looks.

231
00:13:51,370 --> 00:13:52,470
I think it looks pretty good.

232
00:13:52,750 --> 00:13:55,370
So let's go ahead and do a few things.

233
00:13:55,570 --> 00:14:01,270
Let's go ahead and just give it a fixed let's give it a fixed width and height just for now you know

234
00:14:01,270 --> 00:14:04,020
it didn't look good on a smaller phone we could go do some work have some constraints.

235
00:14:04,020 --> 00:14:06,250
But I think this would be good for now.

236
00:14:06,450 --> 00:14:10,470
And what I also want to do is click the align menu and just do it horizontally and vertically in the

237
00:14:10,470 --> 00:14:11,180
container.

238
00:14:11,370 --> 00:14:12,210
OK.

239
00:14:12,210 --> 00:14:16,650
So keep in mind that's not inside of the image it's actually outside the content because you can't drag

240
00:14:16,740 --> 00:14:18,990
other views on top of an image view.

241
00:14:19,200 --> 00:14:24,630
And so there is our prototype cell and what a prototype cell is is basically you're designing out your

242
00:14:24,840 --> 00:14:25,470
cell.

243
00:14:25,560 --> 00:14:30,210
How it's going to look and then in code you replace the images and the labels and things like that.

244
00:14:30,660 --> 00:14:35,540
Now I'm looking at this image a little more and I think that it's still a little too small.

245
00:14:35,670 --> 00:14:36,900
And so that's an easy fix.

246
00:14:36,900 --> 00:14:41,140
So what I want to do is on this table you sell here just to make it a little bit bigger.

247
00:14:42,120 --> 00:14:46,140
Like so yeah it looks nice.

248
00:14:46,140 --> 00:14:51,270
And then one thing just out of habit that's important to do is let's go to our digital image here and

249
00:14:51,270 --> 00:14:52,980
let's make sure clip two bounces on.

250
00:14:53,010 --> 00:14:54,680
We don't want it to bleed over.

251
00:14:55,140 --> 00:14:55,850
OK.

252
00:14:56,190 --> 00:14:57,140
So this looks good.

253
00:14:57,160 --> 00:15:03,190
Now let's go ahead and hook some things up here we know that we're going to need an Ivy outlet for table

254
00:15:03,190 --> 00:15:03,730
view.

255
00:15:03,940 --> 00:15:04,700
We know we're going to need it.

256
00:15:04,730 --> 00:15:07,180
I'll be out in it for these cells here.

257
00:15:07,220 --> 00:15:12,100
But how do you do that how do you even like work with cells and I.V. outlets and fill the labels out

258
00:15:12,100 --> 00:15:12,830
and all that stuff.

259
00:15:12,880 --> 00:15:18,580
Well it's going to require a little bit of setup first so let's go to our project over here and create

260
00:15:18,580 --> 00:15:19,820
a new group here.

261
00:15:20,370 --> 00:15:25,590
We'll call this controller with the controller files and we'll create one for modeling for views.

262
00:15:25,610 --> 00:15:27,780
OK.

263
00:15:28,000 --> 00:15:33,430
Now of course we're using model view controller NBC and some of you some of your more adventurous new

264
00:15:33,430 --> 00:15:39,160
developers out there are hearing things like what's MVB em and what's re-active programming and should

265
00:15:39,160 --> 00:15:44,910
we even be doing model view controller we're about protocol oriented programming or functional program

266
00:15:44,920 --> 00:15:47,290
what are all these things more why are you dodging these things.

267
00:15:47,320 --> 00:15:48,190
Should be teaching this and that.

268
00:15:48,190 --> 00:15:50,350
Well let me just tell you something.

269
00:15:50,400 --> 00:15:54,340
Most of the control has been around for a long time and like ninety nine point nine percent of all the

270
00:15:54,340 --> 00:15:59,350
apps that are being built right now in the professional industry are using MVC you're not seeing large

271
00:15:59,350 --> 00:16:04,630
companies completely adopt protocol or into programming or functional programming or are x swift with

272
00:16:04,630 --> 00:16:11,350
reactive programming or nvm like those are some cool upcoming design paradigms but it's mostly the hipsters

273
00:16:11,350 --> 00:16:12,400
use that stuff right now.

274
00:16:12,450 --> 00:16:14,370
So hipster.

275
00:16:14,400 --> 00:16:14,870
Be cool.

276
00:16:14,890 --> 00:16:16,020
You can experience those things.

277
00:16:16,040 --> 00:16:16,900
Do your own projects.

278
00:16:16,900 --> 00:16:21,280
It's great but we are teaching the foundational principles that are actually out there in the business

279
00:16:21,280 --> 00:16:22,480
world right now.

280
00:16:22,540 --> 00:16:27,150
Not to say those other design principles aren't good and will be happening in the future.

281
00:16:27,210 --> 00:16:28,660
We're just all we're still on NBC now.

282
00:16:28,670 --> 00:16:35,890
So model controller and view great and going to drag the categories b c into the controller folder like

283
00:16:35,890 --> 00:16:41,920
so and then in the view folder what we need to do is anytime you're working with a table view and a

284
00:16:41,920 --> 00:16:45,140
table cell you have to create a custom class for that cell.

285
00:16:45,160 --> 00:16:50,500
Otherwise you can't assign images and put labels and things in it and had the cell have custom functionality.

286
00:16:50,500 --> 00:16:52,610
So we're going to be good programmers.

287
00:16:52,750 --> 00:16:58,570
OK and we're going to create a custom class that can have a reusable cell over and over again that we

288
00:16:58,570 --> 00:16:59,470
can populate with data.

289
00:16:59,470 --> 00:17:08,170
So in this view folder we're going to go to New File Coque touch class and subclass of table cells what

290
00:17:08,170 --> 00:17:15,710
we want and let's call this category cell K category so that looks good.

291
00:17:16,820 --> 00:17:17,900
And I click Create

292
00:17:20,740 --> 00:17:23,380
category so perfect it edited it right here.

293
00:17:23,380 --> 00:17:27,700
So what we're going to do is we're going to add some outlets and this time we're going to do a little

294
00:17:27,700 --> 00:17:28,840
bit differently than we've done in the past.

295
00:17:28,840 --> 00:17:33,700
We're going to hand-code these outlets and I find myself doing this a lot more often because sometimes

296
00:17:33,700 --> 00:17:37,660
store rewards are really slow and you're already in the code and it's just easier to do it while you're

297
00:17:37,660 --> 00:17:39,160
here and then go back and connect them later.

298
00:17:39,240 --> 00:17:39,570
OK.

299
00:17:39,640 --> 00:17:44,230
So plus the the assistant editor where it splits the screen that makes things really cluttered.

300
00:17:44,230 --> 00:17:52,140
So we're going to say at Iby outlet we are and what to IBM let's do we need on our cell.

301
00:17:52,330 --> 00:17:58,760
Well we need the background image so we're going to say category image of type you image view.

302
00:17:58,810 --> 00:18:01,750
Exclamation point is going to be an implicitly unwrapped optional.

303
00:18:01,750 --> 00:18:03,450
I mean we're guaranteeing it's going to be there.

304
00:18:03,880 --> 00:18:11,740
And at IBM it weak bar and we're going to say category title and this is going to be of type I label.

305
00:18:11,880 --> 00:18:12,120
OK.

306
00:18:12,130 --> 00:18:17,550
So there's two ip outlets there one of type category image and one type category title.

307
00:18:17,950 --> 00:18:18,360
OK.

308
00:18:18,430 --> 00:18:22,450
So let's go back to our storyboard and I'll show you how you can connect those up since we did it in

309
00:18:22,450 --> 00:18:23,240
code.

310
00:18:23,290 --> 00:18:28,750
All you have to do OK is go to your table view cell right here.

311
00:18:28,750 --> 00:18:29,890
Change the class OK.

312
00:18:29,890 --> 00:18:31,840
See this little icon here the identity inspector.

313
00:18:31,840 --> 00:18:34,370
Change the class to category cell.

314
00:18:34,960 --> 00:18:37,470
OK now click this category cell again on the left hand side.

315
00:18:37,480 --> 00:18:41,850
And if you right click it you will now see category title and category image right here.

316
00:18:41,890 --> 00:18:49,400
And all you have to do is literally drag it over and drag it over to the label.

317
00:18:49,840 --> 00:18:50,910
Now you're probably seeing some other things.

318
00:18:50,910 --> 00:18:52,690
A background view editing a review.

319
00:18:52,690 --> 00:18:55,820
There are some other default properties that table view cells have that you can set.

320
00:18:55,840 --> 00:18:57,270
We're just not using them right now.

321
00:18:57,400 --> 00:18:57,960
And we don't need them.

322
00:18:57,960 --> 00:19:01,550
These are two custom IAB outlets and they are now connected.

323
00:19:01,900 --> 00:19:02,610
OK.

324
00:19:02,620 --> 00:19:07,490
The last thing I want to do for this video is just create an outlet for our table view.

325
00:19:07,660 --> 00:19:16,330
So in our categories ABC Let's create an outlet at the outlet bar and we're going to call this category

326
00:19:16,810 --> 00:19:20,230
table type table view.

327
00:19:20,980 --> 00:19:25,370
And do you remember earlier how I said you could create a table view controller.

328
00:19:25,450 --> 00:19:29,800
Well what the table view controller will do instead of inheriting for you have you control your entire

329
00:19:29,800 --> 00:19:34,150
class here's a table table view controller and an already implements things like table view and the

330
00:19:34,150 --> 00:19:36,700
functions that you need under the hood to connect the table view up.

331
00:19:36,760 --> 00:19:40,830
But again it has limited ability when you want to have a fully customized out.

332
00:19:40,840 --> 00:19:46,720
So we're doing things the way that most companies and developers do which is creating custom custom

333
00:19:46,720 --> 00:19:48,680
you have a controller with a table view on it.

334
00:19:49,060 --> 00:19:54,980
So there's a table view and last thing here is let's just go ahead and let's go ahead and connect it

335
00:19:54,980 --> 00:19:57,250
up in the main storyboard here.

336
00:19:57,290 --> 00:20:02,690
So on our view controller you right click and you see the category table simply drag it over and see

337
00:20:02,690 --> 00:20:07,840
how it notices which things are which That's really nice so just drag it over and it's now connected

338
00:20:07,840 --> 00:20:09,400
it.

339
00:20:09,410 --> 00:20:15,740
This is kind of cool the presenting Segway is showing a relationship between the the the view controller

340
00:20:15,770 --> 00:20:19,790
presenting it which is the Segway So you know that it's inside of a camera inside of a view controller

341
00:20:19,790 --> 00:20:20,400
here.

342
00:20:20,760 --> 00:20:25,520
So let's just go ahead and run it just for fun and see if we get any crashes or see if it works or what's

343
00:20:25,520 --> 00:20:26,560
going on all together.

344
00:20:26,570 --> 00:20:27,230
OK.

345
00:20:27,560 --> 00:20:28,070
There it is.

346
00:20:28,100 --> 00:20:30,980
And you're probably running wondering Mark is at broken.

347
00:20:31,070 --> 00:20:32,830
Well it's not broken.

348
00:20:33,140 --> 00:20:34,140
It's just.

349
00:20:34,250 --> 00:20:36,230
Why do you think it's not working.

350
00:20:36,650 --> 00:20:37,690
Any ideas.

351
00:20:37,730 --> 00:20:38,990
Let me tell you a couple of things.

352
00:20:38,990 --> 00:20:41,170
First off it definitely is working.

353
00:20:41,180 --> 00:20:44,900
We just haven't finished the functionality so immature image here it's not showing up because that was

354
00:20:44,900 --> 00:20:48,740
just a prototype We're just saying this is what we wanted to look like when it's actually working.

355
00:20:49,070 --> 00:20:52,760
But the reality is we are not feeding the table view with any data at all.

356
00:20:52,760 --> 00:20:53,830
There's no data anywhere.

357
00:20:53,900 --> 00:20:57,270
Like we don't have titles and image names coming from anywhere.

358
00:20:57,270 --> 00:21:03,440
Like think about it how would you specify an image for each of these cells would we create 10 prototype

359
00:21:03,440 --> 00:21:04,670
cells if there's 10 cells.

360
00:21:04,670 --> 00:21:06,500
No table views do not work like that.

361
00:21:06,500 --> 00:21:11,240
So here's here's something really important understand about Tator and data and collection views and

362
00:21:12,080 --> 00:21:17,720
table views is that when you have a group of data that you would display in a table what you do is you

363
00:21:17,720 --> 00:21:24,200
create a view that can be re-used and you reuse it and create as many as needed based on the data that

364
00:21:24,200 --> 00:21:24,950
you have.

365
00:21:25,100 --> 00:21:30,290
So a lot of apps what they'll do is they'll go download a list of things from internet from a server

366
00:21:30,750 --> 00:21:35,630
let's say a list of categories and images and then you're your apple take them and store them in an

367
00:21:35,630 --> 00:21:36,600
array for instance.

368
00:21:36,620 --> 00:21:42,860
And then what you do is you say my table view should have you know as many rows as there is items in

369
00:21:42,860 --> 00:21:43,480
this array.

370
00:21:43,520 --> 00:21:47,380
And then you take each item out of the array and you display it dynamically into the table views.

371
00:21:47,390 --> 00:21:50,110
And that's what makes an efficient application.

372
00:21:50,120 --> 00:21:57,500
And you really can't really can't do that effectively without basing it on the data.

373
00:21:57,500 --> 00:22:02,270
I mean you can you could use a scroll view for instance and then you could load up items dynamically

374
00:22:02,270 --> 00:22:02,970
on it.

375
00:22:03,170 --> 00:22:06,960
And there's one for each one you may have to custom code each one but it's not the right way.

376
00:22:06,980 --> 00:22:08,020
So this is the right way.

377
00:22:08,120 --> 00:22:09,420
And there's a lot to learn about.

378
00:22:09,440 --> 00:22:11,230
So we're going to call this video done.

379
00:22:11,450 --> 00:22:16,190
And then the next exciting video you're going to learn how to get a table you'd actually think and how

380
00:22:16,190 --> 00:22:18,820
to work with data the ways that the pros do.

381
00:22:18,830 --> 00:22:22,250
So when you go to apply for jobs or build your own apps you doing it the right way.

382
00:22:22,250 --> 00:22:23,000
So that's it for now.

383
00:22:23,000 --> 00:22:24,910
Marc price of slopes dot com.

384
00:22:24,980 --> 00:22:25,800
See you soon.