0 1 00:00:05,360 --> 00:00:06,870 In this section we are going to learn 1 2 00:00:06,870 --> 00:00:09,970 how we can use Place Geometry Manager. 2 3 00:00:09,970 --> 00:00:12,560 In Tkinter there are three different Geometry Managers. 3 4 00:00:12,560 --> 00:00:15,180 First one is Pack, second one is Grid, 4 5 00:00:15,180 --> 00:00:16,400 and the last one one is Place. 5 6 00:00:16,400 --> 00:00:18,180 We already learnt how we can use Pack 6 7 00:00:18,180 --> 00:00:20,060 and Grid Geometry Manager, 7 8 00:00:20,060 --> 00:00:21,420 and in this lecture we are going to learn 8 9 00:00:21,420 --> 00:00:23,620 how we can use Place Geometry Manager. 9 10 00:00:23,620 --> 00:00:24,650 What is Place Geometry Manager? 10 11 00:00:24,650 --> 00:00:28,991 Place Geometry Manager allows us exact control 11 12 00:00:28,991 --> 00:00:31,660 over widget locations and size. 12 13 00:00:31,660 --> 00:00:34,533 We can use absolute position and size for our widgets. 13 14 00:00:36,320 --> 00:00:38,670 However, it is difficult to manage if you need 14 15 00:00:38,670 --> 00:00:41,920 to use many widgets for our applications. 15 16 00:00:41,920 --> 00:00:42,760 Let's get started 16 17 00:00:42,760 --> 00:00:47,600 and this is very useful geometry manager by the way. 17 18 00:00:48,477 --> 00:00:52,670 We will use this geometry manager in the next lessons 18 19 00:00:52,670 --> 00:00:54,803 for our applications, for our projects. 19 20 00:00:55,880 --> 00:00:56,830 What I need to do? 20 21 00:00:56,830 --> 00:01:00,210 I want to create a login form for our application 21 22 00:01:00,210 --> 00:01:02,520 and I will locate all the widgets 22 23 00:01:02,520 --> 00:01:05,610 to use place geometry manager, okay? 23 24 00:01:05,610 --> 00:01:08,241 By using Place Geometry Manager, 24 25 00:01:08,241 --> 00:01:12,585 I will create a title and the title will be label. 25 26 00:01:12,585 --> 00:01:16,190 I will say here and the first parameter will be root, 26 27 00:01:16,190 --> 00:01:18,400 second one is my text property 27 28 00:01:19,400 --> 00:01:24,135 and for text I will say Place Geometry Manager, okay? 28 29 00:01:24,135 --> 00:01:29,135 and for text I will say Place Geometry Manager, okay? 29 30 00:01:29,917 --> 00:01:33,520 And also let's use a font property for our application, 30 31 00:01:33,520 --> 00:01:35,260 here what I will say 31 32 00:01:35,260 --> 00:01:39,892 for the font first parameter my font name 'Verdana' 32 33 00:01:39,892 --> 00:01:41,970 for the font first parameter my font name 'Verdana' 33 34 00:01:41,970 --> 00:01:43,710 and second one is my font size. 34 35 00:01:43,710 --> 00:01:47,080 So for font size I will say 15, okay? 35 36 00:01:47,080 --> 00:01:48,514 Now what we need to do? 36 37 00:01:48,514 --> 00:01:51,343 We need to create two different labels. 37 38 00:01:52,359 --> 00:01:56,034 The first one I will say name_txt is equal to 38 39 00:01:56,034 --> 00:01:58,840 The first one I will say name_txt is equal to 39 40 00:01:58,840 --> 00:01:59,823 label. 40 41 00:02:01,210 --> 00:02:02,930 Label I will say root 41 42 00:02:02,930 --> 00:02:05,513 and second one will be again text property. 42 43 00:02:06,380 --> 00:02:08,277 For text property I will say 'Name'. 43 44 00:02:10,672 --> 00:02:15,629 And here I will press CTRL+D and here I will say pass_txt 44 45 00:02:15,629 --> 00:02:18,513 And here I will press CTRL+D and here I will say pass_txt 45 46 00:02:18,513 --> 00:02:21,513 and here my text will be 'Password'. 46 47 00:02:24,152 --> 00:02:28,150 And now what is next I need to create two different entries. 47 48 00:02:28,150 --> 00:02:30,140 First one is the field name entry, 48 49 00:02:30,140 --> 00:02:31,973 so I will say name_input is equal to Entry. 49 50 00:02:31,973 --> 00:02:35,680 so I will say name_input is equal to Entry. 50 51 00:02:35,680 --> 00:02:37,907 For Entry the first parameter is root, 51 52 00:02:37,907 --> 00:02:40,213 the second one will be width. 52 53 00:02:41,190 --> 00:02:42,850 Width is equal to 30. 53 54 00:02:42,850 --> 00:02:47,850 Again, CTRL+D and here I will say pass_input, okay? 54 55 00:02:47,955 --> 00:02:49,960 Again, CTRL+D and here I will say pass_input, okay? 55 56 00:02:49,960 --> 00:02:52,720 By the way, I need to tell you something here, 56 57 00:02:52,720 --> 00:02:54,750 as you see now for root.geometry 57 58 00:02:54,750 --> 00:02:58,560 we already used this one 450x450, 58 59 00:02:58,560 --> 00:03:03,070 but here we have something more, plus 650 and 350, 59 60 00:03:03,070 --> 00:03:05,100 what is this guys, these values? 60 61 00:03:05,100 --> 00:03:06,470 These values means 61 62 00:03:06,470 --> 00:03:10,997 that we will locate our window on our screen. 62 63 00:03:10,997 --> 00:03:15,439 That means our tkinter window its x location is 650 63 64 00:03:15,439 --> 00:03:16,663 That means our tkinter window its x location is 650 64 65 00:03:17,511 --> 00:03:19,843 and its y location will be 350, okay? 65 66 00:03:21,030 --> 00:03:22,820 So what I need to do, something more? 66 67 00:03:22,820 --> 00:03:24,950 I need to create a button 67 68 00:03:24,950 --> 00:03:26,860 and here I will say button is equal 68 69 00:03:26,860 --> 00:03:29,330 to Button constructor method 69 70 00:03:29,330 --> 00:03:32,220 and after that here first parameter is root 70 71 00:03:32,220 --> 00:03:35,320 and second one will be my text property again, 71 72 00:03:35,320 --> 00:03:38,787 and for the text I will say simply 'Save'. 72 73 00:03:41,560 --> 00:03:43,170 And now what we need to do... 73 74 00:03:43,170 --> 00:03:46,480 Of course if we run our application now 74 75 00:03:46,480 --> 00:03:48,510 we don't see our widgets here, right? 75 76 00:03:48,510 --> 00:03:51,720 So because we didn't use Geometry Manager 76 77 00:03:51,720 --> 00:03:54,540 for our applications, for our widgets, sorry. 77 78 00:03:54,540 --> 00:03:56,560 So what we need to do here. 78 79 00:03:56,560 --> 00:04:00,770 Let's locate our title first and after that the others. 79 80 00:04:00,770 --> 00:04:04,530 First I will say title.place geometry manager. 80 81 00:04:04,530 --> 00:04:06,790 For the Place Geometry Manager we need to use x 81 82 00:04:06,790 --> 00:04:08,550 and y coordinates. 82 83 00:04:08,550 --> 00:04:13,550 For the x coordinate, I will say x is equal to 100. 83 84 00:04:13,675 --> 00:04:15,830 For the x coordinate, I will say x is equal to 100. 84 85 00:04:15,830 --> 00:04:19,471 This is where my title will start, okay? 85 86 00:04:19,471 --> 00:04:22,087 This is where my title will start, okay? 86 87 00:04:22,087 --> 00:04:23,650 And the other one is y, 87 88 00:04:23,650 --> 00:04:27,910 y coordinate will be, let's say, y=20. 88 89 00:04:27,910 --> 00:04:29,603 Now if I run my application, 89 90 00:04:30,890 --> 00:04:34,190 as you see now here our title is here. 90 91 00:04:34,190 --> 00:04:37,173 This guy is from here, this corner, okay? 91 92 00:04:38,271 --> 00:04:39,346 X value is, 92 93 00:04:39,346 --> 00:04:40,910 X value is 100 pixels 93 94 00:04:47,906 --> 00:04:49,989 and y value is 20 pixels. 94 95 00:04:51,200 --> 00:04:54,520 And also we'll use the same thing for other widgets. 95 96 00:04:54,520 --> 00:04:55,910 Here what I need to do? 96 97 00:04:55,910 --> 00:05:00,903 I need to use name_txt.place and here what I need to say, 97 98 00:05:00,903 --> 00:05:05,653 I need to use name_txt.place and here what I need to say, 98 99 00:05:07,350 --> 00:05:10,340 I will say for x value I will say 20, 99 100 00:05:10,340 --> 00:05:12,683 for y value I will say 80. 100 101 00:05:13,570 --> 00:05:15,703 Equal to 80, okay? 101 102 00:05:17,062 --> 00:05:21,120 After this one, I need to locate my input name 102 103 00:05:21,120 --> 00:05:24,350 and I will say name_input.place 103 104 00:05:25,300 --> 00:05:28,590 and for the place here I will say x value is 100 104 105 00:05:29,600 --> 00:05:32,483 and for y value I will say 110. 105 106 00:05:34,350 --> 00:05:35,490 If I run my application, 106 107 00:05:35,490 --> 00:05:37,223 let's check how it's looking. 107 108 00:05:38,100 --> 00:05:39,920 You see it's something wrong here, anyway. 108 109 00:05:39,920 --> 00:05:44,210 So we need to use here 80, sorry, for the y value. 109 110 00:05:44,210 --> 00:05:47,223 And so let's move it here. 110 111 00:05:49,350 --> 00:05:51,393 This one is 80. 111 112 00:05:52,848 --> 00:05:55,080 And if I run it again. 112 113 00:05:55,080 --> 00:05:58,720 As you see now our name is here and our input is also here. 113 114 00:05:58,720 --> 00:05:59,840 And what is next? 114 115 00:05:59,840 --> 00:06:03,590 Also, we need to locate our password txt 115 116 00:06:03,590 --> 00:06:06,090 and also password input. 116 117 00:06:06,090 --> 00:06:08,965 For pass_txt I will say place and here x value is again 20 117 118 00:06:08,965 --> 00:06:13,130 For pass_txt I will say place and here x value is again 20 118 119 00:06:13,130 --> 00:06:16,998 and for y value I will say y value is 110. 119 120 00:06:16,998 --> 00:06:19,140 and for y value I will say y value is 110. 120 121 00:06:19,140 --> 00:06:22,310 Now, the other one is our password input. 121 122 00:06:22,310 --> 00:06:23,741 Pass_input.place 122 123 00:06:23,741 --> 00:06:24,574 Pass_input.place 123 124 00:06:24,574 --> 00:06:25,407 Pass_input.place 124 125 00:06:25,407 --> 00:06:26,240 Pass_input.place 125 126 00:06:26,240 --> 00:06:27,073 Pass_input.place 126 127 00:06:27,073 --> 00:06:27,906 Pass_input.place 127 128 00:06:27,906 --> 00:06:28,920 Pass_input.place 128 129 00:06:28,920 --> 00:06:32,950 For pass_input I will say x value is 100 129 130 00:06:32,950 --> 00:06:36,253 and for y value I will say 110 again. 130 131 00:06:36,253 --> 00:06:39,457 and for y value I will say 110 again. 131 132 00:06:39,457 --> 00:06:43,320 And I think the last one was our button, right? 132 133 00:06:43,320 --> 00:06:44,893 For button.place and let's check it for the button. 133 134 00:06:49,079 --> 00:06:49,912 If I run my application, for x and y coordinates values, 134 135 00:06:54,860 --> 00:06:58,953 here we need to locate somewhere here. 135 136 00:06:59,914 --> 00:07:04,146 So that means this x value will be almost 250, 136 137 00:07:04,146 --> 00:07:05,341 something like that. 137 138 00:07:05,341 --> 00:07:08,299 And for y values, this corner is 110. 138 139 00:07:08,299 --> 00:07:11,382 And for y values, this corner is 110. 139 140 00:07:13,257 --> 00:07:16,260 So for y value I need to go down 140 141 00:07:16,260 --> 00:07:20,551 and I need to use 140 or 150, something like that. 141 142 00:07:20,551 --> 00:07:23,117 So here I will say button.place 142 143 00:07:23,117 --> 00:07:25,130 So here I will say button.place 143 144 00:07:25,130 --> 00:07:28,190 and for x value 250, 144 145 00:07:28,190 --> 00:07:33,180 for y value I will say 140 I think it's enough. 145 146 00:07:33,180 --> 00:07:36,090 140 and now if I run my application. 146 147 00:07:36,090 --> 00:07:37,503 As you see now it's perfect. 147 148 00:07:38,929 --> 00:07:40,835 And we locate all our widgets. 148 149 00:07:40,835 --> 00:07:43,250 It looks very nice. 149 150 00:07:43,250 --> 00:07:47,588 By the way, maybe this one, it looks simple maybe? 150 151 00:07:47,588 --> 00:07:50,400 By the way, maybe this one, it looks simple maybe? 151 152 00:07:50,400 --> 00:07:54,320 I don't know, but usually the best Geometry Manager 152 153 00:07:54,320 --> 00:07:56,720 I think it is Grid Geometry Manager, 153 154 00:07:56,720 --> 00:08:01,289 because we have 1, 2, 3, 4, 5, 6 different widgets 154 155 00:08:01,289 --> 00:08:02,677 because we have 1, 2, 3, 4, 5, 6 different widgets 155 156 00:08:02,677 --> 00:08:06,300 and we used many codes for all of them, right? 156 157 00:08:06,300 --> 00:08:10,053 That's way we will usually use this. 157 158 00:08:11,187 --> 00:08:12,710 We will use of course all of them together, 158 159 00:08:12,710 --> 00:08:15,300 but usually we use Grid Geometry Manager. 159 160 00:08:15,300 --> 00:08:18,120 So, I want to also show you something more, 160 161 00:08:18,120 --> 00:08:20,540 because there are some different functions 161 162 00:08:20,540 --> 00:08:22,660 for Place Geometry Manager. 162 163 00:08:22,660 --> 00:08:25,810 For example, here I will create another button. 163 164 00:08:25,810 --> 00:08:27,440 And this one, I will close this one. 164 165 00:08:27,440 --> 00:08:29,270 And here I will say button2. 165 166 00:08:34,539 --> 00:08:36,239 CTR+D is better. 166 167 00:08:36,239 --> 00:08:37,989 CTRl+D and here I will say button2, 167 168 00:08:39,180 --> 00:08:42,580 and here for text value I will say 'Click Me'. 168 169 00:08:43,990 --> 00:08:48,840 And also I want to use here back ground colour for my button, 169 170 00:08:48,840 --> 00:08:51,150 I will say red, okay? 170 171 00:08:51,150 --> 00:08:55,796 Now, I want to locate this guy with another function. 171 172 00:08:55,796 --> 00:08:57,239 Now, I want to locate this guy with another function. 172 173 00:08:57,239 --> 00:08:59,330 I will not use x and y coordinates, okay? 173 174 00:08:59,330 --> 00:09:01,230 So I want to show it how we can do it. 174 175 00:09:01,230 --> 00:09:04,340 Here, by the way, we can use it here. 175 176 00:09:04,340 --> 00:09:07,837 We don't have to use it somewhere here. 176 177 00:09:07,837 --> 00:09:09,093 We don't have to use it somewhere here. 177 178 00:09:09,093 --> 00:09:11,675 We can use place geometry. 178 179 00:09:11,675 --> 00:09:12,924 I will say place. 179 180 00:09:12,924 --> 00:09:16,324 Now, I will use relx and also rely value. 180 181 00:09:16,324 --> 00:09:17,157 Now, I will use relx and also rely value. 181 182 00:09:17,157 --> 00:09:20,293 What is relx and rely value? 182 183 00:09:20,293 --> 00:09:23,928 Relx means it is between 0 and 1. 183 184 00:09:23,928 --> 00:09:28,863 That means if I say relx is 0.5, 184 185 00:09:28,863 --> 00:09:31,222 that means is 50%. 185 186 00:09:31,222 --> 00:09:34,932 And that means if I use rely is equal to 0.5, 186 187 00:09:34,932 --> 00:09:37,747 And that means if I use rely is equal to 0.5, 187 188 00:09:37,747 --> 00:09:40,700 that means I can locate my button 188 189 00:09:40,700 --> 00:09:43,490 in the middle of my window. 189 190 00:09:43,490 --> 00:09:45,818 Because this is 50% and that one is 50% for y value, 190 191 00:09:45,818 --> 00:09:49,510 this is 50% for x value. 191 192 00:09:49,510 --> 00:09:53,930 If you say one, it will use all the window. 192 193 00:09:53,930 --> 00:09:57,690 And on the right side if you use one, 193 194 00:09:57,690 --> 00:10:01,563 the button will be somewhere here in your window. 194 195 00:10:03,363 --> 00:10:05,273 So if I run my application, 195 196 00:10:07,490 --> 00:10:09,410 as you see now our button is here, 196 197 00:10:10,465 --> 00:10:12,330 here is in the middle of our window. 197 198 00:10:12,330 --> 00:10:15,060 Now I want to resize my window. 198 199 00:10:15,060 --> 00:10:17,860 As you see now, then I resize also. 199 200 00:10:17,860 --> 00:10:20,800 This button moves, but others they don't move. 200 201 00:10:20,800 --> 00:10:21,633 You see? 201 202 00:10:23,056 --> 00:10:26,247 But here, it is not now in the middle of my window. 202 203 00:10:27,920 --> 00:10:31,873 We can solve this problem to use anchor property. 203 204 00:10:33,505 --> 00:10:37,163 If I say here, anchor is equal to 'center', 204 205 00:10:37,163 --> 00:10:39,954 If we say here, anchor is equal to 'center', 205 206 00:10:39,954 --> 00:10:43,824 I will make it in the middle, center of my window. 206 207 00:10:43,824 --> 00:10:44,997 I will make it in the middle, center of my window. 207 208 00:10:46,491 --> 00:10:48,673 If I scale it, if I resize my window now, 208 209 00:10:50,555 --> 00:10:54,980 now it is always in the center of my window. 209 210 00:10:54,980 --> 00:10:57,710 This is how we can use Place Geometry Manager. 210 211 00:10:57,710 --> 00:10:58,630 For now that's all. 211 212 00:10:58,630 --> 00:11:00,287 See you in the next.