WEBVTT

1
00:00:01.960 --> 00:00:05.770
ok so continue on in looking at our interface this is what we trying to build at the

2
00:00:05.770 --> 00:00:06.700
moment

3
00:00:06.700 --> 00:00:11.990
so far we got the basics of that program
coming up we've actually got some of the

4
00:00:11.990 --> 00:00:19.290
contents on the screen and we are gonna have a look
at what we've done there so you can see we're making

5
00:00:19.290 --> 00:00:23.149
progress but we still haven't bit of a way
to go we got these other fields that we

6
00:00:23.149 --> 00:00:29.250
want to add to add to the interface and
on these buttons and we got an issue here

7
00:00:29.250 --> 00:00:32.419
in down the left hand side you can see at the moment down here that's not working

8
00:00:32.419 --> 00:00:37.440
so we got a couple of work to do ahead so
let's continue that so it looks like it's

9
00:00:37.440 --> 00:00:41.469
rather strange program is going to display the
file name part of the time stamp of whatever

10
00:00:41.469 --> 00:00:46.050
file selected in the list box what we now need to
do is add an entry widget to show that

11
00:00:46.050 --> 00:00:49.539
result now the widgets is going to be labeled to
make it obvious that this is the result

12
00:00:49.539 --> 00:00:55.719
and both the entry widget and the label are placed
in the same cell of the grid now I'm going to use the

13
00:00:55.719 --> 00:00:59.120
sticky property make sure that its set so that
they appear in the bottom left and top

14
00:00:59.120 --> 00:01:03.530
left of the cell so as long as the row is high enough for both of them to fit things should

15
00:01:03.530 --> 00:01:08.100
look ok if you resize the
application the actual windows the labels is going

16
00:01:08.100 --> 00:01:12.070
to disappear behind the entry widget as the window gets
to small and indeed you can prevent that

17
00:01:12.070 --> 00:01:16.220
behavior to some extent by placing the 2 widgets on separate rows which we

18
00:01:16.220 --> 00:01:19.820
maybe should have done but we're not
going to do here now but we didn't

19
00:01:19.820 --> 00:01:22.979
because we want to demonstrate this
behavior so no matter what you do though

20
00:01:22.979 --> 00:01:27.020
if a user makes the application window too
small for all the widgets to fit and they are going to get

21
00:01:27.020 --> 00:01:30.659
odd results you can't really do anything
about that really but we'll have a look

22
00:01:30.659 --> 00:01:34.039
at how we can prevent the window from being
resize too small a little bit later

23
00:01:34.039 --> 00:01:44.710
on so for now let's continue and what I'm going to do is add that entry I talk about so.....

24
00:01:44.710 --> 00:01:52.280
......

25
00:01:52.280 --> 00:02:00.420
.......

26
00:02:00.420 --> 00:02:23.819
......

27
00:02:23.819 --> 00:02:33.890
so if we run this now we should be able to see that you can see we got our little result their we got the label and the actual field the

28
00:02:33.890 --> 00:02:38.450
entry that its going to actually contain the
data so let's now add the frame for the

29
00:02:38.450 --> 00:02:44.080
time spinner so make a bit of space here we will add the extra line so we can

30
00:02:44.080 --> 00:03:06.989
see what we are doing and lets add a comment here as well.....so we know what's that for and un-comment that alright lets continue on, line 57 is going to be....

31
00:03:06.989 --> 00:03:22.570
......

32
00:03:22.570 --> 00:03:41.070
.......

33
00:03:41.070 --> 00:03:46.060
....ok now the time spinner since we added the frame now its the actual spinners themselves so start

34
00:03:46.060 --> 00:03:49.930
with the hour......

35
00:03:49.930 --> 00:04:01.280
......

36
00:04:01.280 --> 00:04:06.860
...which is a pretty
cool way of defining a range of

37
00:04:06.860 --> 00:04:11.780
values that are applicable for an hour for 24
hour clock of course the values is going to be 0

38
00:04:11.780 --> 00:04:22.840
to 23 effectively.....actually what I'll do is copy those....

39
00:04:22.840 --> 00:04:35.210
....minute spinner we are gonna set that to the same width and same frame but instead of using values we are going

40
00:04:35.210 --> 00:04:38.260
to use another way from and to just to
show you how to do that so

41
00:04:38.260 --> 00:04:49.900
change this here and put from.....

42
00:04:49.900 --> 00:04:55.610
...same for this one.....

43
00:04:55.610 --> 00:05:03.300
.....now obviously in the case of the first
one on line 61 the values is going to be 0 to

44
00:05:03.300 --> 00:05:07.490
23 but if you use from and 2 the advantage is that you don't have to

45
00:05:07.490 --> 00:05:11.539
remember to add one to the final value as you
do with using range so keep that in mind

46
00:05:11.539 --> 00:05:17.830
as well and the reason case you're wondering
why the underscore and that's because

47
00:05:17.830 --> 00:05:22.069
from is a reserved word in Python and the
option has a underscored in the end from

48
00:05:22.069 --> 00:05:34.180
underscore because of that to get around that restriction that reserved word
and this one is going to be........ok so lets add them first the hour

49
00:05:34.180 --> 00:05:44.669
spinners so......

50
00:05:44.669 --> 00:06:07.449
......

51
00:06:07.449 --> 00:06:16.029
......and we're just gonna do exactly
the same with the actual label and

52
00:06:16.029 --> 00:06:21.089
actually we don't need the label at the end because it is going to be a column between the
hour and minute and the minute and the

53
00:06:21.089 --> 00:06:25.009
second there is not a column at the end that is added after the second and this one here is

54
00:06:25.009 --> 00:06:32.349
going to second spinner......

55
00:06:32.349 --> 00:06:38.620
......and looking at columns the hour spinners is on column 0 the columns on

56
00:06:38.620 --> 00:06:43.180
column 1 the minute is on column 2 then another on column 3 and of course

57
00:06:43.180 --> 00:06:55.510
on column 4 is our second spinner ok so then we just need on line 70 the main loop and we just leave the print their for now.....

58
00:06:55.510 --> 00:07:00.970
and again the columns I am adding are purely for cosmetic
reasons there's no actual points assigning the

59
00:07:00.970 --> 00:07:07.740
labels to variables and that is why I have added it the way I have because we are not storing results for the columns but don't worry

60
00:07:07.740 --> 00:07:11.150
too much of that doesn't make sense in
terms of methods because we are going to be covering

61
00:07:11.150 --> 00:07:15.200
functions next and classes in the next
section after that and it will all become

62
00:07:15.200 --> 00:07:25.280
abundantly clear so if we run this and you can
see obviously that's meant to be down

63
00:07:25.280 --> 00:07:28.300
here and that's obviously

64
00:07:28.300 --> 00:07:34.810
row 0 and this is occupying 2 rows one and
two remember we hada row span of 2 their so

65
00:07:34.810 --> 00:07:38.530
consequently the row should be 3
and obviously for the grid what I did

66
00:07:38.530 --> 00:07:50.780
was I added it accidentally to row 0 so set it to row 3 and close it down run again you can see its

67
00:07:50.780 --> 00:07:55.190
a little bit better its in the right position but still a
bit messy and its really too close

68
00:07:55.190 --> 00:07:59.120
to the left hand side as well so the
good thing is that widgets have an option to

69
00:07:59.120 --> 00:08:03.600
set padding for their contents using
padx and pady and that's sort of pads it

70
00:08:03.600 --> 00:08:08.000
over or adds a bit of padding between the left
and on the right hand side so what we gonna

71
00:08:08.000 --> 00:08:11.190
do is we want to introduced some padding
inside the label frame widget that

72
00:08:11.190 --> 00:08:17.460
contains our spinner so we are going to come back
and do that....

73
00:08:17.460 --> 00:08:23.800
...and lets go and add....

74
00:08:23.800 --> 00:08:31.470
.......and that puts padding inside the
left and right edges of the widget and

75
00:08:31.470 --> 00:08:35.430
pady would be used to pad the top and
the bottom but we don't need to do that here so by

76
00:08:35.430 --> 00:08:42.780
doing if we run again you can see
now that the actual contents of

77
00:08:42.780 --> 00:08:47.720
that frame has now been centered and move
move much over we got some padding now on the left

78
00:08:47.720 --> 00:08:51.970
and right hand side so that's nicer and we'll
have a look at this left padding a bit

79
00:08:51.970 --> 00:08:57.390
later on so let's continue on close it
down so spinners can be a useful way to allow

80
00:08:57.390 --> 00:09:01.660
user to enter value and a range and actually lets run that againg to

81
00:09:01.660 --> 00:09:07.190
to confirm that it acutally did the right thing so if we have
a look at the code we should see

82
00:09:07.190 --> 00:09:13.890
the valid ranges I'm pressing the up there you can see here that 23 is the maximum

83
00:09:13.890 --> 00:09:19.570
value because we specify the range of 0 to 24
you can see that 23 is the maximum like wise we should be

84
00:09:19.570 --> 00:09:25.640
able to go up and take me a bit of clicking but we should be able to get it to 59

85
00:09:25.640 --> 00:09:30.840
for the minutes and the seconds I won't do the second but
confirm that the minutes

86
00:09:30.840 --> 00:09:36.910
actually works you can see that's working so it
can be very useful the spinners to allow

87
00:09:36.910 --> 00:09:40.850
users to enter a value and a range and there's
two ways to specify the range as I

88
00:09:40.850 --> 00:09:44.050
mentioned back in the code
you can actually use the from or

89
00:09:44.050 --> 00:09:48.740
you can actually use the value like so using a tuple with a values options probably of more use when you

90
00:09:48.740 --> 00:09:52.660
can't just set the start and end values
so that's a good candidate for the months

91
00:09:52.660 --> 00:09:58.420
for example but will do that shortly so let's go back
and actually do that

92
00:09:58.420 --> 00:10:13.600
now so we're going........

93
00:10:13.600 --> 00:11:33.460
......

94
00:11:33.460 --> 00:11:44.200
.......

95
00:11:44.200 --> 00:11:56.530
........

96
00:11:56.530 --> 00:12:03.440
.......

97
00:12:03.440 --> 00:12:04.860
......

98
00:12:04.860 --> 00:12:13.800
...because we git months we got to show on the screen.....

99
00:12:13.800 --> 00:12:23.430
...we are going to specify some values like so......not using
a tuple like we did on in line 61 for the house we are gonna do....

100
00:12:23.430 --> 00:12:28.250
....and just put a different values we want to populate....and this
makes more sense

101
00:12:28.250 --> 00:12:47.760
when we got text like such as the months to try and
do it any other way......

102
00:12:47.760 --> 00:13:30.990
......

103
00:13:30.990 --> 00:13:46.120
.....so that should that be that so let us run that and see what

104
00:13:46.120 --> 00:13:57.540
that looks like you can see we got our date month and
year showing their and if we just tab over and look at what we are

105
00:13:57.540 --> 00:14:02.960
trying achieve originally we chose a different
type of frame obviously we didn't use

106
00:14:02.960 --> 00:14:08.620
the label frame like we use for time but you can see that
the pop ups are their and the values and we can

107
00:14:08.620 --> 00:14:13.800
see that there's a list we can choose a
different values there and I won't go through them

108
00:14:13.800 --> 00:14:19.770
all but obviously you can see it's starting on year 2000 and will go up to 2099 that's good

109
00:14:19.770 --> 00:14:24.080
that's working so I'm going to finish this
video here we are just about done in the next

110
00:14:24.080 --> 00:14:27.370
video what we're going to do is
finish the layout with the ok and cancel

111
00:14:27.370 --> 00:14:30.300
buttons but then we are going to add a
little bit of functionality to some of

112
00:14:30.300 --> 00:14:34.430
the buttons to do certain things like
close the application off properly by introducing

113
00:14:34.430 --> 00:14:38.120
a quit method and a few other bits and
pieces so we'll look at doing that the

114
00:14:38.120 --> 00:14:38.490
in the next video