Hey everybody what's going on this is Caleb with devah slopes dot com and in this video we're going
to create no vc.
We're going to wire up the UI elements to the subclass and then we're going to get them connected and
talking so go ahead and pull open your project and let's begin now if you remember in the demo I showed
you that we utilize a UI navigation controller to handle pushing on the View Controller and then pushing
back to go back to our table view of your controller.
So what we're going to actually do to begin is select the View Controller we're going to go ahead and
go to Ed. embed in and choose navigation controller.
OK.
And that's automatically going to drop in a nice navigation controller that will handle everything in
here.
OK that's pretty cool.
So next we're going to need to rename our view controller file because view controller is not at all
descriptive.
So we're going to rename it.
Note the C like so.
And you know what I'm going to go ahead and actually copy this and then paste it in the class and paste
it up here in the comments that it's all the same.
And now that it's renamed our view controller in our story board has no idea what the identity is because
View Controller no longer exists.
So let's go ahead and head into the identity inspector.
Select the class and rename it note Visi and you'll see the name changes to no vc.
Very cool.
So what we're going to do now is we're going to drop in a table view controller.
So go ahead and search for Table View and drag one in like so and we're going to set it to fill the
entire view controller beneath the nav bar.
So drag the corners so that it fits in the controller like so.
And then we're going to pinnate zero from all sides 0 0 0 0 and 0 K add those four constraints.
Boom.
Now we're going to drag in a table view cell.
But don't worry we're not actually going to design that cell until later on.
So drag it on and leave it there.
The only thing we are going to do is change the height.
So go ahead and select the identity inspector.
Mean the size and size inspector and set it to be something like 60.
OK that's a little bit taller.
And what we're also going to have to do is select the table view and set the row height to be 60 as
well to match.
OK.
So that's cool that's there that's pinned in place and it looks good.
Now we need to set up the title and also set up an add button.
OK.
So to do that what we're going to do is go into the identity inspector.
We're going to go ahead and select this view controller and give it a title.
OK.
I called mine secure notes.
Make sure you spell it right.
Secure notes just like that.
And yeah you know what.
That looks pretty good.
The only thing is I wanted it to be kind of a white on yellow theme similar to the Iowa notes app.
And so to do that what I did was I selected the navigation controller.
Then I went into title color and I chose this nice yellow color.
And as you can see it changes in real time.
Now if you want to use this color it is a 9 4 4 and you can use the same yellow that I did.
Now what we need to do is we need to add a button right there.
And so to do that we're going to go ahead and call type button and drag on what's called a bar button
item and we're going to give it a type Ok so choose system item and then choose add and it'll create
a nice plus button for us of course the tend to we're going to need to modify and change to our nice
yellow color so it matches and so go ahead and do that and you'll see it's nice and yellow now.
Very cool.
So that's some place we have our table view here.
The only thing we need to do now is to wire up our table view to our view controller file.
So go ahead and click on the assistant editor and we're going to go ahead and click on our table view
here and right click and drag and drop it right above you to load.
Now just go ahead and call this table view like so and click connect or press enter.
And now we have a nice reference to our you table view.
OK very cool.
So now let's think what do we actually need to do to get our table view to play nicely with this view
controller.
We need to conform to the table if you delegate and you get table view datasource.
So we're going to actually just select no VC and collapse the assistant editor like so also you're going
to want to get rid of did receive memory warning.
I've never used that.
And so I don't really think you need to as well.
Now in order to use this table view we're going to have to go ahead and conform like so to UI table
view.
Delegate and table view datasource because it's got to know where it's getting its data.
Now there are three functions we need to conform to in order to properly conform to the UI table.
You delegate one of them is number of sections in table view and we're just going to return one K because
we have one section of cells.
Next we're going to return number of rows in section and we don't have anything yet.
We're going to create an array of notes later.
It's going to be static data for now.
Don't don't worry they'll wait till the challenge.
That's where you'll be challenged to make this app even more incredible.
But we're just going to go ahead and return one for now just one cell.
And then there is cell for road index path.
And this is where we're going to generate all of our cells it's going to be very cool.
But for now we're just going to return AUI table view cell so that it doesn't yell at us like so of
course you need to spell it properly like that.
And now we have successfully conformed to you Table View delegate and data source but it actually can't
be used unless we explicitly set the table views delegate and data source to be this view controller.
So in view did load type table view that delegate and set it to be called self.
Meaning this view controller and that we can do that because we've properly conformed to the delegate
next go ahead and call table view data source and set it also to be equal to self.
All right.
Very very cool.
So that appears to be properly lined up.
Let's go ahead and build it to our simulator let's just make sure everything's looking the way it's
supposed to and then we'll move on to the next video where we're going to design the note detail Visi
which is presented when you select a note from the table view.
So let's pull open the simulator here.
Here we go.
It's opening.
And let's take a look.
Very very cool obviously there's no notes.
But guys we have an app.
We have a title we have a button that can be pressed.
We have a table view with a cell and it's returning it.
You see I can click on it.
There there's only one and only one cell in the table view.
But guys we are getting even closer to having this app finished.
Congratulations on building note visi.
Let's head over to the next few controller where we're going to build out no detail AVC.
We're going to create a subclass and wire it up just like we did with this view controller.
So let's head over that way now.