0 1 00:00:04,600 --> 00:00:06,380 In this lecture we are going to learn 1 2 00:00:06,380 --> 00:00:08,450 how we can use Grid Layout Manager. 2 3 00:00:08,450 --> 00:00:09,970 And I already create our application, 3 4 00:00:09,970 --> 00:00:12,653 it is here and I used the Grid Layout Manager 4 5 00:00:12,653 --> 00:00:14,900 to create this application. 5 6 00:00:14,900 --> 00:00:17,030 What's Grid Layout Manager? 6 7 00:00:17,030 --> 00:00:20,680 Grid Manager is most flexible geometry manager in tkinter. 7 8 00:00:20,680 --> 00:00:24,540 Grid manager allows us to organise our widgets easily 8 9 00:00:24,540 --> 00:00:27,470 and it is easier to use when we need to design 9 10 00:00:27,470 --> 00:00:31,210 dialogue boxes, this kind of applications. 10 11 00:00:31,210 --> 00:00:33,540 And, of course, we can create this application 11 12 00:00:34,510 --> 00:00:37,440 by using pack geometry manager, 12 13 00:00:37,440 --> 00:00:42,000 but if you want to create this kind of widget, 13 14 00:00:42,000 --> 00:00:44,519 this kind of applications with pack geometry manager, 14 15 00:00:44,519 --> 00:00:47,724 you need to write more codes and of course, 15 16 00:00:47,724 --> 00:00:51,830 grid layout manager is easier to use for this kind 16 17 00:00:51,830 --> 00:00:53,330 of applications. 17 18 00:00:53,330 --> 00:00:54,170 Let's get started. 18 19 00:00:54,170 --> 00:00:57,290 I already create our template, it's here. 19 20 00:00:57,290 --> 00:01:00,530 And now what I need to do, I need to create here 20 21 00:01:00,530 --> 00:01:04,870 three labels and two entries and also one button. 21 22 00:01:04,870 --> 00:01:05,703 Let's get started. 22 23 00:01:05,703 --> 00:01:07,310 First, let's create our entry. 23 24 00:01:07,310 --> 00:01:12,310 And I will say entry is equal to ttk.entry 24 25 00:01:12,610 --> 00:01:15,320 and here what I need to do, for the first one 25 26 00:01:15,320 --> 00:01:20,230 I need to say root, it is our top level window, right. 26 27 00:01:20,230 --> 00:01:22,523 And after that I will say width, okay. 27 28 00:01:25,430 --> 00:01:27,350 Width is equal to 30. 28 29 00:01:27,350 --> 00:01:29,380 Now I will press Control+D, 29 30 00:01:29,380 --> 00:01:32,790 and the second one will be entry2, okay. 30 31 00:01:32,790 --> 00:01:34,798 So, what I need to do, what's next, 31 32 00:01:34,798 --> 00:01:39,220 here I want to create a placeholder text for my entries. 32 33 00:01:39,220 --> 00:01:43,550 Okay, and I will say entry.insert, first parameter 33 34 00:01:43,550 --> 00:01:46,530 is zero and second one is my text. 34 35 00:01:46,530 --> 00:01:51,120 And I will say here, please enter your name. 35 36 00:01:51,120 --> 00:01:53,360 Again, Control D and here I will say, 36 37 00:01:53,360 --> 00:01:55,840 please enter your password. 37 38 00:01:55,840 --> 00:02:00,370 And, that one is, will be entry2, okay. 38 39 00:02:00,370 --> 00:02:01,890 Now, what I need to do, I need to create 39 40 00:02:01,890 --> 00:02:03,810 a button and also three labels. 40 41 00:02:03,810 --> 00:02:07,833 For button, I will say button is equal to ttk.Button. 41 42 00:02:09,810 --> 00:02:13,010 Button constructor manager, right. 42 43 00:02:13,010 --> 00:02:14,720 And after here for the button, 43 44 00:02:14,720 --> 00:02:17,690 I will say root again and for text, 44 45 00:02:17,690 --> 00:02:22,690 text is equal to let's say save, or enter, okay. 45 46 00:02:28,690 --> 00:02:30,160 Now it's time to create our labels. 46 47 00:02:30,160 --> 00:02:34,400 Lbltitle, the first one, and here what I need to say, 47 48 00:02:34,400 --> 00:02:39,400 I need to say, ttk.Label and the first parameter 48 49 00:02:39,850 --> 00:02:40,840 will be my text. 49 50 00:02:40,840 --> 00:02:44,450 And I will say text is equal to our title here 50 51 00:02:50,340 --> 00:02:53,470 and second property will be my font. 51 52 00:02:53,470 --> 00:02:55,782 And for the font, I will say font is equal to 52 53 00:02:55,782 --> 00:03:00,782 between parentheses, I need to say, my font name is Arial 53 54 00:03:01,130 --> 00:03:05,780 and the second one is my font size, right. 54 55 00:03:05,780 --> 00:03:08,045 For font size, I will use 22. 55 56 00:03:08,045 --> 00:03:10,560 And, what's next, now I will create 56 57 00:03:10,560 --> 00:03:15,153 lblname and another label, ttk.Label. 57 58 00:03:16,560 --> 00:03:19,110 And here I will only use text property. 58 59 00:03:19,110 --> 00:03:24,070 For text property, I will say text is equal to your name. 59 60 00:03:25,690 --> 00:03:28,550 And now, again, I will press Control D 60 61 00:03:28,550 --> 00:03:32,703 and lblpassword, here I will only say your password, okay. 61 62 00:03:39,350 --> 00:03:40,863 And so, what's wrong here? 62 63 00:03:42,650 --> 00:03:45,590 Here I need to use quotes, sorry. 63 64 00:03:45,590 --> 00:03:49,453 Here your name. 64 65 00:03:51,060 --> 00:03:53,537 And here, again, I need to use quotes. 65 66 00:03:56,210 --> 00:03:57,490 And now it's fine. 66 67 00:03:57,490 --> 00:03:59,950 Now, if I run my application, as you see, 67 68 00:03:59,950 --> 00:04:02,500 our window is totally empty because we didn't 68 69 00:04:02,500 --> 00:04:05,760 use any geometry manager yet, right. 69 70 00:04:05,760 --> 00:04:08,460 Pack geometry manager or grid geometry manager. 70 71 00:04:08,460 --> 00:04:11,130 Now, we will use grid geometry manager 71 72 00:04:11,130 --> 00:04:14,940 to layout our widgets, okay. 72 73 00:04:14,940 --> 00:04:16,340 To organise our widgets. 73 74 00:04:16,340 --> 00:04:18,800 To do that what I need to do, first one I need to use 74 75 00:04:18,800 --> 00:04:23,310 my title and I will say lbltitle, my first widget is 75 76 00:04:23,310 --> 00:04:26,718 lbltitle.grid and here I need to use 76 77 00:04:26,718 --> 00:04:29,900 rows and column numbers, okay. 77 78 00:04:29,900 --> 00:04:33,900 First, row, for the first one, row will be zero. 78 79 00:04:33,900 --> 00:04:37,900 And column number will be, again, zero, okay. 79 80 00:04:37,900 --> 00:04:42,900 And, second one is lblname.grid, I will say. 80 81 00:04:43,790 --> 00:04:47,460 And for this guy, I need to use row number is, 81 82 00:04:47,460 --> 00:04:52,460 must be one, and column number must be, again, zero. 82 83 00:04:52,760 --> 00:04:55,319 Let me run my original application 83 84 00:04:55,319 --> 00:04:56,724 and show you something. 84 85 00:04:56,724 --> 00:04:59,010 Now, here, this is our original application. 85 86 00:04:59,010 --> 00:05:01,680 Here, the row number for this guy is zero. 86 87 00:05:01,680 --> 00:05:03,850 And column number is, again, zero. 87 88 00:05:03,850 --> 00:05:05,892 Actually, here we used another something, 88 89 00:05:05,892 --> 00:05:10,257 also column span but I will explain later, okay. 89 90 00:05:10,257 --> 00:05:13,980 But, for this guy, it's row number is one 90 91 00:05:13,980 --> 00:05:17,098 and here, don't forget that row and column numbers 91 92 00:05:17,098 --> 00:05:19,540 start from zero. 92 93 00:05:19,540 --> 00:05:22,520 Row number is one, for this one is zero. 93 94 00:05:22,520 --> 00:05:24,170 This one is for, this one is one, 94 95 00:05:24,170 --> 00:05:26,003 for this one is two, and for this one, 95 96 00:05:26,003 --> 00:05:28,660 it's row number is three, okay. 96 97 00:05:28,660 --> 00:05:31,870 For this guys, your name and password, the column 97 98 00:05:31,870 --> 00:05:33,750 number is zero, okay. 98 99 00:05:33,750 --> 00:05:37,233 For this guys, the column number is one, okay. 99 100 00:05:37,233 --> 00:05:41,410 And, now, let's go on and here, what is next. 100 101 00:05:41,410 --> 00:05:44,820 After a name, what I need to do, 101 102 00:05:44,820 --> 00:05:48,240 I need to locate my password. 102 103 00:05:48,240 --> 00:05:53,240 Lblpass.grid and here what I need to say, I need to say 103 104 00:05:55,150 --> 00:05:59,230 row number is equal to two and column number 104 105 00:06:00,170 --> 00:06:02,866 is equal to, again, zero. 105 106 00:06:02,866 --> 00:06:07,866 And, now, it's time to locate our entries, okay. 106 107 00:06:08,230 --> 00:06:13,230 Entry.grid, and here I will say row number is equal 107 108 00:06:13,300 --> 00:06:18,300 to one and column number is equal to one. 108 109 00:06:18,340 --> 00:06:20,640 Let's run our application again. 109 110 00:06:20,640 --> 00:06:22,980 And here. 110 111 00:06:22,980 --> 00:06:26,482 For entry, as you see here, this is row number one. 111 112 00:06:26,482 --> 00:06:31,390 And it's here, this guy's also row number is one. 112 113 00:06:31,390 --> 00:06:34,200 But column number for this guys, your name and password, 113 114 00:06:34,200 --> 00:06:35,520 it is zero, right. 114 115 00:06:35,520 --> 00:06:39,350 But for this entries and also button, 115 116 00:06:39,350 --> 00:06:42,800 it is, column number is one, okay. 116 117 00:06:42,800 --> 00:06:44,300 And, what is next. 117 118 00:06:44,300 --> 00:06:47,375 Other one is entry2.grid, we will say. 118 119 00:06:47,375 --> 00:06:51,511 And here for this guy I will say row number 119 120 00:06:51,511 --> 00:06:56,511 is equal to two and column number is equal to one, okay. 120 121 00:06:57,340 --> 00:06:58,963 The last one is our button. 121 122 00:07:00,260 --> 00:07:04,910 Button.grid and row is equal to three 122 123 00:07:04,910 --> 00:07:09,040 and column number is equal to one, here. 123 124 00:07:09,040 --> 00:07:11,700 Now, if I run my application, let's see it. 124 125 00:07:11,700 --> 00:07:14,150 As you see now, it's here, it's good. 125 126 00:07:14,150 --> 00:07:15,580 But there are some problems. 126 127 00:07:15,580 --> 00:07:17,580 The first one is our title is here, 127 128 00:07:17,580 --> 00:07:20,090 I want to move it here, somewhere here, okay, 128 129 00:07:20,090 --> 00:07:23,220 in the middle of this guys is here. 129 130 00:07:23,220 --> 00:07:26,320 And, also, for the name and the password, 130 131 00:07:26,320 --> 00:07:29,600 what I need to do, I need to also move them here, okay. 131 132 00:07:29,600 --> 00:07:33,740 To left side and also I want to make this button 132 133 00:07:33,740 --> 00:07:36,130 bigger and also they are very, the button is very 133 134 00:07:36,130 --> 00:07:37,880 close to this entry, okay. 134 135 00:07:37,880 --> 00:07:39,740 So, now I will show you how we can use 135 136 00:07:39,740 --> 00:07:42,001 column span and sticky functions to solve 136 137 00:07:42,001 --> 00:07:44,930 this problems, okay. 137 138 00:07:44,930 --> 00:07:47,170 For the first one, here, what I need to do, 138 139 00:07:47,170 --> 00:07:50,590 our title, we can use column span here 139 140 00:07:50,590 --> 00:07:54,960 and for our title we can move it on the middle 140 141 00:07:54,960 --> 00:07:59,060 of the, in the, here, okay, on the right side. 141 142 00:07:59,060 --> 00:08:02,330 And here, what I need to do, I need to come here 142 143 00:08:02,330 --> 00:08:04,970 and lbltitle, after lbltitle, I need to say 143 144 00:08:04,970 --> 00:08:09,970 here columnspan is equal to two, okay. 144 145 00:08:11,460 --> 00:08:16,460 If I run my application, you see it's better now, 145 146 00:08:16,570 --> 00:08:17,670 it's here. 146 147 00:08:17,670 --> 00:08:20,169 And so, what's next now, what I need to do 147 148 00:08:20,169 --> 00:08:23,334 here, I need to move this guy to left side, okay. 148 149 00:08:23,334 --> 00:08:25,170 And, so how can I do that. 149 150 00:08:25,170 --> 00:08:28,870 For lblname, it's here, I need to use 150 151 00:08:30,470 --> 00:08:32,050 sticky function. 151 152 00:08:32,050 --> 00:08:37,050 I need to say here sticky is equal to W. 152 153 00:08:37,480 --> 00:08:41,900 W means here west, okay, also we have east, 153 154 00:08:41,900 --> 00:08:44,620 west, and functions. 154 155 00:08:44,620 --> 00:08:49,080 So, W means west and I will move it to left side, okay. 155 156 00:08:49,080 --> 00:08:53,853 If I use sticky is equal to W, something wrong here. 156 157 00:08:55,930 --> 00:08:58,260 And here, sorry, not must be here, 157 158 00:08:58,260 --> 00:09:03,260 it is after name, it will be here. 158 159 00:09:03,560 --> 00:09:07,291 Sticky is equal to W, okay. 159 160 00:09:07,291 --> 00:09:11,847 If I run my application now, you see your name is, 160 161 00:09:11,847 --> 00:09:14,480 this widget is also here, is good, 161 162 00:09:14,480 --> 00:09:16,730 its location is also good. 162 163 00:09:16,730 --> 00:09:18,960 So, what is next, I want to also show you how 163 164 00:09:18,960 --> 00:09:22,290 we can use sticky for our entry button 164 165 00:09:22,290 --> 00:09:25,498 because actually we can make it bigger, 165 166 00:09:25,498 --> 00:09:28,030 also we can move it to right side. 166 167 00:09:28,030 --> 00:09:30,700 It will be better if you move it to right side, right? 167 168 00:09:30,700 --> 00:09:33,710 And, let's do it for the button, I will come here 168 169 00:09:33,710 --> 00:09:38,710 and I will say sticky is equal to, for the button, 169 170 00:09:39,600 --> 00:09:41,320 let's use east, okay. 170 171 00:09:41,320 --> 00:09:45,310 And if I use east, you see now it's on the right side. 171 172 00:09:45,310 --> 00:09:48,830 It's location is good, but I want to show something else 172 173 00:09:48,830 --> 00:09:52,000 if you want to make your button bigger, 173 174 00:09:52,000 --> 00:09:56,044 you can use W and E together. 174 175 00:09:56,044 --> 00:10:01,044 You can say East plus West, it will make your button bigger. 175 176 00:10:01,120 --> 00:10:01,953 Let me show it. 176 177 00:10:01,953 --> 00:10:06,840 If you say, E plus W, and after if you run your application, 177 178 00:10:08,010 --> 00:10:10,790 you see your button is bigger now. 178 179 00:10:10,790 --> 00:10:15,210 And, of course, if you use only W, it will be on the left 179 180 00:10:15,210 --> 00:10:16,564 side, right. 180 181 00:10:16,564 --> 00:10:20,970 And if you use only East, it will be on the right side. 181 182 00:10:20,970 --> 00:10:24,390 I think on the right side, it's better, 182 183 00:10:24,390 --> 00:10:26,420 it's looking better but I want to, of course, show, 183 184 00:10:26,420 --> 00:10:28,448 also I want to show you how you can use 184 185 00:10:28,448 --> 00:10:30,569 both of them together, east and west. 185 186 00:10:30,569 --> 00:10:32,680 And also I want to show you something else. 186 187 00:10:32,680 --> 00:10:34,906 Now, we can use also pad here 187 188 00:10:34,906 --> 00:10:39,083 because the button and entry is very close, okay. 188 189 00:10:39,083 --> 00:10:42,070 To solve this problem, we can say here, 189 190 00:10:42,070 --> 00:10:44,210 another parameter we can use here. 190 191 00:10:44,210 --> 00:10:49,210 And we can say pady, you can use padx or pady, okay. 191 192 00:10:52,360 --> 00:10:55,297 For this guy, for the button you need to use pady. 192 193 00:10:55,297 --> 00:11:00,297 And here I will say pady is equal to five pixels, okay. 193 194 00:11:00,460 --> 00:11:03,980 And if I run it again, as you see now, it is better now. 194 195 00:11:03,980 --> 00:11:07,410 Is here and our application is also, 195 196 00:11:07,410 --> 00:11:09,019 it looks very nice. 196 197 00:11:09,019 --> 00:11:11,840 For now, for this lesson, that's all. 197 198 00:11:11,840 --> 00:11:14,860 We learned how we can use grid layout manager, 198 199 00:11:14,860 --> 00:11:15,860 see you in the next.