WEBVTT 1 00:00:00.280 --> 00:00:02.040 line:15% Hi guys and welcome back. 2 00:00:02.040 --> 00:00:05.310 line:15% In this video we're going to learn about frames. 3 00:00:05.310 --> 00:00:06.870 As you can remember from the previous video, 4 00:00:06.870 --> 00:00:09.610 we have three labels. 5 00:00:09.610 --> 00:00:11.730 Two of them that have a side off top 6 00:00:11.730 --> 00:00:14.770 and one of them that has a side off left. 7 00:00:14.770 --> 00:00:16.300 And what that means in practise is that 8 00:00:16.300 --> 00:00:18.160 each of these takes up the entire 9 00:00:18.160 --> 00:00:20.170 horizontal space. 10 00:00:20.170 --> 00:00:23.540 And finally, the label that is with side left 11 00:00:23.540 --> 00:00:25.363 has to appear underneath them. 12 00:00:26.460 --> 00:00:28.620 If we want different behaviour to this, 13 00:00:28.620 --> 00:00:33.290 we can use frames to contain certain labels. 14 00:00:33.290 --> 00:00:37.810 So, let's do from tkinter import ttk, 15 00:00:37.810 --> 00:00:39.920 and as well as the root, 16 00:00:39.920 --> 00:00:42.933 now we're going to define a main frame, 17 00:00:44.080 --> 00:00:46.370 that is placed inside the root. 18 00:00:46.370 --> 00:00:48.030 We're gonna say main.pac, 19 00:00:48.030 --> 00:00:51.270 and the side is going to be left. 20 00:00:51.270 --> 00:00:52.950 And fill is going to be both 21 00:00:52.950 --> 00:00:55.820 and expand is going to be true. 22 00:00:55.820 --> 00:00:57.540 Now we're gonna place these 23 00:00:57.540 --> 00:00:59.540 two labels with side of top, 24 00:00:59.540 --> 00:01:00.640 instead of in root, 25 00:01:00.640 --> 00:01:02.523 we're gonna place them in main. 26 00:01:04.680 --> 00:01:06.060 And we're gonna leave this final 27 00:01:06.060 --> 00:01:08.610 label with a side of left. 28 00:01:08.610 --> 00:01:10.360 Now here's what's important 29 00:01:10.360 --> 00:01:13.230 about this distribution. 30 00:01:13.230 --> 00:01:15.540 The main frame is the first element 31 00:01:15.540 --> 00:01:17.620 inside the root. 32 00:01:17.620 --> 00:01:21.630 The label is the second element inside the root. 33 00:01:21.630 --> 00:01:23.860 These elements affect each other 34 00:01:23.860 --> 00:01:26.100 because they're both inside the frame 35 00:01:26.100 --> 00:01:28.170 but they won't affect this one 36 00:01:28.170 --> 00:01:31.730 because they're not inside root. 37 00:01:31.730 --> 00:01:33.643 So when we do this, 38 00:01:34.840 --> 00:01:36.800 we get this distribution, 39 00:01:36.800 --> 00:01:38.350 which is different from before. 40 00:01:39.330 --> 00:01:41.040 Now this here 41 00:01:41.880 --> 00:01:43.940 is the main frame 42 00:01:43.940 --> 00:01:45.930 and this is the label. 43 00:01:45.930 --> 00:01:48.730 Both are side left. 44 00:01:48.730 --> 00:01:50.750 Both have fill both 45 00:01:50.750 --> 00:01:51.943 and expand equal true. 46 00:01:53.573 --> 00:01:56.640 What it means when two components 47 00:01:56.640 --> 00:01:57.980 are on the same side 48 00:01:57.980 --> 00:01:59.150 with the same fill 49 00:01:59.150 --> 00:02:00.360 and the same expand 50 00:02:00.360 --> 00:02:02.050 is that they are gonna share the space 51 00:02:02.050 --> 00:02:03.960 equivalently as long as that's possible. 52 00:02:03.960 --> 00:02:06.440 So as long as the elements inside them 53 00:02:06.440 --> 00:02:08.313 don't take up more space. 54 00:02:09.310 --> 00:02:11.883 That means that you get a 50/50 split here. 55 00:02:12.800 --> 00:02:15.170 These two labels are inside 56 00:02:15.170 --> 00:02:17.060 the main frame 57 00:02:17.060 --> 00:02:21.070 so they have a top anchor in both occasions, 58 00:02:21.070 --> 00:02:22.860 and they both have fill both 59 00:02:22.860 --> 00:02:23.693 and expand equal true, 60 00:02:23.693 --> 00:02:27.830 which means they take up 50% of the available space. 61 00:02:27.830 --> 00:02:30.220 We create frames in tkinter 62 00:02:30.220 --> 00:02:31.900 precisely to do stuff like this, 63 00:02:31.900 --> 00:02:33.610 to group together components 64 00:02:33.610 --> 00:02:35.930 that we want to affect each other, 65 00:02:35.930 --> 00:02:37.470 but not other components. 66 00:02:37.470 --> 00:02:39.920 By using multiple different frames, 67 00:02:39.920 --> 00:02:41.753 we can achieve the layouts we want. 68 00:02:43.050 --> 00:02:45.010 Pack() is a very powerful 69 00:02:45.010 --> 00:02:46.810 and very flexible algorithm 70 00:02:46.810 --> 00:02:49.840 for putting components into a window. 71 00:02:49.840 --> 00:02:51.270 But as you've seen throughout 72 00:02:51.270 --> 00:02:52.240 the last couple videos, 73 00:02:52.240 --> 00:02:54.750 it can be a little bit confusing 74 00:02:54.750 --> 00:02:57.040 and also depending on the size of your window 75 00:02:57.040 --> 00:02:59.990 and also on the order in which you put elements, 76 00:02:59.990 --> 00:03:02.263 things can change in how it behaves. 77 00:03:03.670 --> 00:03:05.630 This is why there's other algorithms as well 78 00:03:05.630 --> 00:03:06.820 as I've mentioned before. 79 00:03:06.820 --> 00:03:09.020 But we won't be looking at them in this course. 80 00:03:09.020 --> 00:03:11.320 For most simple applications, 81 00:03:11.320 --> 00:03:12.640 to get data from users 82 00:03:12.640 --> 00:03:14.170 and to show them data back, 83 00:03:14.170 --> 00:03:18.400 pack() is a perfectly valid and useful algorithm. 84 00:03:18.400 --> 00:03:20.300 And it is very simple. 85 00:03:20.300 --> 00:03:22.450 You just say, "pack()", which side you want, 86 00:03:22.450 --> 00:03:24.750 and whether you want components to expand or not 87 00:03:24.750 --> 00:03:26.260 and there you go. 88 00:03:26.260 --> 00:03:28.030 You don't have to worry about positioning, 89 00:03:28.030 --> 00:03:29.020 or grids, 90 00:03:29.020 --> 00:03:30.723 or layouts and all that. 91 00:03:31.970 --> 00:03:33.310 Hopefully this makes sense. 92 00:03:33.310 --> 00:03:35.000 Thank you for joining me in this video 93 00:03:35.000 --> 00:03:36.623 and I'll see you in the next one.