WEBVTT 0 00:00.440 --> 00:08.240 To go from this, to this will require not only some widgets to be added but a little bit more knowledge 1 00:08.240 --> 00:11.480 about how to lay out our widgets on the grid. 2 00:11.480 --> 00:19.310 Because notice how here we've got a single entry that is spread across the right side of the screen, 3 00:19.310 --> 00:24.410 but then down here we've got an entry that's only taking up a part of that space. 4 00:24.410 --> 00:31.120 Effectively, if we think about our grid, this particular entry is actually taking up two columns. 5 00:31.120 --> 00:33.310 So how can we do this? 6 00:33.460 --> 00:37.120 To demonstrate this, I've created a sandbox app. 7 00:37.120 --> 00:38.710 So it's super simple, 8 00:38.710 --> 00:42.880 all it has is a red label and a green label. 9 00:42.880 --> 00:48.490 And you can see that the red label has a width of 20, and a height of 5, as does the green, 10 00:48.490 --> 00:54.570 but the red is on row=0, column=0, whereas the green is on row=1, column=1. 11 00:54.570 --> 00:57.480 So we get this kind of checkered kind of look. 12 00:57.540 --> 01:05.790 If I decide to go and add another label, let's call it 'b' for blue, and I give it a background of blue, 13 01:05.790 --> 01:08.400 and then I give it the same width and height. 14 01:09.480 --> 01:16.260 Now if I put this new label onto the grid and I put it on to the next row, 15 01:16.260 --> 01:17.570 so row= 2, 16 01:17.570 --> 01:20.660 but the column I'm going to put it on column=0. 17 01:20.660 --> 01:26.150 Now, I think at this point you can probably all predict where that label is going to go. 18 01:26.150 --> 01:32.390 And indeed it goes on to the very first leftmost column and it's on the third row. 19 01:32.480 --> 01:40.760 Now, what if I wanted that blue label to go across the entire width so that it's below the red and 20 01:40.760 --> 01:42.340 also below the green. 21 01:42.490 --> 01:46.720 Well, you might think that I could simply just double the width, right? 22 01:46.720 --> 01:49.510 Instead of a width of 20, let's change it to 40. 23 01:49.540 --> 01:55.870 Surely, that's going to stretch this label so that it goes across the entire red and green label. 24 01:55.870 --> 02:00.670 But unfortunately, when I run this, you'll see, instead, this happens. 25 02:00.940 --> 02:08.790 The blue label is still within the first column, and in fact, it's stretched that column to a 40 width, 26 02:08.790 --> 02:15.990 and that red column is now centered again in the leftmost or the first column, and that blue is nowhere 27 02:15.990 --> 02:20.670 near the green label, because it's not allowed to go into that second column. 28 02:20.700 --> 02:23.790 So how can we solve this situation? 29 02:24.390 --> 02:32.390 Well, the actual answer is another attribute that the grid has, which is something called a columnspan 30 02:32.390 --> 02:33.260 . 31 02:33.290 --> 02:37.310 Now the columnspan is exactly what it sounds like, really, 32 02:37.310 --> 02:42.860 it's basically how many columns is this particular thing going to span. 33 02:42.890 --> 02:49.340 So in our case, we want it to go across two columns column 0 and column 1. 34 02:49.340 --> 02:55.300 So it should start out at column 0 but then span a whole 2 columns, 35 02:55.300 --> 02:59.830 and now when I run this code you can see we get our desired effect. 36 02:59.830 --> 03:06.460 The blue label is now across the red and the green and it's spanning two columns. 37 03:07.150 --> 03:13.390 The link to this playground is in the Course Resources, so feel free to head over there and give it 38 03:13.390 --> 03:16.690 a go if you want to play around with this example. 39 03:16.690 --> 03:23.520 Now, in our case, if we break down the final layout we're looking for, it's effectively a three-column, 40 03:23.520 --> 03:25.680 and five-row layout. 41 03:25.680 --> 03:30.090 So we've already got our canvas which is actually going to go in the middle, 42 03:30.090 --> 03:32.730 so probably the second column. 43 03:32.730 --> 03:37.080 And then we've got the Website, the Email/Username, the Password, 44 03:37.080 --> 03:39.240 and finally our two Buttons. 45 03:39.270 --> 03:47.000 Now I've laid out this entire user interface, and I've specified the width of some of these entries 46 03:47.000 --> 03:47.930 and buttons, 47 03:47.930 --> 03:53.390 just because you'll need to do a bit of tweaking around just to make sure that everything lines up with 48 03:53.390 --> 03:54.200 each other. 49 03:54.230 --> 03:59.540 I've already done that ahead of time, and I've really worked out the sort of near optimal width. 50 03:59.960 --> 04:05.410 So what I want you to do is to use what we've learned about the Grid Columnspan, 51 04:05.410 --> 04:12.070 so if we have our Label, our Button, New Button, and Entry, if I want this particular button to go 52 04:12.070 --> 04:18.220 across two columns, then I have to change that columnspan attribute to 2. 53 04:18.220 --> 04:24.010 And I have to specify which column it starts out in and how many columns it's going to go across. 54 04:25.030 --> 04:30.780 Using everything you've learned so far, I want you to recreate this user interface. 55 04:30.780 --> 04:33.420 Have a look at what's on screen, 56 04:33.420 --> 04:34.680 these are labels, 57 04:34.680 --> 04:38.070 these are entries, and these two are buttons. 58 04:38.070 --> 04:43.500 Have a look at where they lie within the grid system, and how many columns they go across, 59 04:43.500 --> 04:45.900 and also the width of some of these widgets, 60 04:45.900 --> 04:50.490 and see if you can recreate this user interface in your project. 61 04:50.490 --> 04:52.860 So pause the video and give that a go.