WEBVTT 1 00:00:00.350 --> 00:00:02.210 Hi guys and welcome back. 2 00:00:02.210 --> 00:00:04.090 In this video we're going to start learning 3 00:00:04.090 --> 00:00:09.090 about TkInter by building a simple Hello World app. 4 00:00:09.180 --> 00:00:11.090 What to do is right click your folder 5 00:00:11.090 --> 00:00:12.670 and create a new Python file 6 00:00:12.670 --> 00:00:14.950 I'm gonna call it app.py as I usually do 7 00:00:14.950 --> 00:00:16.870 for these smaller apps 8 00:00:16.870 --> 00:00:21.030 and we're going to do import TkInter as tk. 9 00:00:21.030 --> 00:00:23.340 This is a alias import 10 00:00:23.340 --> 00:00:25.210 it's essentially the same thing as we did last time 11 00:00:25.210 --> 00:00:28.270 only now instead of TkInter dot stuff 12 00:00:28.270 --> 00:00:30.683 We're gonna do tk dot stuff. 13 00:00:31.540 --> 00:00:34.700 And so this just renames TkInter into tk 14 00:00:34.700 --> 00:00:36.220 so it's a little bit easier to use 15 00:00:36.220 --> 00:00:38.370 and this is something that you'll encounter 16 00:00:38.370 --> 00:00:41.250 in TkInter code all the time. 17 00:00:41.250 --> 00:00:45.000 However, we're also going to use a sub module of TkInter 18 00:00:45.000 --> 00:00:48.850 so frequently that we want to import it separately as well. 19 00:00:48.850 --> 00:00:52.580 So we will do from TkInter import ttk 20 00:00:53.660 --> 00:00:57.470 Now, TkInter has had a bad rep in the Python community 21 00:00:57.470 --> 00:01:01.500 and generally in everybody's minds for a long time 22 00:01:01.500 --> 00:01:05.830 because it has been not the prettiest to look at 23 00:01:05.830 --> 00:01:08.580 it is a little bit confusing 24 00:01:08.580 --> 00:01:12.720 and generally it hasn't been all that good. 25 00:01:12.720 --> 00:01:15.240 And over time people have migrated to other 26 00:01:15.240 --> 00:01:17.193 graphical user interface libraries. 27 00:01:18.040 --> 00:01:21.270 In the last few years TkInter has gotten much better 28 00:01:21.270 --> 00:01:23.620 and with the introduction of ttk 29 00:01:23.620 --> 00:01:25.860 as well as many other improvements 30 00:01:25.860 --> 00:01:28.850 it is now what I would say is the best option 31 00:01:28.850 --> 00:01:30.700 for learning graphical user interface 32 00:01:30.700 --> 00:01:33.770 and developing cross platform interfaces 33 00:01:33.770 --> 00:01:35.530 for your applications. 34 00:01:35.530 --> 00:01:37.950 In addition TkInter is very fast 35 00:01:37.950 --> 00:01:40.320 and it's not that difficult to learn 36 00:01:40.320 --> 00:01:43.140 once you've got a few fundamentals down 37 00:01:43.140 --> 00:01:44.210 so let's get started. 38 00:01:44.210 --> 00:01:47.780 We're going to create a simple function called greet 39 00:01:47.780 --> 00:01:50.410 and it's going to print hello world 40 00:01:50.410 --> 00:01:52.180 so nothing new here 41 00:01:52.180 --> 00:01:56.390 if we call this function in our code and we run app.py 42 00:01:56.390 --> 00:02:00.120 as usual you will get hello world printed down there. 43 00:02:00.120 --> 00:02:02.580 Now what we're gonna do is we're going to create 44 00:02:02.580 --> 00:02:06.350 a button inside a window and when you click the button 45 00:02:06.350 --> 00:02:07.800 this function will be called. 46 00:02:08.680 --> 00:02:10.650 So, the first thing to do is to create 47 00:02:10.650 --> 00:02:12.500 our TkInter application. 48 00:02:12.500 --> 00:02:16.120 Essentially, a container for all our other components 49 00:02:16.120 --> 00:02:19.030 like buttons and texts and things like that. 50 00:02:19.030 --> 00:02:21.193 Usually call this the root. 51 00:02:22.040 --> 00:02:25.770 So you define it by creating a Tk object 52 00:02:25.770 --> 00:02:27.773 that comes from the TkInter package. 53 00:02:28.680 --> 00:02:30.850 Then you can give this a title 54 00:02:30.850 --> 00:02:33.710 this will be the title of the window. 55 00:02:33.710 --> 00:02:36.340 Finally if you do root dot main loop 56 00:02:36.340 --> 00:02:39.300 that is going to run your window 57 00:02:39.300 --> 00:02:43.260 and the programme, the code will be paused in this line 58 00:02:43.260 --> 00:02:45.610 until the window exits. 59 00:02:45.610 --> 00:02:46.890 So whenever you run this 60 00:02:46.890 --> 00:02:49.350 your entire Python programme comes to a standstill 61 00:02:49.350 --> 00:02:51.330 or so it would seem 62 00:02:51.330 --> 00:02:55.150 while TkInter is in its event loop. 63 00:02:55.150 --> 00:02:58.560 Let me run this and actually I will call the greet function 64 00:02:58.560 --> 00:03:01.560 underneath this line as well to show you what happens. 65 00:03:01.560 --> 00:03:03.670 Now I'm gonna run app.py 66 00:03:03.670 --> 00:03:06.760 and you'll see this little window appear 67 00:03:06.760 --> 00:03:08.630 which doesn't contain anything 68 00:03:08.630 --> 00:03:10.050 the window may be different sizes 69 00:03:10.050 --> 00:03:12.180 depending on your screen and so on 70 00:03:12.180 --> 00:03:14.040 but you can see down at the bottom left 71 00:03:14.040 --> 00:03:17.180 that there is no hello world being printed out. 72 00:03:17.180 --> 00:03:19.230 That is because right now TkInter 73 00:03:19.230 --> 00:03:22.160 has taken control of Python. 74 00:03:22.160 --> 00:03:25.080 If there were buttons or labels or input fields 75 00:03:25.080 --> 00:03:26.400 in this application 76 00:03:26.400 --> 00:03:28.350 they would all work because TkInter 77 00:03:28.350 --> 00:03:29.990 is the one controlling them 78 00:03:29.990 --> 00:03:32.470 but the rest of our application is stopped 79 00:03:32.470 --> 00:03:34.830 so we cannot run any alternate code 80 00:03:34.830 --> 00:03:38.350 at the same time, as we run our TkInter code. 81 00:03:38.350 --> 00:03:41.290 If we stop this then hello world gets printed out 82 00:03:41.290 --> 00:03:42.583 and our application ends. 83 00:03:43.620 --> 00:03:46.550 Now when we're defining TkInter applications 84 00:03:46.550 --> 00:03:49.180 we're going to wire the different components 85 00:03:49.180 --> 00:03:52.190 such as buttons to functions in our code 86 00:03:52.190 --> 00:03:54.760 that is how our code runs. 87 00:03:54.760 --> 00:03:56.330 So let's do that just now. 88 00:03:56.330 --> 00:03:58.130 Will we create a greet button 89 00:03:58.130 --> 00:04:01.120 which is a ttk dot button. 90 00:04:01.120 --> 00:04:04.450 Notice that this is not a traditional tk dot button 91 00:04:04.450 --> 00:04:08.340 it is a themed TkInter button. 92 00:04:08.340 --> 00:04:10.290 This is the new type of widgets 93 00:04:10.290 --> 00:04:12.250 that allow much more customization 94 00:04:12.250 --> 00:04:15.020 and is one of the reasons why TkInter is better now 95 00:04:15.020 --> 00:04:16.570 than it used to be in the past. 96 00:04:17.440 --> 00:04:19.940 The first parameter to any of these components 97 00:04:19.940 --> 00:04:24.940 is who the parent is or where the button will go inside of. 98 00:04:25.270 --> 00:04:28.020 So this button we wanna put it inside the root 99 00:04:28.020 --> 00:04:29.710 which is our main container. 100 00:04:29.710 --> 00:04:34.230 So that is the first argument to the constructor. 101 00:04:34.230 --> 00:04:36.400 Next up, we can give it some text 102 00:04:36.400 --> 00:04:39.960 which is what will be contained inside the button. 103 00:04:39.960 --> 00:04:42.430 And finally we can give it a command 104 00:04:42.430 --> 00:04:45.880 and this is a callable function that will run 105 00:04:45.880 --> 00:04:47.290 when the button is clicked 106 00:04:47.290 --> 00:04:49.970 so here we're gonna put our greet function. 107 00:04:49.970 --> 00:04:51.750 Make sure to not put the result 108 00:04:51.750 --> 00:04:53.320 of calling the greet function 109 00:04:53.320 --> 00:04:56.520 as then it would run immediately and you would get an error 110 00:04:56.520 --> 00:04:59.373 you do want the function itself in there. 111 00:05:00.280 --> 00:05:02.160 Now when the button is clicked 112 00:05:02.160 --> 00:05:04.210 this command function will be executed 113 00:05:04.210 --> 00:05:06.083 which will run your greet function. 114 00:05:07.570 --> 00:05:11.760 Next thing we're gonna put this button inside our root 115 00:05:11.760 --> 00:05:13.590 because if we run this just now 116 00:05:14.730 --> 00:05:16.980 you will see that the button is not in there. 117 00:05:17.860 --> 00:05:19.890 The root is the parent of the button 118 00:05:19.890 --> 00:05:21.660 but we've not placed it in there yet 119 00:05:21.660 --> 00:05:24.210 so we need to give TkInter some information 120 00:05:24.210 --> 00:05:26.660 as to where we want this to appear. 121 00:05:26.660 --> 00:05:28.350 And we're gonna tell TkInter 122 00:05:28.350 --> 00:05:31.420 that we just wanna put the button in the screen 123 00:05:31.420 --> 00:05:32.960 wherever it fits. 124 00:05:32.960 --> 00:05:36.890 And for that we use greet button dot pack 125 00:05:37.830 --> 00:05:42.687 and we are gonna give it side of left fill of x 126 00:05:44.020 --> 00:05:46.990 and expand equal true. 127 00:05:46.990 --> 00:05:49.220 Now that we've got this we can press play 128 00:05:49.220 --> 00:05:51.770 and you'll see the greet button appears 129 00:05:51.770 --> 00:05:55.020 and expands as you make the window grow 130 00:05:55.020 --> 00:05:57.580 that is this fill x and expand true in action. 131 00:05:57.580 --> 00:06:00.230 We will explain more on them later on. 132 00:06:00.230 --> 00:06:01.860 As you click the button 133 00:06:01.860 --> 00:06:04.083 Hello World appears on the bottom left. 134 00:06:05.320 --> 00:06:07.600 We also have this greet call down here 135 00:06:07.600 --> 00:06:10.230 we're gonna remove it now since we don't need it any more. 136 00:06:10.230 --> 00:06:12.830 Next we're going to create a quit button 137 00:06:12.830 --> 00:06:15.290 and this is gonna be a another ttk button 138 00:06:15.290 --> 00:06:16.940 also on the root. 139 00:06:16.940 --> 00:06:19.080 The text is going to be quit 140 00:06:19.080 --> 00:06:22.450 and the command is gonna be root dot destroy. 141 00:06:22.450 --> 00:06:26.020 Again, make sure to not call root dot destroy like that 142 00:06:26.020 --> 00:06:28.450 because that would actually terminate your application. 143 00:06:28.450 --> 00:06:30.440 Root dot destroy is the function you call 144 00:06:30.440 --> 00:06:33.010 when you want to preemptively destroy your application 145 00:06:33.010 --> 00:06:34.743 when an interaction happens. 146 00:06:36.230 --> 00:06:39.190 Next we also have to pack this button into our root 147 00:06:39.190 --> 00:06:41.960 so we will say quit button dot pack 148 00:06:41.960 --> 00:06:46.360 and we will say side equal left, fill equal x 149 00:06:46.360 --> 00:06:48.470 expand equal true. 150 00:06:48.470 --> 00:06:50.520 So same thing as before 151 00:06:50.520 --> 00:06:52.220 and now we can press play 152 00:06:52.220 --> 00:06:55.650 and you can see that both buttons appear here. 153 00:06:55.650 --> 00:06:58.460 You've got your greet button that prints hello world 154 00:06:58.460 --> 00:07:01.360 and your quit button that makes the application terminate. 155 00:07:02.420 --> 00:07:05.690 Again, I understand that pack can be a bit confusing 156 00:07:05.690 --> 00:07:07.420 we're going to look at it in detail 157 00:07:07.420 --> 00:07:09.890 in the coming videos, don't worry about it. 158 00:07:09.890 --> 00:07:13.040 We have created our first TkInter application 159 00:07:13.040 --> 00:07:14.670 where we can print hello world 160 00:07:14.670 --> 00:07:16.300 or we can terminate the application 161 00:07:16.300 --> 00:07:18.720 we have learned about creating buttons 162 00:07:18.720 --> 00:07:21.450 creating the main container window 163 00:07:21.450 --> 00:07:26.040 and linking commands or functions to our buttons. 164 00:07:26.040 --> 00:07:28.160 These are very important fundamentals 165 00:07:28.160 --> 00:07:30.880 of creating TkInter applications. 166 00:07:30.880 --> 00:07:32.370 Thanks for joining me in this video 167 00:07:32.370 --> 00:07:33.770 and see you on the next one.