Haiti everybody will come back.
Johnny be here with slopestyle continuing on with our SMAC Chad.
This is where we left off in our last video we worked on our channel.
We see you.
I am.
We got pretty far actually when we created that sweet gradient view things are looking pretty good.
Want to do a little bit of work on this table view.
Before we continue on to our next view that we're going to work on which is going to be the loggin view
so let's hurry up and do that real quick.
We got a lot to cover in this video.
So let's see if we can get through it all.
All right so first off I want to change a couple of things here you see here in the simulator we have
these lines.
So we're going to get rid of those.
So here under separator I'm going to say none.
So that's the table you selected slick separator.
None.
All right so that's the first thing we're going to do.
And make sure that our background is clear.
So that's good.
And I think that might be all we need to do right here in the square and at a table.
So we're just going to write and sell and drop in a table cell here.
All right.
So that looks good and the height is probably good.
So this is actually the cell portion right here and I'm going to go ahead and label right here.
Hello.
Where are you at.
Know your rights.
Jumping in labor here.
And let's go and change.
Well first let's change the table cell background color that's right here.
Change that to a clear color.
There we go.
It looks better.
We can grab our label here and let's change the font color to white the font to custom and Alberic A
new that looks good.
And then just change this two hash tag general and they're going to grab that and add some constraints.
When to see 20 from the left and center that vertically in its container.
All right so that looks good.
I just want to save this and run it and just make sure that looks all right.
We won't actually see any thing right here with the prototype cells because we haven't set any of that
up inside of the View Controller.
Yeah that's good.
All right so now we're going to continue onto the loggin VC.
So I'm just going to pull up our designs right here.
So this is what we want it to look like.
We've got a cancelbot in here at the top the logo and the name of the app.
A couple of text fields to enter in the username and password a log in button and a second button that
says don't have an account sign up here.
All right.
So let's go ahead and let's get going on there.
When they zoom out a little bit and I'm going to add in a new movie controller that's go and we are
going to segue from this channel ABC controller to this one right here so I'm going to hold down control
and just drag over and select show.
OK so this is just creating a generic segue from this controller to this one.
All right so I'm going to say that and then we need to be able to trigger that view controller change
from this button right here.
So we're going to need to go ahead and add an IB action for this button here so I'm going to hold down
option and click on let's see you that's channel Visi and then down here I'm going to control drag from
logon button over here to the channel B C that's what file this is going to be in action.
And we're going to name this log in button pressed it connect.
And while we're here we're actually going to need an outlet for this eventually.
So I'm going to create our little outlets section and I'm just going to go in and create an outlet button
for this right now as well so it's still an outlet.
And call this logon button and the reason we are going to need an outlet for this is because we're going
to need to change the title of the blogging button when we're actually logged in and instead of showing
logging and we're going to display the user's name.
All right so that's good.
All right so we created this segue now to trigger it programmatically what we need is a go ahead.
Just dismiss the assistant editor come back here and click on the Segway and we need an identifier for
it so we can say when we press this button perform a segue with this particular identifier and that
identifier we're going to call it to log in.
It's when I copy that.
And we and our practice we generally put these types of strings in a Constance file.
All right.
So I want to create a new group over here I'm going to say right click on the smak folder see a new
group called this.
You see we call this newgroup you till that t's right click and see a new file and it's going to be
just a swift file.
Next when I call this constant It's
right here I'm going to make a little section for segues and when I say let to log in and we generally
use caps to you know Constance and that's going to be to log in and X couldn't.
And if you select something and you do quotation marks it automatically puts it inside of quotation
marks for you.
When to say that jump back over to our channel channel ABC and here where we created our Iby action
for the logon button pressed.
So what's going to happen when we push that logging button.
We want to segue to our logging in the sea.
So pretty simple.
We got to do say perform Segway with identifier the identifier is that one that we just created to underscore
loggin and the sender is no.
And we're going to save that and that should do it.
So when I run it in we're going to open this up and click on log in and a link.
There we go.
All right so this is the logging Visi totally blank right now.
So let's go ahead and fix that.
So I'm back over here to our story board.
And what do we need to do.
We already looked at it.
We need some buttons.
We need a button here.
Here in here we have our logo label two text fields and some divider views.
All right.
Let's go ahead and get cracking on that.
I want to start with our labels.
OK so I'm just going to add what I like to do is kind of just throw everything up on the board and then
start refining and adding constraints as we go along.
So we're going to need an image.
You going to drop an image of you in here and resize it to the general size.
Going to set the image in that his SMAC logo right there.
We've got to button a few buttons up here which is our close button one down here which is our loggin
button.
And then our if you don't have an account you can create an account button.
Then we have a couple of text fields whoops couple of text fields to enter in our username and password
of course case that's our user name one is our password one.
And then we got these posts over here.
We got these dividers here.
So we're going do a little bit.
We're just going to simply mortgage and use a couple of views in there.
So when I say you I view you and put your rate here
and we'll go and change the background color right away so we don't lose it.
And that background color Let me pull it up right here is.
Let's see here.
So with the controller selected and click here I put in a hex that Hex's 5 B 9 F C B.
Press return.
And now when when we click up here on any colors that's going to be under our recently used colors.
OK.
So that's going to be useful.
So that's going to be one of our dividers and I'm just going to hold option and drag to make a copy
of that thing and there we go.
All right so there is all of our elements doesn't look like much right now I know.
So let's go ahead and start refining our design here.
So let's get right up here.
This is an image so we can get rid of the text and go ahead and go ahead and add an image for it.
So this is going to be this is our close image and that's going to be right here this year.
Yeah right there.
All right so let's go ahead and constrain that one so it can be 8 and 0 will be constrained to margins
checked in over here.
This guy's site is forty eight by 40.
So it looks a little nicer and you may notice these blue outlines on all of our elements.
That's just the X code 9 beta bug that I've been getting.
Normally you would be able to get rid of that by coming over here and clicking on show baluns rectangles.
But that's not fixing it.
So just a bug.
All right.
Let's get right here.
That's going to say this.
Mark
my computer is being really slow right so SMAC.
And we're going to change the font to you custom and Helvetica new.
Let's make this bold and let's pump that up to say 19.
All right.
I'm going to grab that press command equal to get to the right size and zoom in a little bit.
K and then this color if I click here and then come over here and grab my font color come back here.
All right so this one is four to five for B 9.
Press enter and now this color is also going to be in our recently used.
So when you see me jump over here and grab one of these for future UI elements that's where these colors
come from OK.
For instance right now if we come here to our in button down here I can see here change the background
color to this blue right here and change the text color to white change the font to custom Helvetica
new.
17 is good but let's make you bold and see done.
Now we're going to add some sort of sizes to use with this is going to be 250 and the height is going
to be 50 K and let's go ahead and fix these two dividers here we're going to say with of 250 and a height
of two right and then these guys are also going to be with 250
250 hands get rid of the borders on these.
With both of those textfield selected and when to come over here and right here border style to none.
We're going to change the color to that purple that we added and going to change the system font to
custom and whole Vatican new.
I would say regular's fine.
And then we're going to change the give it a placeholder text or here for the first I user.
User name and for this and we're going to say password and since as a password if we come down here
to the check box here secure text entry that will make it so that when we enter stuff it'll just be
those black dots.
All right.
That's good.
Now let's do this button down here.
What's this.
That's as don't have an account sign up here.
All right.
So my computer is running super slow so I just had to do a restart.
So hopefully it's working a little bit better now.
So we left off here.
Get ready to fix this last Bundes homeowner press command equal to get that up to the right size can
change the text color to that light blue.
Hello we're using going to change the font to custom and Helvetica new.
And drop this down to 12 size so it looks good.
So everything is looking pretty good.
So let's go ahead and start adding constraints.
So for these two I'm going to go ahead and constraints for the width and height and then I'm going to
grab it and this smacked the ball right here and I'm going to throw those into a stack.
You by cooking down here in bed and stack.
And then I'm going to give that spacing of 12 and then I'm going to pass with the stack you selected
constrain it 60 from the top and center it so Center it horizontally in the container.
There we go.
Then for these guys right here the user name and their divider lines I'm going to embed in a stack of
those four.
Oh and for some reason it decided to put them in a horizontal stack which is not what we want.
So right here we want a vertical stack.
All right.
And we want it to be of line to leading.
And we don't want this to actually be right here.
Well that really messed that up.
Not inside the view.
There we go.
Hopefully yours didn't not mess that up so badly and for some reason it doesn't like stack because when
they're when these views are bigger than 50.
So we're going to have to constrain to a height of two and a with two hundred and fifty and we'll go
ahead and constrain the two text fields also to the width of two hundred and fifty.
All right and then we're going to give it spacing of 14 and that's starting to look a little better.
To then we're going to go and constrain it.
So I'm going to set it in the center so horizontally in container.
And then we're going to pin it 40 from the stack you right here because he had one constraint.
So that looks good everything's nice and blue.
Now here are constraints are good.
And then this guy I'm going to drag up here and Murnau constrain it horizontally in its container and
we're going to need to add some constraints on.
So for width and height the width is going to be 250 and the height is 50.
So it's good.
And then we're also going to constrain hit 40 from the bottom of the stack above it.
And then for this button here I'm going to give it's some width and height and set it zero from the
button above it.
So it's right snug under it and the two also horizontally constrain it looks good.
All right so there we go.
That's coming together now.
So it went from a hodgepodge of just UI elements scattered all over.
And then you just kind of go through and you know like pick a craftsman just kind of refine it and craft
it into what you wanted to look like.
Right.
So let's go and open up our simulator here and see how it looks.
So when I click on our menu click on a log in and there we go.
All right and last thing we're going to do in this video is just make it so that when we click on this
it gets dismissed.
All right.
So to do that we're going to need a controller file for this particular Wii U.
So going to sit here controller.
A new file and this is going to be a Cocco touch class going to see next and subclass of view controller.
And this is going to say we're going to call this loggin visi.
I say next and create
and then I'm going to hold down option and click on Main to get us back over here.
So with the assistant editor open first I need to change the class for this controller right.
So when Kim appeared to its identity inspector and change the class to the new controller file that
we just created called loggin visi.
So now we can add outlets and IB actions and stuff over here in the log in the C file.
I'm just kind of deleting some of this stuff we don't use and right here I'm going to have to be action
for this button right here so I'm going to control drag over and I'm going to say close pressed and
I say action and say connect and all you have to do here is just say this.
Miss anarea safer animated version of say yes.
True.
And then for completion we're going to say no.
All right we're going to save that and run it.
And here we go and click on the menu button click log in and pops up.
Looks real great.
Everything.
Oh except for that we got our username and password field mixed up.
So we'll fix that.
Let's see if this dismisses and it does indeed.
So that's looking good this can fix this real quick and it's mean storyboard and this actually illustrates
something that I love about stack abuse.
So if we had mess this up with just regular constraints we would have to remove the constraints for
each of these put them back and try to get it all worked out.
But here all we have to do is just kind of drag this down here and then drag this up here and the stack
handles everything else for us.
So that's really nice.
All right so I think we're I think we're good on this video.
We set out to create our log in VC and we have definitely done that.
We got all of the UI elements we're able to segue to it and dismiss it.
Obviously we haven't gotten to the point where we can like actually enter usernames and passwords and
how they should say logging.
There we go hand and actually log in because we don't have any of the API stuff set up but right now
you know we kind of need to get the UI set up so that we can make some meaningful progress on the code
side of things as well.
But you know we're making some good progress so I'm going to go ahead and just add to make some comments
for our progress here since I restarted the computer I'm going to have to CD back into our repo and
CD desktop and then CD Mac say get status see all the changes we made and make sure I'm on the right
branch which is listen for so that's good.
And then when I say get add not to add everything we just changed then get commit dash em say listen
for.
All right.
And then we're going to push this branch up to our online repulsing to say get push origin listen dash
0 4.
All right.
And that is good.
And the next lessons we're going to do a little bit more you stuff still.
We're going to create our view for creating a new account and hope you're looking forward to that and
I'll see you in the next one.