0 1 00:00:04,520 --> 00:00:05,353 Hello again. 1 2 00:00:05,353 --> 00:00:07,740 In this lesson we are going to create our buttons. 2 3 00:00:07,740 --> 00:00:12,153 And let me run our original application first. 3 4 00:00:13,490 --> 00:00:16,020 This is our original application and now what we need to do 4 5 00:00:16,020 --> 00:00:18,710 we created here, top frame 5 6 00:00:18,710 --> 00:00:22,280 Now we are going to create our bottom frame 6 7 00:00:22,280 --> 00:00:25,780 and sorry, we created already, actually, frame for bottom. 7 8 00:00:25,780 --> 00:00:29,470 Now we're are only going to create these three buttons 8 9 00:00:29,470 --> 00:00:33,030 and before that I want to tell you something. 9 10 00:00:33,030 --> 00:00:35,090 I notice something here 10 11 00:00:35,090 --> 00:00:39,301 for my frames, I set top.pack(fill=X) 11 12 00:00:39,301 --> 00:00:43,195 and for buttons also I said (fill=X) 12 13 00:00:43,195 --> 00:00:47,087 But I didn't use here, site=top left or right 13 14 00:00:48,600 --> 00:00:51,140 I didn't use any parameter for site. 14 15 00:00:51,140 --> 00:00:51,973 Why is like that? 15 16 00:00:51,973 --> 00:00:55,930 Because by default, this site is equal to top. 16 17 00:00:55,930 --> 00:00:59,228 And also, as you know, now we've located our, 17 18 00:00:59,228 --> 00:01:03,390 we placed our top frame at top right 18 19 00:01:03,390 --> 00:01:07,980 and the other one is under our top frame. 19 20 00:01:07,980 --> 00:01:08,813 Why is like that? 20 21 00:01:08,813 --> 00:01:12,170 Let me draw something here for example, 21 22 00:01:12,170 --> 00:01:13,483 This is our window. 22 23 00:01:14,468 --> 00:01:15,510 This is our window. 23 24 00:01:15,510 --> 00:01:19,680 If you use pack geometry manager and if you don't... 24 25 00:01:20,920 --> 00:01:24,260 If you don't use any parameter for pack 25 26 00:01:24,260 --> 00:01:26,120 that means you are going to use 26 27 00:01:26,120 --> 00:01:28,820 default value and its size is equal to top. 27 28 00:01:28,820 --> 00:01:32,950 And for other one also, if you use top, 28 29 00:01:32,950 --> 00:01:35,640 or if you don't pass any parameters, 29 30 00:01:35,640 --> 00:01:39,220 you will place your other widget under the first one. 30 31 00:01:39,220 --> 00:01:42,790 If you create another one like that, you will locate it 31 32 00:01:42,790 --> 00:01:47,790 under the third one, it will be located under second frame. 32 33 00:01:48,100 --> 00:01:49,220 Okay, it's like that. 33 34 00:01:49,220 --> 00:01:52,380 So that's why I didn't say here side is equal to top 34 35 00:01:52,380 --> 00:01:55,890 because by default it is top. It's already top. 35 36 00:01:55,890 --> 00:01:59,350 And now let's get started for our buttons. 36 37 00:01:59,350 --> 00:02:03,222 For buttons, what we need to do here I will come and say 37 38 00:02:03,222 --> 00:02:07,597 for the first button, let's use here for comment line 38 39 00:02:07,597 --> 00:02:10,160 #First Button 39 40 00:02:10,160 --> 00:02:13,060 by the way I will use icons for my buttons. 40 41 00:02:13,060 --> 00:02:16,900 Okay, that's why what I need to do, firstly I will create my 41 42 00:02:16,900 --> 00:02:18,940 button icon, and I will say 42 43 00:02:18,940 --> 00:02:20,353 self. 43 44 00:02:20,353 --> 00:02:24,140 btn1Icon 44 45 00:02:24,140 --> 00:02:26,261 Is equal to 45 46 00:02:26,261 --> 00:02:28,228 PhotoImage 46 47 00:02:28,228 --> 00:02:29,330 library 47 48 00:02:29,330 --> 00:02:32,820 and here I will say (file) is equal to 48 49 00:02:34,410 --> 00:02:37,060 icons/ 49 50 00:02:37,060 --> 00:02:41,980 and for first one, man.png 50 51 00:02:41,980 --> 00:02:45,170 We are going to use that one. Our folder name is icons 51 52 00:02:45,170 --> 00:02:49,970 and the man, the png is here. We are going to use this one. 52 53 00:02:49,970 --> 00:02:51,503 And also second one, 53 54 00:02:53,170 --> 00:02:54,530 what we need to do now, 54 55 00:02:54,530 --> 00:02:55,970 we need to create our button. 55 56 00:02:55,970 --> 00:02:57,440 To create our button what we need to do 56 57 00:02:57,440 --> 00:02:58,580 I need to say self. 57 58 00:03:00,600 --> 00:03:01,520 Person button 58 59 00:03:02,389 --> 00:03:03,550 personBtn 59 60 00:03:04,700 --> 00:03:08,800 is equal to, I will use button constructor method here 60 61 00:03:08,800 --> 00:03:10,074 and first parameter will be the 61 62 00:03:10,074 --> 00:03:15,074 (self.bottom) my frame name is here. 62 63 00:03:18,070 --> 00:03:20,020 Our frame is top and bottom. 63 64 00:03:20,020 --> 00:03:23,430 And second one will be my text property. 64 65 00:03:23,430 --> 00:03:25,280 For text, I will say text='My People' 65 66 00:03:31,160 --> 00:03:33,623 and after that, what I want to do 66 67 00:03:33,623 --> 00:03:36,238 I want to also use font for my button. 67 68 00:03:36,238 --> 00:03:39,817 Font='arial 12 bold'. 68 69 00:03:43,660 --> 00:03:46,780 And also what we can use now, 69 70 00:03:46,780 --> 00:03:49,870 we will use command but not now, it's later. 70 71 00:03:49,870 --> 00:03:54,410 And let me show you how we can add image for our button. 71 72 00:03:54,410 --> 00:03:57,780 We can use here image parameter, 72 73 00:03:57,780 --> 00:04:01,980 and also the second way is, you can come here and say 73 74 00:04:04,020 --> 00:04:08,140 self.personBtn 74 75 00:04:08,996 --> 00:04:09,829 .config 75 76 00:04:11,650 --> 00:04:14,270 and here we can say for the config 76 77 00:04:14,270 --> 00:04:15,687 image=self. 77 78 00:04:19,053 --> 00:04:21,636 btn1Icon 78 79 00:04:22,480 --> 00:04:24,140 and for compound I will say 79 80 00:04:26,220 --> 00:04:29,740 compound=LEFT side 80 81 00:04:31,038 --> 00:04:36,038 for our image, compound will be left. 81 82 00:04:36,370 --> 00:04:37,950 And after that what I need to do 82 83 00:04:37,950 --> 00:04:39,390 I need to use geometry manager 83 84 00:04:39,390 --> 00:04:44,160 self.personBtn.place I will use again 84 85 00:04:44,160 --> 00:04:48,340 for place I will say x=250 85 86 00:04:48,340 --> 00:04:51,363 and y will be 10. 86 87 00:04:52,650 --> 00:04:55,780 And also I will explain why it's 10. 87 88 00:04:55,780 --> 00:04:56,673 Let me run it. 88 89 00:04:58,250 --> 00:05:01,080 Okay, it's here, so why it's 10? 89 90 00:05:01,080 --> 00:05:04,663 Because this we are, our master is our frame 90 91 00:05:07,490 --> 00:05:11,591 and it is bottom frame, so that means if I say 250 91 92 00:05:11,591 --> 00:05:15,060 it's that one, and 10 is that one. 92 93 00:05:15,060 --> 00:05:20,060 Now we are not measuring from the top. 93 94 00:05:21,280 --> 00:05:23,800 We are talking about here, our frame. 94 95 00:05:23,800 --> 00:05:26,870 So this y value, that's why it is 10. 95 96 00:05:26,870 --> 00:05:31,720 Because our button frame is here, starts here 96 97 00:05:31,720 --> 00:05:34,810 that's why if I say 10 97 98 00:05:34,810 --> 00:05:37,310 we will locate our button somewhere here. 98 99 00:05:37,310 --> 00:05:42,013 10 is this distance, is 10 pixels. 99 100 00:05:43,650 --> 00:05:45,200 After that what I need to do 100 101 00:05:46,271 --> 00:05:49,280 we need to create our second button. 101 102 00:05:49,280 --> 00:05:52,193 I will not use command now, we will do it later. 102 103 00:05:53,217 --> 00:05:57,717 Here, what I will say, I'll come here and say 103 104 00:05:57,717 --> 00:06:01,070 #Second Button 104 105 00:06:02,470 --> 00:06:05,340 for second button we can copy, actually 105 106 00:06:05,340 --> 00:06:09,980 this guy's, but let's copy them and 106 107 00:06:09,980 --> 00:06:11,280 this here 107 108 00:06:11,280 --> 00:06:13,800 all of them, even, we can copy. 108 109 00:06:13,800 --> 00:06:15,023 And paste it here. 109 110 00:06:17,200 --> 00:06:18,990 On here what I will say btn2Icon 110 111 00:06:20,730 --> 00:06:23,580 and for 2 I will say 111 112 00:06:23,580 --> 00:06:26,527 add.png, it's here by the way. 112 113 00:06:28,490 --> 00:06:31,440 And for text what I will say, Add People 113 114 00:06:32,660 --> 00:06:33,540 it's here 114 115 00:06:36,380 --> 00:06:37,213 Add People 115 116 00:06:37,213 --> 00:06:40,457 and for the image btn2Icon it will be 116 117 00:06:42,900 --> 00:06:45,330 and for place, location, 117 118 00:06:45,330 --> 00:06:50,303 here x is same but for y value I will say 70. 118 119 00:06:51,630 --> 00:06:55,460 And let's run our application and it's good 119 120 00:06:55,460 --> 00:06:59,000 but what we need to do now, as you see now, that one is 120 121 00:06:59,000 --> 00:07:00,840 smaller than second one. 121 122 00:07:00,840 --> 00:07:04,760 And also I want to use gap, padding, between my image 122 123 00:07:04,760 --> 00:07:08,820 and the text, but there is no function to add pad for 123 124 00:07:08,820 --> 00:07:11,490 between our image and also text. 124 125 00:07:11,490 --> 00:07:14,850 To that, what we can do, we can use here for example 125 126 00:07:14,850 --> 00:07:17,123 My People, we can just leave gaps. 126 127 00:07:18,080 --> 00:07:22,620 It is like text gap, here it is, and it will be our padding. 127 128 00:07:22,620 --> 00:07:27,620 And for that one is also, let's say, three times. 128 129 00:07:28,100 --> 00:07:29,903 And three times for right. 129 130 00:07:31,000 --> 00:07:34,510 I think it's fine now, maybe little bit more for second one 130 131 00:07:34,510 --> 00:07:37,570 so I will say something like that. If I run it 131 132 00:07:37,570 --> 00:07:40,620 I think it's fine now. Yup, is fine now. 132 133 00:07:40,620 --> 00:07:42,060 So what is next? 133 134 00:07:42,060 --> 00:07:45,403 Let's create our third button. 134 135 00:07:47,020 --> 00:07:51,360 So here I will create a comment line again and 135 136 00:07:51,360 --> 00:07:52,193 third... 136 137 00:07:56,137 --> 00:07:56,970 #Third Button 137 138 00:07:59,000 --> 00:08:02,860 And for last button, what I will use, I will say 138 139 00:08:02,860 --> 00:08:07,075 actually I will use similar code, so copy this guys and 139 140 00:08:07,075 --> 00:08:11,480 paste it here and image name will be 140 141 00:08:11,480 --> 00:08:13,450 info.png 141 142 00:08:13,450 --> 00:08:14,680 it's here 142 143 00:08:14,680 --> 00:08:18,670 and the text will be About Us 143 144 00:08:18,670 --> 00:08:23,110 so here I will say About Us 144 145 00:08:24,390 --> 00:08:28,370 and font is same and here will be btn3Icon 145 146 00:08:32,150 --> 00:08:36,970 and for x is 250, for 70 I will say here 146 147 00:08:37,930 --> 00:08:40,700 between this and this it is 60 pixels 147 148 00:08:40,700 --> 00:08:42,390 so I will say here 130 148 149 00:08:43,860 --> 00:08:46,710 between second one and third one it also will be 149 150 00:08:46,710 --> 00:08:49,690 for y value 60 pixels. And ... 150 151 00:08:51,560 --> 00:08:53,930 What is next now, I think it's fine. 151 152 00:08:53,930 --> 00:08:57,410 We need to run our application, run main. 152 153 00:08:57,410 --> 00:09:00,430 It's okay, it's here but what I need to do here 153 154 00:09:00,430 --> 00:09:04,533 I need to add more gaps for About Us. 154 155 00:09:06,680 --> 00:09:10,033 So it's something like that we can use. 155 156 00:09:11,700 --> 00:09:15,393 Little bit more, I think it's fine now. 156 157 00:09:16,820 --> 00:09:18,110 Yup, it's fine now. 157 158 00:09:18,110 --> 00:09:22,810 Now we created our buttons and in next lesson we are going 158 159 00:09:22,810 --> 00:09:26,950 to create our functions and also we need to create our 159 160 00:09:28,360 --> 00:09:31,603 database, for now that's all, see you in the next.