0 1 00:00:04,390 --> 00:00:05,760 In this lecture we are going to learn 1 2 00:00:05,760 --> 00:00:08,380 how we can use tab widget for our application. 2 3 00:00:08,380 --> 00:00:09,520 To do that, what I need to do? 3 4 00:00:09,520 --> 00:00:13,370 I will create a variable here, and its name's tabs. 4 5 00:00:13,370 --> 00:00:16,860 Tabs is equal to ttk module dot, 5 6 00:00:16,860 --> 00:00:20,200 and I will use notebook constructor method, okay? 6 7 00:00:20,200 --> 00:00:23,100 And here I will use root parameter. 7 8 00:00:23,100 --> 00:00:24,710 And after that, what I need to do here? 8 9 00:00:24,710 --> 00:00:29,580 I need to use pack geometry manager for my tabs. 9 10 00:00:29,580 --> 00:00:34,410 And now, I need to create frames for each tab. 10 11 00:00:34,410 --> 00:00:38,470 And these frames will be container for my widget. 11 12 00:00:38,470 --> 00:00:41,000 Like before, we already learned this for paned window, 12 13 00:00:41,000 --> 00:00:42,120 don't forget that. 13 14 00:00:42,120 --> 00:00:43,680 It's same, it's similar. 14 15 00:00:43,680 --> 00:00:46,170 So for each tab I will create a frame, 15 16 00:00:46,170 --> 00:00:49,570 and I will name it first one for the first frame, 16 17 00:00:49,570 --> 00:00:53,743 I will name it tab1 is equal to ttk.Frame. 17 18 00:00:55,981 --> 00:00:57,250 And for the frame what I need to do? 18 19 00:00:57,250 --> 00:00:59,530 I need to paste in here tabs. 19 20 00:00:59,530 --> 00:01:03,540 Now, here you see our, 20 21 00:01:03,540 --> 00:01:07,320 for tabs it's child of root, right? 21 22 00:01:07,320 --> 00:01:11,410 But, frame is also, it's child of tabs. 22 23 00:01:11,410 --> 00:01:15,940 And our widget is also child of our frame. 23 24 00:01:15,940 --> 00:01:16,820 Don't forget that. 24 25 00:01:16,820 --> 00:01:18,620 And this is hierarchy. 25 26 00:01:18,620 --> 00:01:20,760 And after that, what I need to do here? 26 27 00:01:20,760 --> 00:01:23,790 I will duplicate it for tab2. 27 28 00:01:23,790 --> 00:01:27,873 And tab2 is equal to tabs, is it the same. 28 29 00:01:27,873 --> 00:01:29,430 Now what I need to do? 29 30 00:01:29,430 --> 00:01:32,050 I need to add this tabs to my 30 31 00:01:33,400 --> 00:01:34,713 tabs variable. 31 32 00:01:35,630 --> 00:01:38,774 Here I will say tabs.add, 32 33 00:01:38,774 --> 00:01:41,580 and for the first one I will say tab1. 33 34 00:01:42,430 --> 00:01:44,500 I am adding my frames. 34 35 00:01:44,500 --> 00:01:48,577 And for text property I will say text is equal to, 35 36 00:01:48,577 --> 00:01:52,303 for the first one, first tab. 36 37 00:01:53,260 --> 00:01:56,880 And also press control+D for this one. 37 38 00:01:56,880 --> 00:01:58,027 What I need to say? 38 39 00:01:58,027 --> 00:01:59,453 I will say here, 39 40 00:02:00,460 --> 00:02:01,923 second tab. 40 41 00:02:04,330 --> 00:02:07,903 This one will be tab2, my second frame. 41 42 00:02:08,760 --> 00:02:10,500 Now also I want to show you how, 42 43 00:02:10,500 --> 00:02:12,290 actually let's run our application, 43 44 00:02:12,290 --> 00:02:14,006 and after I will show you 44 45 00:02:14,006 --> 00:02:15,590 how we can use icons for our applications. 45 46 00:02:15,590 --> 00:02:18,924 As you see now, our first step and second step is here. 46 47 00:02:18,924 --> 00:02:20,990 But I will use again here, fill... 47 48 00:02:23,360 --> 00:02:25,227 Sorry, not this one. 48 49 00:02:25,227 --> 00:02:26,573 I will say here, 49 50 00:02:27,770 --> 00:02:29,913 fill both, 50 51 00:02:31,780 --> 00:02:33,483 and expand, true. 51 52 00:02:38,550 --> 00:02:40,533 Expand is equal to true. 52 53 00:02:42,320 --> 00:02:44,538 True is like that. 53 54 00:02:44,538 --> 00:02:46,323 Now if I run my application again, 54 55 00:02:47,280 --> 00:02:48,940 as you see now it's more reasonable 55 56 00:02:48,940 --> 00:02:50,180 and the first step is here, 56 57 00:02:50,180 --> 00:02:51,750 and second one is here. 57 58 00:02:51,750 --> 00:02:53,050 Now also I want to show you 58 59 00:02:53,050 --> 00:02:56,300 how we can use icons for our tabs. 59 60 00:02:56,300 --> 00:02:57,610 For that, what I need to do? 60 61 00:02:57,610 --> 00:03:02,210 Here, I will create a variable and I will name it icon. 61 62 00:03:02,210 --> 00:03:05,543 Icon is equal to, and I will use photo image. 62 63 00:03:07,140 --> 00:03:09,110 And here I will say for the file, 63 64 00:03:09,110 --> 00:03:10,580 file is equal to. 64 65 00:03:10,580 --> 00:03:12,000 Now what I need to do? 65 66 00:03:12,000 --> 00:03:15,150 I need to here use my location for my icon. 66 67 00:03:15,150 --> 00:03:17,110 My icon is here. 67 68 00:03:17,110 --> 00:03:18,480 Icons. 68 69 00:03:18,480 --> 00:03:22,160 And icon_tab.png. 69 70 00:03:22,160 --> 00:03:23,530 This is my icon name. 70 71 00:03:23,530 --> 00:03:25,070 And here what I need to do? 71 72 00:03:25,070 --> 00:03:26,790 I need to use quotes, 72 73 00:03:26,790 --> 00:03:29,740 and first one is my folder name, icons, 73 74 00:03:29,740 --> 00:03:34,373 and after that icon_tab.png. 74 75 00:03:35,760 --> 00:03:37,670 And after that, what I need to do here? 75 76 00:03:37,670 --> 00:03:39,723 I need to come here and say, 76 77 00:03:40,590 --> 00:03:44,890 for image property here I will say, image is equal to icon. 77 78 00:03:46,260 --> 00:03:47,933 If I run my application again, 78 79 00:03:49,140 --> 00:03:51,100 as you see now, our icon is here 79 80 00:03:51,100 --> 00:03:55,490 but our text is gone. 80 81 00:03:55,490 --> 00:03:57,100 So how we can solve this problem 81 82 00:03:57,100 --> 00:03:59,493 so that I will come here and say, 82 83 00:04:00,700 --> 00:04:01,583 compound, 83 84 00:04:05,196 --> 00:04:08,902 compound is equal to, I will say left. 84 85 00:04:08,902 --> 00:04:10,723 If I run again, 85 86 00:04:12,390 --> 00:04:14,690 as you see now here our icon is here 86 87 00:04:14,690 --> 00:04:17,090 and also our text is here. 87 88 00:04:17,090 --> 00:04:17,923 And what is next? 88 89 00:04:17,923 --> 00:04:21,650 Also let's learn how we can add widgets to our frames, 89 90 00:04:21,650 --> 00:04:23,220 our tabs. 90 91 00:04:23,220 --> 00:04:25,550 And here, again, I will create a label 91 92 00:04:25,550 --> 00:04:26,880 and also a button. 92 93 00:04:26,880 --> 00:04:31,880 For the label I will say lbl is equal to ttk.label. 93 94 00:04:34,890 --> 00:04:39,040 And for master, you see now it says master, 94 95 00:04:39,040 --> 00:04:44,040 so the parent, for the parent I will say tab1. 95 96 00:04:44,260 --> 00:04:49,120 And for the text property here I will say hello. 96 97 00:04:49,120 --> 00:04:52,243 And after that here I will use place geometry manager. 97 98 00:04:53,310 --> 00:04:58,310 Place, and for X value I will say, X is equal to 200 98 99 00:04:58,620 --> 00:05:01,563 and Y is equal to 200. 99 100 00:05:02,710 --> 00:05:04,120 Sorry. 100 101 00:05:04,120 --> 00:05:04,953 This is, 101 102 00:05:07,110 --> 00:05:11,140 X is 200, something wrong. 102 103 00:05:11,140 --> 00:05:13,313 I need to press here, insert. 103 104 00:05:16,400 --> 00:05:17,233 200. 104 105 00:05:21,920 --> 00:05:25,470 Now sometimes it makes this problem 105 106 00:05:25,470 --> 00:05:28,090 if you press insert button. 106 107 00:05:28,090 --> 00:05:29,703 Now it's fine, I think. 107 108 00:05:30,870 --> 00:05:32,263 And 200. 108 109 00:05:35,680 --> 00:05:36,790 Sorry for that. 109 110 00:05:36,790 --> 00:05:41,533 And after here, for the Y I will say Y is equal to, 110 111 00:05:43,330 --> 00:05:47,220 again, let's say 20. 111 112 00:05:47,220 --> 00:05:49,657 And for the button, what I will say? 112 113 00:05:49,657 --> 00:05:54,657 Button is equal to ttk.button. 113 114 00:05:55,420 --> 00:05:58,913 And the first parameter it will tab2, 114 115 00:05:59,750 --> 00:06:04,750 my parent widget, and second one is our text property, 115 116 00:06:04,780 --> 00:06:08,823 text is equal to, let's say, click me. 116 117 00:06:10,290 --> 00:06:12,450 And after that here I need to use again 117 118 00:06:12,450 --> 00:06:13,560 place geometry manager. 118 119 00:06:13,560 --> 00:06:14,393 Place. 119 120 00:06:15,540 --> 00:06:19,840 For X value I will say X is equal to 250, 120 121 00:06:19,840 --> 00:06:22,173 and Y is 50. 121 122 00:06:25,130 --> 00:06:27,173 And if I run my application now, 122 123 00:06:29,670 --> 00:06:31,080 as you see now here, 123 124 00:06:31,080 --> 00:06:32,360 this is the first step. 124 125 00:06:32,360 --> 00:06:33,750 This is second one. 125 126 00:06:33,750 --> 00:06:35,420 And I think why it's like that? 126 127 00:06:35,420 --> 00:06:37,590 I didn't understand here. 127 128 00:06:37,590 --> 00:06:41,390 We said tab1, tabs, I said sorry. 128 129 00:06:41,390 --> 00:06:45,530 If you use tabs, add all the tabs. 129 130 00:06:45,530 --> 00:06:46,720 So here, what I need to do? 130 131 00:06:46,720 --> 00:06:51,090 I need to say instead of tabs, I need to say tab2, 131 132 00:06:52,010 --> 00:06:53,513 and if I run it again. 132 133 00:06:54,880 --> 00:06:58,030 First tab is here and our label is here. 133 134 00:06:58,030 --> 00:06:59,430 For the second tab, as you see, 134 135 00:06:59,430 --> 00:07:01,120 our button is here. 135 136 00:07:01,120 --> 00:07:04,120 This is how we can use tab widget for our application. 136 137 00:07:04,120 --> 00:07:05,100 For now, that's all. 137 138 00:07:05,100 --> 00:07:06,100 See you in the next.