WEBVTT 1 00:00:00.200 --> 00:00:01.820 Hi guys and welcome back. 2 00:00:01.820 --> 00:00:04.410 In this video we're going to take our Hello World app 3 00:00:04.410 --> 00:00:06.740 a little further and we're also going to add 4 00:00:06.740 --> 00:00:08.570 entry input fields. 5 00:00:08.570 --> 00:00:10.840 Input fields will allow us to retrieve data 6 00:00:10.840 --> 00:00:13.270 from users, let them input some stuff 7 00:00:13.270 --> 00:00:16.920 that we can then use within our functions. 8 00:00:16.920 --> 00:00:18.120 Let's get started. 9 00:00:18.120 --> 00:00:20.930 First of all we're going to create our label 10 00:00:20.930 --> 00:00:22.760 and our input field. 11 00:00:22.760 --> 00:00:26.910 So we will say name label is ttk.label 12 00:00:26.910 --> 00:00:30.491 and we will pass in the root and some text. 13 00:00:30.491 --> 00:00:33.410 We will also then pack it into the container. 14 00:00:33.410 --> 00:00:35.410 We will say side equal left 15 00:00:35.410 --> 00:00:39.060 and we're gonna say pad X equal zero, 10. 16 00:00:39.060 --> 00:00:41.890 What that does is it adds a little bit of spacing 17 00:00:41.890 --> 00:00:44.700 on the right side of the label. 18 00:00:44.700 --> 00:00:46.640 This one being the left side of the label, 19 00:00:46.640 --> 00:00:48.350 and this one being the right side. 20 00:00:48.350 --> 00:00:51.060 So you can imagine that it is adding 10 pixels 21 00:00:51.060 --> 00:00:53.380 to the right of the label, so that when we add 22 00:00:53.380 --> 00:00:56.423 another item beside it, it will be slightly separated. 23 00:00:58.030 --> 00:01:00.150 Which it is going to be the name entry. 24 00:01:00.150 --> 00:01:02.270 That is the item that we're going to add beside it 25 00:01:02.270 --> 00:01:05.150 and that is ttk.entry. 26 00:01:05.150 --> 00:01:06.990 We're also going to put in the root. 27 00:01:06.990 --> 00:01:09.120 We're gonna define the width 28 00:01:09.120 --> 00:01:12.310 and we're also gonna say where the contents 29 00:01:12.310 --> 00:01:14.720 of this field should go. 30 00:01:14.720 --> 00:01:17.360 So whenever we type anything into this field, 31 00:01:17.360 --> 00:01:21.120 we want to be able to then use what's typed inside the field 32 00:01:21.120 --> 00:01:22.330 at any point. 33 00:01:22.330 --> 00:01:24.960 To do that we will say text variable 34 00:01:24.960 --> 00:01:27.270 and we're gonna say user name. 35 00:01:27.270 --> 00:01:31.060 Now of course, we do have to define the user name variable 36 00:01:31.060 --> 00:01:32.906 which we don't have yet. 37 00:01:32.906 --> 00:01:35.840 Here is where tkinter enter differs 38 00:01:35.840 --> 00:01:38.550 from traditional types of code. 39 00:01:38.550 --> 00:01:42.398 In order to be able to get the contents of this entry field, 40 00:01:42.398 --> 00:01:47.398 we have to define a place in Python were this field 41 00:01:47.870 --> 00:01:49.250 can write to. 42 00:01:49.250 --> 00:01:53.717 And that is going to be called the tk.StringVar. 43 00:01:55.215 --> 00:01:59.480 A StringVar is just an object that is used to track 44 00:01:59.480 --> 00:02:02.570 the contents of these entry widgets. 45 00:02:02.570 --> 00:02:04.660 Essentially it contains a string, 46 00:02:04.660 --> 00:02:07.920 and that string will always be whatever is currently typed 47 00:02:07.920 --> 00:02:09.920 in this entry. 48 00:02:09.920 --> 00:02:13.840 Next up, we're also going to pack it buy saying 49 00:02:13.840 --> 00:02:16.040 side equals left, 50 00:02:16.040 --> 00:02:19.460 and we're gonna say name entry.focus. 51 00:02:19.460 --> 00:02:23.030 Focus is what you call on a particular component 52 00:02:23.030 --> 00:02:26.423 in tkinter, so that it appears focused on the window. 53 00:02:27.290 --> 00:02:30.690 Press play here and I'll show you what I mean by that. 54 00:02:30.690 --> 00:02:34.040 You can see now that the field has focus. 55 00:02:34.040 --> 00:02:36.114 It has a blue line around it, and you can immediately 56 00:02:36.114 --> 00:02:37.563 type on it. 57 00:02:39.110 --> 00:02:42.030 Now if we were able to somehow inspect the contents 58 00:02:42.030 --> 00:02:45.260 of the user name variable, you would see 59 00:02:45.260 --> 00:02:49.810 that it contains the string Jose amongst other things. 60 00:02:49.810 --> 00:02:53.923 Let's close this for now, and I will create a greet button. 61 00:03:03.160 --> 00:03:05.940 We have created now our button as well, 62 00:03:05.940 --> 00:03:08.190 and that is just as we had before, 63 00:03:08.190 --> 00:03:10.150 something in the root, with the text greet, 64 00:03:10.150 --> 00:03:12.190 and the command is this greet function up here 65 00:03:12.190 --> 00:03:13.390 that is currently empty. 66 00:03:14.440 --> 00:03:16.000 So to fill in this function, 67 00:03:16.000 --> 00:03:17.503 we're gonna say print. 68 00:03:19.620 --> 00:03:23.280 And in here we're gonna say hello, user name, 69 00:03:23.280 --> 00:03:27.870 which is this variable here, dot get. 70 00:03:27.870 --> 00:03:30.550 Dot get is a method that we call on 71 00:03:30.550 --> 00:03:34.200 these StringVar objects to retrieve the contents 72 00:03:34.200 --> 00:03:36.893 or the string contents of the variable. 73 00:03:40.400 --> 00:03:42.113 So let's run this. 74 00:03:43.900 --> 00:03:46.970 Now because all our components have been packed on the left, 75 00:03:46.970 --> 00:03:49.730 they all appear side by side. 76 00:03:49.730 --> 00:03:51.990 This is how side equal left works 77 00:03:51.990 --> 00:03:53.930 and we're gonna learn more about packing 78 00:03:53.930 --> 00:03:55.230 in the next video. 79 00:03:55.230 --> 00:03:58.880 So I'll type Jose here and then type and click greet 80 00:03:58.880 --> 00:04:01.713 and you can see that Hello, Jose is printed out. 81 00:04:03.160 --> 00:04:05.679 Now in order to make a little bit more of this, 82 00:04:05.679 --> 00:04:08.010 instead of user name.get, 83 00:04:08.010 --> 00:04:11.870 we can type user name.get or world. 84 00:04:11.870 --> 00:04:14.090 And what that'll do is if user name.get 85 00:04:14.090 --> 00:04:16.710 does not return a value or rather it returns 86 00:04:16.710 --> 00:04:20.590 an empty string, we're gonna type Hello, World instead. 87 00:04:20.590 --> 00:04:22.733 So you can see that Hello, World gets printed out 88 00:04:22.733 --> 00:04:24.263 at the bottom left. 89 00:04:25.780 --> 00:04:28.050 So we've learned a couple more things in this video. 90 00:04:28.050 --> 00:04:30.230 We have learned how to create labels 91 00:04:30.230 --> 00:04:34.970 or just static texts, as well as input fields, or entries 92 00:04:34.970 --> 00:04:37.450 in our tkinter applications. 93 00:04:37.450 --> 00:04:39.530 And we've also learned how to store the contents 94 00:04:39.530 --> 00:04:42.160 of those, inside our own variables. 95 00:04:42.160 --> 00:04:45.490 And finally we have learned about pad X and also 96 00:04:45.490 --> 00:04:48.060 it's counterpart which exists, pad Y, 97 00:04:48.060 --> 00:04:51.800 to add extra spacing around any component. 98 00:04:51.800 --> 00:04:54.050 I'll say at this point that pad X can be used 99 00:04:54.050 --> 00:04:56.160 on any component whenever you use pack. 100 00:04:56.160 --> 00:04:58.150 So you can put it here, or here, 101 00:04:58.150 --> 00:05:01.068 and that would also add spacing around these components 102 00:05:01.068 --> 00:05:02.760 if you want. 103 00:05:02.760 --> 00:05:06.320 In pad X, the zero is the left, and the 10 is the right. 104 00:05:06.320 --> 00:05:09.080 And in pad Y, the first one is the top 105 00:05:09.080 --> 00:05:11.233 and the second one is the bottom. 106 00:05:12.390 --> 00:05:13.880 So thank you for joining me in this video. 107 00:05:13.880 --> 00:05:14.980 Hope you've learned something. 108 00:05:14.980 --> 00:05:17.407 And in the next video, we're going to look at pack. 109 00:05:17.407 --> 00:05:18.333 See you there.