1
00:00:05,260 --> 00:00:10,450
moving forward now in the last video we
talked about the pack geometry manager

2
00:00:10,450 --> 00:00:15,480
and Tkinter and what we gonna do now is
start looking at the next geometry

3
00:00:15,480 --> 00:00:17,770
manager that's the place

4
00:00:17,770 --> 00:00:22,370
geometry manager now as I alluded to at the
end of the previous video its even simpler

5
00:00:22,370 --> 00:00:26,730
than pack and it be useful
when some specific situations however it

6
00:00:26,730 --> 00:00:31,920
works by specifying absolute positions
for at least one window, windows that can be position

7
00:00:31,920 --> 00:00:36,360
relative to another window and unless you know the screen size of your program will

8
00:00:36,360 --> 00:00:40,680
be running on the use of absolute
positioning is not recommended now for more

9
00:00:40,680 --> 00:00:44,940
complicated layouts which really means
anything but the most trivial layouts you

10
00:00:44,940 --> 00:00:48,880
get much better results using the grid
manager now this works as you may have

11
00:00:48,880 --> 00:00:53,500
guessed by positioning widgets in a grid now less obviously the grid doesn't

12
00:00:53,500 --> 00:00:56,060
really exist until you start adding
things to it

13
00:00:56,060 --> 00:00:59,770
at which point its dimensions are
calculated automatically this the

14
00:00:59,770 --> 00:01:00,980
way to go

15
00:01:00,980 --> 00:01:04,940
instead using something like place now
this sounds like a complicated way to

16
00:01:04,940 --> 00:01:09,760
design just bear in mind that widgets
in the same column can be lineup above or

17
00:01:09,760 --> 00:01:14,300
below each other and also widgets in the same
row can also be lined up next to each

18
00:01:14,300 --> 00:01:18,650
other and approximation to the previous
rather hideous example can be quickly

19
00:01:18,650 --> 00:01:23,300
created using a grid so let's go through
this and make some changes to the code to

20
00:01:23,300 --> 00:01:29,760
now support a grid we are gonna change the 400 up here to 200 change the positioning and instead of using

21
00:01:29,760 --> 00:01:34,510
pack again we talked about using grids
so we are going to change that to grid and this

22
00:01:34,510 --> 00:01:40,690
time instead of specifying side which is something that was only
for the pack geometry manager we need to

23
00:01:40,690 --> 00:01:49,870
specify the row and columns we do that with....and

24
00:01:49,870 --> 00:01:54,330
we change the frame as well so the left
frame before I had this pack anchor and

25
00:01:54,330 --> 00:01:59,260
fill etc which are all part of the
pack geometry manager for grid we are gonna make that

26
00:01:59,260 --> 00:01:59,870
a lot easier

27
00:01:59,870 --> 00:02:07,420
again we just need to go....and for canvas will do the

28
00:02:07,420 --> 00:02:11,240
same parameters for canvas but we are going to add it with the grid geometry

29
00:02:11,240 --> 00:02:16,760
manager again.....

30
00:02:16,760 --> 00:02:25,650
...and likewise for the right
frame we are gonna get rid of all those

31
00:02:25,650 --> 00:02:31,450
parameters again and change this to a grid

32
00:02:31,450 --> 00:02:38,420
and that's gonna be.....and the buttons are also going to be add
the same way

33
00:02:38,420 --> 00:03:03,810
......

34
00:03:03,810 --> 00:03:10,320
.....

35
00:03:10,320 --> 00:03:14,560
we changing this to relative positions
minus instead of plus which we talked about

36
00:03:14,560 --> 00:03:24,720
that a few videos ago now  ok if we run this you can see that

37
00:03:24,720 --> 00:03:28,190
buttons are in the right place
horizontally but a lowered down on the screen

38
00:03:28,190 --> 00:03:32,190
than in the pack example now what we can
do is we can set the sticky property to

39
00:03:32,190 --> 00:03:36,180
position them more accurately so what the
sticky property does it takes the same

40
00:03:36,180 --> 00:03:40,630
compass points anchor does when using
packs so what we are going to do now is look

41
00:03:40,630 --> 00:03:45,220
at changing line 21 we're going to add......

42
00:03:45,220 --> 00:03:51,150
....which is n which is our anchor point equivalent to the anchor point

43
00:03:51,150 --> 00:03:56,100
that was in the pack geometry manager
will just stop this code and run again

44
00:03:56,100 --> 00:04:07,370
cloes that down first starting it again and just run it so that's better we are almost right but the buttons are

45
00:04:07,370 --> 00:04:11,370
now too close to the frame to fix that what we

46
00:04:11,370 --> 00:04:15,070
can do is we can configure the individual
columns using the columns configure

47
00:04:15,070 --> 00:04:17,399
method to give weights to each column

48
00:04:17,399 --> 00:04:21,100
we are gonna discussed weight a bit more in a minute
but until a weight has been set and the

49
00:04:21,100 --> 00:04:25,780
columns not sized to fit window instead it
just has the minimum width it needs to

50
00:04:25,780 --> 00:04:26,970
display its content

51
00:04:26,970 --> 00:04:30,620
so column configure is a way to
override that so if you look at doing that

52
00:04:30,620 --> 00:04:40,060
so we going to.....

53
00:04:40,060 --> 00:04:55,340
......

54
00:04:55,340 --> 00:05:00,030
....then we are going to use the grid column configure command

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

56
00:05:04,900 --> 00:05:12,130
command anyways so we are going to type....so we give them all

57
00:05:12,130 --> 00:05:17,830
a weight and just out of interest if we have a
look at the code column configure equals

58
00:05:17,830 --> 00:05:22,000
grid column configure notice how its actually
calling grid column configure anyway and

59
00:05:22,000 --> 00:05:26,670
we have look at grid column configure obviously
that's that method so you can see it's called

60
00:05:26,670 --> 00:05:30,310
basically calling exactly the same
method in both scenarios so our advice

61
00:05:30,310 --> 00:05:33,370
here is to use the one that needs less
typing but just be aware that the other

62
00:05:33,370 --> 00:05:36,480
one exists for when you're reading
someone else's code or online

63
00:05:36,480 --> 00:05:38,810
documentation but they do actually both
mean the same thing

64
00:05:38,810 --> 00:05:49,290
so if we run it again now

65
00:05:49,290 --> 00:05:52,450
it looks pretty close to the pack example and
still not pretty but at least it's

66
00:05:52,450 --> 00:05:56,120
intentional and we deliberately placed
the buttons rather than making do with

67
00:05:56,120 --> 00:05:59,780
wherever pack put them and just closing
off again and of we go back to have a look at

68
00:05:59,780 --> 00:06:05,100
grid column configuring again and
click into it that's control click on Windows or

69
00:06:05,100 --> 00:06:10,320
Linux or command click on a Mac notice here
that in our documentation valid

70
00:06:10,320 --> 00:06:14,370
resources are minsize minimum size of the
column weight how much additional space

71
00:06:14,370 --> 00:06:19,640
propagates to this column and pad how
much space to let additional to the addition

72
00:06:19,640 --> 00:06:22,890
to the above generally speaking if your
looking for more documentation about a

73
00:06:22,890 --> 00:06:25,560
particular comment it can be really
useful jumping into the source code

74
00:06:25,560 --> 00:06:29,370
like I'm showing its a quick way to check
things as to what options are available

75
00:06:29,370 --> 00:06:33,190
rather than trying to track down
documentation but of course if you want more

76
00:06:33,190 --> 00:06:37,210
information on the option then you have to search further as the comments a little bit small

77
00:06:37,210 --> 00:06:41,310
but it can be a helpful reminder
here or just a quick way of determining that

78
00:06:41,310 --> 00:06:44,750
there's three valid options you can
specify here so I just wanna bring this on the

79
00:06:44,750 --> 00:06:49,670
screen now so what we've done is we've
created a grid containing to rows rows

80
00:06:49,670 --> 00:06:56,170
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

81
00:06:56,170 --> 00:07:00,330
1 column 2 is being split into three
rows and what we've done is we've put

82
00:07:00,330 --> 00:07:03,880
orange lines to show the grids just you can sort of see what's happening with

83
00:07:03,880 --> 00:07:11,050
our code and if I go back and
show that image again you can sort of relate that to the

84
00:07:11,050 --> 00:07:14,640
image itself so the grid methods
got a sticky named parameters which we mentioned

85
00:07:14,640 --> 00:07:18,590
that can be used to change the position
of the widgets within their cells now

86
00:07:18,590 --> 00:07:22,340
it uses compass points just as we saw with
pack and it can be used to align the widget

87
00:07:22,340 --> 00:07:27,550
left right top or bottom the default if you don't
specified is center now specifying 2

88
00:07:27,550 --> 00:07:32,090
opposite points such as north and south
will expand the widget to fill the cell

89
00:07:32,090 --> 00:07:36,770
in that direction so setting all 4
points will fill the cell completely now to

90
00:07:36,770 --> 00:07:41,020
make it easier to see how this
affects our frames what we can do is you

91
00:07:41,020 --> 00:07:45,340
can give them a border and change their
appearance so they show up better so will also gonna

92
00:07:45,340 --> 00:07:49,020
use sticky in our code to expand the
left frames so that's the full height

93
00:07:49,020 --> 00:07:53,180
of its rows and the right frame to be the
full width of its column so lets go ahead and do that

94
00:07:53,180 --> 00:08:02,250
we are going to start typing on line 34.....

95
00:08:02,250 --> 00:08:38,620
......

96
00:08:38,620 --> 00:08:47,490
...notice the row
height is now determined by the height of

97
00:08:47,490 --> 00:08:51,570
the tallest widget it contains the right
hand frame in this case so we should be

98
00:08:51,570 --> 00:09:00,610
able to run that you can see the borders
now a little bit more clear to what's

99
00:09:00,610 --> 00:09:05,610
going on there so what we should be able to
do is make button 2 the full width of

100
00:09:05,610 --> 00:09:09,410
its frame so right across here to the right
hand side so if you think that we come

101
00:09:09,410 --> 00:09:17,640
back here and add something like.....

102
00:09:17,640 --> 00:09:25,560
....and then run that bit if we do that in
notice here that it hasn't worked it still

103
00:09:25,560 --> 00:09:29,660
hasn't expanded and this is where the weight option
comes into play so the weight option is

104
00:09:29,660 --> 00:09:35,070
quite important in deciding the behavior
of widgets within cells so unless a

105
00:09:35,070 --> 00:09:39,640
weight has been set for a column or row
them some options including sticky won't

106
00:09:39,640 --> 00:09:43,730
do anything else you can see in this
example here on line 39 it had no effect on

107
00:09:43,730 --> 00:09:48,540
button 2 the right frame only has one
column so if we set its weight first

108
00:09:48,540 --> 00:09:53,430
then button 2 sticky option will
work so lets go ahead and do that close that

109
00:09:53,430 --> 00:10:01,540
down and on that line we're gonna put....

110
00:10:01,540 --> 00:10:08,860
....and leaving
the code on line 40 which sets

111
00:10:08,860 --> 00:10:16,180
sticky to ew for button 2 and if we actually run
that

112
00:10:16,180 --> 00:10:21,430
that now works button 2 fills the width
of the frame so the default for sticky is

113
00:10:21,430 --> 00:10:25,200
center so now the column has a
weight and stickies actually being used

114
00:10:25,200 --> 00:10:30,410
the remaining 2 buttons are centered
and of course because on line 40 we specified

115
00:10:30,410 --> 00:10:34,860
sticky equals ew button 2 has expanded
to fill the entire space

116
00:10:34,860 --> 00:10:39,300
so our layouts been useful but for experimenting
with the various options but frankly

117
00:10:39,300 --> 00:10:43,010
it's a little bit boring so we can
create something a bit more useful then

118
00:10:43,010 --> 00:10:47,480
have a look at the options that we used
to lay the widgets out so what we're going to do is

119
00:10:47,480 --> 00:10:51,250
run the program after each step to see
the widgets as they are being added

120
00:10:51,250 --> 00:10:54,550
now the weight the layout and we're going to build
is going to look something like this

121
00:10:54,550 --> 00:11:00,830
close this down and bring this over so this is going to be what we are trying to build an interface that

122
00:11:00,830 --> 00:11:04,230
looks something like that with a
something that you probably see in a

123
00:11:04,230 --> 00:11:08,210
real application that you creating now
when designing layout it can be really

124
00:11:08,210 --> 00:11:12,240
good idea to draw a rough sketch and
petition it off in two rows and columns

125
00:11:12,240 --> 00:11:17,970
and I'm just gonna give an example of that so you can see the example here

126
00:11:17,970 --> 00:11:22,600
we've come up with a
mock design and partitioned it off clearly

127
00:11:22,600 --> 00:11:26,370
in to rows and columns like you can see
on the screen now although it's easy to

128
00:11:26,370 --> 00:11:29,760
see that the label of the top of the
screen is in its own row is not

129
00:11:29,760 --> 00:11:33,550
immediately obvious that the list box
spans two rows until you look at the

130
00:11:33,550 --> 00:11:37,330
widgets to its right the set of radio
buttons making up the file details

131
00:11:37,330 --> 00:11:41,280
selection should be grouped together so
we treat them as a single widget so their are

132
00:11:41,280 --> 00:11:44,720
two different widgets on separate
rows to the right of the list box

133
00:11:44,720 --> 00:11:49,880
now because we want each widget or group of
widgets to be placed into its own cell

134
00:11:49,880 --> 00:11:55,300
we end up with a 5x5 grid now once you've split the
design up like this it becomes very easy

135
00:11:55,300 --> 00:12:00,660
to see where everything actually goes the label is in row 0 column 0 but

136
00:12:00,660 --> 00:12:06,280
spans 3 columns the list box is
placed in row 1 column 0 and spans two

137
00:12:06,280 --> 00:12:12,010
rows the scroll bar is in row 1 column 1 and
also spans two rows now the spinner for

138
00:12:12,010 --> 00:12:16,200
time and date are group together so they
appear in a set as a group of widgets

139
00:12:16,200 --> 00:12:22,530
time in row 3 column 0 and date
in row 4 column 0 now looking at this layout there's

140
00:12:22,530 --> 00:12:25,800
actually no good reason for the time and
date spinners to be here

141
00:12:25,800 --> 00:12:29,420
and it's difficult to work out what the
purpose could be but all will come clean

142
00:12:29,420 --> 00:12:33,390
we added them because it's useful to see how a
group controls together like this so

143
00:12:33,390 --> 00:12:37,260
really we both wanted to show you how it
can be done and also show how to populate widgets

144
00:12:37,260 --> 00:12:39,310
such as the spinners

145
00:12:39,310 --> 00:12:43,250
althought you won't probably see something exactly like
that in a real world program at some

146
00:12:43,250 --> 00:12:47,390
point you probably want to populate
fields like that and can be useful to

147
00:12:47,390 --> 00:12:50,700
refer back to this code figure out how to do that so what I'm gonna do is finish

148
00:12:50,700 --> 00:12:54,260
the video here now and on the next video
we're going to continue on and

149
00:12:54,260 --> 00:12:57,010
start building this interface so I'll see
you in the next video