0
1
00:00:05,161 --> 00:00:06,911
[Volkan] Hello again in previous lecture what we did? We created our status bar right
1

2
00:00:09,689 --> 00:00:12,404
<v ->Let me run our application first.</v>
2

3
00:00:12,404 --> 00:00:15,917
And here our status bar is here,
3

4
00:00:15,917 --> 00:00:18,743
so in this lecture, what I want to do? I want to create
4

5
00:00:18,743 --> 00:00:22,790
our toolbar here right? Even we can run our original
5

6
00:00:22,790 --> 00:00:26,707
application and see how it looks, our tool bar.
6

7
00:00:27,749 --> 00:00:31,499
<v ->So its here and now our application is here</v>
7

8
00:00:34,348 --> 00:00:36,692
sorry, original application is here.
8

9
00:00:36,692 --> 00:00:37,623
<v ->So what we're going to do?</v>
9

10
00:00:37,623 --> 00:00:39,642
We're going to create this toolbar right?
10

11
00:00:39,642 --> 00:00:42,482
And if you remember created d a toolbar,
11

12
00:00:42,482 --> 00:00:44,130
for our applications.
12

13
00:00:44,130 --> 00:00:47,897
<v ->What we're going to use for to create the toolbar,</v>
13

14
00:00:47,897 --> 00:00:50,327
we need to use another label right?
14

15
00:00:50,327 --> 00:00:54,900
Like to create a Status bar, to do that what I need  to do.
15

16
00:00:54,900 --> 00:00:59,226
<v ->Here I will create another class and I will say class,</v>
16

17
00:00:59,226 --> 00:01:03,175
will be  toolbar right? My class name will be toolbar,
17

18
00:01:03,175 --> 00:01:06,008
and here, sorry it will be, "class".
18

19
00:01:06,870 --> 00:01:09,763
<v ->Here what I want to do? I want to inherit my toolbar</v>
19

20
00:01:09,763 --> 00:01:14,709
from a label okay? Because if you want to create a toolbar
20

21
00:01:14,709 --> 00:01:16,630
you need to use a label right?
21

22
00:01:16,630 --> 00:01:19,486
That's why you need to inherit it from a label.
22

23
00:01:19,486 --> 00:01:23,192
After, what I need to do here, here it will be
23

24
00:01:23,192 --> 00:01:27,455
very similar so can "copy and paste" these guys okay.
24

25
00:01:27,455 --> 00:01:29,372
<v ->And until here, okay.</v>
25

26
00:01:35,235 --> 00:01:36,390
So what I want to do now
26

27
00:01:36,390 --> 00:01:39,952
I want to use Pack geometry manger or of course we can
27

28
00:01:39,952 --> 00:01:42,119
use another one, but for this application,
28

29
00:01:42,119 --> 00:01:43,385
we will use Pack. Okay?
29

30
00:01:43,385 --> 00:01:47,158
<v ->And here I will say "self.pack" okay? And this time</v>
30

31
00:01:47,158 --> 00:01:51,825
I need to say "side equals top" right? And after here
31

32
00:01:53,236 --> 00:01:57,889
what I want to do? I need to say "fill =x" okay?
32

33
00:01:57,889 --> 00:02:02,491
<v ->And here, what I need to do? I need to come here and say:</v>
33

34
00:02:02,491 --> 00:02:07,074
"self dot, toolbar" this  is my instance name and it equals my
34

35
00:02:08,900 --> 00:02:12,993
toolbar class. Now if I run my application,
35

36
00:02:12,993 --> 00:02:17,120
I can see my toolbar but I will show you a mistake now.
36

37
00:02:17,120 --> 00:02:18,120
If I run it,
37

38
00:02:26,419 --> 00:02:29,936
let me run it again, so parent it says. So here we need
38

39
00:02:29,936 --> 00:02:34,186
to use "self" parameter, sorry. If I run it again.
39

40
00:02:36,284 --> 00:02:40,617
<v ->Now you see, our toolbar is here you see It is top</v>
40

41
00:02:41,573 --> 00:02:43,208
of to our Status Bar. Why is it like that?
41

42
00:02:43,208 --> 00:02:47,083
Because here we are calling our toolbar here
42

43
00:02:47,083 --> 00:02:50,279
after  our Status Bar. We say okay "top" right?
43

44
00:02:50,279 --> 00:02:54,655
For the site equals top, but we call it after Status bar
44

45
00:02:54,655 --> 00:02:58,993
that's why we see it there and here what I need to do?
45

46
00:02:58,993 --> 00:03:02,128
I need to call it after my main menu okay?
46

47
00:03:02,128 --> 00:03:04,628
<v ->Now if I run my application.</v>
47

48
00:03:08,909 --> 00:03:11,195
You see now our toolbar place is now correct.
48

49
00:03:11,195 --> 00:03:15,447
what I need to do now? I need to create my combo boxes
49

50
00:03:15,447 --> 00:03:17,126
and other buttons right for my toolbar.
50

51
00:03:17,126 --> 00:03:20,269
<v ->To do that what I need to do here? I need to say,</v>
51

52
00:03:20,269 --> 00:03:23,352
by the way let's use separator okay.
52

53
00:03:24,318 --> 00:03:28,556
This is for Combo box. And here I say
53

54
00:03:28,556 --> 00:03:32,341
"Self dot, combo box font" the first one is
54

55
00:03:32,341 --> 00:03:34,624
"Font Combobox" okay. And I will say:
55

56
00:03:34,624 --> 00:03:38,374
"ttk dot combobox" and here I need to say:
56

57
00:03:43,177 --> 00:03:47,558
"Self" and after what I need to use, I need to use
57

58
00:03:47,558 --> 00:03:49,810
other "Combo box" so and here I say:
58

59
00:03:49,810 --> 00:03:54,393
"Self.cbFontSize" okay? Is equal to "ttk.Combobox" again
59

60
00:04:02,458 --> 00:04:05,703
and again "self" right, after that what I need to do?
60

61
00:04:05,703 --> 00:04:10,370
Here I need to say "Self.cbFont.pack" here I will use:
61

62
00:04:16,554 --> 00:04:20,471
"side equals left" okay and I also want to use:
62

63
00:04:22,731 --> 00:04:26,898
"pad" so I will use "padx", for left side 5 pixels
63

64
00:04:28,387 --> 00:04:30,877
for right side I will use 10 pixels okay?
64

65
00:04:30,877 --> 00:04:34,501
<v ->And also let's use (...)</v>
65

66
00:04:34,501 --> 00:04:38,751
For "self.cbFontsize.Pack" now I will simply  say
66

67
00:04:46,885 --> 00:04:51,885
"Site equals Left" okay? Now if I run my application
67

68
00:04:52,035 --> 00:04:56,035
I can see these "Comboboxes" okay? What is wrong here?
68

69
00:04:57,921 --> 00:04:59,830
"Side equals pad" so It will be
69

70
00:04:59,830 --> 00:05:02,330
"padx equals 5" and "10" Okay?
70

71
00:05:04,757 --> 00:05:09,090
<v ->Now if I run my application, as you see now our</v>
71

72
00:05:10,723 --> 00:05:13,381
"comboboxes"  here of course they're totally empty.
72

73
00:05:13,381 --> 00:05:16,158
<v ->We need to fill them, right? But before that</v>
73

74
00:05:16,158 --> 00:05:18,663
what I want to do? I will do it later and I want to create
74

75
00:05:18,663 --> 00:05:23,304
my other buttons here okay? The first one is a big bold icon
75

76
00:05:23,304 --> 00:05:27,887
so here I will use a separator here say:"Self.boldIcon"
76

77
00:05:34,730 --> 00:05:38,805
I will use icons for these buttons okay? "PhotoImage"
77

78
00:05:38,805 --> 00:05:43,055
and "File equals" I will say "Icons and bold.png"
78

79
00:05:51,885 --> 00:05:56,552
and after here what I will say? "btnBold" equals button
79

80
00:06:01,645 --> 00:06:05,728
and here I will say "Self" and 2nd parameter will be
80

81
00:06:06,754 --> 00:06:10,921
"image equals Self.boldIcon" and other one will be
81

82
00:06:18,844 --> 00:06:22,002
of course we can use, I'm not going to create
82

83
00:06:22,002 --> 00:06:25,439
"command property" for this button
83

84
00:06:25,439 --> 00:06:30,022
and also "buttons and for comboboxes". Okay it will be later.
84

85
00:06:32,613 --> 00:06:37,069
<v ->what I need to do here? I need to use geometry manager</v>
85

86
00:06:37,069 --> 00:06:39,744
To place my widgets. So I will use "Pack" again
86

87
00:06:39,744 --> 00:06:43,064
and "side" is going to be "left" okay?
87

88
00:06:43,064 --> 00:06:46,331
And also I want to use pad for x value okay,
88

89
00:06:46,331 --> 00:06:50,331
And its going to be 5. Now lets create other one
89

90
00:06:51,569 --> 00:06:56,319
so here even we can copy these guys. Let me paste it here.
90

91
00:06:57,677 --> 00:07:01,344
<v ->now I will copy this guy and paste it here.</v>
91

92
00:07:05,408 --> 00:07:09,075
The second button will be, Italic icon okay?
92

93
00:07:10,548 --> 00:07:14,048
"Italic" I will say "Icon". This line will be
93

94
00:07:16,562 --> 00:07:19,979
"Italic.Png" and btnBold" not it will be
94

95
00:07:21,592 --> 00:07:24,342
"btnItalic" okay and that one is
95

96
00:07:27,859 --> 00:07:32,859
going to be "Italic" again and that one "imagine" will be
96

97
00:07:33,134 --> 00:07:37,467
"Self.italicIcon" right? And there is something else
97

98
00:07:43,337 --> 00:07:46,507
but its fine even I can copy this guy and paste it here.
98

99
00:07:46,507 --> 00:07:50,674
<v ->After that what I need to create an underline button,</v>
99

100
00:07:52,784 --> 00:07:55,861
I need to underline my text. But before I want
100

101
00:07:55,861 --> 00:08:00,449
to run my application and see. As you see now its here
101

102
00:08:00,449 --> 00:08:04,297
so this one and this one is here, so what's wrong here?
102

103
00:08:04,297 --> 00:08:08,047
We have, so that one is, because we copied it
103

104
00:08:11,357 --> 00:08:13,541
but didn't use it. Right? So I need to say
104

105
00:08:13,541 --> 00:08:18,541
for the "Italic Icon" I need to say "underline Icon" okay?
105

106
00:08:18,688 --> 00:08:22,536
And that one is going to be "self.underline"
106

107
00:08:22,536 --> 00:08:26,036
and this one will also be "underline.png".
107

108
00:08:30,614 --> 00:08:34,697
Its here, our png file and this one will be "btn"
108

109
00:08:36,221 --> 00:08:39,638
so this is also wrong, this will be "btn"
109

110
00:08:43,745 --> 00:08:45,960
and this one is going to be"btnUnderline".
110

111
00:08:45,960 --> 00:08:47,710
"btnUnderline" okay?
111

112
00:08:55,925 --> 00:08:59,410
<v ->Now I will copy this name and paste it here.</v>
112

113
00:08:59,410 --> 00:09:04,160
Now I think it will be fine. If I run my application now.
113

114
00:09:06,024 --> 00:09:09,907
<v ->As you see now it's Bold, Italic and Underline  here.</v>
114

115
00:09:09,907 --> 00:09:14,488
So what is other one? The next one will font color and Icon
115

116
00:09:14,488 --> 00:09:16,997
okay? Font color button actually.
116

117
00:09:16,997 --> 00:09:20,772
So I will copy these guys and paste them here.
117

118
00:09:20,772 --> 00:09:24,198
Here it will be, font color icon so I'II say
118

119
00:09:24,198 --> 00:09:29,198
"fontcolorIcon" okay? And this is "btnFontColor"
119

120
00:09:31,993 --> 00:09:36,243
and this one is going to be "btnfontColor" and that one
120

121
00:09:39,894 --> 00:09:44,477
will be this one and also for the icon what I will use,
121

122
00:09:47,862 --> 00:09:51,112
"color.png" okay? "color.png" that one.
122

123
00:09:55,145 --> 00:09:57,454
We are going to use this icon, Okay?
123

124
00:09:57,454 --> 00:10:02,454
<v ->And this also fine, so let me copy this guys again</v>
124

125
00:10:02,491 --> 00:10:06,457
and paste it here. And the other one is alignment buttons
125

126
00:10:06,457 --> 00:10:10,706
and the first one will be "left, right" oh sorry
126

127
00:10:10,706 --> 00:10:15,206
"left, centre and right" and here after colors, right?
127

128
00:10:16,725 --> 00:10:20,642
"self.AlignLeftIcon" so this one is going to be
128

129
00:10:28,704 --> 00:10:30,454
"alignLeft.png" okay?
129

130
00:10:35,631 --> 00:10:39,631
And for the name I will say "btnAlignLeft" okay?
130

131
00:10:43,687 --> 00:10:46,687
For this one copy and paste it here.
131

132
00:10:50,951 --> 00:10:55,760
I am going to use here "alignLeftIcon" and paste it here
132

133
00:10:55,760 --> 00:10:58,427
and if I run my application now.
133

134
00:11:01,347 --> 00:11:05,322
As you see now, color is here, Left centre and right also.
134

135
00:11:05,322 --> 00:11:07,945
You have two more buttons okay?
135

136
00:11:07,945 --> 00:11:12,362
And here I will copy this guy again and paste it here
136

137
00:11:15,999 --> 00:11:20,666
and let's paste it again for "centre Align Centre Icon".
137

138
00:11:25,749 --> 00:11:29,749
And this one is going to be here and this one is
138

139
00:11:30,683 --> 00:11:35,350
"Align Center.png"."Align Center.png" is here by the way
139

140
00:11:36,840 --> 00:11:38,840
"Center,left and right".
140

141
00:11:41,423 --> 00:11:44,551
left this one, centre and the other one will right.
141

142
00:11:44,551 --> 00:11:49,218
<v ->So "Align, centre" is fine. "btn, Align, Centre" okay?</v>
142

143
00:11:53,390 --> 00:11:58,092
<v ->I will copy this name and paste it here. Is also fine.</v>
143

144
00:11:58,092 --> 00:12:01,925
<v ->The next one is "align, right , icon" right?</v>
144

145
00:12:06,929 --> 00:12:11,179
And here copy and paste it here. And "align" right?
145

146
00:12:15,808 --> 00:12:18,141
And here "btn, Align" right.
146

147
00:12:21,592 --> 00:12:26,122
<v ->also copy this name and paste it here. And fine now.</v>
147

148
00:12:26,122 --> 00:12:29,519
we finished all the buttons, by the way.
148

149
00:12:29,519 --> 00:12:33,046
Let me run the application and see.
149

150
00:12:33,046 --> 00:12:36,911
Yep its fine now you see "left, right" and also "centre"
150

151
00:12:36,911 --> 00:12:40,510
is also here. So what is next? What we can do
151

152
00:12:40,510 --> 00:12:43,438
here we need to fill this "comboboxes" right?
152

153
00:12:43,438 --> 00:12:48,271
The first one what I need to do, This is the for font 
153

154
00:12:50,310 --> 00:12:53,316
families, the second one is the for font  size. Okay?
154

155
00:12:53,316 --> 00:12:57,207
To create my font families, what I need to do.
155

156
00:12:57,207 --> 00:12:59,906
By the way let's use another separator.
156

157
00:12:59,906 --> 00:13:02,073
And we finish our buttons.
157

158
00:13:03,237 --> 00:13:07,904
Here I will create a font variable for the families fonts is going to be "font.families" but here why its not working?
158

159
00:13:15,868 --> 00:13:19,626
because we need to import something here. Okay?
159

160
00:13:19,626 --> 00:13:23,876
I will go to the import. What I need to import?
160

161
00:13:25,082 --> 00:13:28,958
I need to import something. And I will say
161

162
00:13:28,958 --> 00:13:33,291
from "Tkinter import font" okay? After what I need to do?
162

163
00:13:40,006 --> 00:13:42,172
I need to come back here, right?
163

164
00:13:42,172 --> 00:13:45,505
And here, where is it? It is here. Okay.
164

165
00:13:53,816 --> 00:13:57,640
<v ->I will say here now "fonts or families" we can say, okay?</v>
165

166
00:13:57,640 --> 00:14:00,223
Let's say "font.families" okay?
166

167
00:14:04,255 --> 00:14:08,633
This guy will create a list for me, let me print it out.
167

168
00:14:08,633 --> 00:14:13,133
<v ->"Print fonts" okay? And if I run my application now,</v>
168

169
00:14:17,856 --> 00:14:21,171
I don't need this one, I need, you see its here.
169

170
00:14:21,171 --> 00:14:23,404
So this function creates for me
170

171
00:14:23,404 --> 00:14:27,315
the system fonts for created tuple list,
171

172
00:14:27,315 --> 00:14:31,219
the tuple list of my system fonts, right.
172

173
00:14:31,219 --> 00:14:34,626
As you see all of them are here.By the way All the fonts?
173

174
00:14:34,626 --> 00:14:36,738
They're all from my computer. Okay?
174

175
00:14:36,738 --> 00:14:40,806
It depends on your computer. And here what I need to do?
175

176
00:14:40,806 --> 00:14:44,889
I will come here and use, let me remove this one,
176

177
00:14:46,802 --> 00:14:51,719
here I will create a list, "font list equals an empty list"
177

178
00:14:54,209 --> 00:14:57,578
<v ->Okay? And after here, what I need to do?</v>
178

179
00:14:57,578 --> 00:15:00,911
I want to create a font size list, okay?
179

180
00:15:01,789 --> 00:15:05,272
we also need to fill the our second "combobox" right?
180

181
00:15:05,272 --> 00:15:08,471
So I will say "font, size, list"
181

182
00:15:08,471 --> 00:15:12,971
it's going to be an empty list. Okay, what I need to do?
182

183
00:15:14,022 --> 00:15:16,838
For the font size it is very simple I will say
183

184
00:15:16,838 --> 00:15:20,088
"for i in range, from 8 until 80" okay?
184

185
00:15:24,644 --> 00:15:28,061
I will say "font size list.apent,i" okay?
185

186
00:15:31,726 --> 00:15:34,226
Now I will run my application.
186

187
00:15:37,698 --> 00:15:40,691
Actually before that. This is fine.
187

188
00:15:40,691 --> 00:15:44,060
We can also fill our fonts, let's also do it.
188

189
00:15:44,060 --> 00:15:47,664
"for i in fonts" okay? This is a tuple list right?
189

190
00:15:47,664 --> 00:15:52,581
And I will say "font list. Apent" and I will say "i", okay?
190

191
00:15:56,432 --> 00:15:59,682
It is still not enough, but we already,
191

192
00:16:04,987 --> 00:16:06,909
Now what I will use, I need to use,
192

193
00:16:06,909 --> 00:16:10,096
for if you want to fill your "comboboxes"
193

194
00:16:10,096 --> 00:16:11,235
you are going to use this list okay?
194

195
00:16:11,235 --> 00:16:14,525
For font, we are going to use font list and for font size
195

196
00:16:14,525 --> 00:16:16,988
we are going to use font size list okay?
196

197
00:16:16,988 --> 00:16:19,964
And here what I need to do? I come and say
197

198
00:16:19,964 --> 00:16:22,964
"self.fontVariable equals StringVar"
198

199
00:16:28,765 --> 00:16:32,765
and here I will say "Self.combfont.config" okay?
199

200
00:16:39,043 --> 00:16:43,210
And here I will say "values equals fontlist" okay?
200

201
00:16:45,683 --> 00:16:48,516
And also let's use "text Variable"
201

202
00:16:51,446 --> 00:16:54,863
"Text Variable equals Self.FontVar" okay?
202

203
00:17:01,987 --> 00:17:06,737
Let me run our application and see our fonts first. Okay?
203

204
00:17:08,959 --> 00:17:11,982
<v ->Now you see our fonts here, all of them here,</v>
204

205
00:17:11,982 --> 00:17:16,565
but here for the first index, you see, we don't see our
205

206
00:17:17,455 --> 00:17:21,172
For example, you want to see here the secret
206

207
00:17:21,172 --> 00:17:24,330
or something else. So how we can do that,
207

208
00:17:24,330 --> 00:17:27,007
because it looks empty then we run our application.
208

209
00:17:27,007 --> 00:17:32,007
Let me run it again, you see. It's here but for example
209

210
00:17:32,405 --> 00:17:35,952
if you want to see system or terminal, how you can do that
210

211
00:17:35,952 --> 00:17:39,844
here when you run your application, you say here
211

212
00:17:39,844 --> 00:17:43,261
"self.cbfont.current" and I want to see
212

213
00:17:47,045 --> 00:17:51,878
the first one okay? "0" so after here I want to do same thing
213

214
00:17:53,946 --> 00:17:57,229
for my font size combo box also I will say
214

215
00:17:57,229 --> 00:18:01,479
Self. Sorry here, yes what I need to do I need to use
215

216
00:18:06,566 --> 00:18:10,149
a again "Self.cbFontSize" right? and here
216

217
00:18:14,786 --> 00:18:19,203
I say "Config" values" is to be "FontSizeList" right?
217

218
00:18:25,053 --> 00:18:27,220
and after here what I will use, I will say
218

219
00:18:27,220 --> 00:18:32,053
"Self.cbFontSize" I will use current again but this time
219

220
00:18:37,655 --> 00:18:40,988
I will use "4".why 4? Let me run it now.
220

221
00:18:46,782 --> 00:18:48,770
Why 4? Now If you use "0"
221

222
00:18:48,770 --> 00:18:53,468
that means your current value will be "8" but I want to make
222

223
00:18:53,468 --> 00:18:56,862
it "12" okay? That's why here I will use here "4"
223

224
00:18:56,862 --> 00:19:01,537
After it's enough? No it's not enough actually.
224

225
00:19:01,537 --> 00:19:04,844
We need to also create here, bind methods
225

226
00:19:04,844 --> 00:19:09,126
for our combo boxes but we can do it later because
226

227
00:19:09,126 --> 00:19:13,676
our lesson is also very long. Okay? It's almost 20 minutes
227

228
00:19:13,676 --> 00:19:16,471
that's why I will do it later, for now that's all.
228

229
00:19:16,471 --> 00:19:18,138
See you in the next.