0 1 00:00:04,320 --> 00:00:05,153 Hello again. 1 2 00:00:05,153 --> 00:00:05,986 In this lesson we are going 2 3 00:00:05,986 --> 00:00:07,690 to create our main window. 3 4 00:00:07,690 --> 00:00:10,350 And by the way, I already created our project. 4 5 00:00:10,350 --> 00:00:12,370 How we can create a project, it's very simple. 5 6 00:00:12,370 --> 00:00:15,610 File, new project and now you need to name your project. 6 7 00:00:15,610 --> 00:00:19,200 After, if you say create, you can create your project. 7 8 00:00:19,200 --> 00:00:21,090 And here what need to do, 8 9 00:00:21,090 --> 00:00:24,320 firstly, I will create also another folder, 9 10 00:00:24,320 --> 00:00:26,330 directory for my icons. 10 11 00:00:26,330 --> 00:00:29,390 I will provide these icons by the the way, don't worry. 11 12 00:00:29,390 --> 00:00:32,470 Icons and the folder name it will be icons. 12 13 00:00:32,470 --> 00:00:35,810 And here I will paste my icons here 13 14 00:00:35,810 --> 00:00:38,210 and I'II say okay. 14 15 00:00:38,210 --> 00:00:41,100 Now, as you see now all icons here. 15 16 00:00:41,100 --> 00:00:42,260 So after that what I need to do, 16 17 00:00:42,260 --> 00:00:44,310 I need to create a Python file here. 17 18 00:00:44,310 --> 00:00:45,683 And here I will say, 18 19 00:00:47,630 --> 00:00:49,280 address book and new 19 20 00:00:49,280 --> 00:00:52,900 and Python file and here I'll name it main. 20 21 00:00:52,900 --> 00:00:56,880 Okay, this will be our main Python file. 21 22 00:00:56,880 --> 00:00:59,533 And here what I need to do, of course like before, 22 23 00:01:01,320 --> 00:01:04,500 you need to say from Tkinter import asterisks. 23 24 00:01:04,500 --> 00:01:06,380 But here in this lesson we are going 24 25 00:01:06,380 --> 00:01:08,960 to create a class for our application. 25 26 00:01:08,960 --> 00:01:12,770 We are going to use classes for our applications 26 27 00:01:12,770 --> 00:01:16,970 because using classes is more professional way. 27 28 00:01:16,970 --> 00:01:18,920 That's why we need to create a class 28 29 00:01:18,920 --> 00:01:21,650 and of course for other Python files, 29 30 00:01:21,650 --> 00:01:23,670 also we'll create classes. 30 31 00:01:23,670 --> 00:01:24,810 Don't forget that. 31 32 00:01:24,810 --> 00:01:26,640 As I said this is more a professional way. 32 33 00:01:26,640 --> 00:01:29,380 If you want to create more professional applications, 33 34 00:01:29,380 --> 00:01:31,177 you need to use classes. 34 35 00:01:31,177 --> 00:01:33,690 First what I need to say, 35 36 00:01:33,690 --> 00:01:37,770 from Tkinter import asterisk. 36 37 00:01:37,770 --> 00:01:40,650 And after that, for now it's enough. 37 38 00:01:40,650 --> 00:01:43,030 I will not use ttk module by the way. 38 39 00:01:43,030 --> 00:01:44,730 So, here I will say class 39 40 00:01:45,930 --> 00:01:49,018 and for the class I will say application, 40 41 00:01:49,018 --> 00:01:53,633 my class name and here I will inherit my class from object. 41 42 00:01:54,720 --> 00:01:58,660 And after that, here what I need to do, I need to use def. 42 43 00:01:58,660 --> 00:02:01,020 init function, right 43 44 00:02:01,020 --> 00:02:03,560 and the first parameter will be self. 44 45 00:02:03,560 --> 00:02:05,920 And second one will be master. 45 46 00:02:05,920 --> 00:02:08,670 You can say root, or it doesn't matter whatever you want. 46 47 00:02:08,670 --> 00:02:10,050 I will use master 47 48 00:02:10,050 --> 00:02:13,550 and here I will say self dot master equals master. 48 49 00:02:17,470 --> 00:02:18,623 And after that what I need to do, 49 50 00:02:18,623 --> 00:02:21,470 I need to create my main window, right. 50 51 00:02:21,470 --> 00:02:23,290 Main function, sorry. 51 52 00:02:23,290 --> 00:02:26,250 And here I will say def main 52 53 00:02:27,850 --> 00:02:32,850 and here I will say root equals Tk and after that here. 53 54 00:02:35,443 --> 00:02:40,443 I'll say, app equals application. 54 55 00:02:42,280 --> 00:02:44,710 And here I will say root. 55 56 00:02:44,710 --> 00:02:48,610 So what this means, this means object 56 57 00:02:48,610 --> 00:02:51,610 and I will create a object from my class. 57 58 00:02:51,610 --> 00:02:53,320 Application is my class name. 58 59 00:02:53,320 --> 00:02:55,290 This is my object name. 59 60 00:02:55,290 --> 00:02:57,140 And after here what I need to do, 60 61 00:02:57,140 --> 00:02:59,603 I will say root dot title. 61 62 00:03:02,700 --> 00:03:07,593 For title let's say address book app. 62 63 00:03:08,770 --> 00:03:10,200 And also I want 63 64 00:03:10,200 --> 00:03:14,080 to use resizeable function, after root geometry. 64 65 00:03:14,080 --> 00:03:18,207 Root dot geometry, for geometry I will say, 65 66 00:03:18,207 --> 00:03:23,207 650 by 550 plus 350, 200. 66 67 00:03:27,110 --> 00:03:32,110 And also for my window I will say root dot resizable 67 68 00:03:32,490 --> 00:03:36,803 for x value false, for y value again false. 68 69 00:03:37,750 --> 00:03:40,090 And last thing I will say here, 69 70 00:03:40,090 --> 00:03:44,427 root dot main loop and after that here what I need to do, 70 71 00:03:44,427 --> 00:03:49,130 I need to say if underscore underscore name, 71 72 00:03:49,130 --> 00:03:53,483 underscore underscore again, equals, equals. 72 73 00:03:53,483 --> 00:03:55,800 Here we need to use quotes 73 74 00:03:55,800 --> 00:03:58,390 and again underscore underscore main, 74 75 00:03:58,390 --> 00:04:00,060 again underscore underscore 75 76 00:04:00,060 --> 00:04:03,183 and here I will say call my main function. 76 77 00:04:04,389 --> 00:04:05,222 And that's all. 77 78 00:04:06,109 --> 00:04:08,920 Now, what we need to do. 78 79 00:04:08,920 --> 00:04:12,940 We need to here create our frames first. 79 80 00:04:12,940 --> 00:04:17,940 Let me run our original application, it's here. 80 81 00:04:18,000 --> 00:04:19,830 So what we have here, 81 82 00:04:19,830 --> 00:04:22,690 we have here two different frames. 82 83 00:04:22,690 --> 00:04:24,060 The first one is top frame 83 84 00:04:24,060 --> 00:04:26,020 and other one is bottom frame. 84 85 00:04:26,020 --> 00:04:28,090 So I'll create these frames 85 86 00:04:28,090 --> 00:04:29,900 and here what I need to do, 86 87 00:04:29,900 --> 00:04:32,130 I will say, close this one 87 88 00:04:32,130 --> 00:04:36,460 and let's comment line, use a comment... 88 89 00:04:36,460 --> 00:04:38,003 Comment line frames. 89 90 00:04:39,130 --> 00:04:43,723 And after it here I'll say, self dot top equals frame. 90 91 00:04:44,860 --> 00:04:49,045 And here what I need to say, my top level window, 91 92 00:04:49,045 --> 00:04:51,639 my top level object, is master. 92 93 00:04:51,639 --> 00:04:54,531 It is master, so I need to in here, 93 94 00:04:54,531 --> 00:04:58,820 use the for master for parent or control P. 94 95 00:04:58,820 --> 00:05:00,910 As you see now it says master 95 96 00:05:00,910 --> 00:05:02,640 and I will say master, by the way, 96 97 00:05:02,640 --> 00:05:05,610 it can be root or something else, another name. 97 98 00:05:05,610 --> 00:05:10,460 This is master or you don't have to use master 98 99 00:05:10,460 --> 00:05:11,773 and here after master, 99 100 00:05:12,637 --> 00:05:16,277 I will say height equals 150. 100 101 00:05:18,070 --> 00:05:22,916 And , bg, background color will be white. 101 102 00:05:22,916 --> 00:05:25,070 This is for top frame 102 103 00:05:25,070 --> 00:05:28,160 and after that here, I'll say self dot top. 103 104 00:05:28,160 --> 00:05:31,630 By the way, for the frames we don't need to use self 104 105 00:05:31,630 --> 00:05:34,410 but okay, we can use of course, it's not problem. 105 106 00:05:34,410 --> 00:05:35,960 But we don't need to use self 106 107 00:05:35,960 --> 00:05:38,220 because why we don't need to use, here, 107 108 00:05:38,220 --> 00:05:41,890 we will not only use frames here in another function 108 109 00:05:41,890 --> 00:05:43,260 we are not going to use frames. 109 110 00:05:43,260 --> 00:05:45,850 That's why we don't use self 110 111 00:05:45,850 --> 00:05:50,710 but for this application, I will use, it doesn't matter. 111 112 00:05:50,710 --> 00:05:54,210 And this is after it, I need to use geometry manager 112 113 00:05:54,210 --> 00:05:56,500 and I will use pack geometry manager. 113 114 00:05:56,500 --> 00:05:58,683 I will only say fill x. 114 115 00:05:59,600 --> 00:06:02,860 I want to fill for x direction. 115 116 00:06:02,860 --> 00:06:05,020 And after that what I need to do, 116 117 00:06:05,020 --> 00:06:08,803 I need to create my other frame, self dot bottom. 117 118 00:06:09,920 --> 00:06:14,140 Bottom frame equals again, frame constructor method here 118 119 00:06:14,140 --> 00:06:18,337 and masters and now height will be 500. 119 120 00:06:21,620 --> 00:06:23,507 Because my size is 650, 120 121 00:06:24,820 --> 00:06:26,273 150 for top, 121 122 00:06:27,270 --> 00:06:29,393 for bottom I will use five. 122 123 00:06:31,296 --> 00:06:33,830 And more background color sorry not border 123 124 00:06:33,830 --> 00:06:38,830 Here I need to use HTML code for my color #ADFF2F. 124 125 00:06:41,610 --> 00:06:43,550 Okay, this is my color. 125 126 00:06:43,550 --> 00:06:45,630 And after that what I need to do, 126 127 00:06:45,630 --> 00:06:50,630 I need to use geometry manager self dot bottom dot pack 127 128 00:06:52,870 --> 00:06:57,090 and here I will say fill equals again x. 128 129 00:06:57,090 --> 00:06:59,760 And if I run my application can I see my frames? 129 130 00:06:59,760 --> 00:07:01,410 Of course, we can see our frames. 130 131 00:07:01,410 --> 00:07:02,243 Let's run it. 131 132 00:07:03,480 --> 00:07:05,800 As you see now our frames is here 132 133 00:07:05,800 --> 00:07:07,320 and this is the white one 133 134 00:07:07,320 --> 00:07:09,457 and that one the other one is yellow one. 134 135 00:07:10,600 --> 00:07:12,130 Let's shrink this one. 135 136 00:07:12,130 --> 00:07:13,640 And let's try it again actually. 136 137 00:07:13,640 --> 00:07:15,100 Here is better. 137 138 00:07:15,100 --> 00:07:18,380 And say stop and return. 138 139 00:07:18,380 --> 00:07:20,650 Run or I don't know what It was saying, 139 140 00:07:20,650 --> 00:07:22,710 anyway, so our application is here. 140 141 00:07:22,710 --> 00:07:24,090 Title is here. 141 142 00:07:24,090 --> 00:07:25,650 And so what we need to do now, 142 143 00:07:25,650 --> 00:07:29,670 we need to create our heading image and date. 143 144 00:07:29,670 --> 00:07:32,170 Actually for date we can create it later. 144 145 00:07:32,170 --> 00:07:34,440 Let me run that one. 145 146 00:07:34,440 --> 00:07:36,240 So we need to create this image 146 147 00:07:36,240 --> 00:07:39,400 and this title and for the date 147 148 00:07:39,400 --> 00:07:42,640 we can create date now or later, doesn't matter. 148 149 00:07:42,640 --> 00:07:47,630 And also we need to create our three buttons here. 149 150 00:07:47,630 --> 00:07:48,730 So how we can do that? 150 151 00:07:48,730 --> 00:07:52,350 Here I will say, now we are done with frames 151 152 00:07:52,350 --> 00:07:53,463 so I will say here, 152 153 00:07:54,320 --> 00:07:58,220 heading and image 153 154 00:07:59,470 --> 00:08:04,163 and also let's say and date. 154 155 00:08:05,710 --> 00:08:10,050 Here what I need to do, I need to use here at firstly, image. 155 156 00:08:10,050 --> 00:08:15,050 Self dot top image is equal to photo image library 156 157 00:08:18,078 --> 00:08:18,928 I need to use here 157 158 00:08:22,003 --> 00:08:23,200 file is equal to icons 158 159 00:08:26,230 --> 00:08:30,300 and here book dot png. 159 160 00:08:30,300 --> 00:08:34,110 So it's here by the way, icons are my folder name 160 161 00:08:34,110 --> 00:08:37,293 and my book dot png it's this file. 161 162 00:08:39,800 --> 00:08:42,230 So after that what I need to do, 162 163 00:08:42,230 --> 00:08:46,613 here I will say top image label. 163 164 00:08:51,900 --> 00:08:53,490 Let's use self, actually we don't need 164 165 00:08:53,490 --> 00:08:55,300 to use for statics, 165 166 00:08:56,188 --> 00:08:58,146 for statics you don't use self. 166 167 00:08:58,146 --> 00:09:00,520 Label, they are also static 167 168 00:09:00,520 --> 00:09:02,733 but I will use self again, no problem. 168 169 00:09:05,070 --> 00:09:09,990 Here, I will say label for my image 169 170 00:09:10,930 --> 00:09:14,610 and the first parameter will be self dot top. 170 171 00:09:14,610 --> 00:09:15,500 Why it's like that? 171 172 00:09:15,500 --> 00:09:20,500 Because I want to lay out this label at my top frame 172 173 00:09:20,980 --> 00:09:24,070 so its master will be top. 173 174 00:09:24,070 --> 00:09:27,260 For this label its master will be top. 174 175 00:09:27,260 --> 00:09:29,240 And after here, what I need to do, I need to say, 175 176 00:09:29,240 --> 00:09:34,240 image is equal to self dot top image, right, that one. 176 177 00:09:37,070 --> 00:09:42,070 For background, I will say white, again. 177 178 00:09:42,710 --> 00:09:44,820 And what I need to do after that I need 178 179 00:09:44,820 --> 00:09:49,480 to use geometry manager, top image, 179 180 00:09:49,480 --> 00:09:54,303 self dot top image label lbl dot place. 180 181 00:09:56,721 --> 00:09:59,720 For this application we are going to use place 181 182 00:09:59,720 --> 00:10:03,493 and also pack geometry manager. 182 183 00:10:06,160 --> 00:10:11,160 After place, I will say for place x is equal to 120 183 184 00:10:11,490 --> 00:10:14,323 and y is equal to 10. 184 185 00:10:15,470 --> 00:10:20,030 And if I run my application now I can use our images here. 185 186 00:10:20,030 --> 00:10:21,030 So what we need to do, we need 186 187 00:10:21,030 --> 00:10:24,170 to also create it here a text. 187 188 00:10:24,170 --> 00:10:26,093 For the text what I will say. 188 189 00:10:29,290 --> 00:10:34,030 Let's say here self dot heading, 189 190 00:10:35,930 --> 00:10:37,630 is equal to this again a label 190 191 00:10:37,630 --> 00:10:40,930 and here I'II say self dot top, 191 192 00:10:40,930 --> 00:10:42,273 I want to use this frame. 192 193 00:10:43,750 --> 00:10:44,950 And after that here 193 194 00:10:46,023 --> 00:10:50,680 for text my address book app. 194 195 00:10:54,620 --> 00:10:57,050 And next thing will be font. 195 196 00:10:57,050 --> 00:11:00,180 I want to use font property for my text 196 197 00:11:00,180 --> 00:11:04,533 and I'll say arial 15 and bold. 197 198 00:11:05,490 --> 00:11:07,160 For font colors, 198 199 00:11:07,160 --> 00:11:10,340 fg is going to be 199 200 00:11:13,782 --> 00:11:18,782 ffa500 and also for bg background, 200 201 00:11:21,340 --> 00:11:25,963 bg is equal to let's say white. 201 202 00:11:27,880 --> 00:11:30,130 You can get these guys, 202 203 00:11:30,130 --> 00:11:33,576 let's press enter button as you see now it's here, 203 204 00:11:33,576 --> 00:11:35,980 background color is white 204 205 00:11:35,980 --> 00:11:39,920 and after that self dot heading dot place 205 206 00:11:41,850 --> 00:11:46,850 x equals 260 and y is equal to 60. 206 207 00:11:47,250 --> 00:11:49,650 I think this also fine but I want to run it. 207 208 00:11:49,650 --> 00:11:50,500 Let's check it. 208 209 00:11:50,500 --> 00:11:52,680 As you see now our text is also here 209 210 00:11:53,810 --> 00:11:55,000 and what is next? 210 211 00:11:55,000 --> 00:11:57,340 Now, we need to create date, right? 211 212 00:11:57,340 --> 00:12:02,340 So, here I will say self dot date lbl 212 213 00:12:07,350 --> 00:12:10,503 date label is equal to label, 213 214 00:12:11,890 --> 00:12:16,713 for the label we need to say self dot top our master 214 215 00:12:18,417 --> 00:12:22,703 and text, let's say text is equal to today's 215 216 00:12:30,550 --> 00:12:31,950 Sorry. 216 217 00:12:31,950 --> 00:12:33,453 It's something like that. 217 218 00:12:35,290 --> 00:12:38,960 Today's date and here after that what I need to use, 218 219 00:12:38,960 --> 00:12:39,993 I need to use here, 219 220 00:12:41,760 --> 00:12:43,363 sorry, must be here. 220 221 00:12:44,750 --> 00:12:47,700 So if I want to use today's and here quote, 221 222 00:12:47,700 --> 00:12:50,130 what I need to do, I need to take these guys 222 223 00:12:50,130 --> 00:12:52,990 and use here double quotes because I want 223 224 00:12:52,990 --> 00:12:55,380 to use also single quote together. 224 225 00:12:55,380 --> 00:12:57,720 if you want to use single 225 226 00:12:57,720 --> 00:13:00,910 and double quotes together, you need to start with, 226 227 00:13:00,910 --> 00:13:03,570 for example, of course you can start also single quote 227 228 00:13:03,570 --> 00:13:05,910 but if you start with double quote it's better. 228 229 00:13:05,910 --> 00:13:09,910 Double quote and for separator I will use single quote. 229 230 00:13:09,910 --> 00:13:11,550 And here, what I need to do, 230 231 00:13:11,550 --> 00:13:16,113 I need to create here a variable, plus str date. 231 232 00:13:18,960 --> 00:13:20,090 What is this str date? 232 233 00:13:20,090 --> 00:13:23,010 What I need to do, here I need to come 233 234 00:13:23,010 --> 00:13:27,657 and say import date time. 234 235 00:13:29,650 --> 00:13:32,883 For the date, I will come here and create my date. 235 236 00:13:34,491 --> 00:13:37,393 I will say date time dot date time dot now 236 237 00:13:41,275 --> 00:13:44,275 and after now I will say here, date. 237 238 00:13:46,183 --> 00:13:47,657 And now what I need to say date is here already it's fine 238 239 00:13:50,440 --> 00:13:55,110 and after that also I want use here font property. 239 240 00:13:55,110 --> 00:13:59,380 Font is equal to something like that. 240 241 00:14:02,610 --> 00:14:07,350 Font is equal to, again let's use arial 241 242 00:14:08,727 --> 00:14:13,530 and for size 12 and let's say again bold. 242 243 00:14:13,530 --> 00:14:17,660 And also, let's use bg and enter, 243 244 00:14:17,660 --> 00:14:22,660 bg is equal to white and for fg, 244 245 00:14:26,080 --> 00:14:27,293 I will say for fg, 245 246 00:14:36,070 --> 00:14:38,683 ffa500 again. 246 247 00:14:41,410 --> 00:14:42,243 That one. 247 248 00:14:42,243 --> 00:14:43,440 I think it's fine. 248 249 00:14:43,440 --> 00:14:44,900 Now, what we need to do, we need 249 250 00:14:44,900 --> 00:14:46,420 to use a geometry manger, of course. 250 251 00:14:46,420 --> 00:14:50,383 Self dot date lbl dot place. 251 252 00:14:51,550 --> 00:14:55,913 For place I will say for x value is equal to 450 252 253 00:14:57,330 --> 00:14:59,450 and y value will be 5. 253 254 00:15:01,538 --> 00:15:03,043 And now let's run it again. 254 255 00:15:04,010 --> 00:15:05,463 As you see now it's here. 255 256 00:15:06,338 --> 00:15:09,193 For x 450, for y it is 5 pixels. 256 257 00:15:10,311 --> 00:15:13,930 And you know how place geometry manager works. 257 258 00:15:13,930 --> 00:15:15,581 And after that what we need to do, 258 259 00:15:15,581 --> 00:15:17,250 we need to create our own buttons, right? 259 260 00:15:17,250 --> 00:15:20,470 But we can do it next lesson. 260 261 00:15:20,470 --> 00:15:22,930 Our lesson is already it's very long. 261 262 00:15:22,930 --> 00:15:27,930 And in next lecture we are going to create our buttons 262 263 00:15:29,480 --> 00:15:33,270 and after that we will finish our design for main window. 263 264 00:15:33,270 --> 00:15:34,160 For now that's all. 264 265 00:15:34,160 --> 00:15:35,160 See you in the next.