WEBVTT

1
00:00:00.580 --> 00:00:02.440
<v Narrator>Hi guys and welcome back,</v>

2
00:00:02.440 --> 00:00:04.850
one more improvement to our application.

3
00:00:04.850 --> 00:00:07.650
At the moment, we've got this whole area

4
00:00:07.650 --> 00:00:09.870
in which we can write text.

5
00:00:09.870 --> 00:00:14.870
However, as we start going over this available space

6
00:00:15.830 --> 00:00:19.190
you can see that we can scroll.

7
00:00:19.190 --> 00:00:21.340
But we cannot see a scroll bar

8
00:00:21.340 --> 00:00:23.580
so we have to add it ourselves.

9
00:00:23.580 --> 00:00:27.460
Fortunately, adding a scroll bar is really straightforward.

10
00:00:27.460 --> 00:00:29.090
What we have to do is go ahead

11
00:00:29.090 --> 00:00:33.100
into the create file function here

12
00:00:33.100 --> 00:00:35.510
and instead of creating a text area

13
00:00:35.510 --> 00:00:37.120
and putting it in the notebook

14
00:00:37.120 --> 00:00:39.180
we are going to create a frame.

15
00:00:39.180 --> 00:00:42.480
So we will do container equals ttk dot frame

16
00:00:42.480 --> 00:00:47.010
and we will make that a child of the notebook.

17
00:00:47.010 --> 00:00:49.840
Then we will say container dot pack.

18
00:00:49.840 --> 00:00:53.340
Next up, we will put the text area inside this container

19
00:00:53.340 --> 00:00:55.139
and we will tell the text area that

20
00:00:55.139 --> 00:00:58.010
the side is going to be left.

21
00:00:58.010 --> 00:01:01.930
That is so that it takes up all of the vertical space

22
00:01:01.930 --> 00:01:05.120
and gets joined to the container on the left,

23
00:01:05.120 --> 00:01:08.258
because the scroll bar is going to go on the right.

24
00:01:08.258 --> 00:01:11.220
Next up, we're going to say notebook dot add

25
00:01:11.220 --> 00:01:13.650
and we will add the container

26
00:01:13.650 --> 00:01:17.260
and notebook select and we will select the container.

27
00:01:17.260 --> 00:01:21.070
Then down here, we will do text scroll

28
00:01:21.070 --> 00:01:24.800
and that is going to be a ttk dot scroll bar.

29
00:01:24.800 --> 00:01:28.950
For this container, the orientation

30
00:01:28.950 --> 00:01:30.540
is going to be vertical

31
00:01:31.450 --> 00:01:32.910
and the command, and this is

32
00:01:32.910 --> 00:01:36.553
the important part, is text area dot yview.

33
00:01:38.304 --> 00:01:40.745
Make sure to not call the yview function,

34
00:01:40.745 --> 00:01:44.157
as that is what you can use to modify

35
00:01:44.157 --> 00:01:46.407
the y-delta of a container.

36
00:01:48.880 --> 00:01:50.920
So now that we have our scroll bar there

37
00:01:50.920 --> 00:01:54.450
what we have to do is say text scroll dot pack

38
00:01:54.450 --> 00:01:56.800
and the side is going to be right

39
00:01:56.800 --> 00:01:58.840
and the fill is going to be wide.

40
00:01:58.840 --> 00:02:00.210
We want the text area to take up

41
00:02:00.210 --> 00:02:02.840
the entire vertical space.

42
00:02:02.840 --> 00:02:04.580
Finally, we will say text area

43
00:02:05.462 --> 00:02:08.790
yscrollcommand, make sure to spell this right

44
00:02:10.030 --> 00:02:13.750
is equal to text underscroll dot set.

45
00:02:13.750 --> 00:02:18.040
So what happens when you scroll the text area yourself

46
00:02:18.040 --> 00:02:21.100
is that is going to move the scroll bar.

47
00:02:21.100 --> 00:02:23.950
And similarly, when you move the scroll bar

48
00:02:23.950 --> 00:02:25.990
that is going to move the text area.

49
00:02:25.990 --> 00:02:27.415
So these two lines here

50
00:02:27.415 --> 00:02:30.670
make each component affect the other.

51
00:02:30.670 --> 00:02:32.850
Now doing this means that we've got

52
00:02:32.850 --> 00:02:35.000
a couple of bugs in our programme now,

53
00:02:35.000 --> 00:02:38.090
because the text area is no longer

54
00:02:38.090 --> 00:02:41.260
the sole child of the notebook tab.

55
00:02:41.260 --> 00:02:44.100
Now we've got a container that has two elements,

56
00:02:44.100 --> 00:02:47.190
the text area and the scroll bar.

57
00:02:47.190 --> 00:02:50.044
So in our get text widget function,

58
00:02:50.044 --> 00:02:52.370
we actually have to make a couple of changes.

59
00:02:52.370 --> 00:02:54.320
This is going to be called tab widget

60
00:02:55.190 --> 00:02:58.360
and it is going to then do

61
00:02:58.360 --> 00:03:01.730
text widget equal to tab widget

62
00:03:01.730 --> 00:03:05.360
dot winfo underscroll children...

63
00:03:06.280 --> 00:03:07.113
zero.

64
00:03:08.200 --> 00:03:11.410
All right, so this is another excellent name here.

65
00:03:11.410 --> 00:03:12.610
What this does is that it goes

66
00:03:12.610 --> 00:03:15.363
into the tab widget, which is this frame,

67
00:03:16.310 --> 00:03:19.750
and it gets the widget information

68
00:03:19.750 --> 00:03:22.420
and it gets the children of the widget.

69
00:03:22.420 --> 00:03:24.210
That is the frame, sorry,

70
00:03:24.210 --> 00:03:27.470
that is the the text area and scroll bar

71
00:03:27.470 --> 00:03:29.973
and it gets the first one, which is the text area.

72
00:03:30.810 --> 00:03:33.120
Then down here, when we do confirm quit,

73
00:03:33.120 --> 00:03:34.580
we have to do the same thing,

74
00:03:34.580 --> 00:03:37.250
so we will rename this to tab widget

75
00:03:37.250 --> 00:03:41.143
and we will do text widget equal tab widget

76
00:03:41.143 --> 00:03:44.250
winfo underscore children zero

77
00:03:44.250 --> 00:03:47.670
to get the actual text widget as opposed to the frame.

78
00:03:47.670 --> 00:03:50.770
<v ->All right, now that we've got that, we can press play</v>

79
00:03:50.770 --> 00:03:52.630
and you will see a slight difference.

80
00:03:52.630 --> 00:03:55.670
We do have the scroll bar here on the right,

81
00:03:55.670 --> 00:03:58.630
and as we do type "Hello World"

82
00:03:58.630 --> 00:03:59.463
and we

83
00:04:00.510 --> 00:04:02.490
make it scroll

84
00:04:02.490 --> 00:04:05.373
you can see that a scroll bar appears down here.

85
00:04:07.310 --> 00:04:10.430
Scrolling with the scroll bar moves the text area

86
00:04:10.430 --> 00:04:14.070
and scrolling the text area moves the scroll bar as well.

87
00:04:14.070 --> 00:04:16.510
That's it for this video, thank you for joining me

88
00:04:16.510 --> 00:04:17.960
and I will see you next time.