WEBVTT 0 00:00.360 --> 00:05.360 In the last lesson, we saw how we could set a lot of the properties for the 1 00:06.300 --> 00:09.000 methods associated with Tkinter, 2 00:09.300 --> 00:13.440 or for initializing the components like our labels. 3 00:14.160 --> 00:15.750 Now in the documentation, 4 00:15.870 --> 00:19.770 they tell us that there's a number of ways that we can set these options. 5 00:20.190 --> 00:25.190 We can either do it when we initialize a new object or we can access the 6 00:25.860 --> 00:30.420 properties like as if they are keys in a dictionary and then setting the value. 7 00:31.020 --> 00:31.650 And finally, 8 00:31.650 --> 00:36.450 we can set multiple properties by using the config method and passing in the 9 00:36.450 --> 00:38.970 value for each of the things that we want to change, 10 00:39.690 --> 00:43.590 I recommend taking a look at the Tcl tk documentation 11 00:43.950 --> 00:47.460 which lists all of the options. Like for example, here, 12 00:47.460 --> 00:52.440 I've got my label chosen and there are standard options like background color, 13 00:52.470 --> 00:56.400 or text. And there are widget-specific options, 14 00:56.430 --> 01:01.050 so specific to the label, you can change its height, you can change its width. 15 01:01.740 --> 01:04.680 Coming back to my label in my main.py, 16 01:05.130 --> 01:08.760 if I wanted to change my label's property, so for example, 17 01:08.760 --> 01:13.500 if I want to change the text that's inside and I want to make it different from 18 01:13.500 --> 01:15.570 the initial text that it displays, 19 01:15.840 --> 01:20.280 then I can do simply this by changing it as if it were a dictionary. 20 01:20.880 --> 01:24.390 And I can set that to the new value, so new text. 21 01:25.740 --> 01:30.740 Now I could also do it by doing my_label.config and then passing in the 22 01:31.830 --> 01:36.830 text as a keyword argument. Either way 23 01:37.230 --> 01:40.440 when I run this main.py, remember previously, 24 01:40.440 --> 01:41.850 we were running our playground. 25 01:41.850 --> 01:46.850 So go back to run and then click this and then change it to our main.py. 26 01:48.720 --> 01:53.720 And now you should see the new text show up instead of the original text, 27 01:53.760 --> 01:55.110 which is I am a label. 28 01:55.800 --> 02:00.800 So this is how we configure and change or update the properties of a particular 29 02:01.830 --> 02:03.360 component that we've created. 30 02:04.860 --> 02:08.760 In addition to labels, we can also create buttons. 31 02:09.180 --> 02:13.920 Let's create a button, which again, is going to come from the Tkinter module 32 02:14.220 --> 02:17.610 and it's going to be the button class from that module 33 02:17.670 --> 02:20.220 as you can see right here. Now, 34 02:20.280 --> 02:22.380 all of the components that we're going to be using 35 02:22.410 --> 02:25.290 come from this class. Very often 36 02:25.320 --> 02:30.320 you'll see people instead of importing Tkinter, they'll say from tkinter 37 02:30.780 --> 02:31.620 import, 38 02:31.770 --> 02:36.270 and then the asterisk to denote import every single class. 39 02:36.900 --> 02:40.590 This means that we can basically get rid of all the module mentions 40 02:40.590 --> 02:43.170 and we can just initialize a window as tk, 41 02:43.500 --> 02:48.500 our label as a label and our button as simply button, like this. Saves a little 42 02:50.400 --> 02:54.330 bit of typing, depends on how many of the classes you're gonna use. 43 02:54.330 --> 02:55.500 If you're just going to use one, 44 02:55.800 --> 02:58.980 I recommend keeping the module so that you know, where it comes from. 45 02:59.230 --> 03:00.940 But if you're going to use loads of them 46 03:00.970 --> 03:04.750 like we are here, then it does make it a lot quicker to type. 47 03:05.410 --> 03:07.660 So let's create our button. And again, 48 03:07.660 --> 03:12.660 it has a whole bunch of optional keyword arguments. And some of those are 49 03:12.910 --> 03:14.440 standard. So for example, 50 03:14.440 --> 03:19.030 we can change the button text in the same way that we changed the label text. 51 03:19.450 --> 03:24.450 So let's make it to say click me. And remember that in order to make anything appear 52 03:25.240 --> 03:27.700 on screen, it needs to have some sort of layout. 53 03:28.090 --> 03:31.540 So let's call pack again to get it to be packed onto the screen. 54 03:32.260 --> 03:34.360 So now if I run this code as it is, 55 03:34.690 --> 03:39.690 you can see that my button has been placed in the middle of the screen and my 56 03:39.940 --> 03:41.650 label is packed to the left. 57 03:43.120 --> 03:45.400 Let's go ahead and get rid of that left 58 03:45.430 --> 03:49.780 so that it actually goes in order so that the first thing gets created, 59 03:49.810 --> 03:53.830 it gets put on screen first and then the next thing is the button 60 03:53.890 --> 03:56.740 and then this is all centered by default. 61 03:58.150 --> 04:02.110 The next obvious question is how can we get this button to actually work? 62 04:02.290 --> 04:07.240 Because at the moment clicking on it does absolutely nothing. As you remember 63 04:07.270 --> 04:09.550 when we used our turtle module, 64 04:09.760 --> 04:14.650 we could have an event listener. So we can create some sort of a function, 65 04:14.830 --> 04:17.380 let's call it say button_clicked. 66 04:18.730 --> 04:22.480 And then this function could do something say, for example, 67 04:22.750 --> 04:24.430 I got clicked. 68 04:25.300 --> 04:29.410 And when this button detects an event, 69 04:29.470 --> 04:33.430 say a click event, then it could call this function. 70 04:33.910 --> 04:38.470 So in the tkinter world, there is a property called command, 71 04:38.890 --> 04:43.420 which you can set to equal the name of a function. So remember, 72 04:43.720 --> 04:47.470 it's the name of the function, not calling the function. 73 04:47.620 --> 04:50.920 So we don't actually need the parentheses at the end. 74 04:51.670 --> 04:56.500 Now when we run our code, when this button detects a command 75 04:56.500 --> 04:58.480 which is basically a click event, 76 04:58.750 --> 05:03.010 then it's going to trigger this method and it's going to print this hopefully 77 05:03.010 --> 05:07.450 into the console. So let's hit run. Now, 78 05:07.450 --> 05:11.650 I'm going to click on this button and you can see it says I got clicked and it 79 05:11.650 --> 05:13.210 does that every time I click on it. 80 05:14.650 --> 05:16.840 So here's a challenge for you. 81 05:17.530 --> 05:19.900 How can you make the label, 82 05:19.930 --> 05:24.370 my_label, instead of reading new text, for it to say 83 05:24.400 --> 05:27.910 button got clicked when I click this button? 84 05:28.480 --> 05:32.620 So this button click should now change the text. Pause the video, 85 05:32.950 --> 05:35.950 give that a go. All right. 86 05:35.950 --> 05:40.950 So we know that we can change our label's text by using either of these methods. 87 05:41.410 --> 05:45.100 So you can basically pick one of these and add it to this function. 88 05:45.310 --> 05:46.540 So I'm going to use the 89 05:46.570 --> 05:51.570 my_label.config just because it kind of makes a little bit more sense when I 90 05:52.540 --> 05:53.650 read that line of code. 91 05:53.830 --> 05:57.860 So I'm going to configure the text property to read button 92 05:58.070 --> 05:59.180 got clicked. 93 06:01.580 --> 06:03.410 And now when I hit run, 94 06:04.040 --> 06:08.300 what you'll see is when I click this button, it's going to change the text. 95 06:10.010 --> 06:13.010 So we're now getting a little bit more interactivity. 96 06:13.670 --> 06:17.330 The next thing I want to show you is even more interactivity. 97 06:17.750 --> 06:21.260 I want to show you a component called the entry component, 98 06:21.440 --> 06:24.980 and this is basically just a input effectively. 99 06:25.610 --> 06:28.460 So let's create a new object which I'll call input, 100 06:28.820 --> 06:31.280 and it's created from the entry class 101 06:31.310 --> 06:35.210 which comes from our tkinter module. Now again, 102 06:35.270 --> 06:37.220 if we want something to appear on screen, 103 06:37.490 --> 06:42.260 we have to give it a layout and we can use the automatic pack to do that. 104 06:42.620 --> 06:47.510 So now when I run this code, you can see I've now got a input field. Now, 105 06:47.510 --> 06:51.980 if I want to look at the options for my entry, 106 06:52.220 --> 06:56.930 I can simply go to this tk documentation, find my entry, 107 06:57.260 --> 06:58.010 click on it, 108 06:58.010 --> 07:02.780 and you can see I've got standard options and widget-specific options. Now, 109 07:02.810 --> 07:07.400 one of the things I want to change is the width. For example, 110 07:07.430 --> 07:12.430 I could change the width of this input by simply using the width keyword 111 07:13.940 --> 07:14.690 argument. 112 07:14.690 --> 07:19.690 And I can specify an integer to indicate the desired width of the entry window. 113 07:21.320 --> 07:25.640 So at the moment, if I think it's a little bit too wide, 114 07:26.000 --> 07:30.980 then let's try modifying our input so that has a slightly lower width. 115 07:31.310 --> 07:32.750 Let's change it to maybe 10 116 07:33.830 --> 07:37.430 and you can see it's now a lot smaller than before. Now 117 07:37.430 --> 07:41.900 what if I want to get hold of the value that came from that entry? 118 07:42.890 --> 07:45.740 Well, in that case, I have to use the get 119 07:46.130 --> 07:49.010 which basically just returns the entry's string. 120 07:49.430 --> 07:52.430 So I could say input.get 121 07:52.910 --> 07:57.910 and then this method is going to return the input as a string. 122 07:58.940 --> 08:01.550 So I could, for example, print it out. 123 08:02.210 --> 08:06.470 But unfortunately, the point when this line of code is run, 124 08:06.800 --> 08:10.490 there's actually no input inside this entry. 125 08:10.910 --> 08:13.700 So we would actually print absolutely nothing. 126 08:15.500 --> 08:17.060 Here's a challenge for you. 127 08:17.660 --> 08:21.350 Can you figure out how to get whatever is written in here 128 08:22.880 --> 08:25.820 to be the text in the label 129 08:26.210 --> 08:28.340 the moment when I click on this button? 130 08:29.090 --> 08:32.690 Given that I've typed something in here, when I click this button, 131 08:33.020 --> 08:37.250 I want that something to be displayed in the label instead of 'button got 132 08:37.250 --> 08:40.880 clicked.' Pause the video and see if you can complete this challenge. 133 08:43.280 --> 08:43.700 All right. 134 08:43.700 --> 08:48.700 So we know that the trigger for the button is the button_clicked function. 135 08:49.940 --> 08:54.770 So it's here where we're actually configuring our label. If instead, 136 08:54.800 --> 08:58.560 we're going to get hold of our input here and call input. 137 08:58.650 --> 09:01.830 get to get the new_text, well, 138 09:01.830 --> 09:06.540 then we can actually use this new text and populate the label. 139 09:06.990 --> 09:10.020 So we can say text = new_text. 140 09:10.650 --> 09:12.300 And now when I hit run, 141 09:12.480 --> 09:15.750 you can see that I can type whatever it is I want in here. 142 09:15.870 --> 09:17.580 And then when I click 'click me', 143 09:17.910 --> 09:21.780 it gets the text inside the entry and puts it in the label. 144 09:23.250 --> 09:28.250 This is how we would work with some of the most basic components of tkinter like 145 09:28.620 --> 09:30.750 label, button, entry, 146 09:30.900 --> 09:34.620 and we've also seen the pack method. Now, as you can see, 147 09:34.620 --> 09:37.890 they're all other things that you can do with tkinter. 148 09:38.400 --> 09:39.630 So in the next lesson, 149 09:39.660 --> 09:42.480 we're going to be working on top of what we've done so far 150 09:42.780 --> 09:46.800 and I want to show you some of the other widgets that you can work with and add 151 09:46.800 --> 09:48.120 to your tkinter program.