0 1 00:00:04,890 --> 00:00:06,134 Hello again, in previous lecture 1 2 00:00:06,134 --> 00:00:08,860 we create our database and also our second window 2 3 00:00:08,860 --> 00:00:10,890 it is My People window, right? 3 4 00:00:10,890 --> 00:00:13,330 Let me run our original application 4 5 00:00:13,330 --> 00:00:15,859 and in this lecture what we are going to do 5 6 00:00:15,859 --> 00:00:17,900 and this is My People, right? 6 7 00:00:17,900 --> 00:00:19,020 What we are going to do, 7 8 00:00:19,020 --> 00:00:23,650 we are going to create this design first. 8 9 00:00:23,650 --> 00:00:26,870 And this is a list box by the way, 9 10 00:00:26,870 --> 00:00:30,150 and here we have four buttons, right. 10 11 00:00:30,150 --> 00:00:32,840 So, we are going to do that in this lecture. 11 12 00:00:32,840 --> 00:00:35,810 How we can do that, to do that here I will come here. 12 13 00:00:37,684 --> 00:00:42,684 Actually it is very similar for top window, top frame, 13 14 00:00:43,920 --> 00:00:47,573 and also bottom frame, so I want to copy these guys. 14 15 00:00:49,480 --> 00:00:52,490 Copy these guys and after that 15 16 00:00:54,981 --> 00:00:56,990 here I think that's all 16 17 00:00:56,990 --> 00:00:59,590 because heading, image and date 17 18 00:00:59,590 --> 00:01:02,370 and the frames, they're similar 18 19 00:01:02,370 --> 00:01:04,643 so I will copy and paste it here. 19 20 00:01:07,920 --> 00:01:11,920 Now if I run my application, let's run it from my main 20 21 00:01:11,920 --> 00:01:16,330 and the main My People and master is not defined in set 21 22 00:01:16,330 --> 00:01:19,770 because here we need to change our master, right? 22 23 00:01:22,267 --> 00:01:25,100 It must be here, self. 23 24 00:01:25,100 --> 00:01:27,890 Self it means this is my window. 24 25 00:01:27,890 --> 00:01:29,285 Self. 25 26 00:01:29,285 --> 00:01:34,285 And after that this is self.top is fine 26 27 00:01:35,142 --> 00:01:39,610 and the date I don't want to use date here. 27 28 00:01:39,610 --> 00:01:43,920 Let's delete date_lbl and place this here. 28 29 00:01:43,920 --> 00:01:45,090 I think it's now fine. 29 30 00:01:45,090 --> 00:01:48,007 If I run my application now again. 30 31 00:01:49,850 --> 00:01:53,913 So My People as you see now is okay, so what I need to do now 31 32 00:01:53,913 --> 00:01:58,630 I need to create, like let's use that one 32 33 00:02:02,770 --> 00:02:05,503 this is original application let me run it 33 34 00:02:09,984 --> 00:02:12,860 So My People here we have the colour 34 35 00:02:12,860 --> 00:02:14,930 it's a little bit different, right? 35 36 00:02:14,930 --> 00:02:17,360 So what I need to do, I need to change color 36 37 00:02:17,360 --> 00:02:18,870 and also this is taller, right? 37 38 00:02:18,870 --> 00:02:20,940 You see this window it's taller, 38 39 00:02:20,940 --> 00:02:23,330 so let's make these changes first. 39 40 00:02:23,330 --> 00:02:28,330 And here our size is okay, fine. 40 41 00:02:29,200 --> 00:02:31,813 And the for the frame, I will stay here. 41 42 00:02:35,780 --> 00:02:40,780 500 is fine, actually is okay, so 650 and the 650 42 43 00:02:44,070 --> 00:02:47,370 okay is fine, it looks fine actually, let's go to 43 44 00:02:47,370 --> 00:02:48,760 create our other widgets. 44 45 00:02:48,760 --> 00:02:53,760 Here what I will do by the way also our background 45 46 00:02:54,650 --> 00:02:56,520 color it was different right? 46 47 00:02:56,520 --> 00:02:59,012 So I think it's here 47 48 00:02:59,012 --> 00:02:59,912 it will be 003f8a. 48 49 00:03:05,282 --> 00:03:08,850 And also for other one, let me check it. 49 50 00:03:08,850 --> 00:03:11,032 The background color will be 50 51 00:03:11,032 --> 00:03:14,303 here fcc324. 51 52 00:03:17,290 --> 00:03:20,583 And all other things is same. 52 53 00:03:21,920 --> 00:03:23,643 And now let me run it again now. 53 54 00:03:26,130 --> 00:03:29,040 My People as you see now, yes is different 54 55 00:03:29,040 --> 00:03:30,459 and is taller now also, 55 56 00:03:30,459 --> 00:03:34,840 because our geometry is different. 56 57 00:03:34,840 --> 00:03:39,720 For here this geometry is different. 57 58 00:03:39,720 --> 00:03:44,310 For that guy, 550, 58 59 00:03:44,310 --> 00:03:47,249 for y value and this one is 650. 59 60 00:03:47,249 --> 00:03:48,428 Okay here we go. 60 61 00:03:48,428 --> 00:03:52,390 So what we need to do, we need to come here 61 62 00:03:52,390 --> 00:03:55,396 and create our list box. 62 63 00:03:55,396 --> 00:03:56,979 First I'll say here 63 64 00:04:02,467 --> 00:04:05,960 listbox and after that here 64 65 00:04:05,960 --> 00:04:06,820 what I will say I will say 65 66 00:04:06,820 --> 00:04:08,950 self.listBox=listbox 66 67 00:04:12,782 --> 00:04:14,170 listbok constructor method 67 68 00:04:14,170 --> 00:04:16,670 and our first parameter will be (self.bottom) frame. 68 69 00:04:20,054 --> 00:04:20,897 And here even we can change it's name is bottomFrame. 69 70 00:04:25,284 --> 00:04:29,680 Let's see bottomFrame is better because it's like bottom 70 71 00:04:29,680 --> 00:04:31,500 you don't know if it's frame or not. 71 72 00:04:31,500 --> 00:04:36,053 Frame okay and here also I will say bottomFrame. 72 73 00:04:37,785 --> 00:04:40,540 Okay and after here I will use width 73 74 00:04:44,461 --> 00:04:48,620 width=60 74 75 00:04:48,620 --> 00:04:52,897 and height will be 31. 75 76 00:04:52,897 --> 00:04:57,897 And after here I will use grid geometry manager for this page. 76 77 00:04:59,327 --> 00:05:04,327 For the widget self.listBox.grid 77 78 00:05:05,968 --> 00:05:09,600 and row is going to be 0 78 79 00:05:10,885 --> 00:05:13,183 and the column will be again 0. 79 80 00:05:15,070 --> 00:05:20,070 Row 0 and column is 0. 80 81 00:05:20,540 --> 00:05:25,540 Also I want to use padx but here I will 81 82 00:05:26,820 --> 00:05:29,567 only use pad for left side. 82 83 00:05:29,567 --> 00:05:32,170 As you know we can use pad for both sides. 83 84 00:05:32,170 --> 00:05:35,047 If you use only one parameter here, for example 40, 84 85 00:05:35,047 --> 00:05:38,500 it means you will add pad for left side 85 86 00:05:38,500 --> 00:05:40,883 and also for right side. 86 87 00:05:42,219 --> 00:05:46,153 To do that only for left side I will say 40 87 88 00:05:47,370 --> 00:05:49,837 and for right side 0. 88 89 00:05:49,837 --> 00:05:54,590 After that here, what we need to do 89 90 00:05:54,590 --> 00:05:56,583 let's actually run our application and now 90 91 00:05:56,583 --> 00:06:00,580 then we need to create a scrollbar for our widget, right? 91 92 00:06:00,580 --> 00:06:02,930 Something wrong here, no not wrong, we need to 92 93 00:06:02,930 --> 00:06:04,963 come here main and run it. 93 94 00:06:07,070 --> 00:06:09,810 My People as you see now it's here, okay fine. 94 95 00:06:09,810 --> 00:06:13,370 So what I need to do, I am to create here a scrollbar 95 96 00:06:13,370 --> 00:06:15,412 and also four different buttons, right? 96 97 00:06:15,412 --> 00:06:19,940 For My People so here 97 98 00:06:19,940 --> 00:06:22,405 what I will say, I will create 98 99 00:06:22,405 --> 00:06:25,387 firstly my scrollbar. 99 100 00:06:26,604 --> 00:06:31,604 And let's create it here, somewhere here before this box 100 101 00:06:33,098 --> 00:06:37,139 I will say #ScrollBar. 101 102 00:06:37,139 --> 00:06:41,921 And for scrollbar self.sb=Scrollbar 102 103 00:06:41,921 --> 00:06:45,005 scrollbar constructor method and here self. 103 104 00:06:45,005 --> 00:06:46,422 again bottomFrame 104 105 00:06:47,986 --> 00:06:50,701 and I need to use orient, right, 105 106 00:06:50,701 --> 00:06:52,701 orient will be vertical. 106 107 00:06:53,666 --> 00:06:56,249 And after that here what I need to do, 107 108 00:06:57,957 --> 00:07:00,214 I need to come and here say 108 109 00:07:00,214 --> 00:07:05,214 self.sb.config 109 110 00:07:06,138 --> 00:07:10,954 and here I will say command is equal to 110 111 00:07:10,954 --> 00:07:15,954 self.listBox.yview, right? 111 112 00:07:16,726 --> 00:07:20,813 And we need to delete this parentheses and after here 112 113 00:07:20,813 --> 00:07:23,274 what I need to do I need to say 113 114 00:07:23,274 --> 00:07:28,107 self.listBox.config 114 115 00:07:32,921 --> 00:07:37,921 yscrollcommand 115 116 00:07:38,041 --> 00:07:43,041 is equal to self.sb.set 116 117 00:07:45,259 --> 00:07:47,839 again we don't need the parentheses here and 117 118 00:07:47,839 --> 00:07:51,285 after that here I use geometry manager for my scrollbar 118 119 00:07:51,285 --> 00:07:53,990 self.sb.grid 119 120 00:07:55,950 --> 00:08:00,010 and for grid row must be 0 120 121 00:08:02,213 --> 00:08:03,457 and column must be 1 121 122 00:08:04,660 --> 00:08:08,750 because for this box row is 0 column 0. 122 123 00:08:08,750 --> 00:08:12,730 So for column I need to set it 1, but something else 123 124 00:08:12,730 --> 00:08:17,330 we need to use here, let me run actually and after that 124 125 00:08:17,330 --> 00:08:21,126 we can see where is it, sorry, from main, right? 125 126 00:08:21,126 --> 00:08:26,126 Main, run, My People, as you see scrollbar is here. 126 127 00:08:27,526 --> 00:08:30,280 So I need to make it taller, right? 127 128 00:08:30,280 --> 00:08:33,330 Is very small, this here so how can I do that? 128 129 00:08:33,330 --> 00:08:34,956 How can I solve this problem? 129 130 00:08:34,956 --> 00:08:39,956 I need to use for that sticky parameters, North and South. 130 131 00:08:41,220 --> 00:08:42,680 So how can I do that? 131 132 00:08:42,680 --> 00:08:45,030 I will come here and say 132 133 00:08:46,740 --> 00:08:50,510 My People and here after grid, 133 134 00:08:50,510 --> 00:08:51,680 I will say sticky 134 135 00:08:54,160 --> 00:08:58,203 is equal to N+S. 135 136 00:08:59,560 --> 00:09:03,453 This is fine now, and if I run it again, let me run. 136 137 00:09:05,380 --> 00:09:08,022 My People as you see now our scrollbar is here on the 137 138 00:09:08,022 --> 00:09:12,280 right side and it's not small now. 138 139 00:09:12,280 --> 00:09:13,720 So what is next? 139 140 00:09:13,720 --> 00:09:16,330 We need to create our buttons, right? 140 141 00:09:16,330 --> 00:09:19,260 And for the buttons what I will do I will come here 141 142 00:09:19,260 --> 00:09:20,093 and say 142 143 00:09:23,682 --> 00:09:26,910 #Buttons, and after that here 143 144 00:09:29,540 --> 00:09:30,780 for the first button 144 145 00:09:30,780 --> 00:09:34,590 I will say btnadd=, 145 146 00:09:34,590 --> 00:09:36,400 by the way I will not use again 146 147 00:09:37,980 --> 00:09:41,313 self parameter because if you're wigdet is static 147 148 00:09:41,313 --> 00:09:44,860 you don't need to use self parameter okay they are not 148 149 00:09:44,860 --> 00:09:48,585 static if you want to use this widget in another function 149 150 00:09:48,585 --> 00:09:52,766 or not class for, class is something different you need 150 151 00:09:52,766 --> 00:09:56,430 to do, you don't need to use self parameter, okay? 151 152 00:09:56,430 --> 00:09:58,798 So that's why here I will not use self parameter because 152 153 00:09:58,798 --> 00:10:00,450 buttons are static. 153 154 00:10:00,450 --> 00:10:04,670 For this application here and button is equal to 154 155 00:10:04,670 --> 00:10:08,313 I will say (self.buttonFrame), right? 155 156 00:10:10,270 --> 00:10:11,140 And after that 156 157 00:10:11,140 --> 00:10:15,693 text will be Add, 157 158 00:10:16,780 --> 00:10:19,393 and I will use here width for my button 158 159 00:10:20,283 --> 00:10:25,283 width=12 and for the font 159 160 00:10:26,035 --> 00:10:29,000 I will say font is 160 161 00:10:29,000 --> 00:10:34,000 I will use something else Sans and 12 and bold. 161 162 00:10:36,070 --> 00:10:39,900 After that what I need to do I need to use also command 162 163 00:10:39,900 --> 00:10:41,400 but not now. 163 164 00:10:41,400 --> 00:10:43,670 Now let's add our button first. 164 165 00:10:43,670 --> 00:10:46,890 I will say btnadd.grid 165 166 00:10:48,800 --> 00:10:53,800 and for grid row is equal to 0 again 166 167 00:10:54,090 --> 00:10:58,730 but column must be here 2. 167 168 00:11:01,222 --> 00:11:04,490 And also I will add sticky parameter 168 169 00:11:04,490 --> 00:11:08,400 and also add pad but before that run it 169 170 00:11:10,220 --> 00:11:15,220 and here run My People 170 171 00:11:15,340 --> 00:11:17,230 as you see now it's here, right? 171 172 00:11:17,230 --> 00:11:20,237 But I want to locate it 172 173 00:11:20,237 --> 00:11:22,150 somewhere here, right? 173 174 00:11:22,150 --> 00:11:23,670 So how can I do that? 174 175 00:11:23,670 --> 00:11:27,310 To do that I need to stick a North here and also 175 176 00:11:27,310 --> 00:11:31,600 I want to add some pad from left and also right. 176 177 00:11:31,600 --> 00:11:33,200 Also for top, too. 177 178 00:11:33,200 --> 00:11:36,883 So for x value and for y value I will add pad. 178 179 00:11:38,152 --> 00:11:40,810 To do that I will come to here and say 179 180 00:11:40,810 --> 00:11:44,153 here My People, right, 180 181 00:11:45,750 --> 00:11:47,990 btn grid and after that here 181 182 00:11:47,990 --> 00:11:52,990 I will say sticky is equal to 182 183 00:11:53,740 --> 00:11:58,740 N right, and for pad x is equal to 10 183 184 00:11:59,050 --> 00:12:03,930 that means we will add 10 pixels padding for left and right 184 185 00:12:03,930 --> 00:12:07,300 side also let's add for y value. 185 186 00:12:07,300 --> 00:12:11,321 For y value I will say pad y=10. 186 187 00:12:11,321 --> 00:12:15,677 Now let's check it again, run. 187 188 00:12:15,677 --> 00:12:19,770 And if I say My People, as you see now add button is here 188 189 00:12:19,770 --> 00:12:23,990 and you see these ten pixels we have also pad for y value. 189 190 00:12:23,990 --> 00:12:27,010 Okay great, so what is next. 190 191 00:12:27,010 --> 00:12:29,693 What I need to do I need to create other buttons right here. 191 192 00:12:29,693 --> 00:12:32,816 For other buttons I will copy this guy, 192 193 00:12:32,816 --> 00:12:35,810 because they will be very similar. 193 194 00:12:35,810 --> 00:12:39,180 And I will come here 194 195 00:12:40,040 --> 00:12:42,137 and I will say btnupdate, 195 196 00:12:43,866 --> 00:12:47,037 okay update for update here I will copy this one 196 197 00:12:49,933 --> 00:12:50,840 and paste it here. 197 198 00:12:50,840 --> 00:12:54,412 For btnupdate what I need to do and it will be very similar 198 199 00:12:54,412 --> 00:12:56,840 everything actually. 199 200 00:12:56,840 --> 00:12:59,540 So text will be here 200 201 00:13:00,980 --> 00:13:04,940 Update, right, width is same 201 202 00:13:04,940 --> 00:13:07,251 and here grid will be different. 202 203 00:13:07,251 --> 00:13:10,297 For the grid what I will say, row and column will 203 204 00:13:10,297 --> 00:13:14,860 be the same, actually but sticky is again North, 204 205 00:13:14,860 --> 00:13:19,559 but for pad y I will say 50. 205 206 00:13:19,559 --> 00:13:20,460 Why's it like that? 206 207 00:13:20,460 --> 00:13:24,393 Now if I run my application, what I am doing here, 207 208 00:13:27,810 --> 00:13:31,800 my update button is here but maybe you might think 208 209 00:13:31,800 --> 00:13:34,740 why it is like row one; it is not row one. 209 210 00:13:34,740 --> 00:13:36,453 I used it here. 210 211 00:13:37,890 --> 00:13:42,220 If I don't use pad y for update button 211 212 00:13:42,220 --> 00:13:47,220 my buttons will be overlapped, right? 212 213 00:13:48,400 --> 00:13:51,223 But what I am doing here, they are not. 213 214 00:13:53,150 --> 00:13:55,930 This is row one, sorry, row zero. 214 215 00:13:55,930 --> 00:13:58,040 For this guy it's also row zero but 215 216 00:13:58,040 --> 00:14:00,100 let me show you something else. 216 217 00:14:00,100 --> 00:14:05,100 Here, if I say pad x, if I don't use pad y. 217 218 00:14:06,490 --> 00:14:08,593 Now if I run my application again, 218 219 00:14:10,740 --> 00:14:14,440 because this designing a little bit problem. 219 220 00:14:14,440 --> 00:14:17,470 You see now it's here, and the other one is here. 220 221 00:14:17,470 --> 00:14:22,180 This guy, the first one, that button has ten pixels padding 221 222 00:14:22,180 --> 00:14:25,777 right, but for this one I will add 50. 222 223 00:14:25,777 --> 00:14:28,250 It will come somewhere here. 223 224 00:14:28,250 --> 00:14:31,640 And row and column is same for these guys. 224 225 00:14:31,640 --> 00:14:36,180 So after that I hope you understand that what I mean here. 225 226 00:14:36,180 --> 00:14:39,330 I will come here and pad y I will say, okay. 226 227 00:14:39,330 --> 00:14:44,330 So what is next here, copy these guys for next button, 227 228 00:14:44,630 --> 00:14:47,957 paste it here and the next one will be 228 229 00:14:47,957 --> 00:14:51,000 btnupdate and 229 230 00:14:51,000 --> 00:14:54,527 after one btn display, and other one I think 230 231 00:14:54,527 --> 00:14:57,480 btn delete button, yes. 231 232 00:14:57,480 --> 00:15:00,600 Display I will say here, display 232 233 00:15:01,680 --> 00:15:05,200 copy this guy, that one too. 233 234 00:15:05,200 --> 00:15:08,495 But what we need to do here for the grid, I will say only 234 235 00:15:08,495 --> 00:15:11,027 90, and of course 235 236 00:15:11,027 --> 00:15:14,163 btn text will be Display. 236 237 00:15:17,270 --> 00:15:20,430 This also fine so for the last one 237 238 00:15:21,760 --> 00:15:23,900 I will copy this guy 238 239 00:15:23,900 --> 00:15:28,410 and paste it here, and btndelete this button 239 240 00:15:28,410 --> 00:15:32,410 delete and copy and paste it 240 241 00:15:32,410 --> 00:15:36,293 here and here, let's say delete, 241 242 00:15:39,030 --> 00:15:41,880 and for pad y the value 242 243 00:15:41,880 --> 00:15:46,023 will be 40 pixels more, that means 130. 243 244 00:15:47,258 --> 00:15:50,200 It's now we're finished actually our design. 244 245 00:15:50,200 --> 00:15:53,356 Let's check it and after let's finish this lesson. 245 246 00:15:53,356 --> 00:15:57,396 My people as you see now everything is here so 246 247 00:15:57,396 --> 00:16:01,035 how we can display our people, of course we didn't 247 248 00:16:01,035 --> 00:16:05,480 insert anything into our database, 248 249 00:16:05,480 --> 00:16:07,680 that's why our database is empty. 249 250 00:16:07,680 --> 00:16:10,910 So we will get all values from database and 250 251 00:16:10,910 --> 00:16:14,650 display them here but of course it will be in next lessons. 251 252 00:16:14,650 --> 00:16:16,650 For now that's all, see you in the next.