0 1 00:00:04,250 --> 00:00:05,620 In this lecture we are going to learn 1 2 00:00:05,620 --> 00:00:08,210 how we can use TreeView Widget for our applications. 2 3 00:00:08,210 --> 00:00:09,660 What we need to do, 3 4 00:00:09,660 --> 00:00:10,850 here I will create a variable, 4 5 00:00:10,850 --> 00:00:15,030 and I will say treeview is equal to, 5 6 00:00:15,030 --> 00:00:17,417 I will use ttk module okay, 6 7 00:00:17,417 --> 00:00:19,350 ttk dot Treeview, 7 8 00:00:19,350 --> 00:00:22,702 and I will only pass in root parameter, 8 9 00:00:22,702 --> 00:00:25,870 my top level widget, right? 9 10 00:00:25,870 --> 00:00:28,080 After here, what I need to do, I need to use 10 11 00:00:28,080 --> 00:00:32,173 treeview dot pack geometry manager, pack, okay? 11 12 00:00:34,180 --> 00:00:37,340 If I run my application, treeview is ready, 12 13 00:00:37,340 --> 00:00:39,680 but it's totally empty, right? 13 14 00:00:39,680 --> 00:00:41,280 So what we need to do, 14 15 00:00:41,280 --> 00:00:44,426 we need to add some items to our treeview. 15 16 00:00:44,426 --> 00:00:49,267 What we need to do I will say treeview dot insert, okay? 16 17 00:00:50,200 --> 00:00:53,360 Our first parameter as you see it says parent. 17 18 00:00:53,360 --> 00:00:54,332 Parent is we don't, 18 19 00:00:54,332 --> 00:00:56,397 we will pass this one, 19 20 00:00:56,397 --> 00:01:00,810 because our treeview icon is already parent, okay? 20 21 00:01:00,810 --> 00:01:03,913 For the first one I will leave it blank, okay? 21 22 00:01:05,864 --> 00:01:08,773 After that one, our second one is our index number. 22 23 00:01:08,773 --> 00:01:13,548 Our index number will be zero for the first item. 23 24 00:01:13,548 --> 00:01:15,861 The third one will be our item name, 24 25 00:01:15,861 --> 00:01:18,528 and here I will say item1, okay? 25 26 00:01:20,558 --> 00:01:23,170 After that we need to use text property, 26 27 00:01:23,170 --> 00:01:27,733 and for the text property I will say First Item, okay? 27 28 00:01:29,040 --> 00:01:30,163 Now it's ready. 28 29 00:01:32,526 --> 00:01:33,760 Let's run our application first, 29 30 00:01:33,760 --> 00:01:36,060 and after that we can add the others. 30 31 00:01:36,060 --> 00:01:38,193 As you see now our first item is here. 31 32 00:01:39,070 --> 00:01:40,812 So what we can do now, 32 33 00:01:40,812 --> 00:01:42,003 if I press Ctrl+D, 33 34 00:01:42,930 --> 00:01:45,483 and I will create here four items. 34 35 00:01:46,620 --> 00:01:48,950 The first one is zero. 35 36 00:01:48,950 --> 00:01:52,440 The second one is one, two, 36 37 00:01:52,440 --> 00:01:55,020 and then that one will be three, right? 37 38 00:01:55,020 --> 00:01:56,620 This one will be item4, 38 39 00:01:58,385 --> 00:01:59,218 item3, 39 40 00:02:00,368 --> 00:02:01,670 item2, okay? 40 41 00:02:01,670 --> 00:02:02,780 This is important, 41 42 00:02:02,780 --> 00:02:04,710 by the way, item name. 42 43 00:02:04,710 --> 00:02:06,110 Here, and here, 43 44 00:02:06,110 --> 00:02:07,560 what we need to do, let's say 44 45 00:02:08,730 --> 00:02:09,563 second, 45 46 00:02:13,930 --> 00:02:15,750 that one will be third, 46 47 00:02:19,002 --> 00:02:21,252 and for this one, let's say 47 48 00:02:22,241 --> 00:02:23,990 '4th Item'. 48 49 00:02:23,990 --> 00:02:24,823 Okay. 49 50 00:02:24,823 --> 00:02:26,110 So what we need to do now, 50 51 00:02:26,110 --> 00:02:26,990 I want to also, 51 52 00:02:26,990 --> 00:02:29,770 let's run our application first. 52 53 00:02:29,770 --> 00:02:32,184 As you see now, all of them are here. 53 54 00:02:32,184 --> 00:02:33,763 First, I want to show you how we 54 55 00:02:33,763 --> 00:02:36,096 can use icon for our items. 55 56 00:02:37,281 --> 00:02:39,560 What we need to do here, like before, 56 57 00:02:39,560 --> 00:02:43,656 we need to use PhotoImage constructor method, right? 57 58 00:02:43,656 --> 00:02:44,976 Icon is equal to, I will say, 58 59 00:02:44,976 --> 00:02:48,571 PhotoImage constructor method, and for the file, 59 60 00:02:48,571 --> 00:02:52,387 I need to specify my location, right, for my icon. 60 61 00:02:52,387 --> 00:02:56,112 Icon is here, I will use this one again. 61 62 00:02:56,112 --> 00:03:00,195 It's location is icons/exit.png, okay? 62 63 00:03:04,568 --> 00:03:06,302 If I run my application now, sorry. 63 64 00:03:06,302 --> 00:03:07,934 What we need to do, 64 65 00:03:07,934 --> 00:03:10,267 we need to use Image property 65 66 00:03:11,543 --> 00:03:15,086 image is equal to, I will say, icon. 66 67 00:03:15,086 --> 00:03:17,657 Now, If I run my application, 67 68 00:03:17,657 --> 00:03:21,490 as you see now we have an icon for first item. 68 69 00:03:22,547 --> 00:03:24,325 I also want to show you something. 69 70 00:03:24,325 --> 00:03:25,742 Now, for example, 70 71 00:03:27,128 --> 00:03:30,100 if you want to, all of them are parent by the way, right? 71 72 00:03:30,100 --> 00:03:31,340 We already talked about it. 72 73 00:03:31,340 --> 00:03:33,300 Now they are parents items. 73 74 00:03:33,300 --> 00:03:35,310 If you want to make this one, 74 75 00:03:35,310 --> 00:03:38,940 the third one is a child of the first item. 75 76 00:03:38,940 --> 00:03:39,773 How can we do that? 76 77 00:03:39,773 --> 00:03:42,900 We need to use move function, okay? 77 78 00:03:42,900 --> 00:03:43,860 Here I will say 78 79 00:03:45,060 --> 00:03:48,073 treeview dot move, 79 80 00:03:49,449 --> 00:03:51,460 and here I will use, 80 81 00:03:51,460 --> 00:03:53,320 the first parameter is, 81 82 00:03:53,320 --> 00:03:57,510 which item I want to move, it will be item3, 82 83 00:03:57,510 --> 00:03:58,343 okay, 83 84 00:03:58,343 --> 00:04:01,780 and where, it will be item1, okay? 84 85 00:04:01,780 --> 00:04:02,730 This is the parent one. 85 86 00:04:02,730 --> 00:04:05,570 As you see it says parent. 86 87 00:04:05,570 --> 00:04:08,950 Now if I press ctrl+D, second parameter is parent. 87 88 00:04:08,950 --> 00:04:10,880 This one is child, okay? 88 89 00:04:10,880 --> 00:04:13,230 Item one is my parent. 89 90 00:04:13,230 --> 00:04:16,740 After that what I need to do here, I need to say, 90 91 00:04:16,740 --> 00:04:18,880 for last parameter, 'end', okay? 91 92 00:04:18,880 --> 00:04:20,523 If I run my application now, 92 93 00:04:21,980 --> 00:04:23,857 as you see the first one is here, 93 94 00:04:23,857 --> 00:04:25,830 and we have the plus symbol here. 94 95 00:04:25,830 --> 00:04:28,247 If I click this plus, as you see, 95 96 00:04:28,247 --> 00:04:30,520 our first item is parent, 96 97 00:04:30,520 --> 00:04:34,210 and the third item it's is child, okay? 97 98 00:04:34,210 --> 00:04:36,963 Also, what I want to show you here, 98 99 00:04:38,400 --> 00:04:42,200 how we can create callback function for our items. 99 100 00:04:42,200 --> 00:04:43,750 This is also very important. 100 101 00:04:43,750 --> 00:04:47,623 For TreeView we can not use a comment property, 101 102 00:04:49,320 --> 00:04:52,740 because as you see these guys are not like buttons, okay? 102 103 00:04:52,740 --> 00:04:56,309 If you want to create a click event for TreeView, 103 104 00:04:56,309 --> 00:04:59,270 you need to use the bind method, because 104 105 00:04:59,270 --> 00:05:00,960 we need to create here a double click, 105 106 00:05:00,960 --> 00:05:03,790 one click is not, double click even. 106 107 00:05:03,790 --> 00:05:05,180 Click event is not enough, 107 108 00:05:05,180 --> 00:05:10,180 and it's not good for this kind of widgets. 108 109 00:05:10,252 --> 00:05:14,087 A click event is fine for buttons, 109 110 00:05:14,087 --> 00:05:18,910 but for TreeView you need to create a double click event, okay? 110 111 00:05:18,910 --> 00:05:20,053 Here what I will do, 111 112 00:05:20,930 --> 00:05:22,010 I will come here, 112 113 00:05:22,010 --> 00:05:24,250 and create a treeview bind, 113 114 00:05:25,700 --> 00:05:28,350 double click event for my treeview. 114 115 00:05:28,350 --> 00:05:32,500 I will say treeview dot bind. 115 116 00:05:32,500 --> 00:05:37,480 After bind I need to say, I need to use single quotes, 116 117 00:05:37,480 --> 00:05:40,433 and I will say Double, 117 118 00:05:42,470 --> 00:05:45,723 and after that, dash one, okay? 118 119 00:05:48,550 --> 00:05:51,330 My second parameter will be my function name, 119 120 00:05:51,330 --> 00:05:53,513 and I will name it callback, okay? 120 121 00:05:54,390 --> 00:05:56,930 Now what I need to do, I need to create this function, right? 121 122 00:05:56,930 --> 00:06:01,393 I will come here and say, def callback. 122 123 00:06:03,305 --> 00:06:05,520 For the callback button I need to use here, 123 124 00:06:05,520 --> 00:06:07,700 event parameter, like that, 124 125 00:06:07,700 --> 00:06:10,590 because we have many items there, right? 125 126 00:06:10,590 --> 00:06:14,433 We created this click event for all the items, okay? 126 127 00:06:14,433 --> 00:06:19,040 So we need to know which item was clicked, okay? 127 128 00:06:19,040 --> 00:06:21,697 here, pass in event 128 129 00:06:21,697 --> 00:06:25,380 parameter for our function, okay? 129 130 00:06:25,380 --> 00:06:29,290 After that here I know which item is that. 130 131 00:06:29,290 --> 00:06:34,290 I will say item is equal to treeview dot identify, 131 132 00:06:38,720 --> 00:06:39,987 and for identify here, 132 133 00:06:39,987 --> 00:06:42,967 the first parameter will be 'item', okay? 133 134 00:06:42,967 --> 00:06:46,193 The second one will be event.x, 134 135 00:06:47,150 --> 00:06:52,060 and the other one will be event.y, okay? 135 136 00:06:52,060 --> 00:06:53,340 After that what I need to do here, 136 137 00:06:53,340 --> 00:06:57,620 I will say I want to print out which item clicked, okay? 137 138 00:06:57,620 --> 00:06:59,550 Of course we can do whatever we want, 138 139 00:06:59,550 --> 00:07:01,030 but this is just an example, 139 140 00:07:01,030 --> 00:07:02,950 and we try to learn how we can create a 140 141 00:07:02,950 --> 00:07:05,280 callback function for our treeview. 141 142 00:07:05,280 --> 00:07:07,687 Here I will say, You clicked on. 142 143 00:07:11,310 --> 00:07:12,710 Here, I want to use, 143 144 00:07:12,710 --> 00:07:14,483 by the way format, okay? 144 145 00:07:16,740 --> 00:07:21,740 Here, after that, here I will say format. 145 146 00:07:22,522 --> 00:07:26,314 I will say treeview dot item, 146 147 00:07:26,314 --> 00:07:29,100 and here I will pass in again item, 147 148 00:07:29,100 --> 00:07:33,780 and the last parameter will be my text, okay, "text". 148 149 00:07:33,780 --> 00:07:35,973 Now if I run this application. 149 150 00:07:38,230 --> 00:07:41,067 For example if I click the second item, sorry. 150 151 00:07:47,410 --> 00:07:50,140 In our console, and then run. 151 152 00:07:50,140 --> 00:07:53,300 If I click the second item, double click, okay? 152 153 00:07:53,300 --> 00:07:54,820 Not one click. 153 154 00:07:54,820 --> 00:07:56,480 You see you clicked on second item. 154 155 00:07:56,480 --> 00:07:58,270 If I click on third one, 155 156 00:07:58,270 --> 00:07:59,910 you see you clicked third item. 156 157 00:07:59,910 --> 00:08:01,683 If I click first item, 157 158 00:08:02,980 --> 00:08:04,180 you clicked first item. 158 159 00:08:04,180 --> 00:08:06,900 Let's also click it's child. 159 160 00:08:06,900 --> 00:08:10,810 Third item, you see you clicked on third item. 160 161 00:08:10,810 --> 00:08:11,800 This is how we can use 161 162 00:08:11,800 --> 00:08:13,920 TreeView Widgets for our applications. 162 163 00:08:13,920 --> 00:08:14,840 For now that's all, 163 164 00:08:14,840 --> 00:08:16,323 see you in the next.