0 1 00:00:04,360 --> 00:00:05,330 Hello everybody, in this lesson 1 2 00:00:05,330 --> 00:00:08,150 we are going to create our first GUI application. 2 3 00:00:08,150 --> 00:00:10,100 And, by the way, I want to tell you something, 3 4 00:00:10,100 --> 00:00:11,880 during our course, we are going to use 4 5 00:00:11,880 --> 00:00:15,330 PyCharm Community Editions as a Python editor, okay? 5 6 00:00:15,330 --> 00:00:18,990 It's very simple, you just can go to it's the official website, 6 7 00:00:18,990 --> 00:00:21,000 and download PyCharm Community Edition, 7 8 00:00:21,000 --> 00:00:24,260 if it's not installed on your computer. 8 9 00:00:24,260 --> 00:00:27,470 And after that, let me explain how we can create a project, 9 10 00:00:27,470 --> 00:00:29,073 and also a Python file. 10 11 00:00:30,800 --> 00:00:34,220 Here, what I need to do, I need to come here and say file, 11 12 00:00:34,220 --> 00:00:37,972 and the project, and enter here name of project, 12 13 00:00:37,972 --> 00:00:38,805 and here, if you click "Create", 13 14 00:00:40,245 --> 00:00:42,322 button then you will create your project. 14 15 00:00:42,322 --> 00:00:43,690 And after that, what we need to do 15 16 00:00:43,690 --> 00:00:46,070 also how we can create a Python file. 16 17 00:00:46,070 --> 00:00:49,740 Here, my project folder name, "Tkinter Course", 17 18 00:00:49,740 --> 00:00:52,530 and right-click, "New", "Python file", 18 19 00:00:52,530 --> 00:00:54,750 and here I need to name my Python file, 19 20 00:00:54,750 --> 00:00:56,510 and after that, click "OK". 20 21 00:00:56,510 --> 00:00:59,080 And after that I will create my Python file, 21 22 00:00:59,080 --> 00:01:01,340 and, of course, I already created my Python file, 22 23 00:01:01,340 --> 00:01:02,310 and also project. 23 24 00:01:02,310 --> 00:01:04,720 Here, let me show you how we can create 24 25 00:01:04,720 --> 00:01:06,380 our first GUI application. 25 26 00:01:06,380 --> 00:01:09,530 To do that what we need to say I will say here, 26 27 00:01:09,530 --> 00:01:14,473 from tkinter import asterisk. 27 28 00:01:15,474 --> 00:01:17,150 Asterisk means here, everything, okay? 28 29 00:01:17,150 --> 00:01:21,247 And also, I want the import from tkinter ttk-- 29 30 00:01:22,740 --> 00:01:23,573 Eh, sorry. 30 31 00:01:23,573 --> 00:01:26,220 From tkinter import ttk, okay? 31 32 00:01:26,220 --> 00:01:28,510 Also, I will import ttk module. 32 33 00:01:28,510 --> 00:01:31,380 By the way you don't have to understand all specifics for now. 33 34 00:01:31,380 --> 00:01:34,060 I will try to explain everything step by step. 34 35 00:01:34,060 --> 00:01:35,210 after that, what I need to do, 35 36 00:01:35,210 --> 00:01:38,913 I need to create my top level window, and I will name it "root". 36 37 00:01:38,913 --> 00:01:42,464 Root is equal to Tk. 37 38 00:01:42,464 --> 00:01:46,193 And also, here, I need say root dot mainloop. 38 39 00:01:47,690 --> 00:01:50,240 Now we have created our first GUI application. 39 40 00:01:50,240 --> 00:01:53,670 Let me run our application here. 40 41 00:01:53,670 --> 00:01:55,890 As you see now, our first tiny, 41 42 00:01:55,890 --> 00:01:59,080 cute GUI application window is here, 42 43 00:01:59,080 --> 00:02:01,870 as you see now, I can resize my window. 43 44 00:02:01,870 --> 00:02:05,970 And also, let me also try to show you 44 45 00:02:05,970 --> 00:02:07,860 how we can create widgets, 45 46 00:02:07,860 --> 00:02:10,060 and also we an add them to our window. 46 47 00:02:10,060 --> 00:02:13,690 Here I want to create two buttons, okay? 47 48 00:02:13,690 --> 00:02:16,860 The first one will be, but first, before creating buttons, 48 49 00:02:16,860 --> 00:02:20,810 let me talk about this tkinter and also ttk. 49 50 00:02:20,810 --> 00:02:22,917 Here you might wonder why we said here, 50 51 00:02:22,917 --> 00:02:24,933 "from tkinter import *". 51 52 00:02:26,761 --> 00:02:29,170 Asterisk means here everything, but after it here, again, 52 53 00:02:29,170 --> 00:02:31,980 we import from tkinter import ttk. 53 54 00:02:31,980 --> 00:02:33,510 Why is it like that? 54 55 00:02:33,510 --> 00:02:37,860 It's like that because tkinter, and also ttk, 55 56 00:02:37,860 --> 00:02:40,840 they are different two modules, okay? 56 57 00:02:40,840 --> 00:02:45,300 But ttk module is a sub-module of tkinter, 57 58 00:02:45,300 --> 00:02:47,773 and that means, if you want to import ttk, 58 59 00:02:47,773 --> 00:02:51,700 you need to say here "from tkinter import ttk", okay? 59 60 00:02:51,700 --> 00:02:54,043 It's a submodule, okay? 60 61 00:02:54,043 --> 00:02:57,190 And something else about tkinter and also ttk module, 61 62 00:02:57,190 --> 00:02:59,910 some widgets only available in tkinter, 62 63 00:02:59,910 --> 00:03:03,150 and some of them only available in ttk module, 63 64 00:03:03,150 --> 00:03:05,783 and also some widgets, they look different. 64 65 00:03:06,750 --> 00:03:10,633 For example, if you create a button, a tkinter button, 65 66 00:03:12,580 --> 00:03:16,660 it will look different, but if you create a ttk button, 66 67 00:03:16,660 --> 00:03:18,107 also it's design's different. 67 68 00:03:18,107 --> 00:03:20,470 Let me show also that one. 68 69 00:03:20,470 --> 00:03:23,380 For example, here I will create two different buttons, okay? 69 70 00:03:23,380 --> 00:03:27,694 The first one, I will use tkinter to create a button, 70 71 00:03:27,694 --> 00:03:30,070 what I need to do, I will to use a constructor method 71 72 00:03:30,070 --> 00:03:34,750 for my button, and my constructor method is "Button", okay? 72 73 00:03:34,750 --> 00:03:38,963 If you here see, if I don't use prefix ttk prefix, 73 74 00:03:38,963 --> 00:03:41,920 that means I am going to create this button 74 75 00:03:41,920 --> 00:03:44,980 by using tkinter, and here I'm to do, 75 76 00:03:44,980 --> 00:03:49,220 I need to specify some properties for my button. 76 77 00:03:49,220 --> 00:03:51,086 The first is going to be root. 77 78 00:03:51,086 --> 00:03:53,150 Root is my top level window, right? 78 79 00:03:53,150 --> 00:03:54,320 It's here. 79 80 00:03:54,320 --> 00:03:57,060 By the way, when you take this root... 80 81 00:03:57,060 --> 00:03:58,163 Root is here. 81 82 00:04:01,050 --> 00:04:04,580 And I need to paste it here. 82 83 00:04:04,580 --> 00:04:08,710 And also I want to specify text property for my button. 83 84 00:04:08,710 --> 00:04:11,103 Text is going to be here, what I need to do, I need to use quotes. 84 85 00:04:11,103 --> 00:04:14,650 Doesn't matter single quotes or double quotes. 85 86 00:04:14,650 --> 00:04:16,603 I will use single quotes. 86 87 00:04:16,603 --> 00:04:19,010 And I'm saying "Click Me", okay? 87 88 00:04:19,010 --> 00:04:21,280 Also, and let's duplicate our button. 88 89 00:04:21,280 --> 00:04:25,950 I will say control D here, and now it will be button two, 89 90 00:04:25,950 --> 00:04:29,060 but now, this time, I want to create ttk button, 90 91 00:04:29,060 --> 00:04:33,930 okay, ttk dot button, and now I create two buttons. 91 92 00:04:33,930 --> 00:04:37,390 If I run my application, as you see now, 92 93 00:04:37,390 --> 00:04:38,990 we don't see our buttons. 93 94 00:04:38,990 --> 00:04:39,970 Why is it like that? 94 95 00:04:39,970 --> 00:04:42,550 Yes, we have only create our buttons, right? 95 96 00:04:42,550 --> 00:04:44,140 But they are not visible. 96 97 00:04:44,140 --> 00:04:46,880 If you want to make your widgets visible, 97 98 00:04:46,880 --> 00:04:50,990 what you need to do, you need to use a geometry manager, okay? 98 99 00:04:50,990 --> 00:04:54,330 And in tkinter, there are three different geometry managers, 99 100 00:04:54,330 --> 00:04:57,160 but for now we are going to use pack geometry manager 100 101 00:04:57,160 --> 00:04:58,990 for our buttons, okay. 101 102 00:04:58,990 --> 00:05:03,503 And here I will say button one dot pack, 102 103 00:05:04,890 --> 00:05:06,200 and control + D again, 103 104 00:05:06,200 --> 00:05:09,780 and here I will say button two dot pack. 104 105 00:05:09,780 --> 00:05:13,170 Now if I run my application, as you see now, 105 106 00:05:13,170 --> 00:05:15,320 our buttons are here. 106 107 00:05:15,320 --> 00:05:20,320 Let me drag this one, it is a little bit tiny, so. 107 108 00:05:20,350 --> 00:05:22,430 Let me resize it first. 108 109 00:05:22,430 --> 00:05:24,427 And here, as you see now, 109 110 00:05:24,427 --> 00:05:26,770 the first one is our tkinter button, 110 111 00:05:26,770 --> 00:05:29,530 and the second one is ttk button. 111 112 00:05:29,530 --> 00:05:32,110 And now, see how they look different. 112 113 00:05:32,110 --> 00:05:34,570 You see, they are totally very different. 113 114 00:05:34,570 --> 00:05:37,775 And also, of course, we can define 114 115 00:05:37,775 --> 00:05:40,940 X and Y value for our window. 115 116 00:05:40,940 --> 00:05:42,880 How we can do it, also I want to show that. 116 117 00:05:42,880 --> 00:05:46,710 Here we can say, after root, we can say 117 118 00:05:46,710 --> 00:05:50,670 root dot geometry, and here, what I need to do, 118 119 00:05:50,670 --> 00:05:55,120 I need here to define X and Y value for my window. 119 120 00:05:55,120 --> 00:05:59,960 For X, I will say 500, and by 450. 120 121 00:05:59,960 --> 00:06:04,320 This one is for X value, that one 450 is for Y value. 121 122 00:06:04,320 --> 00:06:06,780 Let me run our application again, 122 123 00:06:06,780 --> 00:06:11,110 and as you see now here, our X value is 500 pixels, 123 124 00:06:11,110 --> 00:06:14,570 our Y value is 450 pixels. 124 125 00:06:14,570 --> 00:06:15,790 For now, that's all. 125 126 00:06:15,790 --> 00:06:16,790 See you in the next.