1
00:00:07,150 --> 00:00:11,560
Hey everybody what's going on this is Caleb with devah slopes dot com and in this video we're going

2
00:00:11,560 --> 00:00:13,090
to create no vc.

3
00:00:13,090 --> 00:00:19,180
We're going to wire up the UI elements to the subclass and then we're going to get them connected and

4
00:00:19,180 --> 00:00:25,450
talking so go ahead and pull open your project and let's begin now if you remember in the demo I showed

5
00:00:25,450 --> 00:00:31,840
you that we utilize a UI navigation controller to handle pushing on the View Controller and then pushing

6
00:00:31,840 --> 00:00:35,120
back to go back to our table view of your controller.

7
00:00:35,350 --> 00:00:41,050
So what we're going to actually do to begin is select the View Controller we're going to go ahead and

8
00:00:41,050 --> 00:00:45,270
go to Ed. embed in and choose navigation controller.

9
00:00:45,520 --> 00:00:45,800
OK.

10
00:00:45,820 --> 00:00:51,310
And that's automatically going to drop in a nice navigation controller that will handle everything in

11
00:00:51,310 --> 00:00:51,750
here.

12
00:00:51,880 --> 00:00:53,150
OK that's pretty cool.

13
00:00:53,500 --> 00:00:58,510
So next we're going to need to rename our view controller file because view controller is not at all

14
00:00:58,510 --> 00:00:59,440
descriptive.

15
00:00:59,500 --> 00:01:00,600
So we're going to rename it.

16
00:01:00,610 --> 00:01:03,160
Note the C like so.

17
00:01:03,580 --> 00:01:08,250
And you know what I'm going to go ahead and actually copy this and then paste it in the class and paste

18
00:01:08,250 --> 00:01:10,590
it up here in the comments that it's all the same.

19
00:01:10,930 --> 00:01:17,350
And now that it's renamed our view controller in our story board has no idea what the identity is because

20
00:01:17,350 --> 00:01:19,570
View Controller no longer exists.

21
00:01:19,570 --> 00:01:23,120
So let's go ahead and head into the identity inspector.

22
00:01:23,380 --> 00:01:28,790
Select the class and rename it note Visi and you'll see the name changes to no vc.

23
00:01:28,810 --> 00:01:30,220
Very cool.

24
00:01:30,220 --> 00:01:35,090
So what we're going to do now is we're going to drop in a table view controller.

25
00:01:35,110 --> 00:01:41,590
So go ahead and search for Table View and drag one in like so and we're going to set it to fill the

26
00:01:41,590 --> 00:01:44,370
entire view controller beneath the nav bar.

27
00:01:44,380 --> 00:01:49,160
So drag the corners so that it fits in the controller like so.

28
00:01:49,450 --> 00:01:56,540
And then we're going to pinnate zero from all sides 0 0 0 0 and 0 K add those four constraints.

29
00:01:56,540 --> 00:01:57,460
Boom.

30
00:01:57,760 --> 00:02:00,250
Now we're going to drag in a table view cell.

31
00:02:00,250 --> 00:02:03,570
But don't worry we're not actually going to design that cell until later on.

32
00:02:03,730 --> 00:02:06,210
So drag it on and leave it there.

33
00:02:06,250 --> 00:02:08,920
The only thing we are going to do is change the height.

34
00:02:08,950 --> 00:02:11,750
So go ahead and select the identity inspector.

35
00:02:11,820 --> 00:02:17,090
Mean the size and size inspector and set it to be something like 60.

36
00:02:17,240 --> 00:02:18,910
OK that's a little bit taller.

37
00:02:19,180 --> 00:02:24,340
And what we're also going to have to do is select the table view and set the row height to be 60 as

38
00:02:24,340 --> 00:02:25,760
well to match.

39
00:02:25,950 --> 00:02:26,480
OK.

40
00:02:26,860 --> 00:02:31,440
So that's cool that's there that's pinned in place and it looks good.

41
00:02:31,510 --> 00:02:35,200
Now we need to set up the title and also set up an add button.

42
00:02:35,290 --> 00:02:35,900
OK.

43
00:02:36,100 --> 00:02:39,540
So to do that what we're going to do is go into the identity inspector.

44
00:02:39,700 --> 00:02:43,030
We're going to go ahead and select this view controller and give it a title.

45
00:02:43,140 --> 00:02:43,440
OK.

46
00:02:43,450 --> 00:02:47,190
I called mine secure notes.

47
00:02:47,320 --> 00:02:49,260
Make sure you spell it right.

48
00:02:49,300 --> 00:02:51,570
Secure notes just like that.

49
00:02:51,620 --> 00:02:53,340
And yeah you know what.

50
00:02:53,380 --> 00:02:55,110
That looks pretty good.

51
00:02:55,120 --> 00:02:59,960
The only thing is I wanted it to be kind of a white on yellow theme similar to the Iowa notes app.

52
00:02:59,980 --> 00:03:04,000
And so to do that what I did was I selected the navigation controller.

53
00:03:04,000 --> 00:03:08,350
Then I went into title color and I chose this nice yellow color.

54
00:03:08,350 --> 00:03:10,830
And as you can see it changes in real time.

55
00:03:10,840 --> 00:03:17,530
Now if you want to use this color it is a 9 4 4 and you can use the same yellow that I did.

56
00:03:17,530 --> 00:03:21,870
Now what we need to do is we need to add a button right there.

57
00:03:21,880 --> 00:03:27,010
And so to do that we're going to go ahead and call type button and drag on what's called a bar button

58
00:03:27,070 --> 00:03:33,880
item and we're going to give it a type Ok so choose system item and then choose add and it'll create

59
00:03:33,880 --> 00:03:39,610
a nice plus button for us of course the tend to we're going to need to modify and change to our nice

60
00:03:39,610 --> 00:03:44,240
yellow color so it matches and so go ahead and do that and you'll see it's nice and yellow now.

61
00:03:44,260 --> 00:03:45,170
Very cool.

62
00:03:45,520 --> 00:03:48,800
So that's some place we have our table view here.

63
00:03:49,030 --> 00:03:53,920
The only thing we need to do now is to wire up our table view to our view controller file.

64
00:03:53,920 --> 00:03:58,600
So go ahead and click on the assistant editor and we're going to go ahead and click on our table view

65
00:03:58,600 --> 00:04:03,630
here and right click and drag and drop it right above you to load.

66
00:04:03,670 --> 00:04:09,130
Now just go ahead and call this table view like so and click connect or press enter.

67
00:04:09,550 --> 00:04:13,020
And now we have a nice reference to our you table view.

68
00:04:13,240 --> 00:04:14,500
OK very cool.

69
00:04:14,830 --> 00:04:21,070
So now let's think what do we actually need to do to get our table view to play nicely with this view

70
00:04:21,070 --> 00:04:21,740
controller.

71
00:04:22,060 --> 00:04:26,600
We need to conform to the table if you delegate and you get table view datasource.

72
00:04:26,680 --> 00:04:32,540
So we're going to actually just select no VC and collapse the assistant editor like so also you're going

73
00:04:32,540 --> 00:04:34,540
to want to get rid of did receive memory warning.

74
00:04:34,540 --> 00:04:35,420
I've never used that.

75
00:04:35,440 --> 00:04:38,620
And so I don't really think you need to as well.

76
00:04:38,830 --> 00:04:45,280
Now in order to use this table view we're going to have to go ahead and conform like so to UI table

77
00:04:45,280 --> 00:04:45,860
view.

78
00:04:46,180 --> 00:04:52,120
Delegate and table view datasource because it's got to know where it's getting its data.

79
00:04:52,120 --> 00:04:57,740
Now there are three functions we need to conform to in order to properly conform to the UI table.

80
00:04:57,750 --> 00:05:04,750
You delegate one of them is number of sections in table view and we're just going to return one K because

81
00:05:04,750 --> 00:05:06,840
we have one section of cells.

82
00:05:06,850 --> 00:05:12,130
Next we're going to return number of rows in section and we don't have anything yet.

83
00:05:12,130 --> 00:05:14,980
We're going to create an array of notes later.

84
00:05:15,100 --> 00:05:17,460
It's going to be static data for now.

85
00:05:17,650 --> 00:05:19,380
Don't don't worry they'll wait till the challenge.

86
00:05:19,390 --> 00:05:22,090
That's where you'll be challenged to make this app even more incredible.

87
00:05:22,210 --> 00:05:26,280
But we're just going to go ahead and return one for now just one cell.

88
00:05:26,440 --> 00:05:29,280
And then there is cell for road index path.

89
00:05:29,290 --> 00:05:32,710
And this is where we're going to generate all of our cells it's going to be very cool.

90
00:05:32,860 --> 00:05:39,040
But for now we're just going to return AUI table view cell so that it doesn't yell at us like so of

91
00:05:39,040 --> 00:05:41,800
course you need to spell it properly like that.

92
00:05:42,280 --> 00:05:49,810
And now we have successfully conformed to you Table View delegate and data source but it actually can't

93
00:05:49,900 --> 00:05:55,030
be used unless we explicitly set the table views delegate and data source to be this view controller.

94
00:05:55,030 --> 00:06:00,630
So in view did load type table view that delegate and set it to be called self.

95
00:06:00,640 --> 00:06:05,350
Meaning this view controller and that we can do that because we've properly conformed to the delegate

96
00:06:05,830 --> 00:06:12,910
next go ahead and call table view data source and set it also to be equal to self.

97
00:06:12,910 --> 00:06:13,880
All right.

98
00:06:13,960 --> 00:06:14,980
Very very cool.

99
00:06:14,980 --> 00:06:17,380
So that appears to be properly lined up.

100
00:06:17,380 --> 00:06:20,980
Let's go ahead and build it to our simulator let's just make sure everything's looking the way it's

101
00:06:20,980 --> 00:06:27,160
supposed to and then we'll move on to the next video where we're going to design the note detail Visi

102
00:06:27,160 --> 00:06:29,860
which is presented when you select a note from the table view.

103
00:06:29,980 --> 00:06:32,680
So let's pull open the simulator here.

104
00:06:32,680 --> 00:06:33,350
Here we go.

105
00:06:33,350 --> 00:06:34,700
It's opening.

106
00:06:34,930 --> 00:06:36,380
And let's take a look.

107
00:06:38,260 --> 00:06:40,960
Very very cool obviously there's no notes.

108
00:06:40,960 --> 00:06:43,350
But guys we have an app.

109
00:06:43,360 --> 00:06:45,890
We have a title we have a button that can be pressed.

110
00:06:45,970 --> 00:06:48,640
We have a table view with a cell and it's returning it.

111
00:06:48,640 --> 00:06:49,580
You see I can click on it.

112
00:06:49,580 --> 00:06:52,940
There there's only one and only one cell in the table view.

113
00:06:52,990 --> 00:06:56,320
But guys we are getting even closer to having this app finished.

114
00:06:56,320 --> 00:06:58,520
Congratulations on building note visi.

115
00:06:58,600 --> 00:07:02,430
Let's head over to the next few controller where we're going to build out no detail AVC.

116
00:07:02,440 --> 00:07:06,610
We're going to create a subclass and wire it up just like we did with this view controller.

117
00:07:06,610 --> 00:07:09,370
So let's head over that way now.