All right ladies and gentlemen welcome back Johnny be here with scope's dot com.
And in this video we are going to continue working on our UI.
And the last one we left off here we created our loggin visi.
And in this one we're going to create our create a count visi.
So when we click on this is going to take us over to see who is going to take us over to the screen
right here.
All right.
So let's go ahead and get started on that.
You can see that as we have some similar elements are going to be able to reuse some of the work that
we did in our last lesson.
Same Clothes buttons similar text fields and similar buttons.
So that's good.
So yeah let's just jump right in.
First off we're going to need a new View Controller so I'm going to drag in a view controller from our
library here and we're going to be Segway weighing over to it at some point so I'm going to click here
on our log in the C control drag and drag over and see a show.
All right now we're going to go and create an identifier for this segue here.
I'm going to say to create a count.
OK I'm going to copy that.
Let's create a constant for it over in our Constans file.
I say let to create a count equal and paste that and put it in quotation marks save that and jump back
over to our storyboard.
Right so we got our new View Controller set up here in the story boy we're going to need a controller
file for it right.
So when I right click on our controller folder and see a new file and say Cocoa touch class and next
and it is a subclass you have your controller and we want this to be called I think create a count.
PVC is saying next.
And create
I'm going to go and get rid of some of this and unnecessary code here.
And that looks good.
Ready for us to work with.
Real quick.
Let's go ahead and just add the segue action here.
So here in the story board I'm going to open up our assistant editor with the log in visi.
So when I held option and clicked on log in VC that opens up the assistant editor and that's screwed
over to our blog in VC here.
I'm going to grab this don't have an account button and create an action for it.
So I'm going to control drag.
We're going to make an eye and action and when to say this say create a count button press.
There he goes.
We've got an action that looks good.
All right and then going to go ahead and close this as close.
The assistant editor to get back to our standard editor jump over to our log and VCT us with the file
to the action that we just created.
And we're just going to perform a segue over to that empty view controller that we've got right now.
So was Segway with identifier the constant that we created is called to underscore Croot account.
Sender is nil.
All right so it looks good you're going to save that and run it.
And what we should see is that when we click on that create a count button it should segue us to a blank
empty screen.
All right.
So clicking on the menu to log in.
And I don't have an account and there we go.
All right.
So we know that that's working and now we need to go ahead and add all of that.
All of those elements so one more time let's jump back into our design document is kind of like our
recipe book it tells us all of the steps that we need to take and what it's supposed to look like and
stuff.
All right.
So we got a label up here our clothes button some text fields and they're dividers and image here for
our avatar images that we will be able to select here in the future.
A button for the background color as well and a button to create the account.
All right.
So that looks good.
So I think we're going to do to save some time or is going to going a copy most of these elements and
and use those in our new controller.
So what I did is I just drug and selected all of these and I'm going to say command C for copy then
I'm going to come over here to our new controller.
Click.
Make sure the view is selected.
And just to command the to paste.
And then we can kind of drag this up to where we want it more or less.
So that's about right.
Right there.
And then we can just kind of delete the things that we don't need we don't need this logo to get rid
of that.
I'm going to pull this label outside of this stack of you because we don't need this stack for you anymore.
So I'm going to delete the stack here.
Now they will get kind of mood down here weird.
All right so that's kind of a pain.
But this button goes down here and this guy comes back up here.
However when we do that copy is the copy over with there some other constraints.
You can see that this loggin button is trained to be constrained to the bottom of the stack.
You can go ahead and remove some of those constraints we're going to come up here to the size inspector
and I'm going to say top space and we're just going to delete that constraint as well as this one here.
So we're just left with the width and height constraints which is what we want.
So it's going constrained this guy down here.
We're going to say 20 from the bottom and we are going to center it horizontally.
All right so that looks good.
Let's going to rename it.
This is going to be create a count an excuse when do this go up here.
So when I say eight from the top and zero from the right with constraint margins checked to add two
constraints.
And then for this right here this is going to say create an account that looks good click and say command
equal and then I can drag you down here a little bit.
This is going to be 40 from the top and then centered horizontally.
Know it's good.
This stack for you here we already have two of these that we need we have a username and password we
need a third one called e-mail.
All right so once again awesome thing with Steck views is I can just take these two right here.
Copy them and paste.
And it just you know puts them right inside of the stack below.
The other one so I can then change this user name to actually say e-mail and that's it.
You know so easy don't have to mess with a whole bunch of individual constraints just works real nice.
So then we need to constrain the stack view as a whole.
We're going to go 40 from the top or from the bottom of the label above it the Create an account label
say add one constraint and horizontally constrain it.
So it's set to the center of the container.
And that looks great.
So that's all done.
What do we have for constraints on this guy.
We have with height.
So that's that's fine.
This is going to be our shoes avatar.
Jews have a tar and let's go ahead and actually just remove its constraints for now to say command equal
and we're going to do is we need an image here.
OK.
So an image view and this image is called profil default.
All right let's go ahead and set the size 100 by 100 looks good.
And we're going to do here.
Well first off let me set the constraints for this image here.
Going to say 40 from the bottom of the stack of you above is within the height.
So I had those three constraints and then horizontally and container as well.
And then we're going to cheat a little bit because if you were using this you would think that you could
click on this guy and be able to choose your avatar as well as this button right here.
So we're going to do is we're just going to actually make this button go over this image.
We're going to do that is we're going to set up some constraints.
So we're going to we're going to control drag and we're going to stay equal with this.
And then if you control dragon do like a diagonal to it.
What we want is top as well.
So what that does is it sets the two tops to each other and then we're going to go ahead and just drag
down and set the height to 130
and then we go and then we're going to set this to be horizontally in the container.
And the last are we're going to do is set the alignment to be at the bottom here.
All right there you go.
So basically what we did is we just created a button that is this big which covers the the the White
image.
But it's actually a button.
And then we just dropped the alignment for the text to be at the very bottom.
So now when a user clicks on the what they're thinking when they're thinking that clicking on this image
they're actually clicking first on the button.
All right.
So that's what we're going to do there.
Now we're going to need one more button and copy this guy again and paste it over here.
And see what kind of constraints we have.
That's fine.
And this is going to say
generate back my computer slowing down again generate back ground color.
All right so we got our last button here generate background color and that's just going to go right
below our Choose Avatar buttons.
When it constrain it
zero from the bottom and let's give it a little bit space maybe four and then we're going to center
it as well horizontally in container.
Right and that looks pretty good.
We're going to go ahead and save that and let's run it.
Jesus just an iPhone 6.
Yes.
Run that and see how it looks.
I'm going to click on the menu.
Click on the in don't have an account sign up here.
And boom.
You know although it looks really great.
Yeah.
All right.
So the next thing we're going to look at here is how do we dismiss this because if I click on this and
we tell it to dismiss this view what's going to actually happen is it's going to go back to the log
view controller and that's not what we're really that's not really what we want we want to be able to
do what's called unwind all the way back to the initial view controller.
So that's what we're going to set up now.
Right.
So that's called an unwind segues.
So what you got to do is the root controller that you want to go back to which is in our case all the
way back from here to here which is our channel visi.
So we need to come over here to our channel ABC and add an IB action that doesn't actually have anything
connected to it.
But it's an IB action.
When we say action phunk and Burgett can I call it prepare for one wind.
OK and that's going to be of type segue and UI story board segue.
Can we just to open close curly braces right there.
I when I say that and then we jump over to back the storyboard and over here our last one in line and
a click here.
I'm going to control drag from view controller right to exit right here and I'm going to say manual
Segway prepare for unwind with a Segway.
OK.
And then I'm going to grab right here.
The unwind segue here and we're going to give this an identifier and we're going to call this on wind
to channel.
OK.
Copy that.
And that's going create a new Segway constant.
So over here and utility's Constance and we're just going to say left on the wind equal unwind to channel.
All right so we're going to save that and then back here in our create account who the see.
We're going to need an IB action for for that close button.
So I'm going to hold option and click on main story board to open up our assistant editor and this can
scroll over to find that here.
All right so when I grab this here we haven't set the class for this controller yet so here slick controller
can go up to our identity inspector and I'm going to send it to you what we call this create create
account visi.
There we go.
So now I can zoom back in on this game.
Now I can control drag over to our controller file.
I'm going to say close pressed.
I'm going to say oh this action.
So it's an action and connect.
And just to just kind of show you what would happen if we hadn't done that unwind and we were just trying
to dismiss.
So we'd say is true and completion is this true and completion is nil.
So I want to run this real quick and come over to our menu click log in and have an account.
So if I clicked on this we would just come back to our old logging and yeah you could do a you know
a kind of a double click to get out but that's not really a great user experience.
Once once we log in and once we create an account and have all of that logic and everything working
you would expect to be able to once you create the account that it just dismisses everything and comes
right back to the beginning.
OK.
So that's why we're doing this.
All right so come back here.
And the way to make the unwind a Segway work is pretty simple we just do regular perform Segway.
So when I say perform SEGUI with identifier and the Segway identifier is NY and the sender is no Say
that and run that one more time and make sure that's working.
So what we should expect to see is when we get to the create account VC if I click on the close button
we should unwind all the way back to the channel visi.
All right so let's see if that's working.
Open this up.
Click on logon.
Don't have an account sign up here.
And hey you know we unwind all the way back to our channel Visi which is just what we wanted.
So let me see how we're doing on time here.
Looks like we're about out of time.
But we accomplished what we set out to do here which was to create our create account.
We see here and we created an unwind segue so that we could get back all the way to our original VC
just like we wanted.
And yes we're looking good we're getting about where we need to be to actually start working with the
API because we needed to get to this point because we have to be able to first create accounts on the
API to do anything less.
That's the first point of being able to work with the API because once you're able to create an account
you can get an authorization token and do everything else that we need to do.
All right.
So that's why we've been working so much with the UI is to be able to get up to this point.
And I ask why in the next few lessons we're going to start talking about the tools that we use to work
with the API.
Some of the libraries that we're going to be using and so we get some cool stuff coming up.
Hope you guys are very excited.
Oh except I almost forgot we need to commit and push our changes.
So I'm going to say right here we're on lesson five.
And when I say get status I say get add that get commit Dasch am and this was less than five minutes.
Push it.
And we said get push origin less and dash 0 5.
All right so we're good.
And we'll see you in the next one.