1 00:00:05,440 --> 00:00:07,200 So, as we saw in the previous video, 2 00:00:07,200 --> 00:00:09,820 we got our basic screen up and working 3 00:00:09,820 --> 00:00:12,140 but we're missing scroll bars though. 4 00:00:12,140 --> 00:00:15,080 Now, we could put scroll bars in their own columns 5 00:00:15,080 --> 00:00:16,730 next to the list boxes, 6 00:00:16,730 --> 00:00:18,920 and if you set them to be sticky to the left-hand side 7 00:00:18,920 --> 00:00:21,570 of the column, so to the west, in other words, 8 00:00:21,570 --> 00:00:24,410 they'd appear right up against the appropriate list box. 9 00:00:24,410 --> 00:00:27,220 And that's a perfectly acceptable way to do it 10 00:00:27,220 --> 00:00:29,340 but I don't actually want to do that here. 11 00:00:29,340 --> 00:00:31,110 So, in case you haven't guessed, 12 00:00:31,110 --> 00:00:33,290 we're gonna be creating our own classes, 13 00:00:33,290 --> 00:00:34,990 we're gonna create our own classes 14 00:00:34,990 --> 00:00:36,480 and they're gonna inherit from 15 00:00:36,480 --> 00:00:39,220 the TK inter list box class. 16 00:00:39,220 --> 00:00:40,960 So, our class is going to deal with loading data 17 00:00:40,960 --> 00:00:43,450 from the database but while we're at it, 18 00:00:43,450 --> 00:00:45,940 we may as well give them scroll bars as well. 19 00:00:45,940 --> 00:00:48,750 So, when the new list box objects are created, 20 00:00:48,750 --> 00:00:51,150 they won't know that there's a column to the right 21 00:00:51,150 --> 00:00:52,690 that can host a scroll bar. 22 00:00:52,690 --> 00:00:54,930 So, it's probably better to put the scroll bars 23 00:00:54,930 --> 00:00:57,330 in the same column as the list boxes. 24 00:00:57,330 --> 00:00:59,660 Now, it may not be obvious that you can do that 25 00:00:59,660 --> 00:01:01,050 but as long as the scroll bars 26 00:01:01,050 --> 00:01:03,250 are set to be sticky to the right, 27 00:01:03,250 --> 00:01:04,400 the east, in other words, 28 00:01:04,400 --> 00:01:06,170 then the list box will only fill the width 29 00:01:06,170 --> 00:01:09,650 of a column up to the scroll bar. 30 00:01:09,650 --> 00:01:10,560 So, let's close this down 31 00:01:10,560 --> 00:01:13,020 and what I'm going to do is we're gonna add a scroll bar 32 00:01:13,020 --> 00:01:15,050 to the artist's list first, 33 00:01:15,050 --> 00:01:16,350 then we can copy and paste the code 34 00:01:16,350 --> 00:01:18,480 for the other list boxes. 35 00:01:18,480 --> 00:01:21,890 So, I'm gonna go back up to the artist's list code 36 00:01:21,890 --> 00:01:25,640 below the definition, the config line on line 31. 37 00:01:25,640 --> 00:01:27,620 Let's continue on with our scroll bar. 38 00:01:27,620 --> 00:01:30,760 So, I'm gonna type artist, scroll 39 00:01:30,760 --> 00:01:34,060 is equal to TK inter dot scroll bar, 40 00:01:34,060 --> 00:01:36,000 with a capital S, 41 00:01:36,000 --> 00:01:38,550 parentheses, main window, 42 00:01:38,550 --> 00:01:39,840 comma, space, 43 00:01:39,840 --> 00:01:43,970 then orient equals TK inter 44 00:01:43,970 --> 00:01:46,590 dot VERTICAL, all in upper case, 45 00:01:46,590 --> 00:01:47,840 comma, space, 46 00:01:47,840 --> 00:01:49,910 command, equals, 47 00:01:49,910 --> 00:01:51,540 that's gonna be artist list 48 00:01:51,540 --> 00:01:53,620 dot Y view 49 00:01:55,360 --> 00:01:58,560 and then on the next line we want artist scroll, 50 00:01:58,560 --> 00:02:02,580 dot grid, row equals one, 51 00:02:02,580 --> 00:02:04,180 comma, space, colon 52 00:02:04,180 --> 00:02:07,150 equals zero, comma, space, sticky, 53 00:02:07,150 --> 00:02:09,400 equals, single quotes, NSE, 54 00:02:10,889 --> 00:02:13,890 comma, the row span is equal to two. 55 00:02:16,130 --> 00:02:17,750 Then the last line, 56 00:02:17,750 --> 00:02:18,750 artist list. 57 00:02:19,620 --> 00:02:22,610 There you want left square brackets, 58 00:02:22,610 --> 00:02:23,500 two single quotes, 59 00:02:23,500 --> 00:02:25,380 then we want within those two single quotes, 60 00:02:25,380 --> 00:02:26,960 wide scroll command 61 00:02:29,880 --> 00:02:32,480 equals, then it's artist scroll 62 00:02:32,480 --> 00:02:34,730 dot set 63 00:02:34,730 --> 00:02:36,210 and that should be it. 64 00:02:36,210 --> 00:02:38,790 So, let's just run this code. 65 00:02:38,790 --> 00:02:40,710 Then check out the code 66 00:02:42,140 --> 00:02:43,890 and we can see now very faintly, 67 00:02:43,890 --> 00:02:45,360 but it's actually there, 68 00:02:45,360 --> 00:02:47,160 a scroll bar neatly tied now 69 00:02:47,160 --> 00:02:48,350 to the list box, as you can see, 70 00:02:48,350 --> 00:02:51,430 and obviously, once we start populating that with some data, 71 00:02:51,430 --> 00:02:53,560 we'll be able to see that a little bit easier. 72 00:02:53,560 --> 00:02:55,590 So, at the moment, obviously because of that, 73 00:02:55,590 --> 00:02:58,150 the fact that there's no data, it doesn't scroll 74 00:02:58,150 --> 00:03:00,440 but you probably less concerned about that 75 00:03:00,440 --> 00:03:02,510 than about the fact that I've just suggested 76 00:03:02,510 --> 00:03:04,730 copying and pasting code. 77 00:03:04,730 --> 00:03:07,530 So, when you're performing basic initialization, 78 00:03:07,530 --> 00:03:08,750 then you really just can't get away 79 00:03:08,750 --> 00:03:10,410 from copying and pasting, 80 00:03:10,410 --> 00:03:12,440 but when you're adding functionality, 81 00:03:12,440 --> 00:03:16,260 as we are here, there's always a better way. 82 00:03:16,260 --> 00:03:18,430 And here it turns out that there is. 83 00:03:18,430 --> 00:03:20,130 But before we look at that, 84 00:03:20,130 --> 00:03:21,840 let's review the code that we've got so far. 85 00:03:21,840 --> 00:03:24,580 So, I'm just gonna close this down. 86 00:03:24,580 --> 00:03:26,510 Most of it is pretty straightforward 87 00:03:26,510 --> 00:03:28,450 but there are a couple of things 88 00:03:28,450 --> 00:03:30,300 that I haven't discussed before. 89 00:03:30,300 --> 00:03:32,280 So, I'm gonna start with the album list box 90 00:03:32,280 --> 00:03:34,130 here on line 38 91 00:03:34,130 --> 00:03:37,990 and specifically, this TK inter dot variable line. 92 00:03:37,990 --> 00:03:42,060 You know, TK inter variables attract variables. 93 00:03:42,060 --> 00:03:44,020 What that means is that when they change 94 00:03:44,020 --> 00:03:47,710 anything using them is notified of the change. 95 00:03:47,710 --> 00:03:51,560 So, what we've done here is create a TK inter variable 96 00:03:51,560 --> 00:03:53,920 and again, I'm talking about the code on line 38, 97 00:03:53,920 --> 00:03:58,140 called album LV, then we've used the list variable property, 98 00:03:58,140 --> 00:04:00,770 this is the code on line 40 now, 99 00:04:00,770 --> 00:04:02,080 and that's from the album's list box 100 00:04:02,080 --> 00:04:05,100 and that connects the variable to the list box. 101 00:04:05,100 --> 00:04:08,590 Now, if the variable changes, the list box is informed 102 00:04:08,590 --> 00:04:11,670 and you can display the new contents of the variable. 103 00:04:11,670 --> 00:04:12,700 So, to demonstrate that, 104 00:04:12,700 --> 00:04:15,310 we're gonna assign a new value to album LV 105 00:04:15,310 --> 00:04:16,950 before calling the main loop, 106 00:04:16,950 --> 00:04:18,990 so the code down here, in other words. 107 00:04:18,990 --> 00:04:20,890 So, let's go ahead and do that. 108 00:04:20,890 --> 00:04:23,300 So, we're gonna type album LV 109 00:04:24,180 --> 00:04:26,380 dot set and two parentheses, 110 00:04:26,380 --> 00:04:28,170 two left parentheses that was, 111 00:04:28,170 --> 00:04:30,080 and one, comma, space, two, comma, space, 112 00:04:30,080 --> 00:04:32,280 three, comma, space, four, comma, space 113 00:04:32,280 --> 00:04:35,360 then five and then two right parentheses. 114 00:04:35,360 --> 00:04:38,670 Now, the thing to remember with TK inter variables 115 00:04:38,670 --> 00:04:41,280 is that you just can't assign a new value to them, 116 00:04:41,280 --> 00:04:43,370 you actually have to use the set method, 117 00:04:43,370 --> 00:04:45,460 as I've done here on line 52, 118 00:04:45,460 --> 00:04:48,100 so here what I'm dong is assigning a new tuple 119 00:04:48,100 --> 00:04:50,660 and because we're passing a tuple to a function 120 00:04:50,660 --> 00:04:52,600 we have to enclose the tuple 121 00:04:52,600 --> 00:04:54,100 in another set of parentheses. 122 00:04:54,100 --> 00:04:56,150 So, that's why there's two parentheses there. 123 00:04:56,150 --> 00:04:58,570 So, if you run this code now, 124 00:05:03,970 --> 00:05:05,880 you can see that the album's list box 125 00:05:05,880 --> 00:05:08,320 is displaying the items from the tuple. 126 00:05:08,320 --> 00:05:11,060 So, our album LV variable's bound 127 00:05:11,060 --> 00:05:12,560 to the album's list box 128 00:05:12,560 --> 00:05:15,220 and if its contents change, then the list box 129 00:05:15,220 --> 00:05:17,330 will display those new values automatically, 130 00:05:17,330 --> 00:05:20,060 as you can see that it's done here. 131 00:05:20,060 --> 00:05:21,620 Now, I know this is a bit artificial 132 00:05:21,620 --> 00:05:23,950 and we change the album LV, 133 00:05:23,950 --> 00:05:26,300 let's just close this down, 134 00:05:26,300 --> 00:05:28,590 we changed the album LV variable 135 00:05:28,590 --> 00:05:29,900 before starting the main loop, 136 00:05:29,900 --> 00:05:32,180 so in other words, we changed it on line 52 137 00:05:32,180 --> 00:05:35,130 and the main loop starts on line 53, 138 00:05:35,130 --> 00:05:38,030 but it works the same way when our gooey is running. 139 00:05:38,030 --> 00:05:40,410 Now, that's actually gonna be very useful. 140 00:05:40,410 --> 00:05:42,490 When we read the albums for a new artist, 141 00:05:42,490 --> 00:05:44,720 we just have to store the values in a tuple 142 00:05:44,720 --> 00:05:46,800 and assign it to the album's LV. 143 00:05:46,800 --> 00:05:50,240 Then the list box will be updated automatically. 144 00:05:50,240 --> 00:05:53,040 Now, the second thing is how we connect the scroll bars 145 00:05:53,040 --> 00:05:54,790 to the list boxes. 146 00:05:54,790 --> 00:05:56,510 When the scroll bar scrolls, 147 00:05:56,510 --> 00:06:00,100 it has to notify the list box that it's done so. 148 00:06:00,100 --> 00:06:02,860 Now, the list box also has to tell the scroll bar 149 00:06:02,860 --> 00:06:04,490 how far it can scroll, 150 00:06:04,490 --> 00:06:05,920 remembering that we've just seen a way 151 00:06:05,920 --> 00:06:08,980 to update the list box contents dynamically. 152 00:06:08,980 --> 00:06:11,660 So the communication, in fact, is two way. 153 00:06:11,660 --> 00:06:15,280 Now, the list box has actually got a Y view method 154 00:06:15,280 --> 00:06:19,630 that's used to change the vertical position of the list box. 155 00:06:19,630 --> 00:06:21,710 So, if you wanted to scroll horizontally, 156 00:06:21,710 --> 00:06:25,360 then you would use the X view method instead. 157 00:06:25,360 --> 00:06:28,530 So basically, if this code on line 33, 158 00:06:29,790 --> 00:06:30,870 we're telling the scroll bar 159 00:06:30,870 --> 00:06:33,900 that it should call the artist list's Y view method 160 00:06:33,900 --> 00:06:37,750 when it scrolls, which is exactly what we want here. 161 00:06:37,750 --> 00:06:39,710 Now, any method that has a Y view property 162 00:06:39,710 --> 00:06:41,490 can be scrolled vertically 163 00:06:41,490 --> 00:06:43,040 and the same for X view 164 00:06:43,040 --> 00:06:46,340 but of course, only horizontally in that case, of course. 165 00:06:46,340 --> 00:06:48,050 Now, to communicate the other way, 166 00:06:48,050 --> 00:06:50,990 we're using the scroll bar's set method. 167 00:06:50,990 --> 00:06:53,110 This is the code here on line 35. 168 00:06:53,110 --> 00:06:54,910 So, we're telling the list box 169 00:06:54,910 --> 00:06:57,070 to call the scroll bar's set method 170 00:06:57,070 --> 00:06:59,190 whenever anything happens 171 00:06:59,190 --> 00:07:01,270 that it should tell the scroll view about. 172 00:07:01,270 --> 00:07:02,660 So, if we use the arrow keys 173 00:07:02,660 --> 00:07:04,610 to move through the list, for example, 174 00:07:04,610 --> 00:07:06,460 the list box will set the scroll bar 175 00:07:06,460 --> 00:07:09,370 according to how far through the list we are. 176 00:07:09,370 --> 00:07:11,460 So, that's all we have to do to implement scrolling 177 00:07:11,460 --> 00:07:13,480 on any widget that supports it. 178 00:07:13,480 --> 00:07:17,080 We set the scroll bar's command property, 179 00:07:17,080 --> 00:07:20,580 line 33 again, set that to the Y view method of the widget, 180 00:07:20,580 --> 00:07:22,250 we wanna scroll and then we use 181 00:07:22,250 --> 00:07:24,360 the widget's Y scroll command 182 00:07:24,360 --> 00:07:26,590 here on line 35, use that property 183 00:07:26,590 --> 00:07:30,030 to the set method of the scroll bar. 184 00:07:30,030 --> 00:07:31,780 Okay, so despite what I said, 185 00:07:31,780 --> 00:07:34,160 I'm actually going to copy and paste the code. 186 00:07:34,160 --> 00:07:37,510 And I'm gonna do that just so we can see the common elements 187 00:07:37,510 --> 00:07:38,650 and then in the next video, 188 00:07:38,650 --> 00:07:41,350 what we're gonna do is subclass the list class box 189 00:07:41,350 --> 00:07:44,280 to produce our own scrollable list box. 190 00:07:44,280 --> 00:07:45,540 So, what we want to do for now 191 00:07:45,540 --> 00:07:47,260 is copy these three lines, 192 00:07:47,260 --> 00:07:49,890 this artist scroll definition 193 00:07:49,890 --> 00:07:50,940 and then the dot grid 194 00:07:50,940 --> 00:07:53,480 and then the setting up of the Y scroll command. 195 00:07:53,480 --> 00:07:55,100 So, we'll copy those three lines. 196 00:07:55,100 --> 00:07:56,730 Now, we're gonna come down here 197 00:07:56,730 --> 00:07:59,660 and do this for the albums. 198 00:07:59,660 --> 00:08:01,220 Paste it down there like so. 199 00:08:01,220 --> 00:08:02,900 Then, we obviously need to make a change there 200 00:08:02,900 --> 00:08:06,380 to change the definitions from artist scroll to album, 201 00:08:06,380 --> 00:08:08,660 so I'm gonna do that. 202 00:08:08,660 --> 00:08:09,490 Album. 203 00:08:20,730 --> 00:08:22,320 And the other thing I need to do is make sure 204 00:08:22,320 --> 00:08:26,150 that I actually change the column to one there 205 00:08:27,090 --> 00:08:30,400 because obviously album is in column one, 206 00:08:30,400 --> 00:08:33,260 as opposed to the artist being in column zero. 207 00:08:33,260 --> 00:08:35,970 And everything else should be good to go there. 208 00:08:35,970 --> 00:08:38,610 Alright, so one final thing before I finish this video 209 00:08:38,610 --> 00:08:41,390 is to test that the scrolling really works. 210 00:08:41,390 --> 00:08:43,450 So, let's go ahead and add a load of items 211 00:08:43,450 --> 00:08:45,800 to the album's list box. 212 00:08:45,800 --> 00:08:46,980 I'm gonna go down here below 213 00:08:46,980 --> 00:08:48,730 the main loop comment 214 00:08:50,040 --> 00:08:53,320 and we're actually gonna start by typing test, 215 00:08:53,320 --> 00:08:55,240 list is equal to range, 216 00:08:57,250 --> 00:09:00,740 parentheses, zero, comma, space, 100, parentheses 217 00:09:00,740 --> 00:09:02,010 or right parentheses. 218 00:09:02,010 --> 00:09:04,680 And then we're gonna do album LV 219 00:09:05,670 --> 00:09:10,290 dot, set, parentheses, tuple, 220 00:09:10,290 --> 00:09:12,980 parentheses, test, list 221 00:09:12,980 --> 00:09:15,510 and the two right ending parentheses. 222 00:09:15,510 --> 00:09:17,320 So, what we're doing here is, 223 00:09:17,320 --> 00:09:18,400 and actually I'll delete that next line 224 00:09:18,400 --> 00:09:19,900 before I continue. 225 00:09:20,800 --> 00:09:21,630 There we go. 226 00:09:21,630 --> 00:09:23,700 So, what we're doing here is we're creating a list 227 00:09:23,700 --> 00:09:25,690 and then converting it to a tuple 228 00:09:25,690 --> 00:09:28,400 before assigning that to our album LV variable 229 00:09:28,400 --> 00:09:30,230 using its set method, 230 00:09:30,230 --> 00:09:32,550 and obviously can see that code on line 57. 231 00:09:32,550 --> 00:09:34,630 Now I'm gonna stop the video here 232 00:09:34,630 --> 00:09:36,750 and in the next one we're gonna see how to create 233 00:09:36,750 --> 00:09:38,270 that scrollable list box class 234 00:09:38,270 --> 00:09:39,820 that I mentioned, so that we don't have to keep 235 00:09:39,820 --> 00:09:42,150 duplicating this code. 236 00:09:42,150 --> 00:09:45,420 Before that though, we need to look at args and KW args. 237 00:09:45,420 --> 00:09:47,060 So, we're gonna see what they're all about 238 00:09:47,060 --> 00:09:48,600 in the next video.