WEBVTT

0
00:00.180 --> 00:03.270
Did you have a go at the challenge? Here's what we currently have,

1
00:03.600 --> 00:06.720
and this is what you should have created upon completing the challenge.

2
00:07.320 --> 00:11.220
If you haven't had a go at attempting to recreate this user interface,

3
00:11.550 --> 00:16.530
pause the video now because I'm about to walk you through the solution. Again,

4
00:16.530 --> 00:18.960
we're going to be within the UI setup section,

5
00:19.350 --> 00:23.490
and I'm going to write my code below where I've got my canvas. Now,

6
00:23.490 --> 00:24.870
the first thing I'm going to create

7
00:25.020 --> 00:29.490
are actually all of these labels because they're relatively simple to layout

8
00:29.970 --> 00:31.680
and they'll be a quick and easy job.

9
00:37.700 --> 00:38.270
<v 1>Okay.</v>

10
00:38.270 --> 00:38.570
<v 0>Now</v>

11
00:38.570 --> 00:43.490
I've created three labels and it's time to actually put them onto the screen. Now,

12
00:43.520 --> 00:47.510
because I'm going to be using grids I can't use pack in addition.

13
00:47.780 --> 00:50.540
So I also have to put my canvas onto the grid.

14
00:51.050 --> 00:54.620
The canvas is going to go onto the grid in row 0,

15
00:54.710 --> 00:56.930
the first row at the very top.

16
00:57.380 --> 01:00.560
And in terms of column it's actually going to be column 1,

17
01:01.130 --> 01:04.970
the middle column. And then going down the list,

18
01:05.000 --> 01:09.680
my website label and my email label and my password label,

19
01:09.890 --> 01:12.380
they're all going to be on subsequent rows.

20
01:12.410 --> 01:15.950
So row 1 and then row 2

21
01:18.290 --> 01:19.490
and row 3.

22
01:21.530 --> 01:24.350
And they're all going to be in the same column,

23
01:24.350 --> 01:28.070
which is going to be column 0, the very first column.

24
01:29.870 --> 01:33.830
Now, if I run this code and we take a look,

25
01:34.100 --> 01:38.960
you can see that it looks a little bit weird just because this canvas is in

26
01:38.960 --> 01:43.310
column 1 while these labels are in column 0. But that's fine.

27
01:43.370 --> 01:46.070
It's gonna even out once we add the other components.

28
01:46.880 --> 01:50.270
That's all the labels done. The next thing are the entries.

29
01:52.250 --> 01:56.870
Now, as I showed you in the slide, these entries will have different widths.

30
01:57.200 --> 01:59.000
So the website entry,

31
01:59.000 --> 02:03.860
this one here, and the email entry are both going to have a width of 35.

32
02:04.250 --> 02:07.610
While the password entry is only going to have a width of 21.

33
02:08.990 --> 02:13.990
Now remember that the width is a property of the entry class.

34
02:14.600 --> 02:17.030
It's not something that's related to the grid.

35
02:17.360 --> 02:21.950
So if inside this grid method, you add something like width,

36
02:22.550 --> 02:25.160
then this is not going to work and it's going to give you an error.

37
02:25.280 --> 02:28.040
So that's a common source of error for students so be aware.

38
02:28.850 --> 02:33.500
Once we've created our entries, it's time to lay them out using our grid.

39
02:34.130 --> 02:39.130
Now, the first website entry is going to go into the same row as the website

40
02:39.530 --> 02:44.390
label, so that row 1, but the column is going to be column 1

41
02:44.390 --> 02:45.980
so it's the next one over.

42
02:46.130 --> 02:46.963
<v 1>Okay.</v>

43
02:51.800 --> 02:55.250
<v 0>And the email entry is going to be in exactly the same column,</v>

44
02:55.310 --> 02:57.200
but just shifted one row down.

45
02:59.710 --> 03:00.310
<v 1>And finally</v>

46
03:00.310 --> 03:04.030
the password entry is going to be on the next row, so row 3,

47
03:04.420 --> 03:08.380
and it's going to be in column 1  as well. Right now,

48
03:08.410 --> 03:09.760
this is what it looks like.

49
03:09.820 --> 03:12.580
And you can see that this doesn't look terribly bad

50
03:12.670 --> 03:14.890
other than maybe I need to change this to

51
03:14.890 --> 03:19.890
a capital P and I could probably add a colon to the end of each of these lines,

52
03:24.640 --> 03:29.290
like this. Now the final step to do is to add the two buttons.

53
03:29.500 --> 03:33.550
So one button has to go over here to the right of the password field

54
03:33.880 --> 03:35.410
and one has to go at the bottom.

55
03:42.450 --> 03:43.283
<v 1>Okay.</v>

56
03:43.350 --> 03:47.580
<v 0>Now, this generate password button is going to be on the grid</v>

57
03:47.850 --> 03:50.640
but it's going to be in the third column.

58
03:51.870 --> 03:55.440
And in terms of row, it's going to be on the same row as the password,

59
03:55.470 --> 03:56.610
which is row 3.

60
03:57.330 --> 03:58.163
<v 1>Okay.</v>

61
04:01.620 --> 04:04.890
<v 0>While the add button is simply going to be in the last row,</v>

62
04:05.130 --> 04:05.963
<v 1>right?</v>

63
04:07.950 --> 04:12.450
<v 0>And this should be a button rather than a radio button.</v>

64
04:13.710 --> 04:15.690
So this is what we have so far.

65
04:16.290 --> 04:20.970
This is clearly not what we wanted to have, which looks more like this.

66
04:21.060 --> 04:22.500
And if I put it side by side,

67
04:22.830 --> 04:27.810
you can see that the add button is far too small. Referring back to this,

68
04:27.930 --> 04:32.090
we need to set the width to 36. So let's go ahead and add that.

69
04:32.160 --> 04:32.993
<v 1>Okay.</v>

70
04:35.490 --> 04:39.360
<v 0>Now, that makes the button a lot wider, but it still doesn't solve</v>

71
04:39.360 --> 04:44.160
the fact that this generate password is actually in a completely different

72
04:44.160 --> 04:49.160
column while we actually ideally want that button to cover the entire password

73
04:51.720 --> 04:54.450
entry and also the generate password.

74
04:54.750 --> 04:58.440
So we need this button basically to have a column span of 2

75
04:58.680 --> 05:01.920
so that it spans both of these columns. And in fact,

76
05:01.950 --> 05:05.580
so does the website entry and the email/username entry.

77
05:06.270 --> 05:07.260
So let's fix that.

78
05:08.340 --> 05:13.340
The website entry grid is going to have a additional keyword argument

79
05:14.160 --> 05:17.640
which is the column span, and this is going to be set to 2.

80
05:18.240 --> 05:22.470
And we're gonna add that to the email entry when it's on the grid as well,

81
05:22.920 --> 05:24.720
and finally the add button.

82
05:25.770 --> 05:29.070
So now you can see that we're getting pretty close, right?

83
05:29.580 --> 05:31.410
Once we put in those columnspans,

84
05:31.470 --> 05:35.280
you can see our layout has dramatically changed and everything

85
05:35.280 --> 05:37.560
now looks a lot more aligned.

86
05:38.190 --> 05:43.190
Now the alignment is not perfect because the generate password button is

87
05:43.230 --> 05:46.080
actually just allowed to be the size that it needs to be.

88
05:46.620 --> 05:50.700
And I've tinkered around with some of the widths and you can, of course,

89
05:50.760 --> 05:55.620
try out your own widths and nudge it around a bit to see if you can change it.

90
05:56.640 --> 05:59.750
But I think in terms of overall look, this is not bad.

91
06:00.410 --> 06:05.360
The only thing I would add is maybe our padding of 20 around the side of the

92
06:05.360 --> 06:09.290
window is actually not enough. Maybe we need to increase it a little bit.

93
06:09.680 --> 06:10.520
If you want to,

94
06:10.550 --> 06:15.010
you can actually change the padding to 50 so that you get a little bit more

95
06:15.010 --> 06:18.490
white space and it looks a little bit less busy.

96
06:19.270 --> 06:22.360
So this is the final design that we're trying to get to.

97
06:22.810 --> 06:26.080
And now that we've set up all of our UI,

98
06:26.410 --> 06:29.260
all that's left to do is to add the functionality.

99
06:30.160 --> 06:32.590
And that is what we're going to do in coming lessons.

100
06:32.920 --> 06:35.770
So for all of that and more, I'll see you in the next lesson.