WEBVTT

00:00:01.920 --> 00:00:07.100
in the previous video we first started
talking about taking tkinter and we learn

00:00:07.100 --> 00:00:11.700
the basics and we showed the basic window on the screen and I ended

00:00:11.700 --> 00:00:15.269
the video talking about geometry managers
and how we needed to find out a bit more

00:00:15.269 --> 00:00:19.070
about those so once you got a window the applications widgets the things

00:00:19.070 --> 00:00:23.690
that you wanna appear on that window or in that
window can be placed on that window

00:00:23.690 --> 00:00:27.400
using one of three different geometry
managers the most useful ones probably

00:00:27.400 --> 00:00:31.279
the grid manager but we're going to
start with the pack manager which is

00:00:31.279 --> 00:00:35.089
most commonly used and the reason for that
is the first and probably the

00:00:35.089 --> 00:00:38.579
easiest to become familiar with so one
thing to note here is that everything

00:00:38.579 --> 00:00:43.839
in tk is a window and objects are
placed in a hierarchy so in our example

00:00:43.839 --> 00:00:48.789
on the screen main window is the root
window so everything else must be placed within it

00:00:48.789 --> 00:00:52.739
or within one of the child windows
now not every window can have children but

00:00:52.739 --> 00:00:57.510
every window except the route one must
have a master window so to see the effects

00:00:57.510 --> 00:01:01.119
of positioning widgets we are going to be
using pack as I mentioned and we are going to be using a

00:01:01.119 --> 00:01:06.200
canvas widget now this is intended generally the
canvas widget for displaying graphics

00:01:06.200 --> 00:01:10.479
but we are gonna use it because by
changing to have raised appearance and

00:01:10.479 --> 00:01:14.359
giving it a border it becomes really easy
to see where it is on the screen

00:01:14.359 --> 00:01:17.759
and that's important as we gonna be
re positioning it now more obvious choice

00:01:17.759 --> 00:01:21.369
here maybe to use a button because
they're already raised and have a border but

00:01:21.369 --> 00:01:26.549
thjs would worked fine on Windows and Linux but
on a Mac interestingly enough the button

00:01:26.549 --> 00:01:29.929
widget is the native MAC button and consequently
its height

00:01:29.929 --> 00:01:34.179
cannot be changed anyway so we won't be
able to demonstrate something because of

00:01:34.179 --> 00:01:37.780
that so one of the things you really want to
demonstrate here is how to stretch a widget

00:01:37.780 --> 00:01:42.649
horizontally and vertically and button widget is not gonna be suitable for OSX and that's why

00:01:42.649 --> 00:01:47.280
again we've gone for the canvas so lets type some code in first and run it and then we'll go

00:01:47.280 --> 00:01:52.280
through that code so what we going to do
is delete a bit of stuff first I'm going to delete on line 6

00:01:52.280 --> 00:01:56.560
and 7 those two references to print
out the versions the tk version and

00:01:56.560 --> 00:01:59.049
TCL version we don't need that anymore

00:01:59.049 --> 00:02:04.740
and what we are gonna do is leave the code on line 10 which is now push down to line 12 as the last

00:02:04.740 --> 00:02:08.140
entry because of course that we need to
run that as the last entry so that it actually

00:02:08.140 --> 00:02:12.269
kicks up the process and shows that window
and we are gonna add firstly a label

00:02:12.269 --> 00:02:14.100
that by typing....

00:02:14.100 --> 00:02:21.770
.....

00:02:21.770 --> 00:02:29.090
....and then what we need to do is

00:02:29.090 --> 00:02:35.640
add it using geometry manager......

00:02:35.640 --> 00:02:45.070
...now we add the canvas that I talk about....

00:02:45.070 --> 00:02:50.750
.....

00:02:50.750 --> 00:03:00.760
......

00:03:00.760 --> 00:03:06.040
....

00:03:06.040 --> 00:03:10.900
.....and as I mentioned

00:03:10.900 --> 00:03:16.030
on line 17 the last line
is going to be left like so it will

00:03:16.030 --> 00:03:23.800
invoke the code and run it  so now if we run this and if I tab over we can actually see Python in here and there

00:03:23.800 --> 00:03:27.700
is our first example you can see the
screen and by looking at that you should

00:03:27.700 --> 00:03:32.110
really see what the code is doing line
11 creates the label widget with the

00:03:32.110 --> 00:03:35.630
text hello world and you can see that
now at the top of the screen just below

00:03:35.630 --> 00:03:39.270
the title its the code on
line 8 is producing that title which

00:03:39.270 --> 00:03:43.760
can see the gray background that
the label is actually below that which

00:03:43.760 --> 00:03:48.500
was created on line 11 then and also
added on line 12 again using the pack

00:03:48.500 --> 00:03:53.240
method and the canvases I've created in a similar way on line 14 but this time because

00:03:53.240 --> 00:03:57.150
we specified side='left' its appeared on the left hand side of the

00:03:57.150 --> 00:04:01.070
window obviously this is a very simple
layout but it is useful to look at some

00:04:01.070 --> 00:04:05.830
of the options available when placing
widgets on the window using pack so

00:04:05.830 --> 00:04:10.450
what we can do is we can make the canvas
fill the height or width of the window technically its

00:04:10.450 --> 00:04:15.690
master using the field parameters which
can be set to X Y or both

00:04:15.690 --> 00:04:21.290
so what we can do is come back to the
canvas.pack line on line 15 we could

00:04:21.290 --> 00:04:26.080
do something like......

00:04:26.080 --> 00:04:34.099
so if we do that uppercase Y keep that in mind and run that you can see now that we've actually got a

00:04:34.099 --> 00:04:38.250
feeling vertically so its filled the
height of the main window from the bottom of

00:04:38.250 --> 00:04:41.370
the label down to the bottom of the
window and the space at the top of the screen

00:04:41.370 --> 00:04:44.629
where the label is being placed is
automatically reserved as well as so its

00:04:44.629 --> 00:04:48.650
not using that space because the label
was already allocated that space prior to

00:04:48.650 --> 00:04:55.800
canvas command being added now changing Y to X may be
expected to extend the canvas across

00:04:55.800 --> 00:05:00.759
the entire width of the screen but if you do so which I will show you now you'll find it doesn't actually work

00:05:00.759 --> 00:05:11.550
so if we change this to X and run that you can see basically

00:05:11.550 --> 00:05:15.190
it hasn't worked to get that to work there is
actually another option

00:05:15.190 --> 00:05:19.770
what you need to do is add another name to
parameter and what's called

00:05:19.770 --> 00:05:27.000
expand and you need to set that to true so lets add that parameter come back into line

00:05:27.000 --> 00:05:31.460
15 leave the Tkinter.x but also add the extra

00:05:31.460 --> 00:05:42.180
name parameter....and run that and you can see it
now it has been expanded horizontally

00:05:42.180 --> 00:05:47.800
across the left to right so why the
expand parameter is not required for

00:05:47.800 --> 00:05:51.610
canvas to fill vertically may appear to be
one of life's mysteries but there

00:05:51.610 --> 00:05:56.529
actually is a reason for it and to see
it in action what we gonna do is close this down

00:05:56.529 --> 00:05:59.810
and if you change the option here

00:05:59.810 --> 00:06:07.889
side='left' to side='top'  and
actually remove the expand=true and

00:06:07.889 --> 00:06:11.960
run again

00:06:11.960 --> 00:06:18.620
you can see that it does expand horizontally
without the addition to expand parameter

00:06:18.620 --> 00:06:30.050
but then if you change this to tkinter.Y and check that out now the vertical expansion no longer

00:06:30.050 --> 00:06:35.500
works which is quite frustrating but if we
change that to expand.....

00:06:35.500 --> 00:06:45.470
...and run again you could see it
does now work if you try to use both so if we go

00:06:45.470 --> 00:06:51.490
back and delete the expand and set that to both
which is an option to expand vertically and

00:06:51.490 --> 00:06:59.690
horizontally if we run that you can see it
does actually expand horizontally but

00:06:59.690 --> 00:07:11.740
not vertically but we can add the expand.....run that again and now it's being expanded both

00:07:11.740 --> 00:07:15.720
horizontally and vertically so a little
bit frustrating but that's just the way

00:07:15.720 --> 00:07:21.110
things actually work with Tkinter keep that
in mind that you need to use expand in certain

00:07:21.110 --> 00:07:24.780
circumstances to get it to expand
appropriately so lets change things back to

00:07:24.780 --> 00:07:31.530
left again I'm gonna get rid of the field
and get rid of the expand so we just got to basic

00:07:31.530 --> 00:07:36.830
command their we are gonna add some buttons so lets now add some widgets just to see how things

00:07:36.830 --> 00:07:40.610
line up next to each other so I'm going to
create three buttons here so...

00:07:40.610 --> 00:08:14.430
......

00:08:14.430 --> 00:08:19.000
.....and if we run this

00:08:19.000 --> 00:08:26.170
...you can see that when widgets share the same side they are placed adjacent to each other in the order that they're

00:08:26.170 --> 00:08:31.110
actually packed in this case the buttons
are actually now centered against the

00:08:31.110 --> 00:08:34.820
canvas which is to left of it which is not always you'd probably want so we can

00:08:34.820 --> 00:08:38.340
change this by setting the anchor option
which takes values corresponding to the

00:08:38.340 --> 00:08:43.030
four main points of the compass for the
center which is the default so what we

00:08:43.030 --> 00:08:50.860
can do here is come back here to the pack
line for each one we could say.....

00:08:50.860 --> 00:09:06.300
...and run that, and oops I made a typo and obviously Python told me that I made a typo so will fix that and run

00:09:06.300 --> 00:09:12.610
it again have a look so you can see now we've
got something completely different we've got

00:09:12.610 --> 00:09:18.630
button 1 we specified an anchor of n its at the
top of the screen we specified button 2

00:09:18.630 --> 00:09:22.830
have an anchor of s which is the
bottom of the screen and obviously button

00:09:22.830 --> 00:09:27.250
3 still side of left for 3 but the anchor is East which is

00:09:27.250 --> 00:09:31.820
obviously to the right hand side so you might think all three are actually doing something

00:09:31.820 --> 00:09:39.100
here but what's probably not obviously its only n and s are actually doing anything here because the buttons have been

00:09:39.100 --> 00:09:43.290
packed to the vertical side of the window anchor can only be therefore affect vertical

00:09:43.290 --> 00:09:48.120
positioning horizontally the buttons
place to the left of where the previous

00:09:48.120 --> 00:09:53.250
button ends similarly if we packed them to
the top or bottom edges and anchors are only

00:09:53.250 --> 00:09:58.460
going to affect their horizontal position makes sense so seeing that in operation I'm going to close this down

00:09:58.460 --> 00:10:05.390
and let's go ahead and change the code
change the canvas pack to top again and we are

00:10:05.390 --> 00:10:14.180
also going to change the side to be equal to top for all three buttons

00:10:14.180 --> 00:10:18.640
we should find the anchor is now only
affecting the horizontal position so if we

00:10:18.640 --> 00:10:26.339
run that again you can see what's
happened their ok so the documentation states

00:10:26.339 --> 00:10:31.170
that you can also specify the for
intermediate compass points such as NW for

00:10:31.170 --> 00:10:34.860
north west for example but this will actually
not make any difference to the behavior

00:10:34.860 --> 00:10:39.990
we've just observed widgets packed
with vertical edge that's left or right

00:10:39.990 --> 00:10:45.600
can only have a vertical position altered
by anchor the ones packed horizontal edge top

00:10:45.600 --> 00:10:50.959
and bottom can only have their horizontal positions change now although we can place widgets inside a frame to

00:10:50.959 --> 00:10:56.480
both group them together and position them a
little bit better pack is really only

00:10:56.480 --> 00:11:00.959
suitable for very simple layouts so of the
3 geometry managers that are part of

00:11:00.959 --> 00:11:05.230
Python part of Tkinter pack is
really the most basic pf the 3 and the

00:11:05.230 --> 00:11:08.899
options are still a little bit limited
as a result let's go ahead and add some

00:11:08.899 --> 00:11:13.829
code to add a frame so you can see what I
mean by that so put...

00:11:13.829 --> 00:11:17.290
.....

00:11:17.290 --> 00:11:34.709
......

00:11:34.709 --> 00:11:46.420
....and canvas what we are going to do is instead

00:11:46.420 --> 00:11:50.310
of specifying main window we just create a frame so were going to use that instead

00:11:50.310 --> 00:11:54.670
so we are going to type leftFrame so its
using that we're gonna leave relief

00:11:54.670 --> 00:11:58.949
equals raised and borther width to 1 canvas.pack we are going to put that to the left hand

00:11:58.949 --> 00:12:08.550
side and we are also gonna add an anchor of n north next
we are gonna add a right frame and put the

00:12:08.550 --> 00:12:13.490
buttons in that right frame so I'm gonna type...

00:12:13.490 --> 00:12:28.149
.....

00:12:28.149 --> 00:12:32.230
......

00:12:32.230 --> 00:12:46.260
...and three buttons we are going to change those so they are not using main window they are going to be using right frame and

00:12:46.260 --> 00:12:48.750
we are going to remove the anchor from

00:12:48.750 --> 00:12:54.089
each of those buttons because they're actually inside the
frame the right frame that we've added them to

00:12:54.089 --> 00:13:02.880
I should say.....and if we run that

00:13:02.880 --> 00:13:07.720
we managed to achieve what we were trying
to set out their we got a frame on the left hand

00:13:07.720 --> 00:13:11.650
side that contains the canvas and a frame
on the right hand side that contains our

00:13:11.650 --> 00:13:16.810
three buttons but as I mentioned pack is
really only suitable for very simple

00:13:16.810 --> 00:13:21.380
layouts and its the most basic
of the 3 geometry managers included

00:13:21.380 --> 00:13:27.090
with Tkinter I'm going to finish this
video now in the next video what we gonna do

00:13:27.090 --> 00:13:31.320
is gonna move on and start looking at the
place geometry manager which is even

00:13:31.320 --> 00:13:36.410
simpler than pack but it can also be really
useful in specific situations so see you in

00:13:36.410 --> 00:13:36.820
the next video