What's up everyone.
Joining me here with the slopes dot com.
Welcome back to class and this lesson and we are going to get working on our new feature.
All right.
So Andy what we got so far is being able to just post our thoughts but not being able to really do anything
with them besides Life them.
But our new feature if we check out our mockup we have his comments.
OK.
So you can click on one of our thoughts and we can see here that we have a new little icon in our thoughts
that has a little speech bubble to the note how many comments there are for that particular thought.
And if you click on it and it's going to navigate to this view which displays the comments and displays
the user name the person who made the comment the time stamp and then the comment text.
And at the bottom we have a place where we can add those comments.
All right.
So here's what we're going to be working on in this lesson is getting all of the UI and groundwork laid
and for this to work right.
So let's get to it.
All right so first thing up in our main Visi Let's go ahead and make the modifications to be able to
display the number of comments.
So in mind that storyboard here inside of our stack of view we have our likes image and our likes on
them label.
I'm going to copy and paste the likes image and then I'm going to move it down so that it shifts over
one more and then I'm going to copy and paste the likes and the label and also move it to the bottom.
All right.
Just like that.
Now I want to select this one here and we're going to change the image to an icon.
And let's check if it has any outlets and it currently does not.
So that's good.
Then we're going to grab the label and we are going to see if it has any outlets and it does not either
and that's fine as it is.
I should just select the comment icon again and let's change the content mode to Aspect fit.
There we go.
That looks better.
All right so now we need to go ahead and open up our thought.
Let's see this will be in our view.
We want our thoughts so.
So we're going to add the outlets for this comment here so that we can set the number of likes.
And so I'm going to control and drag here and I'm going to say comments from the label and I say connect
and then we get to close our assistant editor and jump to our thoughts so that swift and here in our
can sell under likes them label I'm going to do comments and label that text is equal to a string and
we're going to say I thought that some comments I'm going to say that and let's let's run it and see
if it's working.
All right going up the log ins when we say G dot com.
One two three four five six and log in.
All right it looks like we got these showing up let's see if these works or I know none of these have
any cutting comments but we can manually change the number of comments here in our database so I'm just
going to slip one at random and said the number of comments to say two and then that should update automatically
in our simulator and yet there we go.
So now we have set the number of comments to 2 for this guy.
All right so it works and we change this back to zero and the update.
And that is back to zero now.
All right so that looks good.
Next thing we want to do is make it so that when we click on one of these we can pass a thought object
to our comments at VC.
So the way to do that is we are going to implement the select row and the prepared for a sec.
But first let's go ahead and add in our main story board.
Let's go to an ad that B women zoom out a little bit here pull this guy appear.
And then we're going to drag in a new controller.
Put you right here below.
And this segue came from our button here.
But for the add comments AVC we are going to control and drag from our view controller and go to this
new one and to show all right to give it a segue identifier.
So I selected the segue.
And here in the identifier we're going to say two comments.
OK.
Now one will need that here in just a minute.
And then we're going to create a controller file for someone to write the our control or folder and
say new file go to Koka touch class iOS and then next.
And this is going to be called comments Visi and next and create.
All right very good.
I don't want to delete all the stuff that we're not using and get rid of that save that.
Jump back into our main PC.
Or I'm sorry the main storyboard and we are going to select the controller Goodwins identity and Specter
change of the class to two comments visi.
All right.
And then under our comments VC Like I said we want to be able to pass from our main Visi a fact object.
So here and we're going to create a header for variables.
And here we're going to say Laar thought of type thought.
OK.
And we were going to implicitly unwrap that and see here.
Then back in Maine we see more we're going to do is when we select one of the thoughts from the table
of view we are going to grab the thought from our thoughts array corresponding to that item in the Table
View and pass it to our comments.
Vc the way to do that is first we need to implement a couple of methods.
So it's like the row at this is the function that is called When you click on one of the table view
items.
And so here we're going to do is we're just going to say perform Segway with identifier and the identifier
string is two comments.
That's the identifier that we set for that segue.
And our center where we were going to be sending in the Segway is the thoughts
array and the item at the index path that road.
OK.
And then we need to prepare for the segues I say prepare for segue.
And this method is called Right before any segue.
And we need to do a check because we have a couple of segues coming from this view controller so let's
do a check for the Segway identifier so we're in see if a Segway identifier is equal to and the identifier
that we want is two comments.
So if we are going to the comments Visi then we're going to say if that Destination DC is equal to segue
to that destination.
Right so we're we're creating a variable for the destination B C in this case the comments of B C and
we are casting it as a common.
We're getting reference to our destination where we're going we're getting a reference to that view
controller and then we're going to say if that thought is equal to sender as a thought.
OK.
So we're saying our center is going to be a thought.
The thing that we send in our Segway is a thot.
And then we say and then we're going to assign the destination Visi Dot thought equal to the thought
that we send.
So now we're saying the thought that we send from this controller we are going to set the destination
Visi which is this controller This thought we are setting to the one that we send over.
OK.
So basically we're passing this thought from our main C to this Fisi and setting it equal to this variable
in this view controller.
OK.
And that looks good.
That should do it.
So now when we click on one of the simulator here I want to click on one of these.
We're going to say wait to the comments AVC and the comments AVC will now have the thought that we clicked
on.
And the reason we're going to need the thought that we'd click on is so that we can reference the subcollection
of comments that we are going to create for each document when we add a comment to that document.
So now let's go ahead and create the comments AVC interface.
So jumping back to our mockup we have it's pretty simple we just have a table view and then down on
the bottom we have a text field and a button.
So let's do it jump into our main storyboard file.
Going to zoom in here to our comments the see and I'm going to do a search for the table view and drag
that in and kind of put it right up here in the corner.
You can drag it down a little bit and then down here at the bottom we're going to put in a custom of
you UAV you and this is going to hold our text field and our button.
We're going to put it right down here at the bottom and I'm going to constrain it.
I'm going to say zero from the left bottom and right and we're going to set the height to 44 and add
those four constraints and I'm going to do a search for a text field and I'm going to drag that into
the view and I'm going to try out it's a proper attributes inspector I'm going to change the color too
dark gray.
The Funt to custom and Avenir next change the size to 14.
And that looks good.
We're going to put a placeholder text of add comment on that.
And I think that looks good maybe drop the font size a little bit more.
Maybe 12.
Good.
All right and then I'm going to go ahead and add constraints I want to say 20 from the left 20 from
the right and then I'm going to center it vertically in the container and we go and then we're going
to get rid of the border.
So right here am with the attributes inspector going to set the border style to it and then I'm going
to pull in a button for our Send button and I'm going to change that to a type of add contact just going
to use the the default here.
Nothing too fancy.
And we're going to change the tent color to our dark gray.
OK.
And we're going to constrain this.
You heard me talk from the left or the right and center it vertically in container.
And that should do it.
All right maybe.
I think this that comment should be a little bit bigger actually going to change that to 13 maybe 13.
Looks good.
All right that looks good.
OK so now we need our prototype cell.
Right.
So I'm going to search for a pro to see here.
Table.
Table use.
Let's see here we go.
Drop that in and I'm just going to make the height and I said that to about 85 looks good.
And we can actually if we take a look at our mockup you can see that we have a username a time stamp
and a comet.
And if we take a look at our main Visi table view we have a user name a time stamp and a comment pretty
similar.
So I'm thinking we just save us some time here and we grab the username here.
The time stamp and the text and we copy it and then jumped onto our table B-cell.
Make sure you have content view selected and say paste.
All right so now we have those three elements and just rearrange these a little bit.
Let's see here jack that up there move the username up here.
That's good.
You know it's if these have any constraints you trailing you know I was curious of all of these constraints
actually and there you go.
All right so we are going to constrain to the left zero and from the top let's go eight and add those
two constraints and then we're going to control drag from the time stamp to our username name label
and when to say center vertically and then I'm going to constrain from the left and we're going to say
8.
Now pop that up right there.
And then for this guy I'm just going to constrain zero and zero.
And I think that looks good as is.
I'm just going to say 10 and a half and seven is fine.
I'm going to add those four constraints and we are good to go.
So let's go ahead and open up our comments that we see in our assistant editor and create our Iby outlets
hold option and click on comments Visi And let's go ahead and get our table views.
We want to control and drag and say table view that's an outlet and going to make a little space here
and add a header for outlets just because that's just what I like to do.
Just a little styling preference on my part.
And then I'm going to create a ibl from our comment text.
Heres what to say and comment.
Text that's an outlet and then we grab our button and get it creating action and action from our buttons.
I was going to be an action.
I'm going to say send or add comment.
Tapped.
That's an action message connect.
And just in case we need it later I'm actually going to McCay outlet for the container of you for our
textfield down here and I'll call this key board you.
All right.
So I think we got all of the outlets for the main airport for our comments visi.
Next thing I want to do is get a custom class for our comment cell here.
OK.
So I'm going to come up to view and when I right click and see a new file I do a kobo touch class next.
And this is going to be a subclass of wide table view.
So I'm going to call this comment cell and say next.
And create
and that's good we aren't going to be using the set selected method so when I delete that delete this
code here and save it and then we're going to jump into main story board I'm actually going to open
it in the assistant editors with the whole option and click on I mean does storyboard and then connect
them here to our comments.
See I'm going to select our cell and go to his identity inspector and change the class to comment.
So and now we can add our outlets to our custom comments so class.
So you're going to say outlets and we're going to add our user name because I feel somewhat controlling
and dragging from here and saying user name text and that's an outlet.
Then the time stamp
text outlet and lastly
comment
and connect and that's good.
So now we have our IBL is hooked up to our custom Cell class so we're going to close our assistant editor.
All right.
I think I think we're going to call a good for this lesson right here in the next lesson we will continue
adding comment class and the rest of the table view methods and delegates and everything else that we
need to get this ready right and so I'll see you in the next one.