1 00:00:01,650 --> 00:00:06,240 OK, so let's start to build this thing out now in our MP three player, the first thing we want right 2 00:00:06,240 --> 00:00:11,510 at the top is a playlist, something where we can put the names of all the songs that we want to play. 3 00:00:11,520 --> 00:00:14,420 So to do that, we're going to use something called a listbox. 4 00:00:14,430 --> 00:00:19,170 Now, before we get into this, I should mention, if you're not familiar with Kanter, Kanter works 5 00:00:19,170 --> 00:00:19,980 with widgets. 6 00:00:20,130 --> 00:00:21,750 Everything in counter is a widget. 7 00:00:21,750 --> 00:00:25,830 So a button is a button widget, a label is a label widget. 8 00:00:26,340 --> 00:00:32,070 So everything is a widget and widgets have attributes and we can set those attributes in our code. 9 00:00:32,320 --> 00:00:38,370 So even if you want a button you just slap up a button widget, set a couple of attributes, say you 10 00:00:38,370 --> 00:00:42,420 know what text you want on the button, what you want to happen when you click the button and it just 11 00:00:42,420 --> 00:00:42,870 it does it. 12 00:00:42,870 --> 00:00:46,440 So I'm not going to spend a whole lot of time explaining the widgets. 13 00:00:46,440 --> 00:00:48,060 I'm going to assume you already know them. 14 00:00:48,360 --> 00:00:53,520 Or if you don't know them, you could just sort of learn as I'm typing because we're just going to use 15 00:00:53,520 --> 00:00:53,730 them. 16 00:00:53,730 --> 00:00:56,160 So I'm not going to explain the ins and outs of them. 17 00:00:56,190 --> 00:00:57,390 We're just going to start to use them. 18 00:00:57,390 --> 00:01:01,440 So the box we want to use is going to be something called a listbox. 19 00:01:01,620 --> 00:01:05,700 And a little box is just what it sounds as a box that has a list of stuff in it. 20 00:01:05,710 --> 00:01:06,020 Right. 21 00:01:06,210 --> 00:01:12,270 So each thing, the list is going to be our play list and we're going to import our songs into a box 22 00:01:12,270 --> 00:01:13,160 and that'll be that. 23 00:01:13,170 --> 00:01:18,630 So to do to use any widget with Kintyre you, it's always a two step process. 24 00:01:18,630 --> 00:01:21,060 You define it and then you put it on the screen. 25 00:01:21,540 --> 00:01:22,610 So let's define this here. 26 00:01:22,620 --> 00:01:24,210 Let's call this a playlist. 27 00:01:26,020 --> 00:01:33,580 Underscore box, I guess, and set that equal to this is going to be a ListBox widget and notice this 28 00:01:33,580 --> 00:01:38,830 capital L. And with widgets, we always put these parentheses and then inside the parentheses, that's 29 00:01:38,830 --> 00:01:41,260 where you put your that's where you define your attributes. 30 00:01:41,470 --> 00:01:41,770 Right. 31 00:01:41,790 --> 00:01:43,970 So where do we want this to go? 32 00:01:43,990 --> 00:01:45,690 We want to put it in our root window. 33 00:01:45,700 --> 00:01:49,180 We only have one window right now and it's the window. 34 00:01:49,630 --> 00:01:51,870 And that's really all we need right off the bat. 35 00:01:51,880 --> 00:01:53,350 So let's just do that. 36 00:01:53,350 --> 00:01:56,370 Now, like I said, this is always a two step process. 37 00:01:56,380 --> 00:01:57,700 You you define the thing. 38 00:01:57,790 --> 00:01:58,660 We just defined it. 39 00:01:58,990 --> 00:02:00,190 Then you put it on the screen. 40 00:02:00,190 --> 00:02:04,690 And to do that, we're going to go play list, underscore box, dot pack. 41 00:02:05,530 --> 00:02:08,800 And there's two ways, two main ways to put things on a screen. 42 00:02:08,810 --> 00:02:11,110 You can pack them and you can read them. 43 00:02:11,290 --> 00:02:14,590 And with a grid system, it's just like it sounds it's a grid. 44 00:02:14,590 --> 00:02:21,010 You go over a row, one column, one row to column to row three column for whenever, and you can position 45 00:02:21,010 --> 00:02:22,750 them exactly with pack. 46 00:02:22,750 --> 00:02:26,160 We're just packing everything onto the screen and for now we're just going to use pack. 47 00:02:26,170 --> 00:02:27,700 We're going to use some grid stuff later on. 48 00:02:27,700 --> 00:02:28,980 But for now, we can just pack this. 49 00:02:29,230 --> 00:02:31,270 Now, this will put this right. 50 00:02:32,090 --> 00:02:37,640 At the top, we want to push it down a little bit so we can give it some padding on the y axis, you 51 00:02:37,650 --> 00:02:42,730 know, you have an X and Y axis, Y is up and down, X is left and right. 52 00:02:42,920 --> 00:02:45,680 So we want to put some padding above and and below. 53 00:02:45,680 --> 00:02:49,120 We give it a pad Y and we could just set that equal to 20. 54 00:02:49,430 --> 00:02:52,840 So let's go ahead and save this and run it just to see what this looks like. 55 00:02:52,850 --> 00:02:58,550 So Python players up high and pressing the up on my keyboard to go back to the last command that we 56 00:02:58,550 --> 00:03:00,040 type so we don't have to type it every time. 57 00:03:00,050 --> 00:03:00,890 So that's kind of nice. 58 00:03:01,980 --> 00:03:08,550 And you can see here's our box and it's, you know, kind of weird, it's kind of not very big, it's 59 00:03:08,550 --> 00:03:08,970 white. 60 00:03:08,970 --> 00:03:12,750 We want to change that and it's definitely not big enough. 61 00:03:12,750 --> 00:03:13,970 So let's change that. 62 00:03:14,490 --> 00:03:19,590 So first we can come up here to where we defined it and we can define more attributes and we always 63 00:03:19,590 --> 00:03:20,800 separate these with commas. 64 00:03:20,820 --> 00:03:25,830 So first, let's give this a background color of black. 65 00:03:27,080 --> 00:03:34,310 Comma, and then let's give it a foreground color of green, that's going to be the text inside, I 66 00:03:34,310 --> 00:03:35,200 want to make them green. 67 00:03:35,210 --> 00:03:36,440 So I think that looks cool. 68 00:03:36,950 --> 00:03:39,290 Now, we can also set the width. 69 00:03:40,540 --> 00:03:46,000 And I think by default, the width is 20, so I'm going to make this 60 and you notice these are in 70 00:03:46,000 --> 00:03:46,990 quotation marks. 71 00:03:47,020 --> 00:03:53,710 This is not numbers are never in quotation marks early in any kind of coding because numbers are numbers 72 00:03:53,890 --> 00:03:57,370 and these are strings, you know, text words. 73 00:03:57,580 --> 00:03:59,130 And those are always in quotation marks. 74 00:03:59,140 --> 00:04:01,210 So that looks good there. 75 00:04:01,210 --> 00:04:02,950 And I think we'll leave it at that. 76 00:04:02,980 --> 00:04:07,470 So black background, green foreground, we don't have any foreground yet, but we will. 77 00:04:07,780 --> 00:04:09,010 And then a width of sixty. 78 00:04:09,010 --> 00:04:11,530 So let's save this and come back here and run it again. 79 00:04:13,670 --> 00:04:15,960 And right now, this is looking much better. 80 00:04:16,220 --> 00:04:23,030 It's nice and wide, I like the size of that center right in the middle of the screen and we are good 81 00:04:23,030 --> 00:04:23,480 to go. 82 00:04:23,660 --> 00:04:24,760 So that's all for this video. 83 00:04:24,770 --> 00:04:26,270 We've got our little playlist box. 84 00:04:26,420 --> 00:04:27,410 In the next video. 85 00:04:27,410 --> 00:04:31,250 We'll start to look at image buttons and we'll add those.