1
00:00:00,180 --> 00:00:03,270
Did you have a go at the challenge? Here's what we currently have,

2
00:00:03,600 --> 00:00:06,720
and this is what you should have created upon completing the challenge.

3
00:00:07,320 --> 00:00:11,220
If you haven't had a go at attempting to recreate this user interface,

4
00:00:11,550 --> 00:00:16,530
pause the video now because I'm about to walk you through the solution. Again,

5
00:00:16,530 --> 00:00:18,960
we're going to be within the UI setup section,

6
00:00:19,350 --> 00:00:23,490
and I'm going to write my code below where I've got my canvas. Now,

7
00:00:23,490 --> 00:00:24,870
the first thing I'm going to create

8
00:00:25,020 --> 00:00:29,490
are actually all of these labels because they're relatively simple to layout

9
00:00:29,970 --> 00:00:31,680
and they'll be a quick and easy job.

10
00:00:37,700 --> 00:00:38,270
Okay.

11
00:00:38,270 --> 00:00:38,570
Now

12
00:00:38,570 --> 00:00:43,490
I've created three labels and it's time to actually put them onto the screen. Now,

13
00:00:43,520 --> 00:00:47,510
because I'm going to be using grids I can't use pack in addition.

14
00:00:47,780 --> 00:00:50,540
So I also have to put my canvas onto the grid.

15
00:00:51,050 --> 00:00:54,620
The canvas is going to go onto the grid in row 0,

16
00:00:54,710 --> 00:00:56,930
the first row at the very top.

17
00:00:57,380 --> 00:01:00,560
And in terms of column it's actually going to be column 1,

18
00:01:01,130 --> 00:01:04,970
the middle column. And then going down the list,

19
00:01:05,000 --> 00:01:09,680
my website label and my email label and my password label,

20
00:01:09,890 --> 00:01:12,380
they're all going to be on subsequent rows.

21
00:01:12,410 --> 00:01:15,950
So row 1 and then row 2

22
00:01:18,290 --> 00:01:19,490
and row 3.

23
00:01:21,530 --> 00:01:24,350
And they're all going to be in the same column,

24
00:01:24,350 --> 00:01:28,070
which is going to be column 0, the very first column.

25
00:01:29,870 --> 00:01:33,830
Now, if I run this code and we take a look,

26
00:01:34,100 --> 00:01:38,960
you can see that it looks a little bit weird just because this canvas is in

27
00:01:38,960 --> 00:01:43,310
column 1 while these labels are in column 0. But that's fine.

28
00:01:43,370 --> 00:01:46,070
It's gonna even out once we add the other components.

29
00:01:46,880 --> 00:01:50,270
That's all the labels done. The next thing are the entries.

30
00:01:52,250 --> 00:01:56,870
Now, as I showed you in the slide, these entries will have different widths.

31
00:01:57,200 --> 00:01:59,000
So the website entry,

32
00:01:59,000 --> 00:02:03,860
this one here, and the email entry are both going to have a width of 35.

33
00:02:04,250 --> 00:02:07,610
While the password entry is only going to have a width of 21.

34
00:02:08,990 --> 00:02:13,990
Now remember that the width is a property of the entry class.

35
00:02:14,600 --> 00:02:17,030
It's not something that's related to the grid.

36
00:02:17,360 --> 00:02:21,950
So if inside this grid method, you add something like width,

37
00:02:22,550 --> 00:02:25,160
then this is not going to work and it's going to give you an error.

38
00:02:25,280 --> 00:02:28,040
So that's a common source of error for students so be aware.

39
00:02:28,850 --> 00:02:33,500
Once we've created our entries, it's time to lay them out using our grid.

40
00:02:34,130 --> 00:02:39,130
Now, the first website entry is going to go into the same row as the website

41
00:02:39,530 --> 00:02:44,390
label, so that row 1, but the column is going to be column 1

42
00:02:44,390 --> 00:02:45,980
so it's the next one over.

43
00:02:46,130 --> 00:02:46,963
Okay.

44
00:02:51,800 --> 00:02:55,250
And the email entry is going to be in exactly the same column,

45
00:02:55,310 --> 00:02:57,200
but just shifted one row down.

46
00:02:59,710 --> 00:03:00,310
And finally

47
00:03:00,310 --> 00:03:04,030
the password entry is going to be on the next row, so row 3,

48
00:03:04,420 --> 00:03:08,380
and it's going to be in column 1  as well. Right now,

49
00:03:08,410 --> 00:03:09,760
this is what it looks like.

50
00:03:09,820 --> 00:03:12,580
And you can see that this doesn't look terribly bad

51
00:03:12,670 --> 00:03:14,890
other than maybe I need to change this to

52
00:03:14,890 --> 00:03:19,890
a capital P and I could probably add a colon to the end of each of these lines,

53
00:03:24,640 --> 00:03:29,290
like this. Now the final step to do is to add the two buttons.

54
00:03:29,500 --> 00:03:33,550
So one button has to go over here to the right of the password field

55
00:03:33,880 --> 00:03:35,410
and one has to go at the bottom.

56
00:03:42,450 --> 00:03:43,283
Okay.

57
00:03:43,350 --> 00:03:47,580
Now, this generate password button is going to be on the grid

58
00:03:47,850 --> 00:03:50,640
but it's going to be in the third column.

59
00:03:51,870 --> 00:03:55,440
And in terms of row, it's going to be on the same row as the password,

60
00:03:55,470 --> 00:03:56,610
which is row 3.

61
00:03:57,330 --> 00:03:58,163
Okay.

62
00:04:01,620 --> 00:04:04,890
While the add button is simply going to be in the last row,

63
00:04:05,130 --> 00:04:05,963
right?

64
00:04:07,950 --> 00:04:12,450
And this should be a button rather than a radio button.

65
00:04:13,710 --> 00:04:15,690
So this is what we have so far.

66
00:04:16,290 --> 00:04:20,970
This is clearly not what we wanted to have, which looks more like this.

67
00:04:21,060 --> 00:04:22,500
And if I put it side by side,

68
00:04:22,830 --> 00:04:27,810
you can see that the add button is far too small. Referring back to this,

69
00:04:27,930 --> 00:04:32,090
we need to set the width to 36. So let's go ahead and add that.

70
00:04:32,160 --> 00:04:32,993
Okay.

71
00:04:35,490 --> 00:04:39,360
Now, that makes the button a lot wider, but it still doesn't solve

72
00:04:39,360 --> 00:04:44,160
the fact that this generate password is actually in a completely different

73
00:04:44,160 --> 00:04:49,160
column while we actually ideally want that button to cover the entire password

74
00:04:51,720 --> 00:04:54,450
entry and also the generate password.

75
00:04:54,750 --> 00:04:58,440
So we need this button basically to have a column span of 2

76
00:04:58,680 --> 00:05:01,920
so that it spans both of these columns. And in fact,

77
00:05:01,950 --> 00:05:05,580
so does the website entry and the email/username entry.

78
00:05:06,270 --> 00:05:07,260
So let's fix that.

79
00:05:08,340 --> 00:05:13,340
The website entry grid is going to have a additional keyword argument

80
00:05:14,160 --> 00:05:17,640
which is the column span, and this is going to be set to 2.

81
00:05:18,240 --> 00:05:22,470
And we're gonna add that to the email entry when it's on the grid as well,

82
00:05:22,920 --> 00:05:24,720
and finally the add button.

83
00:05:25,770 --> 00:05:29,070
So now you can see that we're getting pretty close, right?

84
00:05:29,580 --> 00:05:31,410
Once we put in those columnspans,

85
00:05:31,470 --> 00:05:35,280
you can see our layout has dramatically changed and everything

86
00:05:35,280 --> 00:05:37,560
now looks a lot more aligned.

87
00:05:38,190 --> 00:05:43,190
Now the alignment is not perfect because the generate password button is

88
00:05:43,230 --> 00:05:46,080
actually just allowed to be the size that it needs to be.

89
00:05:46,620 --> 00:05:50,700
And I've tinkered around with some of the widths and you can, of course,

90
00:05:50,760 --> 00:05:55,620
try out your own widths and nudge it around a bit to see if you can change it.

91
00:05:56,640 --> 00:05:59,750
But I think in terms of overall look, this is not bad.

92
00:06:00,410 --> 00:06:05,360
The only thing I would add is maybe our padding of 20 around the side of the

93
00:06:05,360 --> 00:06:09,290
window is actually not enough. Maybe we need to increase it a little bit.

94
00:06:09,680 --> 00:06:10,520
If you want to,

95
00:06:10,550 --> 00:06:15,010
you can actually change the padding to 50 so that you get a little bit more

96
00:06:15,010 --> 00:06:18,490
white space and it looks a little bit less busy.

97
00:06:19,270 --> 00:06:22,360
So this is the final design that we're trying to get to.

98
00:06:22,810 --> 00:06:26,080
And now that we've set up all of our UI,

99
00:06:26,410 --> 00:06:29,260
all that's left to do is to add the functionality.

100
00:06:30,160 --> 00:06:32,590
And that is what we're going to do in coming lessons.

101
00:06:32,920 --> 00:06:35,770
So for all of that and more, I'll see you in the next lesson.