WEBVTT 0 00:00.420 --> 00:05.420 Let's get started by, as usual, importing the relevant library. Tkinter, like the 1 00:06.750 --> 00:11.250 turtle module, is already pre-installed with every installation of Python. 2 00:11.760 --> 00:13.380 As long as you've got Python running, 3 00:13.410 --> 00:17.760 then you should be able to simply import Tkinter as the module 4 00:18.000 --> 00:22.410 and then you'll be able to use all of the classes and properties and methods 5 00:22.440 --> 00:24.870 inside. So for example, 6 00:24.870 --> 00:27.720 we could start off by creating a new window, 7 00:28.380 --> 00:31.800 and this is sort of equivalent to the screens that we've been working with 8 00:32.040 --> 00:34.710 in turtle . So in order to do this, 9 00:34.740 --> 00:39.740 we have to dig into the Tkinter module and then find a class called Tk. 10 00:40.260 --> 00:43.620 And then once we initialize a new object from that class, 11 00:43.860 --> 00:48.300 then we have ourselves a window. But if I run this as it is, 12 00:48.450 --> 00:51.330 you'll see absolutely nothing happen 13 00:53.070 --> 00:56.550 and it will just go straight away to exit code zero. 14 00:57.150 --> 01:02.070 And the reason for this is because we need a way of keeping the window on the 15 01:02.070 --> 01:06.300 screen. What Tkinter has done here is it's gone ahead, 16 01:06.390 --> 01:09.570 created the window, sees that there's no more instructions 17 01:09.660 --> 01:12.360 and then it basically ended the program. Now, 18 01:12.360 --> 01:16.890 what we want instead is to sort of have a while loop that basically just keeps 19 01:16.890 --> 01:21.270 on running, so something like a while true. And inside this while loop, 20 01:21.390 --> 01:26.390 it holds onto this window and keeps on listening to see if there's anything else 21 01:26.790 --> 01:30.900 that the user is going to do to interact with that window so that it can 22 01:30.900 --> 01:32.880 respond when that happens. 23 01:33.300 --> 01:37.530 So this loop is included inside Tkinter 24 01:37.740 --> 01:42.740 and all you have to do is get your window to simply call the main loop. 25 01:44.190 --> 01:48.780 This main loop is the thing that will keep the window on screen like this. 26 01:49.200 --> 01:54.090 So now here is our window and here's the line of code that keeps it on the screen and 27 01:54.090 --> 01:57.990 listens for what the user will do to interact with it. For example, 28 01:57.990 --> 02:00.090 click on a button or type something. 29 02:00.810 --> 02:05.810 Now this line of code always has to be at the very end of your program and all 30 02:06.360 --> 02:07.860 the rest of the things that you're going to write 31 02:07.920 --> 02:11.850 go in between creating the window and getting the window to run. 32 02:13.020 --> 02:17.730 The next thing we can do is we can change the title of that program. 33 02:18.060 --> 02:20.160 And we've done this before using turtle. 34 02:20.460 --> 02:24.540 We just call the title method and we give a string as the input. 35 02:24.840 --> 02:27.360 So 'My first GUI program', 36 02:27.810 --> 02:30.450 and now if I rerun my code, 37 02:30.840 --> 02:35.610 then you can see that this is what's showing up at the very top bar of my 38 02:35.610 --> 02:37.170 program. Now, 39 02:37.200 --> 02:41.370 other things that we might want to change with the window is the sizing of it. 40 02:41.460 --> 02:46.050 So there is a default size and there's also a way of changing the size. 41 02:46.920 --> 02:50.930 And we can do that by tapping into a method called a minimum size. 42 02:51.450 --> 02:55.560 The window is going to scale to include all of the components that you put 43 02:55.560 --> 02:57.960 inside. If you put a hundred buttons inside, 44 02:57.960 --> 02:59.590 it's going to make the window massive. 45 02:59.950 --> 03:02.050 But if you don't have a lot of things in the window, 46 03:02.380 --> 03:07.380 then you might want to define a minimum size so that you can specify that, by 47 03:07.690 --> 03:11.290 default, I want my width to be, let's say, I don't know, 48 03:11.320 --> 03:14.920 500 and the height to be 300, 49 03:15.250 --> 03:17.740 unless the user wants to resize the window, 50 03:18.160 --> 03:21.790 or there's a lot of components that makes the window a lot bigger. 51 03:22.450 --> 03:23.530 So when we run our code 52 03:23.530 --> 03:28.530 now you can see this is a 500-pixel by 300-pixel window that we've just created 53 03:29.590 --> 03:31.240 with our own custom title. 54 03:32.980 --> 03:35.260 In addition to creating windows, 55 03:35.320 --> 03:39.760 we can, of course, create some components to put inside the window. 56 03:40.150 --> 03:41.410 So I want to show you firstly 57 03:41.410 --> 03:46.410 how you would create a label. Just as our window was created from the tkinker 58 03:46.990 --> 03:50.740 module and it's the Tk class that was used, 59 03:51.070 --> 03:54.340 there's also a class inside Tkinter called 60 03:54.430 --> 03:58.210 a label. So that we initialize a label class, 61 03:58.240 --> 04:00.370 and we can save that to a variable called 62 04:00.430 --> 04:03.670 my_label or anything else for that matter. 63 04:04.180 --> 04:08.050 Now this label has quite a few things that we can change about it. 64 04:08.590 --> 04:13.590 It might not be obvious from the documentation or from the prompt that PyCharm 65 04:15.220 --> 04:16.053 gives us, 66 04:16.120 --> 04:21.120 but we can, in fact, change a property called text so we can change what is 67 04:21.340 --> 04:26.290 displayed inside the label. Let's just write some text called 'I am a label' 68 04:27.310 --> 04:31.150 Unfortunately, that's actually not enough to get the label to display. 69 04:31.210 --> 04:35.830 So when I run my program as it is, you don't actually see a label anywhere 70 04:35.830 --> 04:38.830 on the screen. When we're working with Tkinter 71 04:38.830 --> 04:43.830 what we have to do is we first have to create a component like a 72 04:44.020 --> 04:44.853 label. 73 04:45.010 --> 04:49.750 And then we have to specify how that component is going to be laid out on the 74 04:49.750 --> 04:51.940 screen before it will show up. 75 04:52.330 --> 04:57.190 And one of the easiest ways of laying out any component is just to get hold of 76 04:57.190 --> 05:00.640 that component and then call the method called pack. 77 05:01.150 --> 05:05.800 And this is going to place it into the screen and it's going to automatically 78 05:05.800 --> 05:08.530 center it on the screen. So now 79 05:08.560 --> 05:11.170 if I run the code with this modification, 80 05:11.410 --> 05:16.410 you can see our label is now finally showing up and it's packed so that it's in 81 05:16.750 --> 05:18.520 the center of the program. 82 05:20.020 --> 05:23.740 Now there's other properties that we can modify about our label. 83 05:24.010 --> 05:27.430 So we could initialize our label with a piece of text, 84 05:27.670 --> 05:31.810 but we can also specify a font. The font is again, 85 05:31.810 --> 05:33.010 going to be a tuple, 86 05:33.430 --> 05:36.670 and that tuple is first going to take the name of the font, 87 05:36.700 --> 05:38.890 so let's say I want to use Arial, 88 05:39.340 --> 05:42.310 and then it's going to take the size of the font. 89 05:42.340 --> 05:47.290 So let's make it a little bit bigger, maybe a 24 size font. And finally, 90 05:47.290 --> 05:51.820 it's going to take whether, if it's bold or italic or, um, 91 05:51.850 --> 05:56.110 let's just set it to bold. And now if I run my code again, 92 05:56.470 --> 06:00.350 you can see I've now got a Arial font, size 24 93 06:00.620 --> 06:01.970 and it's bold. 94 06:02.780 --> 06:07.780 You can also change this to italic or you can simply just ignore it and leave 95 06:09.110 --> 06:12.590 out that last item and it will just give you a regular piece of text. 96 06:13.130 --> 06:18.130 But none of this would show up unless you have this line of code where you 97 06:18.260 --> 06:23.090 actually use the packer to pack our label onto the screen. Now 98 06:23.090 --> 06:24.290 in the course resources, 99 06:24.290 --> 06:29.290 I've linked to the Tkinter documentation on the Python docs and they talk 100 06:29.990 --> 06:32.720 about the packer in a lot more detail. 101 06:33.200 --> 06:36.020 It's basically a geometry management system. 102 06:36.020 --> 06:40.130 It's just a simple way to lay out the components that you're building. 103 06:40.820 --> 06:45.440 And this packer has a number of options. So if we scroll down, 104 06:45.440 --> 06:50.440 you can see that we can change the expand to a boolean, so true or false. 105 06:50.900 --> 06:55.340 And that tells it whether if it should expand to take up the entire space or 106 06:55.340 --> 06:58.910 stay as small as it can be. Alternatively, 107 06:58.910 --> 07:01.730 you have things like side which changes 108 07:01.730 --> 07:05.750 which side should it be packed to, on the left, right, top, or bottom? 109 07:06.710 --> 07:10.040 So we know that currently our label is bang in the middle, 110 07:10.340 --> 07:15.340 but if I change the side to equal left, 111 07:16.580 --> 07:18.080 now when I run the code, 112 07:18.110 --> 07:21.590 you can see it's now been packed to the left of the screen. 113 07:21.920 --> 07:24.800 And if I say bottom, 114 07:26.000 --> 07:30.680 then it's going to go to the bottom and right and top. All of those will work. 115 07:31.790 --> 07:34.370 And if I change expand to true, 116 07:34.400 --> 07:38.330 you can see it's now trying to take up the entire height and width of the 117 07:38.330 --> 07:41.240 available screen size. Now, 118 07:41.240 --> 07:43.850 when you're writing this pack function here, 119 07:44.510 --> 07:48.290 as soon as I type pack and I open up my parentheses, 120 07:48.710 --> 07:53.570 normally we're used to a whole bunch of properties being listed in here for us, 121 07:53.900 --> 07:57.800 and we can specify each one and pick and choose basically. 122 07:58.400 --> 08:01.130 But in this case, this is all that we see. 123 08:01.310 --> 08:06.310 So what's going on here? Compare this to when we used our turtle module and I'm 124 08:07.460 --> 08:11.810 going to build a turtle Tim turtle.turtle. 125 08:13.040 --> 08:16.340 And then I say, tim.write. Look at how, 126 08:16.370 --> 08:19.910 when I opened up the parentheses here, you can see there's the argument 127 08:19.910 --> 08:23.360 which is the Object that's going to be written, and then whether 128 08:23.360 --> 08:26.960 if the writing should be moved to the bottom corner, 129 08:27.350 --> 08:29.000 which direction it should be aligned, 130 08:29.000 --> 08:34.000 what's the font and all of the available inputs that we can give to this write 131 08:34.580 --> 08:39.140 function. Now compare that to our pack function here. 132 08:39.830 --> 08:43.520 This, you'll notice, is really different. Now, 133 08:43.550 --> 08:47.930 if you actually look in the documentation for pack, 134 08:48.170 --> 08:51.980 you can see it actually has a number of things that we can change; before, 135 08:51.980 --> 08:56.190 expand, fill, in, side, and all of these things 136 08:56.460 --> 09:00.090 which are modifiable and do various things. 137 09:00.480 --> 09:04.950 But how is it that it doesn't seem to exist as one of the arguments that we can 138 09:04.950 --> 09:08.820 use? The secret lies in this last part here, 139 09:08.880 --> 09:13.230 the **kw. And in the next lesson, 140 09:13.530 --> 09:17.910 we're going to talk about some more advanced features of Python arguments. 141 09:18.270 --> 09:22.020 And we're going to look at how we can provide default argument values, 142 09:22.320 --> 09:27.320 how we can define unlimited positional arguments and unlimited keyword arguments. 143 09:28.260 --> 09:30.990 To understand this better, head over to the next lesson 144 09:31.260 --> 09:34.290 and we'll do a deep dive on Python arguments.