WEBVTT 1 00:00:02.442 --> 00:00:04.200 So, as we saw in the previous video, 2 00:00:04.200 --> 00:00:06.821 we got our basic screen up and working 3 00:00:06.821 --> 00:00:09.140 but we're missing scroll bars though. 4 00:00:09.140 --> 00:00:12.088 Now, we could put scroll bars in their own columns 5 00:00:12.088 --> 00:00:13.733 next to the list boxes, 6 00:00:13.733 --> 00:00:15.924 and if you set them to be sticky to the left-hand side 7 00:00:15.924 --> 00:00:18.571 of the column, so to the west, in other words, 8 00:00:18.571 --> 00:00:21.419 they'd appear right up against the appropriate list box. 9 00:00:21.419 --> 00:00:24.229 And that's a perfectly acceptable way to do it 10 00:00:24.229 --> 00:00:26.349 but I don't actually want to do that here. 11 00:00:26.349 --> 00:00:28.118 So, in case you haven't guessed, 12 00:00:28.118 --> 00:00:30.295 we're gonna be creating our own classes, 13 00:00:30.295 --> 00:00:31.997 we're gonna create our own classes 14 00:00:31.997 --> 00:00:33.486 and they're gonna inherit from 15 00:00:33.486 --> 00:00:36.222 the TK inter list box class. 16 00:00:36.222 --> 00:00:37.965 So, our class is going to deal with loading data 17 00:00:37.965 --> 00:00:40.451 from the database but while we're at it, 18 00:00:40.451 --> 00:00:42.943 we may as well give them scroll bars as well. 19 00:00:42.943 --> 00:00:45.759 So, when the new list box objects are created, 20 00:00:45.759 --> 00:00:48.159 they won't know that there's a column to the right 21 00:00:48.159 --> 00:00:49.698 that can host a scroll bar. 22 00:00:49.698 --> 00:00:51.938 So, it's probably better to put the scroll bars 23 00:00:51.938 --> 00:00:54.339 in the same column as the list boxes. 24 00:00:54.339 --> 00:00:56.660 Now, it may not be obvious that you can do that 25 00:00:56.660 --> 00:00:58.054 but as long as the scroll bars 26 00:00:58.054 --> 00:01:00.258 are set to be sticky to the right, 27 00:01:00.258 --> 00:01:01.407 the east, in other words, 28 00:01:01.407 --> 00:01:03.171 then the list box will only fill the width 29 00:01:03.171 --> 00:01:06.655 of a column up to the scroll bar. 30 00:01:06.655 --> 00:01:07.562 So, let's close this down 31 00:01:07.562 --> 00:01:10.025 and what I'm going to do is we're gonna add a scroll bar 32 00:01:10.025 --> 00:01:12.050 to the artist's list first, 33 00:01:12.050 --> 00:01:13.359 then we can copy and paste the code 34 00:01:13.359 --> 00:01:15.483 for the other list boxes. 35 00:01:15.483 --> 00:01:18.891 So, I'm gonna go back up to the artist's list code 36 00:01:18.891 --> 00:01:22.640 below the definition, the config line on line 31. 37 00:01:22.640 --> 00:01:24.624 Let's continue on with our scroll bar. 38 00:01:24.624 --> 00:01:27.760 So, I'm gonna type artist, scroll 39 00:01:27.760 --> 00:01:31.066 is equal to TK inter dot scroll bar, 40 00:01:31.066 --> 00:01:33.006 with a capital S, 41 00:01:33.006 --> 00:01:35.551 parentheses, main window, 42 00:01:35.551 --> 00:01:36.845 comma, space, 43 00:01:36.845 --> 00:01:40.979 then orient equals TK inter 44 00:01:40.979 --> 00:01:43.592 dot VERTICAL, all in upper case, 45 00:01:43.592 --> 00:01:44.843 comma, space, 46 00:01:44.843 --> 00:01:46.915 command, equals, 47 00:01:46.915 --> 00:01:48.541 that's gonna be artist list 48 00:01:48.541 --> 00:01:50.624 dot Y view 49 00:01:52.366 --> 00:01:55.565 and then on the next line we want artist scroll, 50 00:01:55.565 --> 00:01:59.589 dot grid, row equals one, 51 00:01:59.589 --> 00:02:01.184 comma, space, colon 52 00:02:01.184 --> 00:02:04.150 equals zero, comma, space, sticky, 53 00:02:04.150 --> 00:02:06.400 equals, single quotes, NSE, 54 00:02:07.899 --> 00:02:10.899 comma, the row span is equal to two. 55 00:02:13.134 --> 00:02:14.754 Then the last line, 56 00:02:14.754 --> 00:02:15.754 artist list. 57 00:02:16.629 --> 00:02:19.615 There you want left square brackets, 58 00:02:19.615 --> 00:02:20.503 two single quotes, 59 00:02:20.503 --> 00:02:22.381 then we want within those two single quotes, 60 00:02:22.381 --> 00:02:23.964 wide scroll command 61 00:02:26.888 --> 00:02:29.488 equals, then it's artist scroll 62 00:02:29.488 --> 00:02:31.736 dot set 63 00:02:31.736 --> 00:02:33.216 and that should be it. 64 00:02:33.216 --> 00:02:35.794 So, let's just run this code. 65 00:02:35.794 --> 00:02:37.711 Then check out the code 66 00:02:39.144 --> 00:02:40.895 and we can see now very faintly, 67 00:02:40.895 --> 00:02:42.366 but it's actually there, 68 00:02:42.366 --> 00:02:44.165 a scroll bar neatly tied now 69 00:02:44.165 --> 00:02:45.356 to the list box, as you can see, 70 00:02:45.356 --> 00:02:48.433 and obviously, once we start populating that with some data, 71 00:02:48.433 --> 00:02:50.561 we'll be able to see that a little bit easier. 72 00:02:50.561 --> 00:02:52.592 So, at the moment, obviously because of that, 73 00:02:52.592 --> 00:02:55.156 the fact that there's no data, it doesn't scroll 74 00:02:55.156 --> 00:02:57.441 but you probably less concerned about that 75 00:02:57.441 --> 00:02:59.513 than about the fact that I've just suggested 76 00:02:59.513 --> 00:03:01.734 copying and pasting code. 77 00:03:01.734 --> 00:03:04.534 So, when you're performing basic initialization, 78 00:03:04.534 --> 00:03:05.754 then you really just can't get away 79 00:03:05.754 --> 00:03:07.413 from copying and pasting, 80 00:03:07.413 --> 00:03:09.445 but when you're adding functionality, 81 00:03:09.445 --> 00:03:13.269 as we are here, there's always a better way. 82 00:03:13.269 --> 00:03:15.437 And here it turns out that there is. 83 00:03:15.437 --> 00:03:17.131 But before we look at that, 84 00:03:17.131 --> 00:03:18.845 let's review the code that we've got so far. 85 00:03:18.845 --> 00:03:21.581 So, I'm just gonna close this down. 86 00:03:21.581 --> 00:03:23.519 Most of it is pretty straightforward 87 00:03:23.519 --> 00:03:25.458 but there are a couple of things 88 00:03:25.458 --> 00:03:27.302 that I haven't discussed before. 89 00:03:27.302 --> 00:03:29.289 So, I'm gonna start with the album list box 90 00:03:29.289 --> 00:03:31.137 here on line 38 91 00:03:31.137 --> 00:03:34.993 and specifically, this TK inter dot variable line. 92 00:03:34.993 --> 00:03:39.065 You know, TK inter variables attract variables. 93 00:03:39.065 --> 00:03:41.028 What that means is that when they change 94 00:03:41.028 --> 00:03:44.717 anything using them is notified of the change. 95 00:03:44.717 --> 00:03:48.565 So, what we've done here is create a TK inter variable 96 00:03:48.565 --> 00:03:50.924 and again, I'm talking about the code on line 38, 97 00:03:50.924 --> 00:03:55.149 called album LV, then we've used the list variable property, 98 00:03:55.149 --> 00:03:57.775 this is the code on line 40 now, 99 00:03:57.775 --> 00:03:59.085 and that's from the album's list box 100 00:03:59.085 --> 00:04:02.101 and that connects the variable to the list box. 101 00:04:02.101 --> 00:04:05.597 Now, if the variable changes, the list box is informed 102 00:04:05.597 --> 00:04:08.673 and you can display the new contents of the variable. 103 00:04:08.673 --> 00:04:09.709 So, to demonstrate that, 104 00:04:09.709 --> 00:04:12.315 we're gonna assign a new value to album LV 105 00:04:12.315 --> 00:04:13.956 before calling the main loop, 106 00:04:13.956 --> 00:04:15.995 so the code down here, in other words. 107 00:04:15.995 --> 00:04:17.891 So, let's go ahead and do that. 108 00:04:17.891 --> 00:04:20.308 So, we're gonna type album LV 109 00:04:21.182 --> 00:04:23.388 dot set and two parentheses, 110 00:04:23.388 --> 00:04:25.176 two left parentheses that was, 111 00:04:25.176 --> 00:04:27.087 and one, comma, space, two, comma, space, 112 00:04:27.087 --> 00:04:29.286 three, comma, space, four, comma, space 113 00:04:29.286 --> 00:04:32.368 then five and then two right parentheses. 114 00:04:32.368 --> 00:04:35.677 Now, the thing to remember with TK inter variables 115 00:04:35.677 --> 00:04:38.288 is that you just can't assign a new value to them, 116 00:04:38.288 --> 00:04:40.374 you actually have to use the set method, 117 00:04:40.374 --> 00:04:42.467 as I've done here on line 52, 118 00:04:42.467 --> 00:04:45.106 so here what I'm dong is assigning a new tuple 119 00:04:45.106 --> 00:04:47.661 and because we're passing a tuple to a function 120 00:04:47.661 --> 00:04:49.600 we have to enclose the tuple 121 00:04:49.600 --> 00:04:51.102 in another set of parentheses. 122 00:04:51.102 --> 00:04:53.156 So, that's why there's two parentheses there. 123 00:04:53.156 --> 00:04:55.573 So, if you run this code now, 124 00:05:00.974 --> 00:05:02.887 you can see that the album's list box 125 00:05:02.887 --> 00:05:05.326 is displaying the items from the tuple. 126 00:05:05.326 --> 00:05:08.062 So, our album LV variable's bound 127 00:05:08.062 --> 00:05:09.569 to the album's list box 128 00:05:09.569 --> 00:05:12.222 and if its contents change, then the list box 129 00:05:12.222 --> 00:05:14.333 will display those new values automatically, 130 00:05:14.333 --> 00:05:17.062 as you can see that it's done here. 131 00:05:17.062 --> 00:05:18.627 Now, I know this is a bit artificial 132 00:05:18.627 --> 00:05:20.950 and we change the album LV, 133 00:05:20.950 --> 00:05:23.300 let's just close this down, 134 00:05:23.300 --> 00:05:25.596 we changed the album LV variable 135 00:05:25.596 --> 00:05:26.901 before starting the main loop, 136 00:05:26.901 --> 00:05:29.184 so in other words, we changed it on line 52 137 00:05:29.184 --> 00:05:32.135 and the main loop starts on line 53, 138 00:05:32.135 --> 00:05:35.033 but it works the same way when our gooey is running. 139 00:05:35.033 --> 00:05:37.418 Now, that's actually gonna be very useful. 140 00:05:37.418 --> 00:05:39.497 When we read the albums for a new artist, 141 00:05:39.497 --> 00:05:41.729 we just have to store the values in a tuple 142 00:05:41.729 --> 00:05:43.809 and assign it to the album's LV. 143 00:05:43.809 --> 00:05:47.244 Then the list box will be updated automatically. 144 00:05:47.244 --> 00:05:50.041 Now, the second thing is how we connect the scroll bars 145 00:05:50.041 --> 00:05:51.794 to the list boxes. 146 00:05:51.794 --> 00:05:53.515 When the scroll bar scrolls, 147 00:05:53.515 --> 00:05:57.104 it has to notify the list box that it's done so. 148 00:05:57.104 --> 00:05:59.864 Now, the list box also has to tell the scroll bar 149 00:05:59.864 --> 00:06:01.496 how far it can scroll, 150 00:06:01.496 --> 00:06:02.922 remembering that we've just seen a way 151 00:06:02.922 --> 00:06:05.982 to update the list box contents dynamically. 152 00:06:05.982 --> 00:06:08.661 So the communication, in fact, is two way. 153 00:06:08.661 --> 00:06:12.287 Now, the list box has actually got a Y view method 154 00:06:12.287 --> 00:06:16.631 that's used to change the vertical position of the list box. 155 00:06:16.631 --> 00:06:18.711 So, if you wanted to scroll horizontally, 156 00:06:18.711 --> 00:06:22.363 then you would use the X view method instead. 157 00:06:22.363 --> 00:06:25.530 So basically, if this code on line 33, 158 00:06:26.791 --> 00:06:27.874 we're telling the scroll bar 159 00:06:27.874 --> 00:06:30.901 that it should call the artist list's Y view method 160 00:06:30.901 --> 00:06:34.759 when it scrolls, which is exactly what we want here. 161 00:06:34.759 --> 00:06:36.712 Now, any method that has a Y view property 162 00:06:36.712 --> 00:06:38.495 can be scrolled vertically 163 00:06:38.495 --> 00:06:40.040 and the same for X view 164 00:06:40.040 --> 00:06:43.348 but of course, only horizontally in that case, of course. 165 00:06:43.348 --> 00:06:45.055 Now, to communicate the other way, 166 00:06:45.055 --> 00:06:47.992 we're using the scroll bar's set method. 167 00:06:47.992 --> 00:06:50.113 This is the code here on line 35. 168 00:06:50.113 --> 00:06:51.919 So, we're telling the list box 169 00:06:51.919 --> 00:06:54.078 to call the scroll bar's set method 170 00:06:54.078 --> 00:06:56.195 whenever anything happens 171 00:06:56.195 --> 00:06:58.278 that it should tell the scroll view about. 172 00:06:58.278 --> 00:06:59.666 So, if we use the arrow keys 173 00:06:59.666 --> 00:07:01.615 to move through the list, for example, 174 00:07:01.615 --> 00:07:03.469 the list box will set the scroll bar 175 00:07:03.469 --> 00:07:06.375 according to how far through the list we are. 176 00:07:06.375 --> 00:07:08.465 So, that's all we have to do to implement scrolling 177 00:07:08.465 --> 00:07:10.488 on any widget that supports it. 178 00:07:10.488 --> 00:07:14.082 We set the scroll bar's command property, 179 00:07:14.082 --> 00:07:17.580 line 33 again, set that to the Y view method of the widget, 180 00:07:17.580 --> 00:07:19.256 we wanna scroll and then we use 181 00:07:19.256 --> 00:07:21.367 the widget's Y scroll command 182 00:07:21.367 --> 00:07:23.596 here on line 35, use that property 183 00:07:23.596 --> 00:07:27.033 to the set method of the scroll bar. 184 00:07:27.033 --> 00:07:28.784 Okay, so despite what I said, 185 00:07:28.784 --> 00:07:31.167 I'm actually going to copy and paste the code. 186 00:07:31.167 --> 00:07:34.511 And I'm gonna do that just so we can see the common elements 187 00:07:34.511 --> 00:07:35.658 and then in the next video, 188 00:07:35.658 --> 00:07:38.359 what we're gonna do is subclass the list class box 189 00:07:38.359 --> 00:07:41.287 to produce our own scrollable list box. 190 00:07:41.287 --> 00:07:42.547 So, what we want to do for now 191 00:07:42.547 --> 00:07:44.263 is copy these three lines, 192 00:07:44.263 --> 00:07:46.891 this artist scroll definition 193 00:07:46.891 --> 00:07:47.949 and then the dot grid 194 00:07:47.949 --> 00:07:50.481 and then the setting up of the Y scroll command. 195 00:07:50.481 --> 00:07:52.101 So, we'll copy those three lines. 196 00:07:52.101 --> 00:07:53.730 Now, we're gonna come down here 197 00:07:53.730 --> 00:07:56.667 and do this for the albums. 198 00:07:56.667 --> 00:07:58.220 Paste it down there like so. 199 00:07:58.220 --> 00:07:59.906 Then, we obviously need to make a change there 200 00:07:59.906 --> 00:08:03.385 to change the definitions from artist scroll to album, 201 00:08:03.385 --> 00:08:05.661 so I'm gonna do that. 202 00:08:05.661 --> 00:08:06.494 Album. 203 00:08:17.730 --> 00:08:19.320 And the other thing I need to do is make sure 204 00:08:19.320 --> 00:08:23.153 that I actually change the column to one there 205 00:08:24.096 --> 00:08:27.404 because obviously album is in column one, 206 00:08:27.404 --> 00:08:30.265 as opposed to the artist being in column zero. 207 00:08:30.265 --> 00:08:32.975 And everything else should be good to go there. 208 00:08:32.975 --> 00:08:35.619 Alright, so one final thing before I finish this video 209 00:08:35.619 --> 00:08:38.391 is to test that the scrolling really works. 210 00:08:38.391 --> 00:08:40.455 So, let's go ahead and add a load of items 211 00:08:40.455 --> 00:08:42.808 to the album's list box. 212 00:08:42.808 --> 00:08:43.986 I'm gonna go down here below 213 00:08:43.986 --> 00:08:45.736 the main loop comment 214 00:08:47.043 --> 00:08:50.328 and we're actually gonna start by typing test, 215 00:08:50.328 --> 00:08:52.245 list is equal to range, 216 00:08:54.255 --> 00:08:57.743 parentheses, zero, comma, space, 100, parentheses 217 00:08:57.743 --> 00:08:59.015 or right parentheses. 218 00:08:59.015 --> 00:09:01.682 And then we're gonna do album LV 219 00:09:02.679 --> 00:09:07.294 dot, set, parentheses, tuple, 220 00:09:07.294 --> 00:09:09.983 parentheses, test, list 221 00:09:09.983 --> 00:09:12.519 and the two right ending parentheses. 222 00:09:12.519 --> 00:09:14.327 So, what we're doing here is, 223 00:09:14.327 --> 00:09:15.409 and actually I'll delete that next line 224 00:09:15.409 --> 00:09:16.909 before I continue. 225 00:09:17.802 --> 00:09:18.635 There we go. 226 00:09:18.635 --> 00:09:20.709 So, what we're doing here is we're creating a list 227 00:09:20.709 --> 00:09:22.693 and then converting it to a tuple 228 00:09:22.693 --> 00:09:25.408 before assigning that to our album LV variable 229 00:09:25.408 --> 00:09:27.236 using its set method, 230 00:09:27.236 --> 00:09:29.555 and obviously can see that code on line 57. 231 00:09:29.555 --> 00:09:31.633 Now I'm gonna stop the video here 232 00:09:31.633 --> 00:09:33.759 and in the next one we're gonna see how to create 233 00:09:33.759 --> 00:09:35.271 that scrollable list box class 234 00:09:35.271 --> 00:09:36.826 that I mentioned, so that we don't have to keep 235 00:09:36.826 --> 00:09:39.150 duplicating this code. 236 00:09:39.150 --> 00:09:42.427 Before that though, we need to look at args and KW args. 237 00:09:42.427 --> 00:09:44.063 So, we're gonna see what they're all about 238 00:09:44.063 --> 00:09:45.604 in the next video.