0 1 00:00:04,430 --> 00:00:05,520 In this lecture we are going to learn 1 2 00:00:05,520 --> 00:00:09,030 how we can use PanedWindow widget for our applications. 2 3 00:00:09,030 --> 00:00:11,233 I already created our template, it's here. 3 4 00:00:11,233 --> 00:00:16,233 You might wonder what is here, this 650 and 200. 4 5 00:00:16,290 --> 00:00:19,550 Actually this is, this means location of my 5 6 00:00:19,550 --> 00:00:22,830 Tkinter window on my screen, okay? 6 7 00:00:22,830 --> 00:00:24,940 For x it's 650, 7 8 00:00:24,940 --> 00:00:28,010 and for y it's 250. 8 9 00:00:28,010 --> 00:00:30,230 It's something they let me write is here, 9 10 00:00:30,230 --> 00:00:34,540 and this is for x value is for this corner 650, 10 11 00:00:34,540 --> 00:00:38,390 and for y value is 200, okay? 11 12 00:00:38,390 --> 00:00:40,360 After that, what I need to do let's learn how we 12 13 00:00:40,360 --> 00:00:42,997 can create our PanedWindow for our application. 13 14 00:00:42,997 --> 00:00:46,590 First, I will create the label name and I will name it pw, 14 15 00:00:46,590 --> 00:00:50,657 PanedWindow, okay, and here I will use ttk constructor 15 16 00:00:50,657 --> 00:00:52,685 from ttk module, and after that 16 17 00:00:52,685 --> 00:00:54,788 what I need to do I need to say PanedWindow, 17 18 00:00:54,788 --> 00:00:56,621 and now I need to pass in 18 19 00:00:58,010 --> 00:01:00,990 some parameters for my paned window, right? 19 20 00:01:00,990 --> 00:01:03,450 First parameter will be my root, okay, 20 21 00:01:03,450 --> 00:01:06,560 and second one is orient. 21 22 00:01:06,560 --> 00:01:09,410 For orient I can use, I have two options actually. 22 23 00:01:09,410 --> 00:01:12,280 The first one is vertical, and second one is horizontal. 23 24 00:01:12,280 --> 00:01:14,630 So for this application we will use 24 25 00:01:14,630 --> 00:01:17,620 horizontal PanedWindow, okay. 25 26 00:01:17,620 --> 00:01:19,819 And after that what I need to do, I need to use 26 27 00:01:19,819 --> 00:01:23,700 pack geometry manager for my PanedWindow, 27 28 00:01:23,700 --> 00:01:26,080 and here its ready. 28 29 00:01:26,080 --> 00:01:27,820 What I need to do now, I need to create 29 30 00:01:27,820 --> 00:01:31,280 frames for my PanedWindows, for each one. 30 31 00:01:31,280 --> 00:01:33,390 For each one I will create a new frame, 31 32 00:01:33,390 --> 00:01:35,730 and I will store all my widgets 32 33 00:01:35,730 --> 00:01:38,570 in this frame for my PanedWindow, okay? 33 34 00:01:38,570 --> 00:01:40,390 What I need to do, I will say here 34 35 00:01:40,390 --> 00:01:44,060 frame1 is equal to here, 35 36 00:01:44,060 --> 00:01:46,930 I will say ttk.Frame, 36 37 00:01:46,930 --> 00:01:50,510 and our first parameter will be here PanedWindow. 37 38 00:01:50,510 --> 00:01:51,556 Why its like that? 38 39 00:01:51,556 --> 00:01:54,021 Now you see it says master, 39 40 00:01:54,021 --> 00:01:54,854 and here 40 41 00:01:56,254 --> 00:01:57,877 for our PanedWindow, 41 42 00:01:57,877 --> 00:02:00,270 it's child of root, right? 42 43 00:02:00,270 --> 00:02:02,820 The top level window, and this frame 43 44 00:02:02,820 --> 00:02:05,430 is child of our PanedWindow, okay? 44 45 00:02:05,430 --> 00:02:08,470 That's why when you use here, instead of root 45 46 00:02:08,470 --> 00:02:12,320 we need to use PanedWindow, okay, the master widget. 46 47 00:02:12,320 --> 00:02:14,953 After here what I need to do, I will use width, 47 48 00:02:16,330 --> 00:02:18,860 and also height properties, okay? 48 49 00:02:18,860 --> 00:02:21,880 Width is equal to, I will say 100, 49 50 00:02:21,880 --> 00:02:26,880 and for height is, for this one I will say 500, okay? 50 51 00:02:27,450 --> 00:02:28,940 Also, I want to use 51 52 00:02:32,430 --> 00:02:37,430 a border for my window, and relief can be SUNKEN, okay? 52 53 00:02:38,590 --> 00:02:41,667 After here what I will say, I will duplicate my frame1, 53 54 00:02:42,556 --> 00:02:47,556 Ctrl+D, and frame2 is here for width I will use 300 here, 54 55 00:02:49,520 --> 00:02:52,970 and height is same and relief is same, okay? 55 56 00:02:52,970 --> 00:02:54,930 So what is next now, what you need to do now? 56 57 00:02:54,930 --> 00:02:59,640 We need to add these guys to our window right, PanedWindow. 57 58 00:02:59,640 --> 00:03:01,260 What we need to do, we need to use 58 59 00:03:01,260 --> 00:03:03,473 add construction method here, okay, 59 60 00:03:05,760 --> 00:03:07,650 PanedWindow dot add, 60 61 00:03:07,650 --> 00:03:09,790 and the first parameter will be my frame, 61 62 00:03:09,790 --> 00:03:12,440 frame1, and second one is weight. 62 63 00:03:12,440 --> 00:03:14,770 I will explain what this weight here now, 63 64 00:03:14,770 --> 00:03:16,380 weight is equal to 1. 64 65 00:03:16,380 --> 00:03:17,400 What is weight here? 65 66 00:03:17,400 --> 00:03:21,910 Weight parameter means here, it specifies 66 67 00:03:21,910 --> 00:03:23,533 how much frame we will scaled 67 68 00:03:23,533 --> 00:03:25,933 when PanedWindow is resized, okay? 68 69 00:03:25,933 --> 00:03:29,040 When I run my application, you will understand it better. 69 70 00:03:29,040 --> 00:03:30,207 Don't worry about it now. 70 71 00:03:30,207 --> 00:03:33,570 I will again Control+D, and this guy will be, 71 72 00:03:33,570 --> 00:03:35,300 it's weight will be three, 72 73 00:03:35,300 --> 00:03:40,263 and for this one the frame name will be frame2, okay? 73 74 00:03:41,300 --> 00:03:42,133 So what is next? 74 75 00:03:42,133 --> 00:03:46,440 If I run my application now, let's see how it's looking. 75 76 00:03:46,440 --> 00:03:50,780 As you see it's here, and here what you need to do, 76 77 00:03:50,780 --> 00:03:53,833 actually I want to fit all my window, right? 77 78 00:03:55,510 --> 00:03:59,030 For x, and y value, how can I do that? 78 79 00:03:59,030 --> 00:04:02,313 Here we need to use something new here, okay? 79 80 00:04:03,190 --> 00:04:05,510 We will use fill parameter, 80 81 00:04:05,510 --> 00:04:07,750 fill is equal to, I will say BOTH. 81 82 00:04:07,750 --> 00:04:12,260 BOTH means here for x, and also for y value, okay? 82 83 00:04:12,260 --> 00:04:14,023 Also, I will say expand, 83 84 00:04:15,700 --> 00:04:19,680 expand is equal to True, okay? 84 85 00:04:19,680 --> 00:04:24,267 If I run it again, as you see now it's more reasonable. 85 86 00:04:24,267 --> 00:04:26,210 Let's talk about weight here. 86 87 00:04:26,210 --> 00:04:27,920 Now for this guy weight is one, 87 88 00:04:27,920 --> 00:04:31,420 and for this one, weight is three, right? 88 89 00:04:31,420 --> 00:04:34,800 When I resize my window, you see? 89 90 00:04:34,800 --> 00:04:38,263 Now this is for three is getting, 90 91 00:04:39,220 --> 00:04:40,580 for this one, 91 92 00:04:40,580 --> 00:04:45,580 for this one, check it now, and this one is getting bigger 92 93 00:04:46,420 --> 00:04:51,420 more than this one, three times more than this one, okay? 93 94 00:04:51,960 --> 00:04:53,603 That means weight here, okay? 94 95 00:04:54,540 --> 00:04:56,053 Here what I need to do, 95 96 00:04:58,885 --> 00:05:00,530 I want to add some widgets 96 97 00:05:00,530 --> 00:05:05,173 for our PanedWindow, right? 97 98 00:05:06,130 --> 00:05:07,800 How can we do that? 98 99 00:05:07,800 --> 00:05:09,840 Actually before that, before adding widgets, 99 100 00:05:09,840 --> 00:05:14,000 I want to show how we can 100 101 00:05:14,000 --> 00:05:16,783 add another frame for our PanedWindow. 101 102 00:05:17,970 --> 00:05:22,920 We will not use add function, okay? 102 103 00:05:22,920 --> 00:05:23,800 Also we will not use weight. 103 104 00:05:23,800 --> 00:05:25,900 There is also something important here. 104 105 00:05:25,900 --> 00:05:29,810 What I will do, I will press Ctrl+D again, 105 106 00:05:29,810 --> 00:05:33,560 and will create another frame here, for the last one, 106 107 00:05:33,560 --> 00:05:38,073 frame3, and for this one weight will be 75, 107 108 00:05:39,180 --> 00:05:42,864 something like that, a small frame for this one, 108 109 00:05:42,864 --> 00:05:46,163 and height the same, and it is SUNKEN. 109 110 00:05:49,040 --> 00:05:52,883 Now let's run our application, I want to show you something. 110 111 00:05:53,840 --> 00:05:58,130 Now this one is we need here for this guy, 111 112 00:05:58,130 --> 00:06:01,510 the index for this frame 112 113 00:06:01,510 --> 00:06:04,420 is at index zero, 113 114 00:06:04,420 --> 00:06:06,610 and this one is at index one. 114 115 00:06:06,610 --> 00:06:10,420 Okay, if I want to add a new window here 115 116 00:06:10,420 --> 00:06:13,250 in the middle of this, between these guys, 116 117 00:06:13,250 --> 00:06:15,508 what I need to do, I need to use indices, okay? 117 118 00:06:15,508 --> 00:06:17,492 Here, and here. 118 119 00:06:17,492 --> 00:06:20,325 What I need to do I will say PanedWindow. 119 120 00:06:22,210 --> 00:06:25,740 Instead of insert method, I needto use, sorry. 120 121 00:06:25,740 --> 00:06:30,510 Instead of add method, I need to use insert method, okay? 121 122 00:06:30,510 --> 00:06:34,444 I will say insert, and the first parameter is position. 122 123 00:06:34,444 --> 00:06:38,070 Position will be one, okay, that means second, 123 124 00:06:38,070 --> 00:06:40,580 because indices start from zero. 124 125 00:06:40,580 --> 00:06:42,823 So, if you want to make it the second window, 125 126 00:06:42,823 --> 00:06:46,950 we need to say here one, okay, and also child. 126 127 00:06:46,950 --> 00:06:49,047 Child will be frame3, okay? 127 128 00:06:50,770 --> 00:06:54,170 Now I will not use weight by the way 128 129 00:06:54,170 --> 00:06:57,310 If I run it again, now check it. 129 130 00:06:57,310 --> 00:07:00,300 Now, If I scale, if I resize my window, 130 131 00:07:00,300 --> 00:07:01,313 check it, you see? 131 132 00:07:02,630 --> 00:07:04,300 Our window is not getting bigger, 132 133 00:07:04,300 --> 00:07:09,300 because we didn't use weight for the last window, okay? 133 134 00:07:09,300 --> 00:07:13,020 Manually, you can change its size, like, you see? 134 135 00:07:13,020 --> 00:07:14,920 If you create that kind of window, 135 136 00:07:14,920 --> 00:07:17,683 you can manually change its size, okay? 136 137 00:07:19,618 --> 00:07:22,410 What I need to do now, last thing about PanedWindow 137 138 00:07:22,410 --> 00:07:27,410 how we can add widgets to our windows. 138 139 00:07:27,500 --> 00:07:31,040 To that I will create a label, and also button. 139 140 00:07:31,040 --> 00:07:35,577 Label will be lbl=Label, and what I need to do, 140 141 00:07:35,577 --> 00:07:38,190 I want to add this guy to frame1, 141 142 00:07:38,190 --> 00:07:41,330 so this will be frame1, okay? 142 143 00:07:41,330 --> 00:07:42,163 Now let's check it. 143 144 00:07:42,163 --> 00:07:44,310 The first one is our root, 144 145 00:07:44,310 --> 00:07:46,320 second one is our PanedWindow, 145 146 00:07:46,320 --> 00:07:50,100 now for this widget its master is frame1, okay? 146 147 00:07:50,100 --> 00:07:52,670 Our widget will be child of frame1. 147 148 00:07:52,670 --> 00:07:54,140 That's why I need to say, 148 149 00:07:54,140 --> 00:07:56,740 the first parameter we need to say here frame1. 149 150 00:07:56,740 --> 00:08:00,530 This is important, after that here I will create a text 150 151 00:08:04,168 --> 00:08:06,703 for my label, and let's say 'Hello', okay? 151 152 00:08:07,970 --> 00:08:11,690 Also, what we need to do , we can use here, 152 153 00:08:11,690 --> 00:08:16,470 grid geometry manager, instead of pack, I say here, 153 154 00:08:16,470 --> 00:08:18,693 row is equal to zero, 154 155 00:08:20,570 --> 00:08:25,570 column is equal to zero. 155 156 00:08:26,450 --> 00:08:31,450 I also want to use pady is equal to 25, okay? 156 157 00:08:33,090 --> 00:08:35,190 Also I want to create a button, 157 158 00:08:35,190 --> 00:08:40,190 button is equal to ttk.Button, 158 159 00:08:40,250 --> 00:08:43,380 and here what need to say we need to use another frame, right? 159 160 00:08:43,380 --> 00:08:47,580 You can use frame1, frame3, or frame2, it doesn't matter. 160 161 00:08:47,580 --> 00:08:49,720 I will use frame1 again, okay, 161 162 00:08:49,720 --> 00:08:54,330 and the text is equal to 'Click ME', 162 163 00:09:01,970 --> 00:09:05,060 and after here we will use again grid geometry 163 164 00:09:05,060 --> 00:09:10,060 manager for the grid, I will say row is equal to one, 164 165 00:09:13,370 --> 00:09:18,370 column is equal to zero, 165 166 00:09:18,947 --> 00:09:20,147 and padx, and also pady. 166 167 00:09:22,968 --> 00:09:24,903 Let's use it for x, 20, and for pady, I will use 25. 167 168 00:09:28,354 --> 00:09:30,163 Let's run our application now. 168 169 00:09:31,870 --> 00:09:36,870 As you see now here our PanedWindows are here, all of them. 169 170 00:09:37,030 --> 00:09:39,950 Also our widgets here, the first one is our text, 170 171 00:09:39,950 --> 00:09:42,506 and also the other one is our button. 171 172 00:09:42,506 --> 00:09:44,680 In this lecture we learned how we can 172 173 00:09:44,680 --> 00:09:47,120 use PanedWindow widgets for our applications. 173 174 00:09:47,120 --> 00:09:49,120 For now that's all, see you in the next.