WEBVTT

00:00:01.950 --> 00:00:07.140
moving forward now in the last video we
talked about the pack geometry manager

00:00:07.140 --> 00:00:12.179
and Tkinter and what we gonna do now is
start looking at the next geometry

00:00:12.179 --> 00:00:14.469
manager that's the place

00:00:14.469 --> 00:00:19.060
geometry manager now as I alluded to at the
end of the previous video its even simpler

00:00:19.060 --> 00:00:23.420
than pack and it be useful
when some specific situations however it

00:00:23.420 --> 00:00:28.610
works by specifying absolute positions
for at least one window, windows that can be position

00:00:28.610 --> 00:00:33.059
relative to another window and unless you know the screen size of your program will

00:00:33.059 --> 00:00:37.370
be running on the use of absolute
positioning is not recommended now for more

00:00:37.370 --> 00:00:41.630
complicated layouts which really means
anything but the most trivial layouts you

00:00:41.630 --> 00:00:45.579
get much better results using the grid
manager now this works as you may have

00:00:45.579 --> 00:00:50.190
guessed by positioning widgets in a grid now less obviously the grid doesn't

00:00:50.190 --> 00:00:52.750
really exist until you start adding
things to it

00:00:52.750 --> 00:00:56.460
at which point its dimensions are
calculated automatically this the

00:00:56.460 --> 00:00:57.670
way to go

00:00:57.670 --> 00:01:01.630
instead using something like place now
this sounds like a complicated way to

00:01:01.630 --> 00:01:06.450
design just bear in mind that widgets
in the same column can be lineup above or

00:01:06.450 --> 00:01:10.999
below each other and also widgets in the same
row can also be lined up next to each

00:01:10.999 --> 00:01:15.340
other and approximation to the previous
rather hideous example can be quickly

00:01:15.340 --> 00:01:19.990
created using a grid so let's go through
this and make some changes to the code to

00:01:19.990 --> 00:01:26.459
now support a grid we are gonna change the 400 up here to 200 change the positioning and instead of using

00:01:26.459 --> 00:01:31.209
pack again we talked about using grids
so we are going to change that to grid and this

00:01:31.209 --> 00:01:37.380
time instead of specifying side which is something that was only
for the pack geometry manager we need to

00:01:37.380 --> 00:01:46.560
specify the row and columns we do that with....and

00:01:46.560 --> 00:01:51.029
we change the frame as well so the left
frame before I had this pack anchor and 

00:01:51.029 --> 00:01:55.959
fill etc which are all part of the
pack geometry manager for grid we are gonna make that

00:01:55.959 --> 00:01:56.560
a lot easier

00:01:56.560 --> 00:02:04.119
again we just need to go....and for canvas will do the 

00:02:04.119 --> 00:02:07.939
same parameters for canvas but we are going to add it with the grid geometry

00:02:07.939 --> 00:02:13.450
manager again.....

00:02:13.450 --> 00:02:22.349
...and likewise for the right
frame we are gonna get rid of all those

00:02:22.349 --> 00:02:28.140
parameters again and change this to a grid

00:02:28.140 --> 00:02:35.110
and that's gonna be.....and the buttons are also going to be add
the same way

00:02:35.110 --> 00:03:00.500
......

00:03:00.500 --> 00:03:07.019
.....

00:03:07.019 --> 00:03:11.250
we changing this to relative positions
minus instead of plus which we talked about

00:03:11.250 --> 00:03:21.410
that a few videos ago now  ok if we run this you can see that

00:03:21.410 --> 00:03:24.880
buttons are in the right place
horizontally but a lowered down on the screen

00:03:24.880 --> 00:03:28.880
than in the pack example now what we can
do is we can set the sticky property to

00:03:28.880 --> 00:03:32.870
position them more accurately so what the
sticky property does it takes the same

00:03:32.870 --> 00:03:37.329
compass points anchor does when using
packs so what we are going to do now is look

00:03:37.329 --> 00:03:41.910
at changing line 21 we're going to add......

00:03:41.910 --> 00:03:47.840
....which is n which is our anchor point equivalent to the anchor point

00:03:47.840 --> 00:03:52.790
that was in the pack geometry manager
will just stop this code and run again

00:03:52.790 --> 00:04:04.069
cloes that down first starting it again and just run it so that's better we are almost right but the buttons are

00:04:04.069 --> 00:04:08.069
now too close to the frame to fix that what we

00:04:08.069 --> 00:04:11.769
can do is we can configure the individual
columns using the columns configure

00:04:11.769 --> 00:04:14.090
method to give weights to each column

00:04:14.090 --> 00:04:17.799
we are gonna discussed weight a bit more in a minute
but until a weight has been set and the

00:04:17.799 --> 00:04:22.470
columns not sized to fit window instead it
just has the minimum width it needs to

00:04:22.470 --> 00:04:23.660
display its content

00:04:23.660 --> 00:04:27.310
so column configure is a way to
override that so if you look at doing that

00:04:27.310 --> 00:04:36.750
so we going to.....

00:04:36.750 --> 00:04:52.030
......

00:04:52.030 --> 00:04:56.720
....then we are going to use the grid column configure command

00:04:56.720 --> 00:05:01.590
rather than column configure I'm just going to type it and then I'll just mention that it's actually the same

00:05:01.590 --> 00:05:08.820
command anyways so we are going to type....so we give them all

00:05:08.820 --> 00:05:14.520
a weight and just out of interest if we have a
look at the code column configure equals

00:05:14.520 --> 00:05:18.690
grid column configure notice how its actually
calling grid column configure anyway and

00:05:18.690 --> 00:05:23.360
we have look at grid column configure obviously
that's that method so you can see it's called

00:05:23.360 --> 00:05:27.000
basically calling exactly the same
method in both scenarios so our advice

00:05:27.000 --> 00:05:30.060
here is to use the one that needs less
typing but just be aware that the other

00:05:30.060 --> 00:05:33.170
one exists for when you're reading
someone else's code or online

00:05:33.170 --> 00:05:35.500
documentation but they do actually both
mean the same thing

00:05:35.500 --> 00:05:45.980
so if we run it again now

00:05:45.980 --> 00:05:49.140
it looks pretty close to the pack example and
still not pretty but at least it's

00:05:49.140 --> 00:05:52.810
intentional and we deliberately placed
the buttons rather than making do with

00:05:52.810 --> 00:05:56.470
wherever pack put them and just closing
off again and of we go back to have a look at

00:05:56.470 --> 00:06:01.790
grid column configuring again and
click into it that's control click on Windows or

00:06:01.790 --> 00:06:07.010
Linux or command click on a Mac notice here
that in our documentation valid

00:06:07.010 --> 00:06:11.060
resources are minsize minimum size of the
column weight how much additional space

00:06:11.060 --> 00:06:16.330
propagates to this column and pad how
much space to let additional to the addition

00:06:16.330 --> 00:06:19.580
to the above generally speaking if your
looking for more documentation about a

00:06:19.580 --> 00:06:22.250
particular comment it can be really
useful jumping into the source code

00:06:22.250 --> 00:06:26.060
like I'm showing its a quick way to check
things as to what options are available

00:06:26.060 --> 00:06:29.880
rather than trying to track down
documentation but of course if you want more

00:06:29.880 --> 00:06:33.900
information on the option then you have to search further as the comments a little bit small

00:06:33.900 --> 00:06:38.000
but it can be a helpful reminder
here or just a quick way of determining that

00:06:38.000 --> 00:06:41.440
there's three valid options you can
specify here so I just wanna bring this on the

00:06:41.440 --> 00:06:46.360
screen now so what we've done is we've
created a grid containing to rows rows

00:06:46.360 --> 00:06:52.860
0 and 1 column 0 and 3 columns 0 to 2 I just want to display that on
the screen you can see the frame in row

00:06:52.860 --> 00:06:57.020
1 column 2 is being split into three
rows and what we've done is we've put

00:06:57.020 --> 00:07:00.570
orange lines to show the grids just you can sort of see what's happening with

00:07:00.570 --> 00:07:07.740
our code and if I go back and
show that image again you can sort of relate that to the

00:07:07.740 --> 00:07:11.330
image itself so the grid methods
got a sticky named parameters which we mentioned

00:07:11.330 --> 00:07:15.289
that can be used to change the position
of the widgets within their cells now

00:07:15.289 --> 00:07:19.039
it uses compass points just as we saw with
pack and it can be used to align the widget

00:07:19.039 --> 00:07:24.240
left right top or bottom the default if you don't
specified is center now specifying 2

00:07:24.240 --> 00:07:28.789
opposite points such as north and south
will expand the widget to fill the cell

00:07:28.789 --> 00:07:33.460
in that direction so setting all 4
points will fill the cell completely now to

00:07:33.460 --> 00:07:37.710
make it easier to see how this
affects our frames what we can do is you

00:07:37.710 --> 00:07:42.039
can give them a border and change their
appearance so they show up better so will also gonna

00:07:42.039 --> 00:07:45.710
use sticky in our code to expand the
left frames so that's the full height

00:07:45.710 --> 00:07:49.870
of its rows and the right frame to be the
full width of its column so lets go ahead and do that

00:07:49.870 --> 00:07:58.949
we are going to start typing on line 34.....

00:07:58.949 --> 00:08:35.310
......

00:08:35.310 --> 00:08:44.180
...notice the row
height is now determined by the height of

00:08:44.180 --> 00:08:48.260
the tallest widget it contains the right
hand frame in this case so we should be

00:08:48.260 --> 00:08:57.300
able to run that you can see the borders
now a little bit more clear to what's

00:08:57.300 --> 00:09:02.300
going on there so what we should be able to
do is make button 2 the full width of

00:09:02.300 --> 00:09:06.100
its frame so right across here to the right
hand side so if you think that we come

00:09:06.100 --> 00:09:14.330
back here and add something like.....

00:09:14.330 --> 00:09:22.250
....and then run that bit if we do that in
notice here that it hasn't worked it still

00:09:22.250 --> 00:09:26.350
hasn't expanded and this is where the weight option
comes into play so the weight option is

00:09:26.350 --> 00:09:31.760
quite important in deciding the behavior
of widgets within cells so unless a

00:09:31.760 --> 00:09:36.339
weight has been set for a column or row
them some options including sticky won't

00:09:36.339 --> 00:09:40.420
do anything else you can see in this
example here on line 39 it had no effect on

00:09:40.420 --> 00:09:45.230
button 2 the right frame only has one
column so if we set its weight first

00:09:45.230 --> 00:09:50.120
then button 2 sticky option will
work so lets go ahead and do that close that

00:09:50.120 --> 00:09:58.230
down and on that line we're gonna put....

00:09:58.230 --> 00:10:05.550
....and leaving
the code on line 40 which sets

00:10:05.550 --> 00:10:12.870
sticky to ew for button 2 and if we actually run
that

00:10:12.870 --> 00:10:18.120
that now works button 2 fills the width
of the frame so the default for sticky is

00:10:18.120 --> 00:10:21.890
center so now the column has a
weight and stickies actually being used

00:10:21.890 --> 00:10:27.100
the remaining 2 buttons are centered
and of course because on line 40 we specified

00:10:27.100 --> 00:10:31.550
sticky equals ew button 2 has expanded
to fill the entire space

00:10:31.550 --> 00:10:35.990
so our layouts been useful but for experimenting
with the various options but frankly

00:10:35.990 --> 00:10:39.700
it's a little bit boring so we can
create something a bit more useful then

00:10:39.700 --> 00:10:44.170
have a look at the options that we used
to lay the widgets out so what we're going to do is

00:10:44.170 --> 00:10:47.940
run the program after each step to see
the widgets as they are being added

00:10:47.940 --> 00:10:51.240
now the weight the layout and we're going to build
is going to look something like this

00:10:51.240 --> 00:10:57.529
close this down and bring this over so this is going to be what we are trying to build an interface that

00:10:57.529 --> 00:11:00.920
looks something like that with a
something that you probably see in a

00:11:00.920 --> 00:11:04.900
real application that you creating now
when designing layout it can be really

00:11:04.900 --> 00:11:08.930
good idea to draw a rough sketch and
petition it off in two rows and columns

00:11:08.930 --> 00:11:14.660
and I'm just gonna give an example of that so you can see the example here

00:11:14.660 --> 00:11:19.290
we've come up with a
mock design and partitioned it off clearly

00:11:19.290 --> 00:11:23.060
in to rows and columns like you can see
on the screen now although it's easy to

00:11:23.060 --> 00:11:26.459
see that the label of the top of the
screen is in its own row is not

00:11:26.459 --> 00:11:30.240
immediately obvious that the list box
spans two rows until you look at the

00:11:30.240 --> 00:11:34.029
widgets to its right the set of radio
buttons making up the file details

00:11:34.029 --> 00:11:37.970
selection should be grouped together so
we treat them as a single widget so their are

00:11:37.970 --> 00:11:41.410
 two different widgets on separate
rows to the right of the list box

00:11:41.410 --> 00:11:46.570
now because we want each widget or group of
widgets to be placed into its own cell

00:11:46.570 --> 00:11:51.990
we end up with a 5x5 grid now once you've split the
design up like this it becomes very easy

00:11:51.990 --> 00:11:57.350
to see where everything actually goes the label is in row 0 column 0 but

00:11:57.350 --> 00:12:02.970
spans 3 columns the list box is
placed in row 1 column 0 and spans two

00:12:02.970 --> 00:12:08.709
rows the scroll bar is in row 1 column 1 and
also spans two rows now the spinner for

00:12:08.709 --> 00:12:12.890
time and date are group together so they
appear in a set as a group of widgets

00:12:12.890 --> 00:12:19.220
time in row 3 column 0 and date
in row 4 column 0 now looking at this layout there's

00:12:19.220 --> 00:12:22.490
actually no good reason for the time and
date spinners to be here

00:12:22.490 --> 00:12:26.110
and it's difficult to work out what the
purpose could be but all will come clean

00:12:26.110 --> 00:12:30.089
we added them because it's useful to see how a
group controls together like this so

00:12:30.089 --> 00:12:33.959
really we both wanted to show you how it
can be done and also show how to populate widgets

00:12:33.959 --> 00:12:36.000
such as the spinners

00:12:36.000 --> 00:12:39.940
althought you won't probably see something exactly like
that in a real world program at some

00:12:39.940 --> 00:12:44.080
point you probably want to populate
fields like that and can be useful to

00:12:44.080 --> 00:12:47.399
refer back to this code figure out how to do that so what I'm gonna do is finish

00:12:47.399 --> 00:12:50.950
the video here now and on the next video
we're going to continue on and

00:12:50.950 --> 00:12:53.709
start building this interface so I'll see
you in the next video