0 1 00:00:04,530 --> 00:00:05,363 Hello again. 1 2 00:00:05,363 --> 00:00:07,580 In this lesson we are going to learn how you can use 2 3 00:00:07,580 --> 00:00:09,820 frame widget for our applications. 3 4 00:00:09,820 --> 00:00:11,910 Frame widget is very, very important widget. 4 5 00:00:11,910 --> 00:00:15,440 Why it's like that because if you want to organise 5 6 00:00:15,440 --> 00:00:19,230 your widgets and if you want to place your widgets 6 7 00:00:19,230 --> 00:00:21,910 wherever you need, you need to use frames, okay? 7 8 00:00:21,910 --> 00:00:24,400 And frame works like a container 8 9 00:00:24,400 --> 00:00:28,850 and it allows us arranging position of our widgets, okay? 9 10 00:00:28,850 --> 00:00:32,890 And without using frames it is almost impossible to create 10 11 00:00:34,766 --> 00:00:38,510 good projects or create professional projects, okay? 11 12 00:00:38,510 --> 00:00:40,620 That's why frame is very, very important. 12 13 00:00:40,620 --> 00:00:42,380 Here in this lesson I will try to show you 13 14 00:00:42,380 --> 00:00:44,010 how we can use frames. 14 15 00:00:44,010 --> 00:00:47,350 It is a little bit complicated I know, to use frames. 15 16 00:00:47,350 --> 00:00:50,410 But don't worry, in next lessons we are going to create 16 17 00:00:50,410 --> 00:00:52,670 really, really nice applications and projects 17 18 00:00:52,670 --> 00:00:55,430 and we always use frames for our projects. 18 19 00:00:55,430 --> 00:00:58,710 So if you don't understand now, don't worry about it 19 20 00:00:58,710 --> 00:01:02,140 in next lessons you will understand frames better, okay? 20 21 00:01:02,140 --> 00:01:03,860 And now let's get started here. 21 22 00:01:03,860 --> 00:01:08,010 I want to create a frame so how can I create the frame? 22 23 00:01:08,010 --> 00:01:11,163 I need to use here frame constructor method, right? 23 24 00:01:11,163 --> 00:01:14,470 And here first parameter will be root, right? 24 25 00:01:14,470 --> 00:01:17,253 And after that what I need to do I can use here. 25 26 00:01:18,190 --> 00:01:21,210 By the way height and width property I want to use 26 27 00:01:21,210 --> 00:01:26,110 and here for the height I will say 300, okay? 27 28 00:01:26,110 --> 00:01:31,110 For the width, again 300, okay? 28 29 00:01:31,210 --> 00:01:32,910 After what I need to do, I need to use 29 30 00:01:32,910 --> 00:01:34,713 a geometry manager for my frame. 30 31 00:01:35,770 --> 00:01:39,680 You can use pack or Greek or place geometric manager. 31 32 00:01:39,680 --> 00:01:41,730 It doesn't matter and I'm going to use 32 33 00:01:41,730 --> 00:01:43,960 pack for my frame, okay? 33 34 00:01:43,960 --> 00:01:47,847 And now if I run my application my frame is here 34 35 00:01:47,847 --> 00:01:48,970 but we don't see it. 35 36 00:01:48,970 --> 00:01:50,390 How we can make it visible? 36 37 00:01:50,390 --> 00:01:53,990 To do that let's use a background colour, okay? 37 38 00:01:53,990 --> 00:01:57,930 For the background colour BG equals I will say red. 38 39 00:01:57,930 --> 00:01:59,623 Okay, now it will be visible. 39 40 00:02:01,660 --> 00:02:06,640 And you see now our frame is here, 300 by 300, okay? 40 41 00:02:06,640 --> 00:02:10,480 So let me now show you how we can add widgets to our frame. 41 42 00:02:10,480 --> 00:02:11,690 This is also very, very important. 42 43 00:02:11,690 --> 00:02:12,757 Here I want to create a button. 43 44 00:02:12,757 --> 00:02:15,742 Button one equals button constructor method 44 45 00:02:15,742 --> 00:02:19,490 and here for the button what I need to say 45 46 00:02:19,490 --> 00:02:22,790 here as you see it says master, none, right? 46 47 00:02:22,790 --> 00:02:26,010 Now we cannot use root here because this button 47 48 00:02:26,010 --> 00:02:28,550 will be child of this frame and this frame 48 49 00:02:28,550 --> 00:02:31,650 is child of my root top level window that's why here 49 50 00:02:31,650 --> 00:02:34,909 what I need to say, I need to use frame because I want 50 51 00:02:34,909 --> 00:02:37,490 to add this frame, I want to add this button 51 52 00:02:37,490 --> 00:02:40,750 to this frame that's why I'm to use here frame. 52 53 00:02:40,750 --> 00:02:42,150 Okay this is very important. 53 54 00:02:42,150 --> 00:02:45,460 If you say root you cannot add this button to this frame. 54 55 00:02:45,460 --> 00:02:48,070 This is also very important, okay? 55 56 00:02:48,070 --> 00:02:53,070 And after that what I need to do here I will say frame 56 57 00:02:53,440 --> 00:02:56,470 and after that text property I am going to use 57 58 00:02:56,470 --> 00:03:00,480 for first one I will say button one and after that here 58 59 00:03:00,480 --> 00:03:03,600 what I need to use I need to use a geometry manager. 59 60 00:03:03,600 --> 00:03:06,340 Let's use again pack geometry manager, okay? 60 61 00:03:06,340 --> 00:03:10,643 If I run my application now as you see now 61 62 00:03:10,643 --> 00:03:13,620 our button is here but our frame is not here. 62 63 00:03:13,620 --> 00:03:17,630 Actually our frame is here it is why it's like that 63 64 00:03:17,630 --> 00:03:21,440 because now we use only one widget right? 64 65 00:03:21,440 --> 00:03:25,600 And now our frame covers our button, okay? 65 66 00:03:25,600 --> 00:03:27,540 And it is not visible now. 66 67 00:03:27,540 --> 00:03:29,880 Actually it is here but behind our button 67 68 00:03:29,880 --> 00:03:31,190 so we don't see it okay? 68 69 00:03:31,190 --> 00:03:34,470 But it covers our button we can make it visible. 69 70 00:03:34,470 --> 00:03:35,340 How we can do that? 70 71 00:03:35,340 --> 00:03:40,030 Here I can say fill x, okay? 71 72 00:03:40,030 --> 00:03:43,020 I can use this property fill function 72 73 00:03:43,020 --> 00:03:46,110 And if I run my application now, as you see 73 74 00:03:46,110 --> 00:03:49,580 now our frame is here and we used fill x property 74 75 00:03:49,580 --> 00:03:52,200 for our frame and also of course 75 76 00:03:52,200 --> 00:03:55,340 we can use borders for our frames. 76 77 00:03:55,340 --> 00:03:56,740 Also let me show it. 77 78 00:03:56,740 --> 00:03:59,090 First we need to use border size. 78 79 00:03:59,090 --> 00:04:01,750 Border size will be, for instance let's say, seven. 79 80 00:04:01,750 --> 00:04:03,996 This is for size. 80 81 00:04:03,996 --> 00:04:07,220 Sorry it's like quotes and after that seven. 81 82 00:04:07,220 --> 00:04:09,190 Also I want to use a border style. 82 83 00:04:09,190 --> 00:04:12,524 For border style I will use relief function. 83 84 00:04:12,524 --> 00:04:14,780 For relief what I can use, I can use raised, 84 85 00:04:14,780 --> 00:04:16,290 sunken and ridge. 85 86 00:04:16,290 --> 00:04:20,677 Okay let's use sunken and like that. 86 87 00:04:21,650 --> 00:04:24,057 If I run my application again as you see 87 88 00:04:25,390 --> 00:04:28,970 now you see a border around our frame. 88 89 00:04:28,970 --> 00:04:31,620 Okay, and also what I need to do now 89 90 00:04:31,620 --> 00:04:35,200 I want to create another button for my frame, okay? 90 91 00:04:35,200 --> 00:04:37,820 Here simply I will come and press control D 91 92 00:04:37,820 --> 00:04:41,180 and duplicate my button and button two 92 93 00:04:41,180 --> 00:04:43,680 that one is again will be button two 93 94 00:04:43,680 --> 00:04:47,828 for geometry manager button two dot pack, okay? 94 95 00:04:47,828 --> 00:04:50,930 If I run it again now as you see now 95 96 00:04:50,930 --> 00:04:53,100 our button the second one is here. 96 97 00:04:53,100 --> 00:04:57,150 By the way here we don't use any parameter for side. 97 98 00:04:57,150 --> 00:05:01,170 If you want to place your button side- by-side 98 99 00:05:01,170 --> 00:05:06,170 you need to use here side equals left or right. 99 100 00:05:06,430 --> 00:05:11,150 If you want to place your widgets on top of each other 100 101 00:05:11,150 --> 00:05:12,950 you need to use here top, or... 101 102 00:05:12,950 --> 00:05:15,560 Default value is also, by the way, is top 102 103 00:05:15,560 --> 00:05:18,010 and here you don't need to say top 103 104 00:05:18,010 --> 00:05:21,630 for this application, okay? 104 105 00:05:21,630 --> 00:05:24,160 Because its by default value is top. 105 106 00:05:24,160 --> 00:05:28,100 Now if you want to place them side-by-side 106 107 00:05:28,100 --> 00:05:30,150 what you need to say, you need to say here left, okay? 107 108 00:05:30,150 --> 00:05:34,680 Side equals left side equals let's say left again 108 109 00:05:34,680 --> 00:05:37,200 and let's see what happens now. 109 110 00:05:37,200 --> 00:05:39,530 As you see now, 'run' as you see now 110 111 00:05:39,530 --> 00:05:44,530 our buttons on the left side so how can I make them, 111 112 00:05:45,634 --> 00:05:48,240 I can place them on the right side of course 112 113 00:05:48,240 --> 00:05:50,330 here I need to say only the right. 113 114 00:05:50,330 --> 00:05:54,040 Side equals right and one of them can be on the left side 114 115 00:05:54,040 --> 00:05:56,920 or other one can be on the right side to that also. 115 116 00:05:56,920 --> 00:05:58,600 For one I need to say Right 116 117 00:05:58,600 --> 00:06:00,985 for second one for example, okay? 117 118 00:06:00,985 --> 00:06:03,150 If I run my application now, as you see now 118 119 00:06:03,150 --> 00:06:04,400 the first one is on the left 119 120 00:06:04,400 --> 00:06:06,977 and the second one is on the right side. 120 121 00:06:06,977 --> 00:06:10,050 I will make it left again and also I want to show you 121 122 00:06:10,050 --> 00:06:12,710 how we can use padding for our widgets. 122 123 00:06:12,710 --> 00:06:15,930 Here I will use pad x firstly. 123 124 00:06:15,930 --> 00:06:17,890 Pad x is 20, okay? 124 125 00:06:17,890 --> 00:06:22,033 For the first one and also let's use pad x for this guy. 125 126 00:06:23,320 --> 00:06:24,930 This is for x value. 126 127 00:06:24,930 --> 00:06:26,630 If I run my application now, 127 128 00:06:26,630 --> 00:06:29,301 as you see now I have 20 pixels here padding. 128 129 00:06:29,301 --> 00:06:31,630 But here it looks more why it's like that 129 130 00:06:31,630 --> 00:06:35,330 because when you use pad x value that means 130 131 00:06:35,330 --> 00:06:39,290 you are adding this pad for both sides. 131 132 00:06:39,290 --> 00:06:41,783 For 20 for this side 20 for this side 132 133 00:06:41,783 --> 00:06:44,830 and for this guy also you have 20 for here 133 134 00:06:44,830 --> 00:06:48,180 and on the right side also you have 20 pixels padding. 134 135 00:06:48,180 --> 00:06:50,490 That's why here is 40 pixels, okay? 135 136 00:06:50,490 --> 00:06:54,220 Let's also use pad y value. 136 137 00:06:54,220 --> 00:06:58,250 Pad y equals let's say 50 and also for this guy 137 138 00:06:58,250 --> 00:07:02,870 let's say pad y equals 50, okay? 138 139 00:07:02,870 --> 00:07:06,330 And now if I run my application as you see 139 140 00:07:06,330 --> 00:07:08,370 now I have padding for top 140 141 00:07:08,370 --> 00:07:12,260 and also for bottom , okay 50 pixels. 141 142 00:07:12,260 --> 00:07:15,510 And this is how we can use frames actually as I said 142 143 00:07:15,510 --> 00:07:18,920 this is a little bit understanding frames a little bit hard 143 144 00:07:18,920 --> 00:07:20,150 for now, but don't worry 144 145 00:07:20,150 --> 00:07:23,360 you will understand it better in next videos. 145 146 00:07:23,360 --> 00:07:26,210 Also I want to show you label frame. 146 147 00:07:26,210 --> 00:07:28,700 How we can use the label frame here, 147 148 00:07:28,700 --> 00:07:31,230 I want to create another variable and I will say 148 149 00:07:31,230 --> 00:07:36,230 for that one search bar equals label frame, okay? 149 150 00:07:37,530 --> 00:07:40,810 For the label frame top level window will be root 150 151 00:07:40,810 --> 00:07:45,330 and after that here what I will say I will use text property 151 152 00:07:46,260 --> 00:07:49,900 we can create a title for our search bar and here 152 153 00:07:49,900 --> 00:07:54,770 let's say 'Search bar', okay? 153 154 00:07:54,770 --> 00:07:58,990 Search box or search box let's say. 154 155 00:07:58,990 --> 00:08:02,440 And after here what I need to do actually 155 156 00:08:02,440 --> 00:08:04,820 for now is we can keep it like that. 156 157 00:08:04,820 --> 00:08:07,170 I want to create here three widgets. 157 158 00:08:07,170 --> 00:08:09,960 First one it will be a label, second one it will be entry 158 159 00:08:09,960 --> 00:08:14,270 and last one will be button, so here I will say 'lbl'. 159 160 00:08:15,190 --> 00:08:17,976 My label is equals label constructor method 160 161 00:08:17,976 --> 00:08:22,820 and for the label I will say my master will be 161 162 00:08:22,820 --> 00:08:24,050 my search bar, right? 162 163 00:08:24,050 --> 00:08:26,950 Like here for button we used frame and for label 163 164 00:08:26,950 --> 00:08:30,730 what I will use I will use of course my search bar, okay? 164 165 00:08:30,730 --> 00:08:35,730 And after that text property will be search, okay? 165 166 00:08:37,620 --> 00:08:39,010 And after that what I need to do 166 167 00:08:39,010 --> 00:08:42,883 I need to use geometry manager and here I will use pack. 167 168 00:08:42,883 --> 00:08:47,240 For the pack I will say side equals left, okay? 168 169 00:08:47,240 --> 00:08:51,240 And also I want to use here pad x, okay? 169 170 00:08:51,240 --> 00:08:54,998 Pad x equals, let's say 10 , okay? 170 171 00:08:54,998 --> 00:08:57,430 And after that what I need to do 171 172 00:08:57,430 --> 00:08:59,940 I will create here an entry. 172 173 00:08:59,940 --> 00:09:04,940 Entry equals constructor method and the top level window 173 174 00:09:05,100 --> 00:09:09,293 for Entry it will be search bar and for the search bar, 174 175 00:09:11,430 --> 00:09:14,380 actually it's enough but we don't need another property 175 176 00:09:14,380 --> 00:09:19,380 for Entry, for entry also I need to use Entry dot pack. 176 177 00:09:22,780 --> 00:09:27,780 Entry must be entry dot pack. 177 178 00:09:30,400 --> 00:09:34,640 For pack I will say side equals left, okay? 178 179 00:09:34,640 --> 00:09:38,150 Side equals left and also let's use pad, 179 180 00:09:38,150 --> 00:09:42,650 padx will be, let's say 10. 180 181 00:09:42,650 --> 00:09:44,890 And the last widget will be our button. 181 182 00:09:44,890 --> 00:09:49,890 So button equals Button constructor method 182 183 00:09:50,050 --> 00:09:55,050 and search bar and text, let's say, equals search , okay? 183 184 00:09:58,910 --> 00:10:03,783 And also let's use pack geometric manager button dot pack. 184 185 00:10:05,160 --> 00:10:09,520 Here I will say side equals left, okay? 185 186 00:10:09,520 --> 00:10:13,500 And left, now even we can use... 186 187 00:10:13,500 --> 00:10:17,490 let's use pad x for this guy too, 10 pixels, okay? 187 188 00:10:17,490 --> 00:10:21,510 Now if I run my application let's see our label frame. 188 189 00:10:21,510 --> 00:10:24,360 As you see now our label frame is here. 189 190 00:10:24,360 --> 00:10:27,740 And for the search bar I said side is left. 190 191 00:10:27,740 --> 00:10:30,100 Let's use top, okay? 191 192 00:10:30,100 --> 00:10:33,467 And here it will relocate it here, okay? 192 193 00:10:38,210 --> 00:10:41,120 And now for the search bar what can I use? 193 194 00:10:41,120 --> 00:10:45,300 I can use pad for top and left and bottom 194 195 00:10:45,300 --> 00:10:47,860 to that what I need to do here I need to come here 195 196 00:10:47,860 --> 00:10:52,850 and say pad x, let's say 20. 196 197 00:10:54,110 --> 00:10:59,110 And for top let's say pad y equals 20, okay? 197 198 00:11:00,090 --> 00:11:02,460 And if I run my application again 198 199 00:11:02,460 --> 00:11:04,130 as you see now it looks better. 199 200 00:11:04,130 --> 00:11:08,910 Also we can create background colour for our search box. 200 201 00:11:08,910 --> 00:11:11,280 By the way you see is our title is here 201 202 00:11:11,280 --> 00:11:14,330 so this is also very, very nice frame 202 203 00:11:14,330 --> 00:11:17,410 to organise our widgets. 203 204 00:11:17,410 --> 00:11:20,160 And here there is a problem and here 204 205 00:11:20,160 --> 00:11:22,180 what I am to say is search bar pack, 205 206 00:11:22,180 --> 00:11:25,020 but I didn't use pack for my lbl. 206 207 00:11:25,020 --> 00:11:30,020 Right, lbl dot pack and here I need to say side equals left 207 208 00:11:32,440 --> 00:11:37,440 and also let's use, this guy doesn't need pad x actually 208 209 00:11:38,320 --> 00:11:42,750 so I will cut it and place it here, okay? 209 210 00:11:42,750 --> 00:11:47,750 Pad x, now you see our search bar our search label 210 211 00:11:48,130 --> 00:11:52,290 is also here and we have 10 pixels for each alright? 211 212 00:11:52,290 --> 00:11:57,290 And let's also change background colour of our search box. 212 213 00:11:58,500 --> 00:11:59,700 How we can do that? 213 214 00:11:59,700 --> 00:12:04,700 Here I will come and say 'bg equals f-c-f-4-5-d', okay? 214 215 00:12:10,270 --> 00:12:12,483 It must be we need to use quotes here. 215 216 00:12:14,716 --> 00:12:17,810 Now it will be fine if I run my application again. 216 217 00:12:17,810 --> 00:12:22,643 As you see now we have also background colour for our frame, 217 218 00:12:23,710 --> 00:12:25,010 for label frame. 218 219 00:12:25,010 --> 00:12:27,310 This is how we can use frames. 219 220 00:12:27,310 --> 00:12:29,380 As I said don't worry about 220 221 00:12:29,380 --> 00:12:31,200 if you don't understand everything, 221 222 00:12:31,200 --> 00:12:34,867 in next lessons we are going to use frames again 222 223 00:12:34,867 --> 00:12:38,130 and for every application we will create. 223 224 00:12:38,130 --> 00:12:39,130 For now that's all. 224 225 00:12:39,130 --> 00:12:40,130 See you in the next.