Did you have a go at the challenge? Here's what we currently have,
and this is what you should have created upon completing the challenge.
If you haven't had a go at attempting to recreate this user interface,
pause the video now because I'm about to walk you through the solution. Again,
we're going to be within the UI setup section,
and I'm going to write my code below where I've got my canvas. Now,
the first thing I'm going to create
are actually all of these labels because they're relatively simple to layout
and they'll be a quick and easy job.
1: Okay.
0: Now
I've created three labels and it's time to actually put them onto the screen. Now,
because I'm going to be using grids I can't use pack in addition.
So I also have to put my canvas onto the grid.
The canvas is going to go onto the grid in row 0,
the first row at the very top.
And in terms of column it's actually going to be column 1,
the middle column. And then going down the list,
my website label and my email label and my password label,
they're all going to be on subsequent rows.
So row 1 and then row 2
and row 3.
And they're all going to be in the same column,
which is going to be column 0, the very first column.
Now, if I run this code and we take a look,
you can see that it looks a little bit weird just because this canvas is in
column 1 while these labels are in column 0. But that's fine.
It's gonna even out once we add the other components.
That's all the labels done. The next thing are the entries.
Now, as I showed you in the slide, these entries will have different widths.
So the website entry,
this one here, and the email entry are both going to have a width of 35.
While the password entry is only going to have a width of 21.
Now remember that the width is a property of the entry class.
It's not something that's related to the grid.
So if inside this grid method, you add something like width,
then this is not going to work and it's going to give you an error.
So that's a common source of error for students so be aware.
Once we've created our entries, it's time to lay them out using our grid.
Now, the first website entry is going to go into the same row as the website
label, so that row 1, but the column is going to be column 1
so it's the next one over.
1: Okay.
0: And the email entry is going to be in exactly the same column,
but just shifted one row down.
1: And finally
the password entry is going to be on the next row, so row 3,
and it's going to be in column 1 as well. Right now,
this is what it looks like.
And you can see that this doesn't look terribly bad
other than maybe I need to change this to
a capital P and I could probably add a colon to the end of each of these lines,
like this. Now the final step to do is to add the two buttons.
So one button has to go over here to the right of the password field
and one has to go at the bottom.
1: Okay.
0: Now, this generate password button is going to be on the grid
but it's going to be in the third column.
And in terms of row, it's going to be on the same row as the password,
which is row 3.
1: Okay.
0: While the add button is simply going to be in the last row,
1: right?
0: And this should be a button rather than a radio button.
So this is what we have so far.
This is clearly not what we wanted to have, which looks more like this.
And if I put it side by side,
you can see that the add button is far too small. Referring back to this,
we need to set the width to 36. So let's go ahead and add that.
1: Okay.
0: Now, that makes the button a lot wider, but it still doesn't solve
the fact that this generate password is actually in a completely different
column while we actually ideally want that button to cover the entire password
entry and also the generate password.
So we need this button basically to have a column span of 2
so that it spans both of these columns. And in fact,
so does the website entry and the email/username entry.
So let's fix that.
The website entry grid is going to have a additional keyword argument
which is the column span, and this is going to be set to 2.
And we're gonna add that to the email entry when it's on the grid as well,
and finally the add button.
So now you can see that we're getting pretty close, right?
Once we put in those columnspans,
you can see our layout has dramatically changed and everything
now looks a lot more aligned.
Now the alignment is not perfect because the generate password button is
actually just allowed to be the size that it needs to be.
And I've tinkered around with some of the widths and you can, of course,
try out your own widths and nudge it around a bit to see if you can change it.
But I think in terms of overall look, this is not bad.
The only thing I would add is maybe our padding of 20 around the side of the
window is actually not enough. Maybe we need to increase it a little bit.
If you want to,
you can actually change the padding to 50 so that you get a little bit more
white space and it looks a little bit less busy.
So this is the final design that we're trying to get to.
And now that we've set up all of our UI,
all that's left to do is to add the functionality.
And that is what we're going to do in coming lessons.
So for all of that and more, I'll see you in the next lesson.