Hey everybody what's going on this is Caleb with slopes dot com.
And in this video we're going to connect some things to our view controller so that we can modify them
we can connect them to our view and update our view based on the data passed in from our model which
is really really cool.
We're going to tie it all together in this video.
So go ahead and pull open your X code project and you know what.
Before we begin I never once have used did receive memory warning so I'm going to go ahead and just
delete that and get rid of it and you can also go ahead and delete this comment in view to load.
We're not going to need that as well and go into main storyboard.
So what we're going to do is we're basically going to just create an app that presents information about
a certain Apple product that we are going to hard code into the project so to display this data.
I'm going to go ahead and basically pass in what's called a UI label and the label is just a way of
displaying static text.
OK.
Well I guess it's not static because it can be updated.
It says static but we can update the text property whenever we want.
So let's go ahead and let's drag on a label and you can see if you drag it on the main view that will
eliminate if you drag it on the little subdue that will illuminate as well.
OK so we can just drag it on like so and we can go ahead and center it there and we can stretch it make
it look nice and pretty.
Very very cool.
So I'm going to go ahead and actually copy and paste this a few times because each label is going to
say something a little bit different.
Go ahead and copy and paste it drag it beneath.
Copy and paste.
Don't really worry about the alignment.
For now we're going to fix that in just a moment.
And so now we have five labels and to modify them I'm going to go ahead and select all five select the
attributes and inspector and I'm going to center the fun.
And I'm also going to change the font because I don't really like the system font that's provided by
default so you're going to learn how to do that too.
Go ahead and click text click font custom family and then choose whatever font you want.
I particularly like Avenir next and you'll see that in my other target topics I use it all the time.
Click Avenir.
Next we're going to change it to be bold and I'm going to bump it up to maybe size 22.
OK.
Click click OK or done.
And what we're going to do now is we're going to make it really really easy to evenly space and organize
these labels and that's what a stack view.
So we have all five labels here selected and nothing else.
And all we need to do is click right here there's a button that says embed in stack.
So click it and you'll see all the labels go together like that.
Now they're not super pretty they're all smushed together and they're not exactly as tall as our label
here but that's where constraints come into play.
So go ahead and choose the stack view from the document outline and go ahead and just position it about
there and click the pin button.
OK.
We're going to pin it 20 from all sides.
So go ahead and do 20 20 20 and 20 and go ahead and click add four constraints and watch what happens.
You'll see it stretches out to be 20 from all sides of the edge of our label but they are not equally
spaced.
This one is much bigger than the other four.
And to fix that we can go into the attributes and Specter and we can select the distribution dropdown
click fill.
And you can choose what's called Fill equally and watch what happens when I do that.
Boom they're all spaced perfectly evenly which is awesome.
Now we need to update these labels to actually include relevant information.
So I'm going to make this say I really want the K that's just going to have static text.
This label is going to say the iPhone model.
So I'm going to leave that as static text.
I really want the iPhone model an iPhone color case so that's where I like the space gray or silver
might go and we'll say and it costs and will do dollar iPhone.
Price.
Ok now I'm just putting this text here you don't have to.
And we're actually going to override and change everything in here but this is just to show you what
it should look like.
I really want the iPhone model in iPhone color and it cost iPhone price.
Let's let's go ahead and build and run just to make sure our labels are in the right place.
And then after we do that we're going to go ahead and connect these so that the controller can communicate
with the view and pass in data from the model.
OK go ahead and build and run the simulator should pop right up and we should be able to see if this
worked the way we hoped.
So here we go.
It's popping open and beautiful.
That's exactly what we wanted.
That looks great.
So perfect.
We can go ahead and stop the app from running.
And now let's go ahead and let's connect our labels to our view controller OK.
To do that we're going to go ahead and open up what's called the assistant editor and it allows us to
basically view relevant code files to a particular other file.
So this main storyboard connects to the controller does swift file and so go ahead and click this button
here with the two connected rings and it pulls open the assistant editor.
All righty.
So here we go.
And as you can see it automatically presents the code file associated with this controller.
Now since these views are a part of the view controller what we can do is we can actually connect these
directly to the view controller using something called an IP outlet.
OK if I right click from a particular label and then drag you'll see it makes a connection there's a
connection line and it says insert outlet or outlet collection.
Drop it right there.
Above you did load.
And we're going to go ahead and call this iPhone.
How about just lower case iPhone name label.
OK so now that is properly named.
You can tell it's an instance of you label right now that there is a connection between these two.
Now you can see that when I hover over the dot iPhone name label is now accessible to our view controller.
So this is kind of like a connection we have just plugged the label into the view controller.
Next we're going to right click on the iPhone color label and drop it over there.
Call it iPhone color label and connect it you can just press enter or click the connect button and then
finally go ahead and click on the iPhone price label right click drag and drop and call this iPhone
price label click connect to save it and now what we can do is we can actually go ahead and close the
assistant editor go into controller swift and now we can access these labels.
We can set the text property we can even change the color if we wanted to we can do whatever we want
from the controller because remember the controller can take information and it can pass it to the view.
It can also receive information from the model and pass it to the view as well and back and forth.
So and so forth.
So let's go ahead let's think about what we want to do here in view to load which by the way this is
a function that is called whenever the application starts running and the view is first loaded onto
the screen.
It is called what we can do is just like before when we created our model we can create an instance
of Apple product and we can set the labels to have the text properties filled with the information from
that model.
So let's create a constant inside view and load.
Go ahead and type let Apple product equal Apple product.
Whoops.
We need the one with the capital a there to reference the class and go ahead and put a and opening parentheses
and press enter.
Now we can go ahead and give it a name just like before iPhone 10.
The color is going to be space gray of course in a string.
And the price will be nine hundred ninety nine and ninety nine cents.
So now that that is done what we can do is we can call our label so go ahead and call iPhone name label.
And if you look inside of an iPhone name label by putting a dot you can see there are lots of properties
lots of different things we can do.
We can go ahead and set attributed text.
We can set it baseline adjustment we can set the font we can set it to be either enabled or disabled
we can say is it highlighted is there are highlighted text color.
There are so many properties but the one we care about right now is text.
OK.
And let me go ahead and select that the current text that is displayed by the label.
Press enter and set this to be equal to wait for it.
Apple product.
Dot name so we can take the information from our model and pass it to our view and present it using
the view controller.
How cool is that.
Let's go ahead and set up the color and price label as well by typing iPhone color label text equals.
And remember if we look back at our storyboard How is this set up.
We have.
I really want the iPhone model so we can just include the name iPhone X. but this label says in.
And then the color.
So I really want the iPhone X in space Great.
So we should put in the text here to reflect that.
So go ahead and create a string type in and a space.
And now what we're going to do is called string encapsulation.
We can take a value and we can encapsulated in a string using this special syntax forward slash and
then two parentheses inside the parentheses we can pass in any parameter.
Could be a number value.
It could be a string value can be really anything and we can convert it into a string or at least the
closest thing to us to a usable string value.
So what we're gonna do is we're going to go ahead and pass an Apple product dot color.
And now this is going to print out in space gray.
Pretty cool.
Next we have iPhone price label text.
And remember if we go in here we just need to print out the iPhone price but we need that dollar sign
in the front of it right.
So go ahead and go into the controller again and we're going to go ahead and say equals do another string
put a dollar sign and we're going to encapsulate the value of our price.
So go ahead and put a forward slash and to print the CS and pass in Apple product price and you'll notice
that even though it's a double k a number value we can convert it into the text based representation
of that.
So you know what guys.
Believe it or not we are good to go.
Let's go ahead and build and run this and see if it works.
Our simulator's should pop up momentarily.
Here we go.
All right check it out.
Oh look at that it works.
Awesome.
I really want the iPhone X.
Or 10.
Sorry in-space gray and it cost nine hundred ninety nine dollars and 99 cents.
So we are successfully communicating with our view from our model through our view controller.
The watchmaker's at work winding the watches guys very very cool stuff.
This has been a brief overview of how NBC works fundamentally in theory and in practice.
I hope you've learned a lot and stay tuned for future target topics on more advanced topics.