0 1 00:00:04,710 --> 00:00:06,260 In this lesson, we are going to learn 1 2 00:00:06,260 --> 00:00:09,210 ListBox Widget, and it is a very useful widget by the way 2 3 00:00:09,210 --> 00:00:11,500 if you want to list our items. 3 4 00:00:11,500 --> 00:00:12,333 And to do that what we need to do, 4 5 00:00:12,333 --> 00:00:16,950 first I will create a variable ListBox its name is equal to, 5 6 00:00:16,950 --> 00:00:21,060 and my constructor method will be, ListBox, okay? 6 7 00:00:21,060 --> 00:00:22,437 And firstly what I need to do, 7 8 00:00:22,437 --> 00:00:26,340 I need to pass in my top level window, it's root. 8 9 00:00:26,340 --> 00:00:28,640 And I have more parameters by the way here, 9 10 00:00:28,640 --> 00:00:30,900 but firstly, I want to use only root 10 11 00:00:30,900 --> 00:00:34,350 and after that here, I'll say ListBox dot pack 11 12 00:00:34,350 --> 00:00:36,270 geometry manager, okay? 12 13 00:00:36,270 --> 00:00:38,073 Now if I run my application, 13 14 00:00:39,784 --> 00:00:43,610 and you see now our ListBox is here but it's quite small. 14 15 00:00:43,610 --> 00:00:48,150 So to solve this problem, what I can do I can use the height 15 16 00:00:48,150 --> 00:00:49,840 and also width properties 16 17 00:00:49,840 --> 00:00:54,753 and also, I want to use pady property for my ListBox here. 17 18 00:00:55,730 --> 00:01:00,390 I will say pad Y is equal to 25, okay? 18 19 00:01:00,390 --> 00:01:03,410 And other property is 19 20 00:01:03,410 --> 00:01:05,710 first one , will be width, 20 21 00:01:05,710 --> 00:01:09,570 width is equal to 40, 21 22 00:01:09,570 --> 00:01:13,103 and height is equal to 15, okay? 22 23 00:01:15,740 --> 00:01:19,100 And now, if I run my application again, 23 24 00:01:19,100 --> 00:01:20,180 as you see now, it's more reasonable 24 25 00:01:20,180 --> 00:01:25,180 we have pad here, and also this box is bigger. 25 26 00:01:26,480 --> 00:01:27,640 So now, what we need to do, 26 27 00:01:27,640 --> 00:01:30,713 we need to add items to our window, right? 27 28 00:01:31,950 --> 00:01:33,180 Our ListBox, sorry. 28 29 00:01:33,180 --> 00:01:34,550 So, how we can do that? 29 30 00:01:34,550 --> 00:01:37,540 I will come here, okay, before geometry manager, 30 31 00:01:37,540 --> 00:01:40,930 and here I will say ListBox dot insert 31 32 00:01:42,110 --> 00:01:45,050 and for the insert, as you see, it says here, 32 33 00:01:45,050 --> 00:01:50,050 index, press control +P, index and element, you see? 33 34 00:01:51,350 --> 00:01:54,480 Index and elements, so for index here, 34 35 00:01:54,480 --> 00:01:56,670 let me run this guy again. 35 36 00:01:56,670 --> 00:01:58,980 Now, for the first item, 36 37 00:01:58,980 --> 00:02:01,614 sorry, so for the first item here, 37 38 00:02:01,614 --> 00:02:03,820 for the item you use indices, okay? 38 39 00:02:03,820 --> 00:02:06,570 The first item index is zero, 39 40 00:02:06,570 --> 00:02:07,683 and second one is, 40 41 00:02:09,825 --> 00:02:11,300 the second item index is one. 41 42 00:02:11,300 --> 00:02:14,330 The third one, its index is three, and so on. 42 43 00:02:14,330 --> 00:02:17,240 So here, first item I will say zero. 43 44 00:02:17,240 --> 00:02:21,545 This is for first item, and after that, my string. 44 45 00:02:21,545 --> 00:02:23,540 For the string, I say Python. 45 46 00:02:23,540 --> 00:02:25,833 And after that here I press control D. 46 47 00:02:26,680 --> 00:02:29,490 For the string I will say C++, 47 48 00:02:29,490 --> 00:02:33,410 and its index number will be, of course, one, right? 48 49 00:02:33,410 --> 00:02:37,290 Again, control + D here, index number will be two. 49 50 00:02:37,290 --> 00:02:41,620 My string name will be C#. 50 51 00:02:41,620 --> 00:02:43,910 And control + D again. 51 52 00:02:43,910 --> 00:02:47,192 Instead of C #, I will say PHP, 52 53 00:02:47,192 --> 00:02:51,640 and for index number I will use three, okay? 53 54 00:02:51,640 --> 00:02:52,993 If I run my application now. 54 55 00:02:54,120 --> 00:02:57,370 As you see now, our items are here, 55 56 00:02:57,370 --> 00:03:02,290 but now also, need to use select mode for our ListBox. 56 57 00:03:02,290 --> 00:03:03,460 What is select mode? 57 58 00:03:04,353 --> 00:03:08,320 The ListBox offers four different selection modes 58 59 00:03:08,320 --> 00:03:10,110 through the select mode option. 59 60 00:03:10,110 --> 00:03:13,570 Single and browse mode mean just a single choice. 60 61 00:03:13,570 --> 00:03:17,280 Multiple and extended mean multiple items can be chosen 61 62 00:03:17,280 --> 00:03:20,820 by clicking at them at that time, okay? 62 63 00:03:20,820 --> 00:03:23,570 So here, firstly, by the way, 63 64 00:03:23,570 --> 00:03:27,100 single and also browse mode, they are very similar. 64 65 00:03:27,100 --> 00:03:31,270 And multiple and extended mode are also very similar. 65 66 00:03:31,270 --> 00:03:33,520 And if you want to make multiple choices, 66 67 00:03:33,520 --> 00:03:36,120 you use multiple or extended. 67 68 00:03:36,120 --> 00:03:37,740 If you want to make a single choice, 68 69 00:03:37,740 --> 00:03:41,960 you use single or browse mode, okay? 69 70 00:03:41,960 --> 00:03:45,710 So here, firstly, I will say select mode, 70 71 00:03:45,710 --> 00:03:49,180 and for the select mode I will use single, okay? 71 72 00:03:49,180 --> 00:03:51,670 And after that, I will use also multiple. 72 73 00:03:51,670 --> 00:03:54,430 And if I run my application, 73 74 00:03:54,430 --> 00:03:56,563 as you see now here, I can, 74 75 00:03:59,290 --> 00:04:01,610 I can choose only one item, okay, 75 76 00:04:01,610 --> 00:04:03,680 because my mode is single. 76 77 00:04:03,680 --> 00:04:05,543 If I use multiple, 77 78 00:04:07,110 --> 00:04:09,423 and now if I run my application again, 78 79 00:04:11,450 --> 00:04:15,970 you see you can choose more than one item, okay? 79 80 00:04:15,970 --> 00:04:18,930 And now, after that, what we need to do, 80 81 00:04:18,930 --> 00:04:21,130 now I want to create here two buttons. 81 82 00:04:21,130 --> 00:04:23,710 The first one is a print button 82 83 00:04:23,710 --> 00:04:26,290 and other one is the delete button, okay? 83 84 00:04:26,290 --> 00:04:28,000 And when I press my print button, 84 85 00:04:28,000 --> 00:04:31,320 I will print out my items, okay? 85 86 00:04:31,320 --> 00:04:34,250 And here, in our console, 86 87 00:04:34,250 --> 00:04:36,850 and if I click delete button I will delete my items. 87 88 00:04:38,861 --> 00:04:41,030 What I need to do, I need to come here, 88 89 00:04:41,030 --> 00:04:45,220 button is equal to, I will say, 89 90 00:04:45,220 --> 00:04:47,170 the button constructor method. 90 91 00:04:47,170 --> 00:04:49,933 And here first parameter will be, of course, root, 91 92 00:04:51,420 --> 00:04:54,530 and second one will be my text property, 92 93 00:04:54,530 --> 00:04:57,913 text is equal to print, 93 94 00:04:59,620 --> 00:05:02,453 and the command will be here, let's say, 94 95 00:05:04,940 --> 00:05:09,940 command, print me, okay? 95 96 00:05:10,120 --> 00:05:12,531 And also, let's use place geometry 96 97 00:05:12,531 --> 00:05:14,308 for our buttons 97 98 00:05:14,308 --> 00:05:19,308 Place, and here, I will say for X value is equal to 300. 98 99 00:05:19,980 --> 00:05:24,270 For Y value, I will say, again, 300, okay? 99 100 00:05:24,270 --> 00:05:27,120 And control + D, now I will duplicate my button. 100 101 00:05:27,120 --> 00:05:30,180 For the name I will use button 2. 101 102 00:05:30,180 --> 00:05:33,360 For the text, let's say delete. 102 103 00:05:33,360 --> 00:05:37,560 Command will be, delete me, right? 103 104 00:05:37,560 --> 00:05:38,860 my definition name. 104 105 00:05:38,860 --> 00:05:43,860 Place, X will be here 350 and Y value will be 300, okay? 105 106 00:05:45,690 --> 00:05:48,040 So what I need to do, I need to create these guys, right? 106 107 00:05:48,040 --> 00:05:49,998 Print me and delete me. 107 108 00:05:49,998 --> 00:05:53,067 And here I need to come here def. 108 109 00:05:53,067 --> 00:05:55,317 Print me firstly, and here, 109 110 00:06:01,000 --> 00:06:04,833 let's say pass, and after that here def delete me. 110 111 00:06:08,370 --> 00:06:10,627 And here, what do I need to say? 111 112 00:06:10,627 --> 00:06:12,380 I need to say, again, pass, okay? 112 113 00:06:12,380 --> 00:06:15,750 And now, first let's create our print function. 113 114 00:06:15,750 --> 00:06:19,863 For printing what i will say, here I need to create a variable, 114 115 00:06:21,160 --> 00:06:26,160 selected items, you can say, or item, doesn't matter. 115 116 00:06:26,170 --> 00:06:27,003 Here what I need to do, 116 117 00:06:27,003 --> 00:06:31,520 I need to use ListBox dot curselection, okay? 117 118 00:06:31,520 --> 00:06:33,150 Cursor selection this one. 118 119 00:06:33,150 --> 00:06:34,427 And after that here, what I need to do, 119 120 00:06:34,427 --> 00:06:36,830 I need to use for loop, 120 121 00:06:36,830 --> 00:06:40,733 and I will say for item in selected item, 121 122 00:06:41,630 --> 00:06:46,630 and here I will say print ListBox dot get, okay? 122 123 00:06:46,630 --> 00:06:47,930 And I will pass in item. 123 124 00:06:50,110 --> 00:06:52,073 And if I run my application, 124 125 00:06:53,090 --> 00:06:57,370 now our select mode is multiple, right? 125 126 00:06:57,370 --> 00:06:58,730 You see here, it's multiple, 126 127 00:06:58,730 --> 00:07:02,620 so I will choose all of them, 127 128 00:07:02,620 --> 00:07:05,610 and I will print, I will hit our print button. 128 129 00:07:05,610 --> 00:07:07,320 As you see now, our items here, 129 130 00:07:07,320 --> 00:07:10,642 Python, C++, C #, and PHP. 130 131 00:07:10,642 --> 00:07:14,470 If I choose only one, for example, 131 132 00:07:14,470 --> 00:07:15,950 you see, PHP's here, 132 133 00:07:15,950 --> 00:07:20,600 or two, it's Python and PHP is here. 133 134 00:07:20,600 --> 00:07:23,560 Now it's time to create our delete function. 134 135 00:07:23,560 --> 00:07:25,470 For delete, what I will do, 135 136 00:07:25,470 --> 00:07:28,240 very similar thing I will do, I will say here, 136 137 00:07:28,240 --> 00:07:32,880 selected item is equal 137 138 00:07:32,880 --> 00:07:35,507 to ListBox dot curselection. 138 139 00:07:38,900 --> 00:07:43,510 And after that for item in selected item, 139 140 00:07:43,510 --> 00:07:47,510 i will say, ListBox dot, instead of get method, 140 141 00:07:48,704 --> 00:07:51,048 I'll use delete, okay? 141 142 00:07:51,048 --> 00:07:52,416 And which one I will delete? 142 143 00:07:52,416 --> 00:07:54,499 I will delete item, okay? 143 144 00:07:55,622 --> 00:07:58,602 And if I run my application now, run, 144 145 00:07:58,602 --> 00:08:01,550 and if I say PHP and delete, 145 146 00:08:01,550 --> 00:08:03,696 as you see now, PHP is gone. 146 147 00:08:03,696 --> 00:08:05,960 If I say Python, delete. 147 148 00:08:05,960 --> 00:08:08,520 And now multi choice, and delete. 148 149 00:08:08,520 --> 00:08:13,520 As you see now is deleted all of them, okay? 149 150 00:08:13,990 --> 00:08:18,820 This is how you can use ListBox widget in our projects. 150 151 00:08:18,820 --> 00:08:20,038 For now, that's all. 151 152 00:08:20,038 --> 00:08:21,036 See you next.