Everyone welcome back Johnny be here with slopes dot com and we're going to continue on with our chat
app.
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 that.
All right.
We're going to we're going to actually display in our table view in the channel ABC controller these
channels All right so let's get started.
First thing we're going to do is we're going to start out with our custom cell or so here in view going
to right click and say new file and we're going to do it.
Cocoa touch class and it is a subclass of table view cell and the class is going to be called Channel.
So you can press next and create and he can do is go ahead and go to the main storyboard and let's set
the class of our prototype cell too.
And let's just wait for the background to kick in here.
There we go.
All right so with the cell selected it to make this little bit bigger.
Table B-cell selected open up our right pain.
And look at our identity inspector and change the class to channel cell.
And then here in the attributes inspector we need to give it a Rieves identifiers who are going to say
channel.
So I'm 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 Iby
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 first 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.
So I say itself that there that background color is equal to you by color and the color that we're going
to do we're going to do a let's see here and this guy right here so a white and Alpha souces initialises
and returns a color object using the specified opacity and grayscale values.
They didn't actually selected.
Let's go back down 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 0.2 and then else if it's not selected then we are going
to say self-taught layer dot 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 is 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 IP outlet for the channel name to that title.
So when I say let a 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 from the string.
And then we can say channel name oh I just realized that I accidently drug over and lay out constraint
thing.
So let me delete this hand real quick.
Going to delete this ibl 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 for we right click then you'll see right
here.
There's a little yellow warning and so you can get rid of that by clicking right there like.
There we go.
So now I'm going to open up with option.
I'm going to open up the channel sell the 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.
There we go make sure that's They 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.
All right.
And that's all we need for for now in the can for yourself.
I'm going to say this.
And now we're able.
Now we're ready to go into our channel visi.
And you start to really cranking out those table view methods that we need.
But first off looks like we need an outlet and then we'll put in the the protocols.
So holding option.
Again I'm going to click on I mean just 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 your table view delegate and you table view data datasource and then
here in view did load under the super we're going to say table view that delegate is equal to self and
table view dot data sources equal to self.
So we got that down and now it's going to tell us that we need to conform to these protocols right here.
So let's do that.
Down here at the bottom.
What are the methods that we need do you 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.
So that top one is called cell for Rove at index path.
Go and see right here right off the bat since we already went through the work of setting up the custom
cell and the reuse identifier and everything we can just jump right into and we can say if that cell
is equal to table view dot dequeue reusable cell with identifier and that identifier I 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 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 that 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 to say so.
Whoops.
So that configure cell and we're going to pass in that channel right there and then we're 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 and say number of sections
and we're just one one.
And then number of rows in section and that is going to be however many channels there are in the message
service message sure 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.
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 one inch channel ABC.
Are we downloading them in channel seeing maybe
or.
I'm sorry.
See that's what we do don't know the chad.
So this might actually work.
And see here 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 DC 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 so let's go ahead and run that again and click over here and our Yeah it's well look snazzy Alex.
Real good.
Very very cool.
All right so it 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 sell here 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.
All right.
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.
Yes so we're making great progress and it's only going to get better and better from here on out.
So I hope you're excited for that.
And yes so we're going to finish off here by adding and committing and we said get at DOT get commit
dash am.
This has been less than 20.
And I'll see you all in the next one.