0
1
00:00:05,860 --> 00:00:08,440
<v Instructor>In previous lecture we create our main frames right</v>
1

2
00:00:08,440 --> 00:00:11,600
and now I want to create our search bar and other frame.
2

3
00:00:11,600 --> 00:00:13,840
But this will be label frame.
3

4
00:00:13,840 --> 00:00:18,780
And also for list books I will create another frame.
4

5
00:00:18,780 --> 00:00:21,040
Also, I want to create our toolbar buttons OK in this lesson.
5

6
00:00:23,440 --> 00:00:25,950
So, let's go and let's get started.
6

7
00:00:25,950 --> 00:00:27,102
So how we can do that?
7

8
00:00:27,102 --> 00:00:28,620
To do that I will come here,
8

9
00:00:28,620 --> 00:00:30,382
and say search bar.
9

10
00:00:30,382 --> 00:00:31,957
and say search bar.
10

11
00:00:31,957 --> 00:00:33,540
and say search bar.
11

12
00:00:35,620 --> 00:00:38,790
For search bar I will create a new label.
12

13
00:00:38,790 --> 00:00:40,230
Sorry, I will create a new frame.
13

14
00:00:40,230 --> 00:00:41,540
But this frame label frame OK
14

15
00:00:42,933 --> 00:00:47,244
And here I will say search_bar is equal to LabelFrame.
15

16
00:00:47,244 --> 00:00:51,282
And here I will say search_bar is equal to LabelFrame.
16

17
00:00:51,282 --> 00:00:55,080
And here I will say search_bar is equal to LabelFrame.
17

18
00:00:55,080 --> 00:00:58,540
And here what I will say it's parent will be 
18

19
00:00:58,540 --> 00:01:00,370
centerRightFrame OK.
19

20
00:01:00,370 --> 00:01:04,521
And after that, I will say width is equal to 440,
20

21
00:01:04,521 --> 00:01:09,060
And after that, I will say width is equal to 440,
21

22
00:01:09,060 --> 00:01:11,782
and height is going to be 175.
22

23
00:01:11,782 --> 00:01:12,850
and height is going to be 175.
23

24
00:01:12,850 --> 00:01:13,683
Okay?
24

25
00:01:13,683 --> 00:01:15,730
And for text what I will say...
25

26
00:01:17,780 --> 00:01:22,780
Let's say search bar or search box or doesn't matter.
26

27
00:01:23,866 --> 00:01:27,069
Text I will say text is equal to search box.
27

28
00:01:27,069 --> 00:01:31,100
Text I will say text is equal to search box.
28

29
00:01:31,100 --> 00:01:31,950
As you remember now,
29

30
00:01:31,950 --> 00:01:35,390
this label frame has text property, okay?
30

31
00:01:35,390 --> 00:01:38,901
this label frame has text property, okay?
31

32
00:01:38,901 --> 00:01:42,960
But normal frame doesn't have text property.
32

33
00:01:43,990 --> 00:01:46,128
And after that what I want to do here?
33

34
00:01:46,128 --> 00:01:49,490
I want to also use here background.
34

35
00:01:49,490 --> 00:01:52,857
For background I say bg is equal #9bc9ff.
35

36
00:01:52,857 --> 00:01:56,173
For background I say bg is equal #9bc9ff.
36

37
00:01:56,173 --> 00:01:58,733
For background I say bg is equal #9bc9ff.
37

38
00:02:01,234 --> 00:02:02,067
What I need to do?
38

39
00:02:02,067 --> 00:02:05,865
I need to use geometry manager search_bar.pack
39

40
00:02:05,865 --> 00:02:07,110
I need to use geometry manager search_bar.pack
40

41
00:02:08,460 --> 00:02:12,581
and here I will say only fill is equal to BOTH.
41

42
00:02:12,581 --> 00:02:14,190
and here I will say only fill is equal to BOTH.
42

43
00:02:14,190 --> 00:02:16,163
If I run my application now.
43

44
00:02:20,470 --> 00:02:22,840
As you see now, our search bar is here
44

45
00:02:22,840 --> 00:02:25,540
and now also I create my list bar.
45

46
00:02:25,540 --> 00:02:26,373
Here
46

47
00:02:26,373 --> 00:02:28,360
This box. And to do that what I need to do?
47

48
00:02:28,360 --> 00:02:31,010
Here I will say list bar.
48

49
00:02:31,010 --> 00:02:33,555
Here I will say list bar.
49

50
00:02:33,555 --> 00:02:36,886
And for list bar let's create a variable.
50

51
00:02:36,886 --> 00:02:40,053
List_bar is equal to again LabelFrame.
51

52
00:02:41,143 --> 00:02:44,885
And for LabelFrame parent will be centerRightFrame
52

53
00:02:44,885 --> 00:02:48,350
and width is equal to 440 and height is...
53

54
00:02:48,350 --> 00:02:51,850
and width is equal to 440 and height is...
54

55
00:02:53,113 --> 00:02:55,354
For this one, sorry I made a mistake.
55

56
00:02:55,354 --> 00:02:59,604
This one will be 75 and that one will be 175, okay?
56

57
00:03:00,882 --> 00:03:01,715
175.
57

58
00:03:02,614 --> 00:03:07,057
And for the text, I will say text is equal to list box.
58

59
00:03:07,057 --> 00:03:11,579
And for the text, I will say text is equal to list box.
59

60
00:03:11,579 --> 00:03:15,417
And for the text, I will say text is equal to list box.
60

61
00:03:15,417 --> 00:03:17,035
After that, what I need to do?
61

62
00:03:17,035 --> 00:03:20,410
Also, here I want to use background colour.
62

63
00:03:20,410 --> 00:03:23,916
Also, here I want to use background color for my list box.
63

64
00:03:23,916 --> 00:03:27,569
Here I will say bg is equal to #fcc324, okay?
64

65
00:03:27,569 --> 00:03:31,307
Here I will say bg is equal to #fcc324, okay?
65

66
00:03:31,307 --> 00:03:35,825
Here I will say bg is equal to #fcc324, okay?
66

67
00:03:35,825 --> 00:03:38,468
And also let's use pack geometry manager for this guy.
67

68
00:03:38,468 --> 00:03:39,558
List_bar.pack.
68

69
00:03:39,558 --> 00:03:40,508
List_bar.pack.
69

70
00:03:40,508 --> 00:03:41,980
List_bar.pack.
70

71
00:03:41,980 --> 00:03:44,168
For pack what I will use here?
71

72
00:03:44,168 --> 00:03:47,335
I will use again fill=BOTH, okay?. By the way by default
72

73
00:03:50,368 --> 00:03:53,503
Our pack geometry side is TOP
73

74
00:03:53,503 --> 00:03:54,727
Don't forget it!
74

75
00:03:54,727 --> 00:03:57,756
That's why if I use for the search bar.
75

76
00:03:57,756 --> 00:03:59,380
If I don't use any parameter here,
76

77
00:03:59,380 --> 00:04:02,306
that means locate my frame at top,
77

78
00:04:02,306 --> 00:04:05,160
that means locate my frame at top,
78

79
00:04:05,160 --> 00:04:07,560
and also for this one is again...
79

80
00:04:07,560 --> 00:04:10,043
There is someone, remember, I already told that in previous lectures when we created our address book application
80

81
00:04:17,189 --> 00:04:22,189
It will under this bar, listbar will be under search bar.
81

82
00:04:22,340 --> 00:04:23,930
And after, what I need to do?
82

83
00:04:23,930 --> 00:04:25,760
Let's run our application.
83

84
00:04:25,760 --> 00:04:28,680
I think everything is fine now.
84

85
00:04:28,680 --> 00:04:30,910
As you see now, this box is here.
85

86
00:04:30,910 --> 00:04:33,590
Search box is also here.
86

87
00:04:33,590 --> 00:04:36,413
Here there is no problem about them So what I need to do?
87

88
00:04:36,413 --> 00:04:38,270
I need to create my buttons here.
88

89
00:04:38,270 --> 00:04:42,204
We will create 3 buttons for our toolbar.
89

90
00:04:42,204 --> 00:04:44,050
We will create 3 buttons for our toolbar.
90

91
00:04:44,050 --> 00:04:45,593
And let's say here.
91

92
00:04:48,414 --> 00:04:49,970
Add book, okay?
92

93
00:04:49,970 --> 00:04:50,870
Add book button.
93

94
00:04:50,870 --> 00:04:52,619
And for add book button i will say
94

95
00:04:52,619 --> 00:04:54,160
Self.iconbook, okay?
95

96
00:04:54,160 --> 00:04:55,743
Self.iconbook, okay?
96

97
00:04:55,743 --> 00:04:57,340
Self.iconbook, okay?
97

98
00:04:57,340 --> 00:05:00,380
And here, What i need to use I need to use PhtotoImage library.
98

99
00:05:03,550 --> 00:05:04,422
What I want to say?
99

100
00:05:04,422 --> 00:05:06,168
I need to use here file.
100

101
00:05:06,168 --> 00:05:07,743
File location is icons/add_book.png.
101

102
00:05:09,521 --> 00:05:11,257
File location is icons/add_book.png.
102

103
00:05:13,235 --> 00:05:15,090
File location is icons/add_book.png.
103

104
00:05:15,090 --> 00:05:16,355
It's here, by the way.
104

105
00:05:16,355 --> 00:05:18,507
Add_book.png file is here.
105

106
00:05:19,596 --> 00:05:21,472
Okay, our image is here.
106

107
00:05:21,472 --> 00:05:23,623
And here, what I need to say?
107

108
00:05:23,623 --> 00:05:26,785
Self.btnbook is equal to Button constructor method.
108

109
00:05:26,785 --> 00:05:30,346
Self.btnbook is equal to Button constructor method.
109

110
00:05:30,346 --> 00:05:34,542
Self.btnbook is equal to Button constructor method.
110

111
00:05:34,542 --> 00:05:37,140
And here it will be topFrame, right?
111

112
00:05:37,140 --> 00:05:40,160
And after, text is equal to Add Book.
112

113
00:05:40,160 --> 00:05:42,843
And after, text is equal to Add Book.
113

114
00:05:43,750 --> 00:05:48,591
And for image I will say image is equal to self.iconbook.
114

115
00:05:48,591 --> 00:05:53,302
And for image I will say image is equal to self.iconbook.
115

116
00:05:53,302 --> 00:05:55,140
And for image I will say image is equal to self.iconbook.
116

117
00:05:55,140 --> 00:05:57,263
And also let's use compound.
117

118
00:05:59,778 --> 00:06:01,883
Compound is equal to left.
118

119
00:06:01,883 --> 00:06:04,020
Compound is equal to left.
119

120
00:06:04,020 --> 00:06:06,187
Compound is equal to left.
120

121
00:06:08,615 --> 00:06:11,200
And also I will say font is...
121

122
00:06:13,390 --> 00:06:15,824
Here, font is equal to arial 12 bold.
122

123
00:06:15,824 --> 00:06:18,847
Here, font is equal to arial 12 bold.
123

124
00:06:18,847 --> 00:06:20,700
Here, font is equal to arial 12 bold.
124

125
00:06:20,700 --> 00:06:21,533
That's all.
125

126
00:06:21,533 --> 00:06:22,520
Enough that one.
126

127
00:06:22,520 --> 00:06:25,880
And if I run my application now...
127

128
00:06:28,940 --> 00:06:32,350
We didn't use any geometry manager for this guys.
128

129
00:06:32,350 --> 00:06:33,900
That's why we don't see them.
129

130
00:06:33,900 --> 00:06:34,733
Okay.
130

131
00:06:36,620 --> 00:06:38,677
Let's create our button source
131

132
00:06:39,648 --> 00:06:41,680
and I want to use geometry manager.
132

133
00:06:41,680 --> 00:06:43,933
Let's use geometry manager for this guy.
133

134
00:06:43,933 --> 00:06:44,766
Self.btn.
134

135
00:06:44,766 --> 00:06:48,403
Self.btn.
135

136
00:06:51,220 --> 00:06:52,210
Sorry.
136

137
00:06:52,210 --> 00:06:53,605
Self.btnbook, right?
137

138
00:06:53,605 --> 00:06:54,966
Self.btnbook, right?
138

139
00:06:54,966 --> 00:06:56,267
Self.btnbook, right?
139

140
00:06:56,267 --> 00:06:57,934
Self.btnbook, right?
140

141
00:06:59,180 --> 00:07:00,640
And dot pack manager I will use.
141

142
00:07:00,640 --> 00:07:04,560
And here, side is equal to left, okay?
142

143
00:07:04,560 --> 00:07:09,207
And I also want to use pad for x value is equal to 10, okay?
143

144
00:07:09,207 --> 00:07:11,827
And I also want to use pad for x value is equal to 10, okay?
144

145
00:07:11,827 --> 00:07:13,650
And I think now is fine.
145

146
00:07:13,650 --> 00:07:15,040
If I run my application...
146

147
00:07:15,040 --> 00:07:17,170
As you see now, add button is here.
147

148
00:07:17,170 --> 00:07:18,220
And the second one...
148

149
00:07:18,220 --> 00:07:19,306
Let's create the second one.
149

150
00:07:19,306 --> 00:07:23,829
For the second one.
150

151
00:07:23,829 --> 00:07:25,290
I'll say here.
151

152
00:07:25,290 --> 00:07:26,970
I think it is add member.
152

153
00:07:26,970 --> 00:07:28,588
Add member button.
153

154
00:07:28,588 --> 00:07:29,421
Add member button.
154

155
00:07:29,421 --> 00:07:31,563
Add member button.
155

156
00:07:31,563 --> 00:07:36,563
And again I want to create icon for this guy, okay?
156

157
00:07:36,604 --> 00:07:39,846
Self.iconmember is equal to PhotoImage.
157

158
00:07:39,846 --> 00:07:43,096
Self.iconmember is equal to PhotoImage.
158

159
00:07:43,953 --> 00:07:47,710
And file is equal to icons/users.png, okay?
159

160
00:07:47,710 --> 00:07:52,210
And file is equal to icons/users.png, okay?
160

161
00:07:54,007 --> 00:07:57,464
Self.btnmember is equal to Button constructor method.
161

162
00:07:57,464 --> 00:08:01,214
Self.btnmember is equal to Button constructor method.
162

163
00:08:01,214 --> 00:08:04,748
Self.btnmember is equal to Button constructor method.
163

164
00:08:04,748 --> 00:08:06,020
Self.btnmember is equal to Button constructor method.
164

165
00:08:06,020 --> 00:08:09,750
And here I'll use topFrame again as a parent,
165

166
00:08:09,750 --> 00:08:12,987
and here text is going to be Add Member.
166

167
00:08:12,987 --> 00:08:16,095
and here text is going to be Add Member.
167

168
00:08:16,095 --> 00:08:18,407
and here text is going to be Add Member.
168

169
00:08:18,407 --> 00:08:20,360
And also for the font,
169

170
00:08:20,360 --> 00:08:23,682
let's say font is equal to arial 12 bold.
170

171
00:08:23,682 --> 00:08:26,531
let's say font is equal to arial 12 bold.
171

172
00:08:26,531 --> 00:08:28,582
let's say font is equal to arial 12 bold.
172

173
00:08:28,582 --> 00:08:31,740
And also let's use pad.
173

174
00:08:31,740 --> 00:08:35,680
Padx is equal to 10, okay?
174

175
00:08:35,680 --> 00:08:36,930
And what we need to do?
175

176
00:08:36,930 --> 00:08:40,091
Also we need to use here our icon.
176

177
00:08:40,091 --> 00:08:41,737
Also we need to use here our icon.
177

178
00:08:41,737 --> 00:08:44,253
To use icon, let's use configure method.
178

179
00:08:45,137 --> 00:08:47,044
Self.btnmember.configure.
179

180
00:08:47,044 --> 00:08:48,580
Self.btnmember.configure.
180

181
00:08:48,580 --> 00:08:50,663
Self.btnmember.configure.
181

182
00:08:52,120 --> 00:08:55,320
And image is equal to self.iconmember.
182

183
00:08:55,320 --> 00:08:58,218
And image is equal to self.iconmember.
183

184
00:08:58,218 --> 00:09:01,262
And image is equal to self.iconmember.
184

185
00:09:01,262 --> 00:09:04,336
And image is equal to self.iconmember.
185

186
00:09:04,336 --> 00:09:08,090
And image is equal to self.iconmember.
186

187
00:09:08,090 --> 00:09:12,963
After that here I will say compound is going to be left, okay?
187

188
00:09:12,963 --> 00:09:17,963
After that here I will say compound is going to be left, okay?
188

189
00:09:20,650 --> 00:09:21,880
So what we need to do?
189

190
00:09:21,880 --> 00:09:23,850
Of course we need to use pack geometry manager
190

191
00:09:23,850 --> 00:09:25,080
for guy.
191

192
00:09:25,080 --> 00:09:28,511
Self.btnmember.pack and side is going
192

193
00:09:28,511 --> 00:09:31,075
Self.btnmember.pack and side is going
193

194
00:09:31,075 --> 00:09:32,400
Self.btnmember.pack and side is going
194

195
00:09:32,400 --> 00:09:34,443
to be again left, okay?
195

196
00:09:35,560 --> 00:09:40,020
And now if I run my application, I think it's fine.
196

197
00:09:40,020 --> 00:09:42,620
Add book and add member is here.
197

198
00:09:42,620 --> 00:09:45,712
The last one is give book, right?
198

199
00:09:45,712 --> 00:09:48,361
We will give books to members, right?
199

200
00:09:48,361 --> 00:09:51,213
We will give books to members, right?
200

201
00:09:51,213 --> 00:09:52,729
So here what I will say?
201

202
00:09:52,729 --> 00:09:54,896
I will say here give book.
202

203
00:09:55,808 --> 00:09:59,423
And self.icongive is equal to PhotoImage library.
203

204
00:09:59,423 --> 00:10:03,927
And self.icongive is equal to PhotoImage library.
204

205
00:10:03,927 --> 00:10:07,833
And the file is equal to icons/givebook.png.
205

206
00:10:07,833 --> 00:10:12,416
And the file is equal to icons/givebook.png.
206

207
00:10:18,341 --> 00:10:19,596
And here what I am going to do?
207

208
00:10:19,596 --> 00:10:21,146
I need to create my icon.
208

209
00:10:21,146 --> 00:10:24,967
Self.btngive is equal to button constructor method again.
209

210
00:10:24,967 --> 00:10:29,023
Self.btngive is equal to button constructor method again.
210

211
00:10:29,023 --> 00:10:31,991
And it will be very similar actually.
211

212
00:10:31,991 --> 00:10:32,824
And it will be very similar actually.
212

213
00:10:32,824 --> 00:10:34,824
So I can copy these guys,
213

214
00:10:36,950 --> 00:10:38,450
and paste it here.
214

215
00:10:40,535 --> 00:10:44,929
We can say here image is equal to self.icongive, right?
215

216
00:10:44,929 --> 00:10:48,173
We can say here image is equal to self.icongive, right?
216

217
00:10:48,173 --> 00:10:49,006
Icongive.
217

218
00:10:52,205 --> 00:10:54,339
Let's take this guy here.
218

219
00:10:54,339 --> 00:10:55,645
Other line.
219

220
00:10:55,645 --> 00:10:57,204
And here what I will say?
220

221
00:10:57,204 --> 00:10:58,621
Give book, right?
221

222
00:11:01,137 --> 00:11:02,381
Give book.
222

223
00:11:02,381 --> 00:11:03,672
Okay?
223

224
00:11:03,672 --> 00:11:05,150
And that's all actually.
224

225
00:11:05,150 --> 00:11:06,212
So what we need to do?
225

226
00:11:06,212 --> 00:11:08,680
We need to use pack geometry manager for this guy
226

227
00:11:08,680 --> 00:11:09,663
and after that it will be fine
227

228
00:11:11,162 --> 00:11:14,698
So here I will say self.btngive.pack, okay?
228

229
00:11:14,698 --> 00:11:18,533
So here I will say self.btngive.pack, okay?
229

230
00:11:18,533 --> 00:11:20,410
And for pack what I will say?
230

231
00:11:20,410 --> 00:11:22,716
Side is equal to left.
231

232
00:11:22,716 --> 00:11:23,645
That's all.
232

233
00:11:23,645 --> 00:11:26,966
If I run my application now...
233

234
00:11:26,966 --> 00:11:28,314
As you see now it's here,
234

235
00:11:28,314 --> 00:11:32,031
but what we need to do is a little bit small.
235

236
00:11:32,031 --> 00:11:33,781
So what I need to do?
236

237
00:11:39,161 --> 00:11:41,411
I think it's about my icon.
237

238
00:11:42,626 --> 00:11:43,944
It's not about it.
238

239
00:11:43,944 --> 00:11:45,084
So what's wrong here?
239

240
00:11:45,084 --> 00:11:46,167
Let me check.
240

241
00:11:50,080 --> 00:11:51,672
Here give book is okay
241

242
00:11:51,672 --> 00:11:54,053
and I used also pack compound.
242

243
00:11:54,053 --> 00:11:55,744
and I used also pack compound.
243

244
00:11:55,744 --> 00:11:56,928
We didn't use compound.
244

245
00:11:56,928 --> 00:11:57,761
That's why.
245

246
00:11:57,761 --> 00:11:59,556
So here what I need to say?
246

247
00:11:59,556 --> 00:12:01,987
Compound is equal to left, right?
247

248
00:12:01,987 --> 00:12:04,737
Compound is equal to left, right?
248

249
00:12:06,150 --> 00:12:08,150
And now it will be fine.
249

250
00:12:10,177 --> 00:12:11,388
As you see, now it's okay.
250

251
00:12:11,388 --> 00:12:12,740
It's fine in size.
251

252
00:12:12,740 --> 00:12:14,053
Actually, that's all.
252

253
00:12:15,080 --> 00:12:16,617
See you in the next!