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 account visi.
So when we click on this is going to take us over to them here.
It's going to take us over to the screen right here.
All right.
So let's go and get started on that.
You can see that it's we have some similar elements.
We're going to be able to reuse some of the work that we did on 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 Sigge weighing over to it at some point.
So I'm going to click here on our log in B 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.
And it's created a constant for it over in our constant file.
When I say left to create a count equal and paste that and put it in quotation marks save that and jump
back over to our storyboard.
All right so we got our new 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 of subclassed you have your controller and we want this to be called I think create a count.
PVC I say 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 the option and clicked on log in VC that opens up the assistant editor and that's screwed
over to our log in VC here.
I'm going to grab this don't have an account button and create an IB action for it.
So I'm going to control drag.
We're going to make an ebb and action and when to say this say create a count and press it goes we got
an action that looks good.
All right and I'm going to go ahead and close this and close the assistant editor to get back to our
standard editor.
Jump over to our log in Visi that's the file to the Iby 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.
And perform segment with identifier the constant that we created is called to underscore accrete 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 account button it should segue us to a
blank empty screen.
All right.
So clicking on the menu going to log in and it don't have an account.
And there we go.
All right.
So we know that that's working.
But 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 to forward 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 get 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 do 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.
So when you get rid of that I'm going to pull this label outside of this stack of you because we don't
need this stack of you anymore.
So I'm going to delete the stack here and I'll label that 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 copy over with there some other constraints.
And you can see that this loggin button is trained to be constrained to the bottom of the stack view.
So we can go ahead and move some of those constraints are 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 quite constrained this guy down here.
We're going to say 20 from the bottom and we are going to center it horizontally.
Right so that looks good.
Let's go in and rename it.
This is going to be create account.
And that excuse is going to this guy up here.
So when I say eight from the top and zero from the right with constraint to 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 going to drag you down here a little bit.
This is going to be 40 from the top and then centered horizontally.
Right looks good.
This stack for you here we already have 2 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 stack 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 suspect as a whole.
We're going to go 40 from the top or 40 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 a height.
So that's that's fine.
This is going to be our Choose Avatar and Jews have tor and let's go in and actually just remove its
constraints.
For now I'm going 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 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 as we're going to say 40 from the bottom
of the stack are you above is it 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 all right.
So now 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 say equal with this and then if you
control drag and 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
go there you're going to set this to be horizontally in the container.
And last we're going to do is set the alignment to be at the bottom here.
All right there we 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 drop to the alignment for the text to be at the very bottom.
So now when a user clicks on the what they're thinking when think of 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.
And then we're going to need one more button when I go out 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 generated 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 of space maybe four and then we're going to center
it as well horizontally in container.
Right and that looks pretty good.
I want to go ahead and save that and let's run it.
For an iPhone 6.
Yes.
Run that and see how it looks.
I'm going to click on the menu.
Click on the log in don't have an account sign up here.
And boom.
You know that that 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 loggin
view controller and that's not what we're really that's not really what we want we want to be able to
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 Visi and add an action that doesn't actually have anything
connected to it but it's an IB action.
When we say IP action phunk and just can I call it prepare for one wind.
OK.
And that's going to be of type Segway and UI story board.
Segway can we just to open close curly braces right there.
I want to say that and then we jump over to back in 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 when I say manual Segway
prepare for unwind with Segway.
OK.
And then I'm going to grab him 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 in utility's Constance in him we're just going to say a lot on wind equal unwind 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 and be 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 I'm going to we haven't set the class for this controller yet so here it's
like controller go up to our identity inspector and I'm going to send it to you.
What do 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 is an 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 this is true and completion is it's 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 logon and you know 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 logged 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 nil.
Save 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 can open this up.
Click on logon.
Don't have an account set 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 we created an online 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 spend
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 got 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 say Get add that get commit Dasch am.
And this was less than five minutes.
Push it to me said get push origin less and dash 0 5.
All right so we're good.
And we'll see you in the next one.