1

00:00:05,740 --> 00:00:11,740

Your What's up everyone Mark Bryce here at Dev slopes dot com and in this exciting section and video



2

00:00:11,740 --> 00:00:17,200

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,290 --> 00:00:22,260

it's a online store where you can purchase clothing and other items that are programming related.



4

00:00:22,300 --> 00:00:29,830

You know like kind of like our Web site coater swag can go and purchase cool slip swag and stuff anyway.



5

00:00:30,230 --> 00:00:31,990

So we're building we're building the app version of it.



6

00:00:32,230 --> 00:00:35,800

And what you're going to learn is you can learn all about table views and collection views basically



7

00:00:35,800 --> 00:00:37,990

how to show lists of data.



8

00:00:37,990 --> 00:00:43,030

And that's really important because pretty much every app in the world of any value has to show some



9

00:00:43,030 --> 00:00:46,870

type of data whether it's a game like clash Royale where there's a chat room and showing different pieces



10

00:00:46,870 --> 00:00:51,190

of data to your favorite apps like Facebook where it's showing different people's post those are all



11

00:00:51,190 --> 00:00:55,260

types of lists of data and so is a core foundational principle.



12

00:00:55,270 --> 00:00:56,540

Let's go ahead and get started.



13

00:00:56,580 --> 00:00:59,250

So first things first we're going to do some good stuff.



14

00:00:59,620 --> 00:01:10,460

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,460 --> 00:01:11,890

You can put this wherever you want.



16

00:01:12,020 --> 00:01:17,360

If you are cloning your own repo you would go to a big bucket or have the crater repository and copied



17

00:01:17,360 --> 00:01:23,110

that clone you RL like I have done so here just to show you I've got this new trail for this brand new



18

00:01:23,120 --> 00:01:26,090

repository that I am bringing in over here.



19

00:01:26,090 --> 00:01:30,380

And what I'm going to do is just clone it down and show what works right from there so.



20

00:01:30,590 --> 00:01:33,820

So here's the A C code swag project.



21

00:01:33,830 --> 00:01:35,020

Fantastic.



22

00:01:35,120 --> 00:01:38,960

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,960 --> 00:01:42,620

project the repository that will push up to.



24

00:01:42,620 --> 00:01:50,240

So let's open up X code beta and or the X code 9 release if it is released at this point in time and



25

00:01:50,240 --> 00:01:55,880

we're going to create a new X code project single view app is just fine and we're going to call this



26

00:01:55,940 --> 00:01:57,760

coder swag.



27

00:01:58,400 --> 00:02:02,830

And we're not going include any of these just yet.



28

00:02:02,840 --> 00:02:07,220

So we'll leave those unchecked and we're going to put it right here.



29

00:02:08,950 --> 00:02:09,550

And perfect.



30

00:02:09,550 --> 00:02:14,360

Here's our project if I go back to my terminal we should see something in there which we do.



31

00:02:14,440 --> 00:02:21,610

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,610 --> 00:02:25,100

then get a remote add origin.



33

00:02:25,150 --> 00:02:28,690

That's what I'm calling my origin and I'm putting in the euro.



34

00:02:29,000 --> 00:02:29,250

OK.



35

00:02:29,260 --> 00:02:30,430

So I do get status.



36

00:02:30,440 --> 00:02:38,290

Now we have some red which is good new files get at Dasch a get commit dash em and we're going to call



37

00:02:38,290 --> 00:02:45,610

this initial commit and get check out Dasch be less than 0 1.



38

00:02:45,640 --> 00:02:47,800

We are creating new branches for all of our lessons here.



39

00:02:47,800 --> 00:02:48,480

You don't have to do that.



40

00:02:48,480 --> 00:02:52,990

You can create your own branches for features but it's good to have get going for you.



41

00:02:52,990 --> 00:02:57,580

So now that we've got all the setup out of the way let's go ahead and actually start building the project.



42

00:02:57,580 --> 00:03:00,190

So first things first is a little bit of cleanup.



43

00:03:00,220 --> 00:03:05,750

I was cleaning up the view controller as you know we want to make things a purpose and have names.



44

00:03:05,770 --> 00:03:10,060

So instead of you controller we're going to right click and go to rename and we're going to call this



45

00:03:11,200 --> 00:03:22,690

category category B C categories B C category B C categories b c I like that better presenter because



46

00:03:22,690 --> 00:03:24,750

again look at the picture there.



47

00:03:24,790 --> 00:03:26,330

We've got categories here.



48

00:03:26,470 --> 00:03:26,770

All right.



49

00:03:26,770 --> 00:03:27,920

And let's talk about that a little more.



50

00:03:27,940 --> 00:03:32,270

So what we have on the screen here is some type of label probably this is what I like.



51

00:03:32,320 --> 00:03:35,200

I like to do when I get designs I kind of like to just break it out of my head.



52

00:03:35,200 --> 00:03:37,240

What are these belong to in Interface Builder.



53

00:03:37,240 --> 00:03:40,040

So we've got a label here.



54

00:03:40,450 --> 00:03:45,900

We've got some items here and I know from experience that these are going to be Table View cells.



55

00:03:45,970 --> 00:03:46,870

So this is a cell.



56

00:03:46,900 --> 00:03:48,740

This is a sell sell sell.



57

00:03:48,970 --> 00:03:54,310

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,310 --> 00:03:58,820

here to describe what it is and then appear with that probably a navigation bar.



59

00:03:59,050 --> 00:04:03,920

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,940 --> 00:04:04,660

take you back.



61

00:04:04,780 --> 00:04:10,100

And that's the functionality of a navigation controller which is part of the BIOS.



62

00:04:10,120 --> 00:04:16,000

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



63

00:04:16,000 --> 00:04:16,870

that.



64

00:04:16,870 --> 00:04:19,590

So main story storyboard here.



65

00:04:19,600 --> 00:04:24,200

While I also know from experience that I probably want to start off with the navigation controller if



66

00:04:24,250 --> 00:04:27,550

everything's going to be navigating from screen to screen you might as well just get it started.



67

00:04:27,550 --> 00:04:36,700

So what you can do is category's Visi selected go to editor embed in navigation controller.



68

00:04:36,700 --> 00:04:41,080

And what you're going to see here is a new view controller pop up on the screen and zoom out a little



69

00:04:41,080 --> 00:04:43,250

bit here for you.



70

00:04:43,720 --> 00:04:44,840

Category's.



71

00:04:45,370 --> 00:04:48,430

OK and the navigation control I don't put it over here on the right hand side.



72

00:04:48,430 --> 00:04:51,950

So the starting point of the app see this arrow here.



73

00:04:51,970 --> 00:04:55,570

It means that that's the starting view control is actually going to be the navigation controller.



74

00:04:55,660 --> 00:04:56,590

OK.



75

00:04:56,590 --> 00:05:00,040

And on this navigation controller it comes with the navigation bar.



76

00:05:00,270 --> 00:05:05,340

So if we look at our image again we know that the navigation bar is this nice red color.



77

00:05:05,340 --> 00:05:09,360

So let's go ahead and see what color this is.



78

00:05:09,400 --> 00:05:13,470

Eighty seven thirty nine forty OK eighty seven thirty nine forty.



79

00:05:13,940 --> 00:05:22,180

So I'm going to go to this navigation bar and on the tent 87 39 portable



80

00:05:25,420 --> 00:05:26,770

and it doesn't look quite right.



81

00:05:26,830 --> 00:05:30,640

So I'm a click this navigation bar again and see how the translucence is selected I want to turn that



82

00:05:30,640 --> 00:05:30,820

off.



83

00:05:30,820 --> 00:05:35,530

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,530 --> 00:05:37,470

actual window that the designer picked.



85

00:05:37,630 --> 00:05:38,340

OK.



86

00:05:38,560 --> 00:05:43,360

So we got a navigation bar and not automatically set it on the categories b c that's because a navigation



87

00:05:43,360 --> 00:05:44,460

controller.



88

00:05:44,560 --> 00:05:45,070

OK.



89

00:05:45,100 --> 00:05:49,090

It's going to have it's going to host multiple view controllers is going to push them on the top push



90

00:05:49,090 --> 00:05:52,060

them on the top push and pop push and pop like a stack.



91

00:05:52,060 --> 00:05:52,490

OK.



92

00:05:52,540 --> 00:05:57,730

And and then they're all going to share a navigation bar and they all have a title and things like that



93

00:05:57,730 --> 00:05:58,700

as well too.



94

00:05:58,880 --> 00:06:00,130

So really cool.



95

00:06:00,190 --> 00:06:04,080

And what we're going to do here also is this title color.



96

00:06:04,270 --> 00:06:05,900

OK we're going to make it white.



97

00:06:05,980 --> 00:06:11,120

So select white for the title color and then what we can do is on the View Controller here.



98

00:06:11,140 --> 00:06:15,770

The categories Visi see this navigation item you can see this title here.



99

00:06:15,850 --> 00:06:19,540

If you have this item selected here the attributes inspector and you can set a title here.



100

00:06:19,630 --> 00:06:23,590

And if we remember right this is coater swag.



101

00:06:23,800 --> 00:06:28,660

So now it's black here which is not the right color but at runtime it will be white because we've said



102

00:06:28,660 --> 00:06:29,960

it to be white.



103

00:06:30,040 --> 00:06:30,850

So this is looking good.



104

00:06:30,850 --> 00:06:33,860

We've gone a little bit in the right direction so far.



105

00:06:34,090 --> 00:06:35,230

Let's look at it again.



106

00:06:35,370 --> 00:06:39,010

Next thing I want to do is add this label here and say let's go out and do that now.



107

00:06:39,270 --> 00:06:43,210

I mean I'm minimize this a little bit to minimize this we can see both.



108

00:06:43,210 --> 00:06:47,870

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,160 --> 00:06:49,150

OK.



110

00:06:50,020 --> 00:06:50,620

There we go.



111

00:06:50,680 --> 00:06:52,410

It's looking lovely.



112

00:06:53,100 --> 00:06:53,390

OK.



113

00:06:53,440 --> 00:06:56,160

And I've just closed off the navigator on the left hand side.



114

00:06:56,260 --> 00:06:58,570

So we need a label here so let's do that.



115

00:06:58,570 --> 00:07:00,190

So type in the word label at the bottom right.



116

00:07:00,200 --> 00:07:06,500

And the object library and there's a label and it's looks like it's a little bit further from the top



117

00:07:07,160 --> 00:07:09,460

just by style wise so that's fine.



118

00:07:09,460 --> 00:07:17,120

Make it a little bit bigger here and I get to make it say shop by category from the attributes inspector.



119

00:07:17,210 --> 00:07:19,030

It's a little bit too small.



120

00:07:19,070 --> 00:07:27,400

And then what I also want to do is I want to I want to give it a different font so it looks more like



121

00:07:27,400 --> 00:07:28,320

the one in the picture.



122

00:07:29,200 --> 00:07:31,720

So let's go to font and change it to Avenir.



123

00:07:31,720 --> 00:07:39,020

So from system to custom and from Helvetica new way you knew we you really know how to pronounce.



124

00:07:39,030 --> 00:07:43,150

I should have learned Avenir book book.



125

00:07:43,330 --> 00:07:46,860

Yeah I think book is a good color or good style.



126

00:07:46,900 --> 00:07:49,940

I'm going to click on and it looks OK.



127

00:07:50,290 --> 00:07:56,170

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



128

00:07:56,170 --> 00:07:56,500

the left.



129

00:07:56,500 --> 00:08:01,070

Make sure constrain the margins is on and 25 from the top that looks about right.



130

00:08:01,090 --> 00:08:02,560

I'm going to click that.



131

00:08:02,970 --> 00:08:05,140

And there we have it looks pretty good.



132

00:08:05,140 --> 00:08:08,000

It might be a little bit too close.



133

00:08:08,000 --> 00:08:08,940

That was adjusted too.



134

00:08:09,030 --> 00:08:13,060

From 25 to 30.



135

00:08:13,250 --> 00:08:14,840

There we go.



136

00:08:15,000 --> 00:08:16,410

Cool.



137

00:08:16,410 --> 00:08:18,800

Next thing we need to do is actually create a table view.



138

00:08:18,930 --> 00:08:19,860

So let's do that.



139

00:08:19,950 --> 00:08:22,820

Type in the word table and you're going to see a few things here.



140

00:08:22,860 --> 00:08:26,340

You're going to see Table View Controller Table View table view So what are all these things.



141

00:08:26,340 --> 00:08:32,430

Well a table the controller is actually a view control all by itself that has a prototype cell on it



142

00:08:32,430 --> 00:08:37,800

and it has a lot of management for you and you may be tempted to do this like oh Mark why don't I just



143

00:08:37,800 --> 00:08:40,710

use this and sort of drag in a table view onto the screen.



144

00:08:40,890 --> 00:08:46,560

Let me tell you from professional experience almost in every single case in any app I've ever built.



145

00:08:46,560 --> 00:08:52,490

It's never a good decision to build a table view controller to use Apple's default implementation either



146

00:08:52,950 --> 00:08:54,590

because you often need custom ability.



147

00:08:54,720 --> 00:08:55,250

OK.



148

00:08:55,380 --> 00:08:58,270

And so I'm going to I'm not going to teach table controllers.



149

00:08:58,500 --> 00:09:02,760

We're just going to talk about building custom table use which is what you're going to use anyway in



150

00:09:02,760 --> 00:09:08,160

most cases so you can use this if you want if you want simple and simple functionality or you want to



151

00:09:08,160 --> 00:09:11,140

live within the restrictions of a Table View Controller.



152

00:09:11,280 --> 00:09:12,390

But we're not going to do that.



153

00:09:12,480 --> 00:09:13,230

OK.



154

00:09:14,010 --> 00:09:15,630

Because we want custom ability.



155

00:09:15,630 --> 00:09:21,580

So I'm going to delete that and said well we're going to do is we're going to drag a table view on to



156

00:09:21,610 --> 00:09:23,160

our view controller like.



157

00:09:25,250 --> 00:09:27,450

And I'll put it right about here.



158

00:09:27,650 --> 00:09:32,990

Now we know from the image that the table view actually goes to the edges of the screen so that makes



159

00:09:32,990 --> 00:09:35,660

our life easy to the edges and to the bottom.



160

00:09:35,660 --> 00:09:43,680

So from edge to edge and then down to the bottom them and click the menu and we'll say 16 from the top



161

00:09:44,220 --> 00:09:50,640

zero from the left zero from the right and the bottom we're going to say zero as well as four constraints.



162

00:09:50,640 --> 00:09:52,470

Perfect.



163

00:09:52,470 --> 00:09:53,310

Wonderful.



164

00:09:53,310 --> 00:09:56,960

So there's our table view and I like it looks good.



165

00:09:57,000 --> 00:10:00,010

The next thing we're going to do is we're actually going to build and.



166

00:10:00,040 --> 00:10:02,190

A table you sell right and center table view.



167

00:10:02,220 --> 00:10:07,470

Now if you've ever worked with Iowas before you used to have to create a zip file an external file where



168

00:10:07,470 --> 00:10:11,700

you define your table view cell and then you would load it dynamically at runtime which you can still



169

00:10:11,700 --> 00:10:16,050

do in effect in the def slopes app that we have we have a few places where we're actually loading a



170

00:10:16,050 --> 00:10:17,780

cell from a zip file.



171

00:10:17,910 --> 00:10:19,680

And there's there's particular reasons for it.



172

00:10:19,680 --> 00:10:23,030

We needed extreme custom mobility and we needed it dynamically at runtime.



173

00:10:23,460 --> 00:10:27,840

And also one other thing to point out sometimes when you have a very large app your storyboards can



174

00:10:27,840 --> 00:10:30,690

get really big and they start to run really slow.



175

00:10:30,750 --> 00:10:31,740

Ok really really slow.



176

00:10:31,740 --> 00:10:36,380

So let's say you had 10 different views on here are controllers that all had table views and you had



177

00:10:36,380 --> 00:10:41,100

built your table view cells all in here your storyboards going to start running really slow depending



178

00:10:41,100 --> 00:10:41,940

on what computer you have.



179

00:10:41,940 --> 00:10:46,360

So sometimes it's nice to break things out into their own files so it's not.



180

00:10:46,500 --> 00:10:49,320

So your apps not a slow or you can have multiple storyboards.



181

00:10:49,320 --> 00:10:53,220

In our case a simple table you sell built right in here is going to be just fine.



182

00:10:53,580 --> 00:10:59,200

So what I'm going to do is take this table B-cell and we are going to drag it into the table view.



183

00:10:59,220 --> 00:11:02,110

Now you couldn't drag it on there unless there was a table view there first.



184

00:11:02,220 --> 00:11:03,000

OK.



185

00:11:03,410 --> 00:11:07,380

And so one thing I want to point out is this word prototype sells that's not going to appear when your



186

00:11:07,380 --> 00:11:08,970

app runs so don't worry about that.



187

00:11:09,000 --> 00:11:11,860

And what's important is what's inside this White space right here OK.



188

00:11:12,030 --> 00:11:16,420

So what we're going to do is we're going to make this look like the image on the left hand side.



189

00:11:16,440 --> 00:11:17,510

So I mean to drag it down.



190

00:11:17,610 --> 00:11:19,530

I'm just eyeballing it here.



191

00:11:19,590 --> 00:11:24,570

What I think the image sizes the designer did not give me its exact pixel dimensions here.



192

00:11:24,600 --> 00:11:26,510

And so I'm not going to worry about.



193

00:11:26,520 --> 00:11:28,150

I'm just going to eyeball here.



194

00:11:28,200 --> 00:11:32,630

So we got this cell here and we know that we're going to need some type of image.



195

00:11:32,670 --> 00:11:36,460

So I'm going to go down to the object library and type in the word image.



196

00:11:36,500 --> 00:11:39,150

Now in a dragnet on here inside the cell.



197

00:11:39,150 --> 00:11:40,120

This is very important.



198

00:11:40,140 --> 00:11:46,140

If you notice here on the left hand side you see a nested hierarchy Table View table view cell content



199

00:11:46,140 --> 00:11:51,120

view image makes sure that your image view and all the things inside your cell are here on this content



200

00:11:51,120 --> 00:11:55,390

view table view still has a base view which is what you'll put your things on here.



201

00:11:55,740 --> 00:11:56,060

OK.



202

00:11:56,070 --> 00:12:03,720

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



203

00:12:03,720 --> 00:12:05,700

supposed to go like so.



204

00:12:06,030 --> 00:12:10,210

And then we're going to pinnate So 0 0 0 and of negative.



205

00:12:10,220 --> 00:12:12,100

Point Five will say zero.



206

00:12:12,740 --> 00:12:16,370

So it goes to all the edges and corners there and then we'll go ahead and sudden image here.



207

00:12:16,400 --> 00:12:20,960

Just so we can kind of see what it looks like but I guess we can't do that because we haven't dragged



208

00:12:20,960 --> 00:12:27,530

them in so let's grab all of our assets now and drag them in and then open up the navigator here and



209

00:12:27,530 --> 00:12:30,670

let's go find our assets.



210

00:12:30,700 --> 00:12:33,420

So almost like the assets folder and then what I'm going to do.



211

00:12:33,490 --> 00:12:35,110

You can see the images right here.



212

00:12:35,120 --> 00:12:40,830

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,830 --> 00:12:41,520

things like that.



214

00:12:41,540 --> 00:12:42,350

OK.



215

00:12:42,870 --> 00:12:43,890

Done deal.



216

00:12:43,920 --> 00:12:49,170

Now what we're going to do is go back to our storyboard and on this image of you we're going to select



217

00:12:49,470 --> 00:12:50,670

the digital image.



218

00:12:50,820 --> 00:12:51,940

And of course it's stretched.



219

00:12:51,960 --> 00:12:56,070

And even if it wasn't stretched make sure you always always always change just to Aspect fit or aspect



220

00:12:56,070 --> 00:12:56,700

feel.



221

00:12:56,760 --> 00:13:00,300

In our case we wanted to fill the screen here so it looks good there.



222

00:13:00,300 --> 00:13:01,240

So it looks good to me.



223

00:13:01,320 --> 00:13:06,720

And the next thing we're to do is grab a label type in the word Lamma for label and we're going to drag



224

00:13:06,720 --> 00:13:12,290

it in the middle of the screen and it can make it a little bit bigger a little bit wider there.



225

00:13:13,490 --> 00:13:16,730

Because I know it may be larger than it is right now.



226

00:13:16,940 --> 00:13:19,310

So it's this label it's really black hard to see.



227

00:13:19,310 --> 00:13:26,630

So first off let's change the color to white and it looks like it's all caps and also has a thicker



228

00:13:26,630 --> 00:13:29,320

font so we're going to go from system to custom.



229

00:13:29,540 --> 00:13:38,110

Keep it consistent with Avenir and let's change it to heavy perfect and make it actually and make it



230

00:13:38,110 --> 00:13:39,430

a size 20.



231

00:13:40,390 --> 00:13:45,110

And it's called this save Hoodie's.



232

00:13:45,190 --> 00:13:49,120

It doesn't matter what we put here we're just kind of eyeballing it to make sure it looks nice center



233

00:13:49,210 --> 00:13:51,420

the text and let's see how it looks.



234

00:13:51,430 --> 00:13:52,640

I think it looks pretty good.



235

00:13:52,780 --> 00:13:54,970

So let's go ahead and do a few things.



236

00:13:55,630 --> 00:14:01,050

Let's go ahead and just give it a fixed let's give it a fixed width and height just for now.



237

00:14:01,160 --> 00:14:04,060

You know it didn't look good on a smaller phone we could go do some work have some constraints.



238

00:14:04,070 --> 00:14:06,290

But I think this will be good for now.



239

00:14:06,480 --> 00:14:10,520

And what I also want to do is click the align menu and just do it horizontally and vertically in the



240

00:14:10,520 --> 00:14:11,250

container.



241

00:14:11,450 --> 00:14:12,260

OK.



242

00:14:12,260 --> 00:14:14,330

So keep in mind that's not inside of the image.



243

00:14:14,330 --> 00:14:18,870

It's actually inside the content because you can't drag other views on top of an image view.



244

00:14:19,250 --> 00:14:24,680

And so there is our prototype cell and what a prototype cell is is basically you're designing out your



245

00:14:24,890 --> 00:14:26,360

cell how it's going to look.



246

00:14:26,360 --> 00:14:30,690

And then in code you replace the images and the labels and things like that.



247

00:14:30,710 --> 00:14:35,580

Now I'm looking at this image a little more and I think that it's still a little too small.



248

00:14:35,710 --> 00:14:36,910

And so that's an easy fix.



249

00:14:36,950 --> 00:14:41,190

So what I want to do is on this table you sell here just to make it a little bit bigger.



250

00:14:42,190 --> 00:14:46,210

Like so yeah it looks nice.



251

00:14:46,220 --> 00:14:51,320

And then one thing just out of habit that's important to do is let's go to our digital image here and



252

00:14:51,320 --> 00:14:51,820

let's make sure.



253

00:14:51,840 --> 00:14:52,980

Clip two bounces on.



254

00:14:53,060 --> 00:14:54,740

We don't want it to bleed over.



255

00:14:55,190 --> 00:14:55,900

OK.



256

00:14:56,240 --> 00:14:57,700

So this looks good now.



257

00:14:58,650 --> 00:15:03,950

Let's go ahead and hook some things up here we know that we're going to need an outlet for a table view.



258

00:15:03,990 --> 00:15:04,740

We know we're going to need it.



259

00:15:04,770 --> 00:15:07,230

I'd be out of it for these cells here.



260

00:15:07,260 --> 00:15:12,150

But how do you do that how do you even like work with cells and I.V. outlets and fill the labels out



261

00:15:12,150 --> 00:15:12,890

and all that stuff.



262

00:15:12,930 --> 00:15:15,260

Well it's going to require a little bit of setup first.



263

00:15:15,260 --> 00:15:19,870

So let's go to our project over here and create a new group here.



264

00:15:20,420 --> 00:15:25,630

We'll call this controller with the controller files and we'll create one for modeling for views.



265

00:15:25,650 --> 00:15:27,060

OK.



266

00:15:28,050 --> 00:15:33,480

Now of course we're using model view controller NBC and some of you some of your more adventurous new



267

00:15:33,480 --> 00:15:39,210

developers out there are hearing things like what's MVB em and what's re-active programming and should



268

00:15:39,210 --> 00:15:44,960

we even be doing model view controller we're about protocol oriented programming or functional program



269

00:15:44,970 --> 00:15:48,240

what are all these things more why are you dodging these things you should be teaching this and that.



270

00:15:48,240 --> 00:15:50,410

Well let me just tell you something.



271

00:15:50,450 --> 00:15:54,390

Most of the control has been around for a long time and like ninety nine point nine percent of all the



272

00:15:54,390 --> 00:15:59,400

apps that are being built right now in the professional industry are using MVC you're not seeing large



273

00:15:59,400 --> 00:16:04,680

companies completely adopt protocol oriented programming or functional programming or are as swift with



274

00:16:04,680 --> 00:16:11,400

reactive programming or nvm like those are some cool upcoming design paradigms but it's mostly the hipsters



275

00:16:11,400 --> 00:16:12,430

use that stuff right now.



276

00:16:12,460 --> 00:16:16,950

So to be hip and cool you can experience those things do your own projects.



277

00:16:16,950 --> 00:16:21,330

It's great but we are teaching the foundational principles that are actually out there in the business



278

00:16:21,330 --> 00:16:22,530

world right now.



279

00:16:22,590 --> 00:16:27,210

Not to say those other design principles aren't good and will be happening in the future.



280

00:16:27,260 --> 00:16:31,770

We're just all we're still on NBC now so model controller and view.



281

00:16:31,770 --> 00:16:32,430

Great.



282

00:16:32,700 --> 00:16:38,580

And going to drag the categories into the controller folder like so and then in the view folder what



283

00:16:38,580 --> 00:16:44,130

we need to do is anytime you're working with a table view and a table cell you have to create a custom



284

00:16:44,130 --> 00:16:45,190

class for that cell.



285

00:16:45,210 --> 00:16:50,550

Otherwise you can't send images and put labels and things in it and had the cell have custom functionality.



286

00:16:50,550 --> 00:16:52,670

So we're going to be good programmers.



287

00:16:52,790 --> 00:16:53,150

OK.



288

00:16:53,160 --> 00:16:58,770

And we're going to create a custom class that can have a reusable cell over and over again that we can



289

00:16:58,770 --> 00:16:59,520

populate with data.



290

00:16:59,520 --> 00:17:08,220

So in this view folder we're going to go to New File Coque touch class and subclass of table cells what



291

00:17:08,220 --> 00:17:08,710

we want.



292

00:17:08,850 --> 00:17:15,740

And let's call this category cell K category cell that looks good.



293

00:17:16,870 --> 00:17:17,960

And I mean it could create



294

00:17:20,800 --> 00:17:23,390

categories so perfect it added it right here.



295

00:17:23,410 --> 00:17:27,550

So what we're going to do is we're going to add some I.V. outlets and this time we're going to do a



296

00:17:27,550 --> 00:17:28,900

little bit differently than we've done in the past.



297

00:17:28,900 --> 00:17:33,760

We're going to hand-code these outlets and I find myself doing this a lot more often because sometimes



298

00:17:33,930 --> 00:17:37,810

words are really slow and you're already in the code and it's just easier to do it while you're here



299

00:17:37,810 --> 00:17:39,240

and then go back and connect them later.



300

00:17:39,350 --> 00:17:39,700

OK.



301

00:17:39,740 --> 00:17:44,280

So plus the assistant editor where it splits the screen it makes things really cluttered.



302

00:17:44,280 --> 00:17:52,810

So we're going to say at Iby outlet we are and what to ibl do we need on our cell where we need the



303

00:17:52,810 --> 00:17:58,750

background image so we're going to say category image of type you I image of you.



304

00:17:58,870 --> 00:17:59,790

Exclamation point.



305

00:17:59,800 --> 00:18:01,780

It's going to be an implicitly unwrapped optional.



306

00:18:01,780 --> 00:18:07,470

You know we're guaranteeing it's going to be there and an outlet vodka and we're going to see category



307

00:18:08,670 --> 00:18:09,440

title.



308

00:18:09,850 --> 00:18:15,070

And this is going to be a type you I label a case of there's two ip outlets there one of type category



309

00:18:15,070 --> 00:18:17,970

image and one type category title.



310

00:18:18,010 --> 00:18:18,430

OK.



311

00:18:18,490 --> 00:18:22,500

So let's go back to our story board and I'll show you how you can connect those up since we did it in



312

00:18:22,500 --> 00:18:23,340

code.



313

00:18:23,350 --> 00:18:28,810

All you have to do OK is go to your table cell right here.



314

00:18:28,810 --> 00:18:29,950

Change the class OK.



315

00:18:29,950 --> 00:18:31,900

See this little icon here the identity inspector.



316

00:18:31,900 --> 00:18:34,940

Change the class to category cell.



317

00:18:35,000 --> 00:18:37,530

OK now click this category sell again on the left hand side.



318

00:18:37,540 --> 00:18:42,220

And if you right click it you will now see category title and category image right here and all you



319

00:18:42,220 --> 00:18:49,470

have to do is literally drag it over and drag it over to the label.



320

00:18:49,900 --> 00:18:50,950

Now you're probably seeing some other things.



321

00:18:50,960 --> 00:18:52,780

A background view editing a review.



322

00:18:52,780 --> 00:18:55,880

There are some other default properties that table cells have that you can set.



323

00:18:55,900 --> 00:18:58,020

We're just not using them right now and we don't need them.



324

00:18:58,020 --> 00:19:01,410

These are our two custom Iby outlets and they are now connected.



325

00:19:01,930 --> 00:19:02,500

OK.



326

00:19:02,680 --> 00:19:07,530

The last thing I want to do for this video is just create an outlet for our table view.



327

00:19:07,690 --> 00:19:16,390

So in our categories Visi Let's create an outlet at the outlet we are and we're going to call this category



328

00:19:16,870 --> 00:19:25,250

table type you table you and you remember earlier how I said you could create a table view controller



329

00:19:25,480 --> 00:19:29,860

well with the table view controller will do instead of inheriting for you have you control your entire



330

00:19:29,860 --> 00:19:34,210

class here's a table table view controller and an already implements things like table view and the



331

00:19:34,210 --> 00:19:36,810

functions that you need under the hood to connect the table view up.



332

00:19:36,820 --> 00:19:40,860

But again it has limited ability when you want to have a fully customized.



333

00:19:40,900 --> 00:19:46,780

So we're doing things the way that most companies and developers do which is creating custom custom



334

00:19:46,780 --> 00:19:48,750

you have a controller with a table view on it.



335

00:19:49,120 --> 00:19:54,930

So there's our table view and last thing here is let's just go ahead and let's go ahead and connect



336

00:19:54,930 --> 00:19:57,360

it up in the main storyboard here.



337

00:19:57,370 --> 00:20:02,740

So on our view controller you right click and you see the category table simply drag it over and see



338

00:20:02,740 --> 00:20:07,880

how it notices which things are which That's really nice so just drag it over and it's now connected



339

00:20:07,880 --> 00:20:09,390

it.



340

00:20:09,460 --> 00:20:15,770

This is kind of cool the presenting Segway is showing a relationship between the the the view controller



341

00:20:15,820 --> 00:20:19,840

presenting it which is the Segway So you know that it's inside of a Ketek inside of a view controller



342

00:20:19,840 --> 00:20:20,450

here.



343

00:20:20,820 --> 00:20:25,570

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



344

00:20:25,570 --> 00:20:26,610

going on all together.



345

00:20:26,620 --> 00:20:27,290

OK.



346

00:20:27,640 --> 00:20:28,140

There it is.



347

00:20:28,160 --> 00:20:31,030

And you're probably running wondering Mark is broken.



348

00:20:31,120 --> 00:20:32,870

Well it's not broken.



349

00:20:33,190 --> 00:20:34,180

It's just.



350

00:20:34,300 --> 00:20:36,120

Why do you think it's not working.



351

00:20:36,530 --> 00:20:37,700

Give any ideas.



352

00:20:37,780 --> 00:20:39,040

Let me tell you a couple of things.



353

00:20:39,040 --> 00:20:41,230

First off it definitely is working.



354

00:20:41,230 --> 00:20:45,100

We just haven't finished the functionality so this image here it's not showing up because that was just



355

00:20:45,100 --> 00:20:48,810

a prototype We're just saying this is what we wanted to look like when it's actually working.



356

00:20:49,150 --> 00:20:52,810

But the reality is we are not feeding the table of with any data at all.



357

00:20:52,810 --> 00:20:53,890

There's no data anywhere.



358

00:20:53,950 --> 00:20:57,620

Like we don't have titles and image names coming from anywhere we like.



359

00:20:57,760 --> 00:21:03,760

Think about it how would you specify an image for each of these cells would we create 10 prototype cells



360

00:21:03,760 --> 00:21:04,720

if there's 10 cells.



361

00:21:04,720 --> 00:21:06,550

No table these do not work like that.



362

00:21:06,550 --> 00:21:11,290

So here's here's something really important understand about Tator and data and collection views and



363

00:21:12,130 --> 00:21:17,620

table views is that when you have a group of data that you would display in the table what you do is



364

00:21:17,620 --> 00:21:23,710

you create a view that can be re-used and you reuse it and create as many as needed based on the data



365

00:21:24,070 --> 00:21:25,150

that you have.



366

00:21:25,150 --> 00:21:30,340

So a lot of apps what they'll do is they'll go download a list of things from internet from a server



367

00:21:30,800 --> 00:21:35,680

let's say a list of categories and images and then your your app will take them and store them in an



368

00:21:35,680 --> 00:21:36,650

array for instance.



369

00:21:36,670 --> 00:21:42,910

And then what you do is you say my table view should have you know as many rows as there is items in



370

00:21:42,910 --> 00:21:43,550

this array.



371

00:21:43,570 --> 00:21:47,430

And then you take each item out of the array and you display it dynamically into the table.



372

00:21:47,470 --> 00:21:50,160

And that's what makes an efficient application.



373

00:21:50,170 --> 00:21:57,400

And you really can't you really can't do that effectively without basing it on the data.



374

00:21:57,400 --> 00:22:00,290

I mean you can you could use a scroll view for instance.



375

00:22:00,400 --> 00:22:03,040

And then you could load up items dynamically on it.



376

00:22:03,220 --> 00:22:07,000

And there's one for each one you may have to custom code each one but it's not the right way.



377

00:22:07,050 --> 00:22:08,110

So this is the right way.



378

00:22:08,170 --> 00:22:09,490

And there's a lot to learn about.



379

00:22:09,490 --> 00:22:11,500

So we're going to call this video done.



380

00:22:11,500 --> 00:22:16,240

And then the next exciting video you're going to learn how to get a table you'd actually think and how



381

00:22:16,240 --> 00:22:18,830

to work with data the ways that the pros do.



382

00:22:18,880 --> 00:22:22,300

So when you go to apply for jobs or build your own apps you are doing it the right way.



383

00:22:22,300 --> 00:22:23,050

So that's it for now.



384

00:22:23,050 --> 00:22:24,930

Marc price of slopes back home.



385

00:22:25,030 --> 00:22:25,790

See you soon.