1
00:00:00,360 --> 00:00:05,360
In the last lesson, we saw how we could set a lot of the properties for the

2
00:00:06,300 --> 00:00:09,000
methods associated with Tkinter,

3
00:00:09,300 --> 00:00:13,440
or for initializing the components like our labels.

4
00:00:14,160 --> 00:00:15,750
Now in the documentation,

5
00:00:15,870 --> 00:00:19,770
they tell us that there's a number of ways that we can set these options.

6
00:00:20,190 --> 00:00:25,190
We can either do it when we initialize a new object or we can access the

7
00:00:25,860 --> 00:00:30,420
properties like as if they are keys in a dictionary and then setting the value.

8
00:00:31,020 --> 00:00:31,650
And finally,

9
00:00:31,650 --> 00:00:36,450
we can set multiple properties by using the config method and passing in the

10
00:00:36,450 --> 00:00:38,970
value for each of the things that we want to change,

11
00:00:39,690 --> 00:00:43,590
I recommend taking a look at the Tcl tk documentation

12
00:00:43,950 --> 00:00:47,460
which lists all of the options. Like for example, here,

13
00:00:47,460 --> 00:00:52,440
I've got my label chosen and there are standard options like background color,

14
00:00:52,470 --> 00:00:56,400
or text. And there are widget-specific options,

15
00:00:56,430 --> 00:01:01,050
so specific to the label, you can change its height, you can change its width.

16
00:01:01,740 --> 00:01:04,680
Coming back to my label in my main.py,

17
00:01:05,129 --> 00:01:08,760
if I wanted to change my label's property, so for example,

18
00:01:08,760 --> 00:01:13,500
if I want to change the text that's inside and I want to make it different from

19
00:01:13,500 --> 00:01:15,570
the initial text that it displays,

20
00:01:15,840 --> 00:01:20,280
then I can do simply this by changing it as if it were a dictionary.

21
00:01:20,880 --> 00:01:24,390
And I can set that to the new value, so new text.

22
00:01:25,740 --> 00:01:30,740
Now I could also do it by doing my_label.config and then passing in the

23
00:01:31,830 --> 00:01:36,830
text as a keyword argument. Either way

24
00:01:37,230 --> 00:01:40,440
when I run this main.py, remember previously,

25
00:01:40,440 --> 00:01:41,850
we were running our playground.

26
00:01:41,850 --> 00:01:46,850
So go back to run and then click this and then change it to our main.py.

27
00:01:48,720 --> 00:01:53,720
And now you should see the new text show up instead of the original text,

28
00:01:53,760 --> 00:01:55,110
which is I am a label.

29
00:01:55,800 --> 00:02:00,800
So this is how we configure and change or update the properties of a particular

30
00:02:01,830 --> 00:02:03,360
component that we've created.

31
00:02:04,860 --> 00:02:08,759
In addition to labels, we can also create buttons.

32
00:02:09,180 --> 00:02:13,920
Let's create a button, which again, is going to come from the Tkinter module

33
00:02:14,220 --> 00:02:17,610
and it's going to be the button class from that module

34
00:02:17,670 --> 00:02:20,220
as you can see right here. Now,

35
00:02:20,280 --> 00:02:22,380
all of the components that we're going to be using

36
00:02:22,410 --> 00:02:25,290
come from this class. Very often

37
00:02:25,320 --> 00:02:30,320
you'll see people instead of importing Tkinter, they'll say from tkinter

38
00:02:30,780 --> 00:02:31,620
import,

39
00:02:31,770 --> 00:02:36,270
and then the asterisk to denote import every single class.

40
00:02:36,900 --> 00:02:40,590
This means that we can basically get rid of all the module mentions

41
00:02:40,590 --> 00:02:43,170
and we can just initialize a window as tk,

42
00:02:43,500 --> 00:02:48,500
our label as a label and our button as simply button, like this. Saves a little

43
00:02:50,400 --> 00:02:54,330
bit of typing, depends on how many of the classes you're gonna use.

44
00:02:54,330 --> 00:02:55,500
If you're just going to use one,

45
00:02:55,800 --> 00:02:58,980
I recommend keeping the module so that you know, where it comes from.

46
00:02:59,230 --> 00:03:00,940
But if you're going to use loads of them

47
00:03:00,970 --> 00:03:04,750
like we are here, then it does make it a lot quicker to type.

48
00:03:05,410 --> 00:03:07,660
So let's create our button. And again,

49
00:03:07,660 --> 00:03:12,660
it has a whole bunch of optional keyword arguments. And some of those are

50
00:03:12,910 --> 00:03:14,440
standard. So for example,

51
00:03:14,440 --> 00:03:19,030
we can change the button text in the same way that we changed the label text.

52
00:03:19,450 --> 00:03:24,450
So let's make it to say click me. And remember that in order to make anything appear

53
00:03:25,240 --> 00:03:27,700
on screen, it needs to have some sort of layout.

54
00:03:28,090 --> 00:03:31,540
So let's call pack again to get it to be packed onto the screen.

55
00:03:32,260 --> 00:03:34,360
So now if I run this code as it is,

56
00:03:34,690 --> 00:03:39,690
you can see that my button has been placed in the middle of the screen and my

57
00:03:39,940 --> 00:03:41,650
label is packed to the left.

58
00:03:43,120 --> 00:03:45,400
Let's go ahead and get rid of that left

59
00:03:45,430 --> 00:03:49,780
so that it actually goes in order so that the first thing gets created,

60
00:03:49,810 --> 00:03:53,830
it gets put on screen first and then the next thing is the button

61
00:03:53,890 --> 00:03:56,740
and then this is all centered by default.

62
00:03:58,150 --> 00:04:02,110
The next obvious question is how can we get this button to actually work?

63
00:04:02,290 --> 00:04:07,240
Because at the moment clicking on it does absolutely nothing. As you remember

64
00:04:07,270 --> 00:04:09,550
when we used our turtle module,

65
00:04:09,760 --> 00:04:14,650
we could have an event listener. So we can create some sort of a function,

66
00:04:14,830 --> 00:04:17,380
let's call it say button_clicked.

67
00:04:18,730 --> 00:04:22,480
And then this function could do something say, for example,

68
00:04:22,750 --> 00:04:24,430
I got clicked.

69
00:04:25,300 --> 00:04:29,410
And when this button detects an event,

70
00:04:29,470 --> 00:04:33,430
say a click event, then it could call this function.

71
00:04:33,910 --> 00:04:38,470
So in the tkinter world, there is a property called command,

72
00:04:38,890 --> 00:04:43,420
which you can set to equal the name of a function. So remember,

73
00:04:43,720 --> 00:04:47,470
it's the name of the function, not calling the function.

74
00:04:47,620 --> 00:04:50,920
So we don't actually need the parentheses at the end.

75
00:04:51,670 --> 00:04:56,500
Now when we run our code, when this button detects a command

76
00:04:56,500 --> 00:04:58,480
which is basically a click event,

77
00:04:58,750 --> 00:05:03,010
then it's going to trigger this method and it's going to print this hopefully

78
00:05:03,010 --> 00:05:07,450
into the console. So let's hit run. Now,

79
00:05:07,450 --> 00:05:11,650
I'm going to click on this button and you can see it says I got clicked and it

80
00:05:11,650 --> 00:05:13,210
does that every time I click on it.

81
00:05:14,650 --> 00:05:16,840
So here's a challenge for you.

82
00:05:17,530 --> 00:05:19,900
How can you make the label,

83
00:05:19,930 --> 00:05:24,370
my_label, instead of reading new text, for it to say

84
00:05:24,400 --> 00:05:27,910
button got clicked when I click this button?

85
00:05:28,480 --> 00:05:32,620
So this button click should now change the text. Pause the video,

86
00:05:32,950 --> 00:05:35,950
give that a go. All right.

87
00:05:35,950 --> 00:05:40,950
So we know that we can change our label's text by using either of these methods.

88
00:05:41,410 --> 00:05:45,100
So you can basically pick one of these and add it to this function.

89
00:05:45,310 --> 00:05:46,540
So I'm going to use the

90
00:05:46,570 --> 00:05:51,570
my_label.config just because it kind of makes a little bit more sense when I

91
00:05:52,540 --> 00:05:53,650
read that line of code.

92
00:05:53,830 --> 00:05:57,860
So I'm going to configure the text property to read button

93
00:05:58,070 --> 00:05:59,180
got clicked.

94
00:06:01,580 --> 00:06:03,410
And now when I hit run,

95
00:06:04,040 --> 00:06:08,300
what you'll see is when I click this button, it's going to change the text.

96
00:06:10,010 --> 00:06:13,010
So we're now getting a little bit more interactivity.

97
00:06:13,670 --> 00:06:17,330
The next thing I want to show you is even more interactivity.

98
00:06:17,750 --> 00:06:21,260
I want to show you a component called the entry component,

99
00:06:21,440 --> 00:06:24,980
and this is basically just a input effectively.

100
00:06:25,610 --> 00:06:28,460
So let's create a new object which I'll call input,

101
00:06:28,820 --> 00:06:31,280
and it's created from the entry class

102
00:06:31,310 --> 00:06:35,210
which comes from our tkinter module. Now again,

103
00:06:35,270 --> 00:06:37,220
if we want something to appear on screen,

104
00:06:37,490 --> 00:06:42,260
we have to give it a layout and we can use the automatic pack to do that.

105
00:06:42,620 --> 00:06:47,510
So now when I run this code, you can see I've now got a input field. Now,

106
00:06:47,510 --> 00:06:51,980
if I want to look at the options for my entry,

107
00:06:52,220 --> 00:06:56,930
I can simply go to this tk documentation, find my entry,

108
00:06:57,260 --> 00:06:58,010
click on it,

109
00:06:58,010 --> 00:07:02,780
and you can see I've got standard options and widget-specific options. Now,

110
00:07:02,810 --> 00:07:07,400
one of the things I want to change is the width. For example,

111
00:07:07,430 --> 00:07:12,430
I could change the width of this input by simply using the width keyword

112
00:07:13,940 --> 00:07:14,690
argument.

113
00:07:14,690 --> 00:07:19,690
And I can specify an integer to indicate the desired width of the entry window.

114
00:07:21,320 --> 00:07:25,640
So at the moment, if I think it's a little bit too wide,

115
00:07:26,000 --> 00:07:30,980
then let's try modifying our input so that has a slightly lower width.

116
00:07:31,310 --> 00:07:32,750
Let's change it to maybe 10

117
00:07:33,830 --> 00:07:37,430
and you can see it's now a lot smaller than before. Now

118
00:07:37,430 --> 00:07:41,900
what if I want to get hold of the value that came from that entry?

119
00:07:42,890 --> 00:07:45,740
Well, in that case, I have to use the get

120
00:07:46,130 --> 00:07:49,010
which basically just returns the entry's string.

121
00:07:49,430 --> 00:07:52,430
So I could say input.get

122
00:07:52,910 --> 00:07:57,910
and then this method is going to return the input as a string.

123
00:07:58,940 --> 00:08:01,550
So I could, for example, print it out.

124
00:08:02,210 --> 00:08:06,470
But unfortunately, the point when this line of code is run,

125
00:08:06,800 --> 00:08:10,490
there's actually no input inside this entry.

126
00:08:10,910 --> 00:08:13,700
So we would actually print absolutely nothing.

127
00:08:15,500 --> 00:08:17,060
Here's a challenge for you.

128
00:08:17,660 --> 00:08:21,350
Can you figure out how to get whatever is written in here

129
00:08:22,880 --> 00:08:25,820
to be the text in the label

130
00:08:26,210 --> 00:08:28,340
the moment when I click on this button?

131
00:08:29,090 --> 00:08:32,690
Given that I've typed something in here, when I click this button,

132
00:08:33,020 --> 00:08:37,250
I want that something to be displayed in the label instead of 'button got

133
00:08:37,250 --> 00:08:40,880
clicked.' Pause the video and see if you can complete this challenge.

134
00:08:43,280 --> 00:08:43,700
All right.

135
00:08:43,700 --> 00:08:48,700
So we know that the trigger for the button is the button_clicked function.

136
00:08:49,940 --> 00:08:54,770
So it's here where we're actually configuring our label. If instead,

137
00:08:54,800 --> 00:08:58,560
we're going to get hold of our input here and call input.

138
00:08:58,650 --> 00:09:01,830
get to get the new_text, well,

139
00:09:01,830 --> 00:09:06,540
then we can actually use this new text and populate the label.

140
00:09:06,990 --> 00:09:10,020
So we can say text = new_text.

141
00:09:10,650 --> 00:09:12,300
And now when I hit run,

142
00:09:12,480 --> 00:09:15,750
you can see that I can type whatever it is I want in here.

143
00:09:15,870 --> 00:09:17,580
And then when I click 'click me',

144
00:09:17,910 --> 00:09:21,780
it gets the text inside the entry and puts it in the label.

145
00:09:23,250 --> 00:09:28,250
This is how we would work with some of the most basic components of tkinter like

146
00:09:28,620 --> 00:09:30,750
label, button, entry,

147
00:09:30,900 --> 00:09:34,620
and we've also seen the pack method. Now, as you can see,

148
00:09:34,620 --> 00:09:37,890
they're all other things that you can do with tkinter.

149
00:09:38,400 --> 00:09:39,630
So in the next lesson,

150
00:09:39,660 --> 00:09:42,480
we're going to be working on top of what we've done so far

151
00:09:42,780 --> 00:09:46,800
and I want to show you some of the other widgets that you can work with and add

152
00:09:46,800 --> 00:09:48,120
to your tkinter program.