To go from this, to this will require not only some widgets to be added but a little bit more knowledge
about how to lay out our widgets on the grid.
Because notice how here we've got a single entry that is spread across the right side of the screen,
but then down here we've got an entry that's only taking up a part of that space.
Effectively, if we think about our grid, this particular entry is actually taking up two columns.
So how can we do this?
To demonstrate this, I've created a sandbox app.
So it's super simple,
all it has is a red label and a green label.
And you can see that the red label has a width of 20, and a height of 5, as does the green,
but the red is on row=0, column=0, whereas the green is on row=1, column=1.
So we get this kind of checkered kind of look.
If I decide to go and add another label, let's call it 'b' for blue, and I give it a background of blue,
and then I give it the same width and height.
Now if I put this new label onto the grid and I put it on to the next row,
so row= 2,
but the column I'm going to put it on column=0.
Now, I think at this point you can probably all predict where that label is going to go.
And indeed it goes on to the very first leftmost column and it's on the third row.
Now, what if I wanted that blue label to go across the entire width so that it's below the red and
also below the green.
Well, you might think that I could simply just double the width, right?
Instead of a width of 20, let's change it to 40.
Surely, that's going to stretch this label so that it goes across the entire red and green label.
But unfortunately, when I run this, you'll see, instead, this happens.
The blue label is still within the first column, and in fact, it's stretched that column to a 40 width,
and that red column is now centered again in the leftmost or the first column, and that blue is nowhere
near the green label, because it's not allowed to go into that second column.
So how can we solve this situation?
Well, the actual answer is another attribute that the grid has, which is something called a columnspan
.
Now the columnspan is exactly what it sounds like, really,
it's basically how many columns is this particular thing going to span.
So in our case, we want it to go across two columns column 0 and column 1.
So it should start out at column 0 but then span a whole 2 columns,
and now when I run this code you can see we get our desired effect.
The blue label is now across the red and the green and it's spanning two columns.
The link to this playground is in the Course Resources, so feel free to head over there and give it
a go if you want to play around with this example.
Now, in our case, if we break down the final layout we're looking for, it's effectively a three-column,
and five-row layout.
So we've already got our canvas which is actually going to go in the middle,
so probably the second column.
And then we've got the Website, the Email/Username, the Password,
and finally our two Buttons.
Now I've laid out this entire user interface, and I've specified the width of some of these entries
and buttons,
just because you'll need to do a bit of tweaking around just to make sure that everything lines up with
each other.
I've already done that ahead of time, and I've really worked out the sort of near optimal width.
So what I want you to do is to use what we've learned about the Grid Columnspan,
so if we have our Label, our Button, New Button, and Entry, if I want this particular button to go
across two columns, then I have to change that columnspan attribute to 2.
And I have to specify which column it starts out in and how many columns it's going to go across.
Using everything you've learned so far, I want you to recreate this user interface.
Have a look at what's on screen,
these are labels,
these are entries, and these two are buttons.
Have a look at where they lie within the grid system, and how many columns they go across,
and also the width of some of these widgets,
and see if you can recreate this user interface in your project.
So pause the video and give that a go.