Yo what's up everyone.
Mark Price does slopes dotcom.
And let's continue building our app here.
We're making great progress.
We want to do next is actually have this product screen show and we want to get our collection view
all configured etc. etc..
So first things is we need to make sure we have an identifier on our Segway So click your Segway and
then add the attributes inspector over here.
Set an identifier.
I like to just set this to The View Controller that we are going to which I believe is the product B
C category as we said we haven't created it yet.
Well we should do that and then we'll set the identifier.
So in your controller folder Let's go to a new file cocoa touch class and instead of you a collection
B-cell we will say you view controller and we will call this products beseem press Enter create.
OK.
Now go back to the main storyboard here.
We'll select our view controller will change its class to the products ABC wonderful.
And then on the segue here now we can set the identifier to products and we see it there.
OK.
So the Segway identifiers in there.
Let's go back to our categories Visi and what we want to do is when a category is selected like tapped
we want to show another view controller so really all we're doing here is presenting a Segway and then
passing the appropriate data into the other view controller that we're going to be going to how do we
do that.
Well the Table View delegate has a really cool function called did select row index path.
One thing that's really important is that you don't accidentally click did de-select so did de-select.
Ok that's when they've selected and taken their finger off a lot of new developers actually entered
this in and then the table view is not working correctly when you're tapping it.
So we want did select row index path.
OK.
So we're going to have roads going to tell us which row is tapped.
And then we can build out some logic here.
No big deal.
So first things first is let's grab the appropriate category that was tapped.
So let category.
Category equals data service.
Get categories and data centers get categories and we're going to say Index path dot row.
OK.
So we're just grabbing the category.
You know I think it's good category.
Now that's correct datasource get category it's trippin out it's just trippin out here.
I'm just going to copy what we have up here because this one has been out X code and it's trippin.
So there's our category.
Wonderful.
And then what we want to do is say perform a segue like so with identifier where we know it's the products
Visi Segway and the sender basically will object.
We want to pass in this.
So when I prepare for SEGUI is called We have data available to us and this is where we pass in the
category so we're passing in data here into our perform Segway.
So then when prepare for Segway called we can then pass that over into our products and then sell it
to the prepare for Segway function like so.
And you've done this before if let products be C equals Segway destination as products.
So we're describing the destination View Controller and we're casting it into the appropriate view controller.
Okay.
And then what we'll do is we will set the category on that view controller but we don't have any variables
or anything for that yet.
So what I want to do is go to my products Visi get rid of this comment here.
And what I want to do is see what it did receive memory warning is its great function here called initialized
products.
Okay.
And then what we'll do is we'll pass in.
Well what do we want to call this exactly initialized products for like a category title like will pass
in a title or just pass and the whole category.
Just thinking aloud here.
Okay initialized products category.
Wonderful.
And then what we'll do here is we'll actually store a list of products so same as we've done before
private set.
And then it's if I can type public var and this one is going to be called products.
All right.
And it's going to be an empty array type product like so if you're wondering why we're making this an
empty array.
And the reason is let's say that we the data hasn't loaded yet you're getting it from the internet somewhere.
Well you want an empty array to base your collection view off of Otherwise it was just nail your collection
if you would look for an item and it in your whole app would crash.
So that's why we're creating an empty array here.
OK.
And what we're going to do here is simply use the function that we already built in our data service
to get the appropriate product for this category that we are passing in.
OK so what we're going to do is we're going to say self-direct.
So don't you say self-heating to say products equals data service and since dogs get products for category
title we're going to say category title.
So it's going to happen is our products are going to be populated with products and we're just passing
in the title that was passed in the categories we see here to the products see.
And so now this initialized products function we can actually call from right here so we can say products
AVC dot initialized products and we can pass in the sender as a product or category.
There we go like so
OK.
So what we're doing here is we're grabbing the products Visi and we're just calling that initialized
products function that we just created.
Sender you're like what descender center is just the category that we passed in so remember up here
Pyrenean ended select ROA index path we passed in the category to the sender.
All we're doing here is grabbing the sender because when you pass it in the parameter type is any like
any object.
And so we have to specify that this is a category so sender as category and why am I force in wrapping
it.
Because I know for a fact that it is a category because I just said it right there.
OK.
So you can be sure that this is going to cast correctly.
So products these initialized products sender as category.
Okay.
And one thing that we probably want to do here is create an assertion so at build time we know that
this is working correctly.
And then I'll feel more comfortable using that force unwrap.
So let's do that now.
We're going to say assert that sender as with a question mark category is not equal to nil.
Okay.
And this assertion is good because what it's going to do is at build time this is only for build time
in developed motets not for production.
What's going to happen is this assertion is going to be called and it's going to say it absolutely must
be of type category when we cast it and if it's not it's going to crash your app at build time.
As a developer so as a developer you're going through you're building your project and then you go in
here and then your app crashes you know that you need to fix it we're forcing a crash here if it's not
working.
So at runtime it will definitely work.
OK this is just a layer of protection in your development that will help you out.
Now you maybe you think it will mark why didn't you do a guard statement in the casting OK or why didn't
you do an if let if let sender as category.
Well the reason I didn't do an if LET or guard is because my application requires this to be a category.
It's not chance ok it's not user base where it might be a category it might be something else.
Ok if that was the case we would use the guard or an inlet.
But since my app requires that this is a category when we cast it it makes more sense to use an assertion.
So build time.
If it's not working it crashes our app which is what we want.
OK we can guarantee it.
No.
So I feel a lot better about force unwrapping the this or forecasting this here so we're initialising
the products center as category.
This is great.
And then in the products you see it's going to go ahead and set the products to the products that we
have here in our data service.
So the next thing we need to do is get our collection of view actually working so let's implement a
couple of protocols put a comma after you have your controller and we're going to use a collection of
view delegate and UI collection.
The new data source like we've done before.
And of course we need the outlet for our collection of use at Iby outlet weak var and we're going to
say products collection of type you collection view.
OK.
And we're putting the exclamation there at the end.
Meaning it's an implicitly unwrapped optional.
And it's saying hey you haven't implemented the function so click the red button up here.
Do you want to add protocol stubs.
Absolutely.
So command X protocol stubs will put them where they actually belong down here I get to get rid of the
available nonsense.
And this year the code and get rid of that there.
OK.
And what we do here and feuded load is we will say products collection that datasource equals self and
products collection.
Delegate equals self.
OK we are saying that hey this collection of view is going to be the delegate and implement the protocols
the appropriate protocols to get this working OK.
And so a number of items in section.
Now there are multiple.
You could have an app with multiple sections a collection view or table view.
In our case we only have one.
So what I'm going to do is just simply return products that count.
Otherwise what you might have done is you might have said if Section equals 1 then you return three
you know.
Or.
Well you know whatever number it is or some other collection.
Else if Section equals to return this many.
But in our case again we only have one section so we're going to return products don't count and then
sell for item index path.
This is very similar to what we've done with the table view.
OK we're simply going to say if let.
Sell equals collection view.
Dick Hugh reusable sell.
And this one's going to be the product sell.
I think that's what we called it or what we will call it if we haven't done it yet for index path.
And in this case it's looking for the index path that's being passed in right here from the function.
So there's our cell if let's sell.
And then what we want to do in the cell is just passing the data that we're going to need.
And so let's look at our cell product sell and we don't have a way to update the data here so let's
create our function to do that.
So function update views and we're going to pass in a product.
We've done this before with the table view very similar.
And what we'll say is we will say product image image equals image named.
And this is going to be product image name and then product title text equals product that title and
product price text equals product price.
So all we're doing here is every time a collection of cell is created or Decoud we're going to pass
in the appropriate product and update the view.
So it's showing the correct data.
And this is important because of views on a collection of cell and collection of you and a table of
you are recycled.
So we have to continually update the views.
OK.
So that looks good there.
So back in our products we see what we can do now is we can grab the appropriate product and then pass
it into the cell so we can say let product equals products index path dot Roe.
Okay we're grabbing the appropriate Roe for the products and we're storing for the product and we're
storing it here in this product constant and then sell that update views.
We forgot to cast it.
So let's cast it now so as it were and say product sale.
There we go now it knows it's a product sell.
Once I sell that update views and we'll pass in the product and then we will return the cell as the
function requires.
Otherwise if this didn't cast appropriately like when we converted the cell it didn't it wasn't a product
cell which could happen if you had like a head or cell or some of you had multiple different types of
cells for a single collection which you can maybe you have one cell that looks one way for a certain
type of data and another cell it looks the other way you might have two collection B cells.
In our case we only have one but we still need this statement here or rather that you don't even need
an else statement.
We could just say return and then we could say product cell because it would never get here if you made
it through this portion here.
OK.
So great.
We are creating a cell or two cuing it we're passing in the appropriate product so it updates the data
and then returning that cell that looks fantastic.
And we got our products collection view here which I think even though it says it's been set I think
it's not probably set back in the storyboard here.
Select your controller right click it and you see that product's collection is definitely not set it's
lying to us.
Let's drag it over there.
OK.
And then let's also make sure our cell has a reuse identifier so go to your product cell and it does
not give us a reuse identifier.
And we are going to call it product cell.
You have to have this so the cells can be reused.
OK.
Let's go ahead and give this a spin.
Let's just see where we are.
See for even runs I'm feeling good about it so far.
We could have forgotten something though.
OK.
Moment of Truth when we click one of these.
We should see the next screen load.
And it does show the appropriate data.
I'm going to click hoodies and it's working so we've got our hoodies Dove soaps logo gray red gray and
black so our data is definitely populating as expected.
A couple of things.
Is this coater swag is really annoying and it's not supposed to be there.
The design that our designer gave us was just the arrow itself.
And also there's not a title here.
I think we need a title to show what kind of products it is and what kind of products we're showing
rather.
And shirts.
So you know it looks pretty good and I kind of like it.
Yeah yeah yeah yeah.
I like it.
So let's let's fix those couple of things.
So what we'll do and this is empty which is great.
So what we'll do is we'll get rid of this text here and then will set a title.
So let's get the title first.
So what we'll do is save this in the products we see when we're initializing this data.
Here let's just go ahead and set the title.
And that's easy as simple as saying navigation item Daut title equals we'll say category title so to
grab the title of the navigation bar.
OK all you have to do is grab navigation item that title and it knows how to find it and then you set
it to the title here that is.
That's really easy.
The harder one is the button and you would think maybe you would do something like this navigation item
that let's say back button right here or backbiter button item and then you know oh look at the title
we can set the title like this equals you know let's say an empty string but it doesn't work.
Unfortunately it does not recognize this because the the back button actually belongs to the previous
few controller.
OK it does not belong to this one and belongs to the previous one.
So we have to do is actually go into categories visi.
OK.
And what we can do in the categories we see is we can just set it here and prepare for segue.
All right.
So we can right here create a bar button item so bar button equals you IVD bar button item you have
to create a new one you can't modify it.
Again like I said It's strange you think you could but you can't.
So you create a new one.
And what does one say bar button title will make it an empty string and now will say navigation item
back bar button item equals bar button.
Or place what's there with something new.
OK.
And you know I think I want to do this before I initialize anything just for good measure.
Like so
cool.
So we've just created a bar button item.
We said it with an empty title.
And then what we've done is we've set the navigation item back bar button item to this new item here.
So let's go ahead and see if that works shirts and says shirts at the top and has the backbone Kaino
TX which is great hoodies so hoodies hats say hats.
Prices are different everything this is really good.
What you've done here is very important.
OK.
If you can if you don't have everything memorized that we've done in this series on this app then you're
not likely to get a job as as an Iowa developer and the reason why is displaying data is so critical.
OK and we've written what I call good clean code.
So if you write code like this you'll you'll impress people.
And what we've done is we've worked a table use reusable cells.
We worked with collection use which our grid system again collection of can go horizontal if you want
to swipe horizontally.
You could let's say that you wanted Let's say that you wanted to be able to swipe horizontally here
but swipe up and down here maybe this.
Maybe we just had one page and this said hats and the said shirts what you could do is you could actually
have a table view and each cell inside the table is actually a collection view OK with a horizontal
scroll.
So the table view goes vertical.
But the collection below goes horizontal.
And so you could have this row here on the table you cell which is a collection of you it goes from
left to right left or right left or right.
And that's how you would build something that goes up and down and left and right which is really cool
of course.
The collection itself can also do that functionality so you can do a collection view within a collection
view.
And we did a grid spacing here the spacing was automatic for us.
You can change the spacing you can change the layouts and do some other nifty things.
We didn't even begin to cover all of that here but you can change all that.
And this has really come together you've learned how to host data in a data service using the singleton
pattern.
OK one instance of this class in memory you've also learned the basics of implementing the delegate
pattern which is you have classes implement some type of protocol.
And I will abide by these rules.
And once those protocols are implemented X code will force you to implement the code needed for it such
as sell for item index path etc. and then you implement those things.
You have to make sure you set the data source and delegate on your table view or collection of view.
Otherwise your app will not run appropriately.
A lot of new developers do that so you'll learn a lot of things here.
This is the basis and foundation of what you're going to do whenever working with data.
And we've taught you everything here the right way.
OK the Apple way and I'm I'm happy.
I think it's good.
So congratulations.
This is good stuff here.
And let's move on and forward two other amazing apps Mark Price at deps slopes dot com.
See you next time.