0 1 00:00:04,370 --> 00:00:06,055 Hello again, in this lesson we are going to learn 1 2 00:00:06,055 --> 00:00:09,630 how we can create buttons for our GUI applications, 2 3 00:00:09,630 --> 00:00:11,603 and button is also very, very important widget 3 4 00:00:11,603 --> 00:00:15,580 because creating button is a very common behaviour 4 5 00:00:15,580 --> 00:00:17,754 for GUI applications right, 5 6 00:00:17,754 --> 00:00:19,610 and to do that what we need to do, 6 7 00:00:19,610 --> 00:00:21,780 firstly lets create our Python file, 7 8 00:00:21,780 --> 00:00:23,720 and after that we will create our buttons, 8 9 00:00:23,720 --> 00:00:26,740 here I need to say New Python file right, 9 10 00:00:26,740 --> 00:00:31,410 and I will name my file buttons okay, my Python file, 10 11 00:00:31,410 --> 00:00:32,916 and here what I need to do, 11 12 00:00:32,916 --> 00:00:37,610 here like before I need to say from tkinter Import 12 13 00:00:37,610 --> 00:00:38,840 asterisk okay, 13 14 00:00:38,840 --> 00:00:41,444 also of course you can use here tkinter module or 14 15 00:00:41,444 --> 00:00:42,940 ttk it doesn't matter right. 15 16 00:00:42,940 --> 00:00:45,010 I will use tkinter okay, 16 17 00:00:45,010 --> 00:00:46,030 and after that what I need to do 17 18 00:00:46,030 --> 00:00:49,670 I need to say root=Tk right, 18 19 00:00:49,670 --> 00:00:52,160 and after that here what I need to do, 19 20 00:00:52,160 --> 00:00:54,910 by the way I want to create a label and also a button, 20 21 00:00:54,910 --> 00:00:56,960 when I hit this button and I click this button 21 22 00:00:56,960 --> 00:01:00,435 I want to change text propriety of my label okay, 22 23 00:01:00,435 --> 00:01:04,130 and here what I need to say before creating my widget 23 24 00:01:04,130 --> 00:01:05,300 I need to say root 24 25 00:01:06,797 --> 00:01:07,720 dot geometry 25 26 00:01:07,720 --> 00:01:09,950 for geometry I will define 26 27 00:01:09,950 --> 00:01:10,783 350 27 28 00:01:12,510 --> 00:01:14,030 x300 okay 28 29 00:01:14,030 --> 00:01:18,367 and also last thing I need to say root.mainloop right. 29 30 00:01:18,367 --> 00:01:22,210 Now our window is ready, lets run it. 30 31 00:01:22,210 --> 00:01:23,920 As you see now our window is here, 31 32 00:01:23,920 --> 00:01:25,173 but its totally empty of course. 32 33 00:01:25,173 --> 00:01:27,700 What we need to do, we need to create our widgets right, 33 34 00:01:27,700 --> 00:01:29,770 our first widget will be label 34 35 00:01:29,770 --> 00:01:33,597 label=Label constructor method and after it here 35 36 00:01:33,597 --> 00:01:35,093 for parameter will be root. 36 37 00:01:36,030 --> 00:01:39,570 Also I will specify text property for my label 37 38 00:01:39,570 --> 00:01:42,823 and for now I will say Hello Python okay, 38 39 00:01:44,580 --> 00:01:45,850 and after that what I need to do, 39 40 00:01:45,850 --> 00:01:47,223 I need to create here, 40 41 00:01:48,880 --> 00:01:50,290 button but before creating button 41 42 00:01:50,290 --> 00:01:51,630 lets us pack geometry manager 42 43 00:01:51,630 --> 00:01:52,463 for our 43 44 00:01:53,690 --> 00:01:55,000 widget pack, 44 45 00:01:55,000 --> 00:01:57,180 and now lets create our button, 45 46 00:01:57,180 --> 00:01:58,600 so for button what I need to do, 46 47 00:01:58,600 --> 00:02:03,600 I need to say button=Button constructor method okay, 47 48 00:02:04,420 --> 00:02:06,797 and if you want to create the ttk button, 48 49 00:02:06,797 --> 00:02:11,120 you need to say here ttk.Button okay 49 50 00:02:11,120 --> 00:02:13,040 but we are not going to use ttk, 50 51 00:02:13,040 --> 00:02:15,070 and here after that what I need to do, 51 52 00:02:15,070 --> 00:02:17,160 the first parameter will be root, 52 53 00:02:17,160 --> 00:02:19,920 and second one will be my text property for text 53 54 00:02:19,920 --> 00:02:20,753 I will say; 54 55 00:02:22,110 --> 00:02:24,550 quotes, Click 55 56 00:02:24,550 --> 00:02:26,430 ME. Okay. 56 57 00:02:26,430 --> 00:02:29,317 And here what I need to do after that, 57 58 00:02:29,317 --> 00:02:31,693 I need to say button.pack right, 58 59 00:02:32,980 --> 00:02:35,420 now our widgets are ready, 59 60 00:02:35,420 --> 00:02:38,270 lets run our application, they are visible now. 60 61 00:02:38,270 --> 00:02:41,520 As you see now here our text is also here, 61 62 00:02:41,520 --> 00:02:44,080 and also out button is here it's working, 62 63 00:02:44,080 --> 00:02:45,340 so what I want to do now, 63 64 00:02:45,340 --> 00:02:49,220 then I hit, when I click this button I want to change this 64 65 00:02:49,220 --> 00:02:50,410 text property okay, 65 66 00:02:50,410 --> 00:02:53,315 text property of my label, how can I do that? 66 67 00:02:53,315 --> 00:02:56,670 To do that I need to create a command property 67 68 00:02:56,670 --> 00:02:58,835 for my button, okay this is very important. 68 69 00:02:58,835 --> 00:03:01,100 For example when you hit this button, 69 70 00:03:01,100 --> 00:03:02,390 when you click this button 70 71 00:03:02,390 --> 00:03:05,340 what you want to do, you want to create a definition right. 71 72 00:03:06,390 --> 00:03:08,340 So how we can create this definition, 72 73 00:03:08,340 --> 00:03:11,197 to do that you need to come here or here, 73 74 00:03:11,197 --> 00:03:13,850 sorry here and you need to create 74 75 00:03:13,850 --> 00:03:15,690 command property for your button, 75 76 00:03:15,690 --> 00:03:19,116 command equals I will say here callback okay, 76 77 00:03:19,116 --> 00:03:22,390 without parentheses by the way here, 77 78 00:03:22,390 --> 00:03:23,360 don't forget that, 78 79 00:03:23,360 --> 00:03:25,720 and here I will create my callback function, 79 80 00:03:25,720 --> 00:03:27,483 callback okay, 80 81 00:03:28,340 --> 00:03:30,430 and now what I will say, 81 82 00:03:30,430 --> 00:03:32,570 I want to change my label 82 83 00:03:33,950 --> 00:03:34,870 text property 83 84 00:03:34,870 --> 00:03:36,021 when I hit this button right, 84 85 00:03:36,021 --> 00:03:37,037 to do what what I need to do, 85 86 00:03:37,037 --> 00:03:38,960 I need to use here label right, 86 87 00:03:38,960 --> 00:03:42,510 dot config method like before we learned how we can change 87 88 00:03:42,510 --> 00:03:44,130 our properties right, 88 89 00:03:44,130 --> 00:03:46,760 and here I will say, when I hit this button 89 90 00:03:46,760 --> 00:03:48,260 change my text property, 90 91 00:03:48,260 --> 00:03:51,063 and I will say here text is going to be: 91 92 00:03:52,440 --> 00:03:53,520 You 92 93 00:03:53,520 --> 00:03:54,668 clicked 93 94 00:03:54,668 --> 00:03:55,690 me! 94 95 00:03:55,690 --> 00:03:59,453 Okay, and now if I run my application. 95 96 00:04:01,370 --> 00:04:02,810 Here, Hello Python right, 96 97 00:04:02,810 --> 00:04:05,490 and if I click my button 97 98 00:04:05,490 --> 00:04:07,480 as you see now it say You clicked me! 98 99 00:04:07,480 --> 00:04:09,420 Even we can change here something more. 99 100 00:04:09,420 --> 00:04:10,610 For example, lets say 100 101 00:04:12,170 --> 00:04:13,800 fg 101 102 00:04:13,800 --> 00:04:15,230 font colour 102 103 00:04:15,230 --> 00:04:16,410 red 103 104 00:04:16,410 --> 00:04:21,320 also background colour bg is going to be yellow okay. 104 105 00:04:21,320 --> 00:04:23,263 Now lets run it again. 105 106 00:04:25,090 --> 00:04:28,410 Now I will hit my button, click me. 106 107 00:04:28,410 --> 00:04:30,620 As you see now our font colour is red and 107 108 00:04:30,620 --> 00:04:32,822 our background is colour is yellow. 108 109 00:04:32,822 --> 00:04:36,364 This is how we can use command property for our buttons. 109 110 00:04:36,364 --> 00:04:38,440 Also I want to show you something else, 110 111 00:04:38,440 --> 00:04:40,410 for example now here if you want 111 112 00:04:40,410 --> 00:04:41,970 to make disable your button, 112 113 00:04:41,970 --> 00:04:44,250 how you can do that, you need to use here 113 114 00:04:44,250 --> 00:04:48,130 button square brackets and state function, 114 115 00:04:48,130 --> 00:04:53,130 state equals and here you need to say disabled okay. 115 116 00:04:53,320 --> 00:04:55,063 If I run my application again, 116 117 00:04:56,760 --> 00:04:59,600 and now as you see now our button grayed out 117 118 00:04:59,600 --> 00:05:01,050 and we can not click it, 118 119 00:05:01,050 --> 00:05:03,660 if you want to make it normal what you can do 119 120 00:05:03,660 --> 00:05:05,570 here I will press Ctrl+D 120 121 00:05:05,570 --> 00:05:09,520 and button state will be here, this time normal okay, 121 122 00:05:09,520 --> 00:05:11,970 and if I run my application again, 122 123 00:05:11,970 --> 00:05:14,060 it was before disabled right? 123 124 00:05:14,060 --> 00:05:16,870 And now it is normal, if I hit my button, 124 125 00:05:16,870 --> 00:05:19,410 as you see now again my button is working. 125 126 00:05:19,410 --> 00:05:22,310 This is how we can use buttons for our applications, 126 127 00:05:22,310 --> 00:05:24,293 for now that's all see you in the next.