Everyone welcome back Johnny be here with the COM and we're going to continue on with our chat app.
And the last lesson we created this function that retrieves all of the channels from our API.
And so now let's actually do something with it.
All right we're going to we're going to actually display in our table view in the channel ABC controller
these channels right.
So this gets started.
First thing we're going to do is we're going to start out with our custom Selar.
So here in the view I'm going to right click and say new file and we're going to do it Ko-Ko touch class
and it is a subclass of table view cell and the class is going to be called Channel.
So you can impress next and create.
Here we go.
Let's go ahead and go to the main storyboard and let's sit the class of our prototype cell to let's
just wait for the background to kick in here.
There we go.
All right so with the table view cell selected it would make this a little bit bigger.
Table B-cell selected open up our right pain.
And look at our identity inspector and change the class to channel so.
And then here in the attributes inspector we need to give it a reverse identifiers.
We're going to see a channel.
So I am going to say that and then open up our assistant editor with the channel self-selected so holding
option I'm going to click on channel Soldat Swift and then we can drag into our channel cell and the
outlet for our channel label.
OK so we're going to hold control and drag in here.
And this I'm going to call channel name when I see it.
And then let's go ahead and go back to our standard editor and go into our channel so swift.
And let's go ahead and take a look at our mockups.
So if we come down here let's see right here.
OK.
So it doesn't show here but when we select it we want to be able to have a light white background so
showing that it's selected and then looks pretty plain how we got to do is make sure that we pass into
our configure cell function the the right name.
So let's go ahead and do that.
So first off us go into the set selected.
OK so you see here it comes with a function called Set selected.
And it says here configure the view for the selected state.
So basically that means what does the view look like for any of the rows in the table you that are selected.
And so what we're doing is we're in the same if selected then we're going to set the background layer
to a white with a low opacity itself that layer that background color is equal to by color and the color
that we're going to do we're going to do a let's see here.
This guy right here so a white and alpha so initialises and returns a color object using the specified
opacity and grayscale values.
They didn't actually selected this town here again right here.
OK.
So the white We're going to set at one the highest white value and the alpha are going to sit at a pretty
low opacity so it will be quite transparent at zero point two.
And then else if it's not selected then we are going to say self-taught layer DOD background color is
equal to you by color dot clear dot C-g color.
All right there we go.
So now we have that taken care of.
So whenever we have a channel selected then we'll have a nice indicator that it's being selected to
look really good.
So now we've got to do our what do we have going on here.
Oh I forgot to set this as a C-g color.
There you go.
All right so now we're going to do our configure cell function.
So when I say configure cell can we are going to pass into this function a channel object to say channel
and channel.
All right and what are we going to do with this channel.
Well we're just going to grab the title from it and set our Iby outlet for the channel name to that
title.
So when I say let the title equal channel dot channel title and then just to be safe we are going to
use the no coalescing to say if there if you can't find the value there then just return it empty string
and then we can say channel name oh I just realized that I accidently drug over and lay out constraint
doing it.
So let me delete this hand real quick and delete this IPL it was a good chance to show you how to delete
Alice and the actions that you may accidentally add.
So you can delete it from right here but then make up storyboard.
You also need to be sure to delete it here so then right here if we right click then you'll see right
here.
There is a little yellow warning and so you can get rid of that by clicking right there.
I like it there we go.
So now I'm going to open up with option.
I'm going to open up the channel sell use so that we can actually set up the correct ballots.
This time I'm going to make sure I'm going to grab it from right here this label right here so I'm going
to drag over and say channel name.
So much for that so I label this time I'm going to go back to our standard editor go into channel sell.
And now we can say channel name dot text is equal to title it right and that's all we need for for now
and you can feed yourself I'm going to say this.
And now we're able now we're ready to go into our channel Visi and start to really cranking out those
table view methods that we need.
First off looks like we need an outlet and then we'll put in the protocols.
So holding option again I'm going to click on I mean just on the board to open our assistant editor
and then clicking on table view I am dragging control dragging over and releasing and naming this table
view.
And this is an outlet and connected and go back to our standard editor.
And here we go we're going to add our protocols.
Remember we have to conform to Table View delegate and table view data source.
And then here in view to load under the super we're going to say table view dot delegate is equal to
self and table view dot data sources to self.
So we've got that down and now it's going to tell us that we need to conform to these protocols here.
So let's do that.
I'm done here at the bottom.
What are the methods that we need to remember.
We need to know how many sections that are we need to know how many rows are in that section and we
need to have a function that sets up the cells for us all right.
So that top one is called cell for Rove at index path.
There we go and see right here right off the basons we already went through the work of setting up the
custom cell and the reuse identifier and everything we can just jump right into it and we can say if
that cell is equal to Table View dot dequeue reusable cell with identifier and that identifier remember
Whoops I don't like how it doesn't know that identifier is channel.
So for index path now we're in a cast that has a channel so I'm going to close this bottom pain and
give us some more room down here.
OK then we are going to create a variable for the specific channel that we want to pass into it.
We're gonna say left channel and this channel is going to come from our message service array of channels.
OK.
So we're going to say let channel equal message service instance dot channels and the specific channel
is which ever channel corresponds to the index path that we are currently in the table view.
And so that's going to be index path that Roe.
All right and then we're going to call the configure cell and say so.
So that configure cell and we're going to pass in that channel right there and then we are going to
return.
So it for some reason we are unable to return our dequeue a cell.
We're going to just return an empty UI table view.
So all right that should do it.
Next up we need to know how many sections and number of rows in that section sewing and say number of
sections and we're just one one and then a number of rows in section and that is going to be however
many channels there are in the message service so.
Message is that instance dot Channel's dot count.
All right.
Perfect.
And I think that's pretty much all we need for the for the table.
We're going to build this see if we missed anything and we've got to build successful so that's good.
And I'm going to go ahead and run this right now we're not going to.
We're still not going to see anything because we don't we haven't called the function to download the
cells or download the channels yet.
I don't think actually maybe we do we still have that channel ABC.
Are we downloading them in channel be seeing maybe
or I'm sorry.
See that's what we do don't know.
Chad AVC So this might actually work.
And see here you can come over here and oh hey yeah.
So there we go.
So I had forgotten that we had this function here in the chat you see which was to to actually download
the channels.
And so there you go.
And if we select one that's not quite what we want for the for that view.
But I mean yeah it's pretty close.
Let's go and check out what's wrong here.
I know what I forgot.
Back here in the story board if you select a table and then on your channels sell here under selection
this should be nutten And let's go ahead and run that again and click over here and.
Yeah.
It's look snazzy that looks real good.
Very very cool.
All right.
So looks like we need a couple of things we need to hash tag.
And I think this guy actually needs some constraints.
He doesn't already have constraints here on the label
label looks constraints look good actually.
All right.
So let's go back to our channel cell and let's get right here.
We need to do some string interpolation so hash tag and then title.
There we go.
All right on that right.
And there we go.
Right now it looks real good.
He is happy with that.
Feeling pretty good.
I think it looks good.
All right so congratulations.
It's starting to look like a chat up.
You know don't got much right here but I mean if you open this up and compare that to like slack I mean
this is looking pretty good and we have our profile.
We have you know pretty much we have we're able to log in we're able to create users.
Now we're showing our channels.
So we're making great progress and it's only going to get better and better from here on out.
So hope you're excited for that.
And yes so we're going to finish off here by adding and committing.
We said get dot get commit dash em.
This has been less than 20.
And I'll see you all in the next one.