1
00:00:06,590 --> 00:00:10,710
Hey everybody what's going on this is Caleb with Debb slopes dot com.

2
00:00:10,720 --> 00:00:16,150
And in this video we're going to go ahead and build out note detail Visi which is the view controller

3
00:00:16,270 --> 00:00:19,570
that's presented when you select a note from the table view.

4
00:00:19,570 --> 00:00:25,570
So penélope in your project go into main storyboard and we're going to drag in a View Controller.

5
00:00:25,570 --> 00:00:32,880
So go ahead and drag one in there from the object's library and set it right there.

6
00:00:33,040 --> 00:00:34,450
OK that looks good.

7
00:00:34,480 --> 00:00:41,410
Now as you saw in the demo of this application when I select a cell the View Controller slides over

8
00:00:41,410 --> 00:00:49,210
presenting detail we see there's a navigation bar that shows up at the top here and basically all of

9
00:00:49,210 --> 00:00:51,430
our note is going to be displayed on the screen.

10
00:00:51,430 --> 00:00:52,750
Then there's a lock note button.

11
00:00:52,750 --> 00:01:00,130
So let's begin by actually dragging on that text view that shows the note like so UI text view.

12
00:01:00,760 --> 00:01:01,540
Drag it on.

13
00:01:01,540 --> 00:01:08,290
And we're going to go ahead and set it like so 20 ish from the left and right and we're going to pin

14
00:01:08,290 --> 00:01:09,260
it just like that.

15
00:01:09,320 --> 00:01:13,590
Well no you know what let's leave room for the locked note button and let's put that in first.

16
00:01:13,600 --> 00:01:21,830
So you button drag one on like so and I'm going to go ahead and actually fill this up just like this.

17
00:01:21,850 --> 00:01:23,250
Very nice.

18
00:01:23,440 --> 00:01:25,600
And yeah that looks pretty good.

19
00:01:25,660 --> 00:01:32,470
So go ahead and let's pin this 20 from the left 20 from the right 20 from the bottom and give it a fixed

20
00:01:32,470 --> 00:01:35,010
height of how about 40 K.

21
00:01:35,050 --> 00:01:36,560
That looks great.

22
00:01:36,580 --> 00:01:41,650
Now go ahead and let's make sure this is not going to be in the way it should snap right there to the

23
00:01:41,650 --> 00:01:42,430
top of the button.

24
00:01:42,460 --> 00:01:43,460
Yep.

25
00:01:43,810 --> 00:01:44,170
Cool.

26
00:01:44,170 --> 00:01:49,840
So go ahead and pin this zero from the top which really is 20 but it's taking into account the safe

27
00:01:49,840 --> 00:01:56,830
area 20 from the left 20 from the right and the left pin at 0 from the button.

28
00:01:56,830 --> 00:01:57,330
Awesome.

29
00:01:57,340 --> 00:01:59,080
Super cool.

30
00:01:59,080 --> 00:02:04,210
Now let's go ahead and actually change the size of this up to maybe 18.

31
00:02:04,240 --> 00:02:07,780
Change it to say lock note in all caps.

32
00:02:07,780 --> 00:02:09,720
You don't want this to be bold.

33
00:02:09,790 --> 00:02:15,320
So go ahead and just turn it bold and let's change the color to match the rest of our application.

34
00:02:15,510 --> 00:02:16,820
OK very cool.

35
00:02:17,380 --> 00:02:17,770
Next.

36
00:02:17,770 --> 00:02:21,300
Go ahead and bump this up maybe to 18 as well.

37
00:02:21,430 --> 00:02:26,530
And we can just leave the Latin in there because that's just placeholder text that's fine.

38
00:02:26,530 --> 00:02:31,120
But this controller does not have a subclass and we need it to have one.

39
00:02:31,120 --> 00:02:37,830
So go ahead and right click on controller click new file and click Cocco touch class.

40
00:02:38,030 --> 00:02:44,680
Ok now it is going to be a subclass of view controller but we're going to call it note detail B because

41
00:02:44,770 --> 00:02:47,290
the detail of the note is presented there.

42
00:02:47,290 --> 00:02:49,140
So click next or press enter.

43
00:02:49,330 --> 00:02:59,440
Then create it in your project and get rid of this boilerplate junk like so and go back into Main storyboard.

44
00:02:59,440 --> 00:03:04,990
Now we're going to go ahead and set the identity of this controller by selecting it selecting the identity

45
00:03:05,000 --> 00:03:10,310
inspector and then selecting note detail Visi press enter to lock it in.

46
00:03:10,480 --> 00:03:17,380
And now we should be able to access this using the assistant editor so open that up and now we should

47
00:03:17,380 --> 00:03:22,780
be able to go to automatic and choose no detail Visi just like that.

48
00:03:22,810 --> 00:03:28,220
Now it's super easy we're going to drag an outlet for this text view and an action for this button.

49
00:03:28,240 --> 00:03:37,780
So right click and drag and go ahead and just say note text view OK that looks good and right click

50
00:03:37,810 --> 00:03:40,690
and drag from the button and drop it.

51
00:03:40,720 --> 00:03:50,320
Change it to an action and call this lock note note button was pressed connect it like so.

52
00:03:50,590 --> 00:03:53,250
And now we have a connection.

53
00:03:53,350 --> 00:03:55,420
We can access this view controller.

54
00:03:55,420 --> 00:03:58,760
We can do something when the button is pressed.

55
00:03:58,810 --> 00:04:01,360
And now let's think what do we need to do.

56
00:04:01,360 --> 00:04:02,950
Can we do anything at the moment.

57
00:04:02,950 --> 00:04:04,700
We have not yet added notes.

58
00:04:04,810 --> 00:04:07,330
We have not yet entered anything.

59
00:04:07,600 --> 00:04:15,230
But I guess we can get rid of this comment here we don't need you know I think this is OK.

60
00:04:15,310 --> 00:04:16,710
I think this is good.

61
00:04:16,750 --> 00:04:19,900
So let's go ahead and let's call this video finished.

62
00:04:19,900 --> 00:04:24,220
We have now successfully created our detailed visi.

63
00:04:24,220 --> 00:04:30,380
We've linked it with our subclass we've added the actions and the outlets that we need.

64
00:04:30,460 --> 00:04:32,110
I think we're good to go.

65
00:04:32,290 --> 00:04:38,330
So let's go ahead and let's head over to the next video where we're going to create our note model.

66
00:04:38,410 --> 00:04:40,500
We're going to create a model for note.

67
00:04:40,510 --> 00:04:41,690
What does it need to contain.

68
00:04:41,770 --> 00:04:45,500
So let's head over there now and let's get started.