Hey guys this is Caleb with slopes dotcom and in this video we're going to go ahead and build our group
feed the sea which is going to basically be the group chat room for the groups that you've created.
It's really cool.
And let's go ahead and let's build it out now open up your code project like I just did an open main
storyboard.
We're going to need to drag on a view controller just like this and I'm going to just put it near my
group's feces because we have a VC here used for creating a group.
This one is also going to be used for the same kind of thing.
But what we're going to do is we're going to actually start by copying this top bar and pasting it in
just so we have the same constraints and the same height and the same font.
Everything is just kind of done for us but we need to pin this in place.
So let's go ahead and pin it to the left top and right.
And for some reason it maintains its height constraints so we don't need to do that couldn't add those
constraints.
And now I'm going to get rid of the done button and I'm going to change the X button to instead be the
let's see what is it maybe the back button back icon OK.
And basically this looks like a UI navigation controller.
OK because it has a top bar here it has a title and it has buttons.
And if we select a group I want this view controller to slide over from the left and then we should
be able to tap the back button to slide back over to the group's AVC.
Now newgroup doesn't make sense for this one.
It's instead going to show the group title.
OK.
So if this is the slopes group it's going to show up slopes if it's the Nerd Herd group it is going
to say nerd herd but you'll probably notice it's not quite wide enough so let's change the width constraint
to maybe 200.
That way even if it's a really long title it'll still fit.
That's pretty cool.
So now that that looks great.
Let's make sure there are no lingering constraints here on any of the buttons because we are using them
and as you can see it's still connected to create groups Visi we don't want that.
I don't believe that I put any on the label.
No I did not.
All right.
Very very cool.
Next we're going to go ahead and we're going to actually just copy the table view from here because
our cells are going to look exactly the same as the feed messages.
So copy this and we're going to go ahead and select group title and we're going to paste it and just
drag it in place.
Beautiful and drag it up here it's going to snap 8 from the top.
Go ahead and Pinet 0 from all sides you're going to manually enter 0 there and add four constraints.
Now here's where we're going to have to really be careful that's right click.
OK good.
No outlet's we're stuck.
Our cell has a lot.
So get rid of these because we're going to set those up later.
The cell itself is also set with a certain identity and we actually need to pull open our document outline
here.
Select feed cell.
And this is actually going to be called Group feed cell.
And this is not a feed cell it does not have a class yet because we need to make one.
So go ahead and right click on view and create a new file Cocco touch class table view cell.
And this is going to be a group feed cell.
OK.
It's basically going to be the same as a feed cell but it's going to be specific to a group.
So go ahead and click Create.
Now we can get rid of all of this because we don't need it but we do have three things that we do need.
And we're going to go at those now.
So open the story board and as soon as that loads we're going to open the assistant editor OK like so
give it a second to load.
And now we can go in to automatic wups select select our controller first select our cell and then we
should be able to access that although it's giving us some trouble let's try closing it and opening
it again.
It's going to take its time though.
Lovely spinning beach ball of death.
Gotta love it.
This is why a lot of people prefer to use Zeb's instead of interface builder because it can be very
very resource intensive.
OK.
So let's try that again.
Looks like it's still giving us trouble.
So you know what let's go ahead let's close X code and I'm going to open the project again.
While it's even slow in closing.
OK.
Here we go.
Open recent break point.
Let's give it a shot.
Let's see if that fixed our issue.
Hopefully it did.
Select group title or so I select the new Wii U controller.
Oh you know what guys.
No wonder it's not showing up.
We didn't create a controller file for it yet.
So right click on controllers click new file Cocco touch class UI view controller is going to be the
subclass and we'll call this group feed Visi create that.
And now we're going to set that as the identity in main storyboard.
All right.
So select your view controller and the identity inspector.
Go ahead and call it group feed visi.
Now it will show up finally and since we have done that we can actually go ahead and go through the
whole feed we see here.
We can see everything that's lovely but we need to be able to go through the whole project and it's
still giving us some trouble.
So let's build it.
Let's see if that fixes anything.
Helps us to understand that everything is good to go.
OK that looks good.
Still not.
So we're going to go off and come back in and we're going to close and reopen our assistant editor as
soon as the beach ball is done spinning around.
There we go.
Maybe not
starting to consider giving up the interface builder now.
Come on you can do it.
I believe in you.
You can do it.
OK.
That looks good.
Looks like we're actually properly accessing the folders now.
So as soon as this decides to play nicely.
That's pretty.
We'll go ahead and set this up.
All right.
So select the cell group feed cell as we have called it and we're going to go into break point view
and select group feed cell.
OK.
So before we do anything we're going to actually select our cell and we're going to give it an identity
of group a group feed cell so that now we can actually properly interface with our subclass here.
So go ahead and I'm going to select the image view I'm going to right click and drag and I'm going to
go ahead and just call this profile image then we can't see them.
Now we can.
All right.
So I'm going to right click and direct from the label.
We'll call this e-mail label and I'm going to right click from the message content and call this content
label.
Nice.
OK so everything is there.
Now we just need to make a function to configure it to set up all of the data we pass in.
So type phunk configure cell and we need to pass in a profile image of Type II image.
We need to pass in an e-mail of type string and content of type string.
That's what every cell needs.
Now of course string needs to be with are I not I our.
And now let's set self-deceit profile image.
Image is equal to profile image that we pass in self dot email label dot text is equal to the email
that we pass in.
Not the icon.
There we go.
And self dot content label dot text is going to be equal to the content we pass in super easy.
Very cool.
That looks exactly right although you know what we did it again.
Email label.
We accidentally sent it back to you.
That is not correct.
Choose the stack view remove the referencing outlet and we're going to actually reconnect this.
Oh sorry we need to call it a label first and then we should be able to drag and release it on the e-mail
label.
That is way better.
OK.
So Group B group feed cell is now ready to go.
We just need to think about what do we need to do next.
We have properly setup everything for the cell but we have not yet set up anything for this view controller.
So click the view controller then go to Automattic and load up group VBC remove the boilerplate code.
That looks great.
And now we need to basically set up our table view here.
So right click and create an outlet for it Table View.
Awesome.
It looks great.
And get rid of this comment and what else should we do here.
Our table view is set.
We should create an IB action for our button here.
So let's go ahead and I just chose from here because it's pretty small.
Create an action and call this back button was pressed.
Ok that's cool.
And for back button was pressed.
Let's just go ahead and dismiss for now.
Now by the way we're going to be presenting this Motegi.
It'll pop up over the screen but we don't want it to show.
That way we want it to slide from left to right.
We'll be doing a View Controller extension in a video to come.
That will make it make it look like it's loading like a UI navigation controller.
But it's really not.
It's pretty cool.
But for now we'll just go ahead and dismiss the view controller that's fine.
What else do we need.
We also need yes an outlet for the group title because that will change as we open the controller so
group title label looks good.
And you know what I forgot something.
We are basically missing some space here for a UI label that's going to show all the users who are a
part of this group.
That's not cool man.
So let's go ahead and let's remove that top constraint and I'm going to go ahead and stretch this down
a little bit.
So we have some room.
I'm going to go ahead and set the background color here to be light gray because that looks like there
is no color.
Let's see is that right.
Yes.
Very good.
And now let's go ahead and just say UI label drag one on
there we go and we're going to put it here we're going to stretch it.
The extent of the view controller I'm going to pin it so that it stays there zero from there from there
zero from there.
And we're going to do eight from the top of the table view.
OK go ahead and pin it there.
And that looks awesome.
Now we're going to go ahead and change the font like you may be expecting to Menlo.
That's the font of choice for this app and I'm going to lower the font down to maybe say 14.
Try 14 out.
That looks pretty good.
Cool cool.
So that looks good.
Let's change it to green excellent and let's go ahead and just say user at breakpoint dot com.
Joe Schmo at break point.
Let's just say this is a group with two users.
But as you can tell as I add in users we already run out of space.
So let's set minimum font size so that it can scale well depending on how many users are in the group.
Very cool so now I have a label there.
But in order to do anything with it I need an outlet.
So let's just call this members label and what else do I need do I need anything else.
Yes of course I do.
Guys I almost forgot the most important part.
How are we supposed to send messages if we don't have a textfield to send messages and a send button.
That is a major oversight.
So let's add that now.
And to do that we're basically just going to go ahead and we're going to drop in a view over the top
of the table view.
We're going to add in a text field and a button.
It's going to be really easy.
So go ahead and type you I view and we're going to pass it in right here on top of the table you might
take a little while thanks to X code in Solu.
It's going to try to pass it in here into the background but we just want it to basically you know what
we're going to have to pull up our table view here to give us some space to access the background view
because we don't want it to actually be a part of the background view we want it to go on this view
on top of the table view that's perfect.
Let's go ahead and reposition this.
That's good.
Let's pull it a little bit wider and let's lower it down to say let's say 60.
Sweet.
OK.
So we're going to pin this to the bottom left and right and we're going to give it a fixed height of
60.
That looks great.
And we're going to go ahead and we're going to pull this back down by clicking the update frame button.
And of course it's not actually showing the update in frames.
But if I were to go off and come back on I'm sure it would.
But for now let's go ahead and let's set this up by giving it a background color.
Let's set it to be the same as the background of the app.
So it's that nice light gray color you although that is not the right light gray.
Which one is it.
That's the dark gray.
And we want it to be the light gray.
So I think it's this one.
Oh no.
That's the dark gray.
Sorry it's hard to tell when you compare it to a very light gray.
OK.
That looks pretty good.
That now matches the background of our table view that's cool.
And now we need to drop in a UI textfield which is where we're going to type our messages.
So draw draw drop that on as soon as you can.
And we're going to drag that to be a little bit longer then we're going to drop on a button.
Like so and that's going to be our Send button.
So go ahead and add that there.
And let's get rid of the button text.
We don't need that.
We just have an image already added in for us called Send can that looks really cool.
So our textfield we're going to use inset textfield like we've been using so we should change the font
to green.
We should change the system to custom and this should be Menlo and we want it to be a little smaller
So let's set it to be 14.
That's a good font size for this textfield.
Now if you remember the border style is rectangular and the textfield background itself is the dark
gray.
So let's set that to dark gray.
There we go.
Very good.
So yeah.
The only thing we need to change we need to give it a placeholder that just says Senda.
Well maybe I'll do lowercase.
Send a message dot dot dot and let's change this to be an inset textfield remember we created that at
the beginning of this course and it's basically a custom subclass that's going to allow us to look really
cool and have a nice white placeholder and it's going to turn into a nice green one.
Cool.
So this looks great.
Let's go ahead and set this so that it's right where it should be.
I don't really like it there.
OK.
That looks great.
Let's pin this where it should be.
15 from the top 15 from the bottom.
Let's also do 15 from the left and let's do eight from the right to the button.
That looks good.
And now we're going to pin the button 15 from the top 15 from the bottom and 15 from the right.
It's already pinned to our text view.
And you know what let's give it a fixed width and height of 30 and 30 and add five constraints.
Ok really cool so that's in place.
That's good to go.
Now let's go ahead.
We're going to basically keep everything inside this view and we're going to slide it up as our keyboard
goes up.
So let's go ahead and right click and let's create an outlet called Send button view then let's create
an outlet for the text field itself.
Message textfield then let's create an action or an outlet for the button.
Because we're going to disable it when we send it until it's sent send button looks good.
And of course for the send button we're going to need an action.
So go ahead and let's create that send button was pressed OK let's create some space here.
OK.
Really really really cool guys.
We have a view we have a text field and we have a send button.
Now we should do is to make sure that the send button view is bound to the keyboard.
So let's go ahead and call send button view bind to keyboard and that's going to use our awesome extension
to bind this view to the keyboard so that it slides up as we want to type.
Super super cool guys.
So this is now built.
We have group feed visi.
We actually set up our cell subclassed we set up how it looks we configured it.
This is awesome guys.
In the next video we're going to basically start setting up our cells so that when we select them it
can present this view we can pass in the title the users and we can access all of our feed messages
in the next video what we're going to do is we're going to set up our table view in groups Visi so that
when we tap on a cell it's going to present this view controller load in the group title to the users
and all of that good stuff.
And we're going to do that in the next video so let's head over that way and let's do it now.