WEBVTT 1 00:00:01.522 --> 00:00:02.355 All right, so we're going 2 00:00:02.355 --> 00:00:03.953 to move on now and combine 3 00:00:03.953 --> 00:00:07.958 what we've learned about databases and classes. 4 00:00:07.958 --> 00:00:09.656 Now, some of the inheritance examples 5 00:00:09.656 --> 00:00:12.246 in the object oriented programming section 6 00:00:12.246 --> 00:00:13.987 were quite theoretical. 7 00:00:13.987 --> 00:00:15.179 So we're going to have a look 8 00:00:15.179 --> 00:00:17.745 at how subclassing an existing class 9 00:00:17.745 --> 00:00:20.754 can be a great way to add extra functionality. 10 00:00:20.754 --> 00:00:22.756 One good thing about this is that, 11 00:00:22.756 --> 00:00:25.185 you don't have to have any idea on how the class 12 00:00:25.185 --> 00:00:28.373 that you're subclassing actually works. 13 00:00:28.373 --> 00:00:30.012 You have to know what it does, of course, 14 00:00:30.012 --> 00:00:34.192 and also how to use it, but that's about all you do need. 15 00:00:34.192 --> 00:00:35.924 We're going to use our music database 16 00:00:35.924 --> 00:00:38.429 to produce a visual database browser. 17 00:00:38.429 --> 00:00:40.199 Now the app will be quite simple. 18 00:00:40.199 --> 00:00:42.444 We're going to display a list of artists 19 00:00:42.444 --> 00:00:44.638 from the database in a list. 20 00:00:44.638 --> 00:00:46.765 And when you select one of the artists, 21 00:00:46.765 --> 00:00:49.174 another list will show all their albums. 22 00:00:49.174 --> 00:00:51.720 When you click on an album, you'll get to see 23 00:00:51.720 --> 00:00:54.998 all the songs on that album in a third list. 24 00:00:54.998 --> 00:00:56.862 All right, so let's get started. 25 00:00:56.862 --> 00:00:59.767 We need a copy of the music.db database file 26 00:00:59.767 --> 00:01:02.658 that we've used earlier in this course. 27 00:01:02.658 --> 00:01:05.583 And you can see I've just downloaded a copy onto my desktop 28 00:01:05.583 --> 00:01:07.064 which I'm going to be using shortly. 29 00:01:07.064 --> 00:01:09.277 You can also grab that from an earlier lecture 30 00:01:09.277 --> 00:01:11.924 or from the resources section of this video. 31 00:01:11.924 --> 00:01:16.089 I'm going to create a new path and project. 32 00:01:16.089 --> 00:01:19.672 We're going to call this one Music Browser. 33 00:01:25.941 --> 00:01:28.479 Copy that music.db into this folder. 34 00:01:28.479 --> 00:01:31.759 The easiest way is to just right-click the package name 35 00:01:31.759 --> 00:01:34.013 and go down to Reveal In Finder. 36 00:01:34.013 --> 00:01:36.318 It will be opened in explorer on Windows and Linux, 37 00:01:36.318 --> 00:01:37.936 I believe, or words to that effect. 38 00:01:37.936 --> 00:01:40.139 If you click on that that opens the folder. 39 00:01:40.139 --> 00:01:41.900 I'm going to go into that folder 40 00:01:41.900 --> 00:01:45.857 and then I'm just going to go back to my desktop. 41 00:01:45.857 --> 00:01:49.457 Then I'm going to take a copy of that music.db file 42 00:01:49.457 --> 00:01:50.671 and paste it in there. 43 00:01:50.671 --> 00:01:52.186 Whatever you need to do, to do the similar thing, 44 00:01:52.186 --> 00:01:55.051 paste that file in there so we've got access 45 00:01:55.051 --> 00:01:56.953 back in it in the IntelliJ. 46 00:01:56.953 --> 00:01:59.749 You can see for me it's now popped up in the list there. 47 00:01:59.749 --> 00:02:01.957 All right, let's create a new file, 48 00:02:01.957 --> 00:02:03.059 a new path and file. 49 00:02:03.059 --> 00:02:05.642 We're going to call it jukebox. 50 00:02:11.018 --> 00:02:13.556 Okay, let's make a bit more space there. 51 00:02:13.556 --> 00:02:14.788 I've created that file. 52 00:02:14.788 --> 00:02:18.788 We're going to start now with a small challenge. 53 00:02:24.023 --> 00:02:26.525 The challenge is to use the database tab 54 00:02:26.525 --> 00:02:29.051 to configure the data source correctly, 55 00:02:29.051 --> 00:02:31.567 so that we don't get those warning messages from IntelliJ 56 00:02:31.567 --> 00:02:34.789 that we've seen previously when working with databases. 57 00:02:34.789 --> 00:02:38.211 And this also has the added benefit of helping IntelliJ 58 00:02:38.211 --> 00:02:40.976 to check things like our column names. 59 00:02:40.976 --> 00:02:41.889 That's the challenge. 60 00:02:41.889 --> 00:02:42.749 Pause the video. 61 00:02:42.749 --> 00:02:46.916 Let's see how you go, and I'll see you when you get back. 62 00:02:48.320 --> 00:02:49.428 Okay. So how did you get on? 63 00:02:49.428 --> 00:02:51.254 Hopefully you managed to figure that out. 64 00:02:51.254 --> 00:02:53.185 If you do remember from when we configured 65 00:02:53.185 --> 00:02:56.080 the accounts database in the previous project. 66 00:02:56.080 --> 00:02:59.820 Dragging a database file onto the database tab only works 67 00:02:59.820 --> 00:03:03.153 if the file has got a .sqlite extension. 68 00:03:03.153 --> 00:03:04.855 Now having said that, the latest version 69 00:03:04.855 --> 00:03:08.264 of IntelliJ Idea on a Mac, I was actually happy 70 00:03:08.264 --> 00:03:11.735 to create a data source by dragging the file music.db 71 00:03:11.735 --> 00:03:13.429 onto the database pane. 72 00:03:13.429 --> 00:03:16.826 This maybe will change on other operating systems as well. 73 00:03:16.826 --> 00:03:19.025 But in any event, the first step is to right-click 74 00:03:19.025 --> 00:03:21.232 on the music.db file. 75 00:03:21.232 --> 00:03:24.149 We're going to refactor and rename, 76 00:03:25.005 --> 00:03:29.172 and we're going to change the extension to sqlite. 77 00:03:31.169 --> 00:03:34.016 All right, so now I've actually done that here, 78 00:03:34.016 --> 00:03:36.088 but you may not actually want to rename your file 79 00:03:36.088 --> 00:03:37.468 for whatever reason. 80 00:03:37.468 --> 00:03:38.756 Perhaps other programmes are using 81 00:03:38.756 --> 00:03:41.292 the same database file for example. 82 00:03:41.292 --> 00:03:43.131 Although, I've renamed it here, 83 00:03:43.131 --> 00:03:45.968 I'm actually going to configure the data source manually 84 00:03:45.968 --> 00:03:47.677 instead of dragging the file. 85 00:03:47.677 --> 00:03:49.520 And that's because dragging and dropping the file 86 00:03:49.520 --> 00:03:50.803 onto a database tab- 87 00:03:50.803 --> 00:03:54.373 This is the one over here I'm talking about. 88 00:03:54.373 --> 00:03:55.895 Well, that's really only a convenience 89 00:03:55.895 --> 00:03:57.409 but it's not essential. 90 00:03:57.409 --> 00:03:59.530 Now, configuring the data source manually 91 00:03:59.530 --> 00:04:03.000 let's you use a sqlite database with any file extension. 92 00:04:03.000 --> 00:04:05.027 If you happen to have renamed the database file 93 00:04:05.027 --> 00:04:06.742 and dragged into the database pane 94 00:04:06.742 --> 00:04:09.432 to configure the data source as we've done previously, 95 00:04:09.432 --> 00:04:12.726 then well done, that's a challenge completed successfully. 96 00:04:12.726 --> 00:04:15.465 I want to show you something that can go wrong. 97 00:04:15.465 --> 00:04:17.652 Before configuring the database 98 00:04:17.652 --> 00:04:21.819 I'm going to just paste some code into our jukebox.py file. 99 00:04:24.967 --> 00:04:27.698 There's the code there. 100 00:04:27.698 --> 00:04:30.509 Actually we'd expect, and I'll just close the database pane. 101 00:04:30.509 --> 00:04:32.032 We're getting those warnings 102 00:04:32.032 --> 00:04:34.424 about no data sources are being configured 103 00:04:34.424 --> 00:04:36.114 and also a couple of other warnings here about 104 00:04:36.114 --> 00:04:37.794 unable to resolve symbol albums, 105 00:04:37.794 --> 00:04:40.428 and unable to resolve table albums. 106 00:04:40.428 --> 00:04:42.535 You don't actually have to type this code in 107 00:04:42.535 --> 00:04:44.140 before configuring the data source. 108 00:04:44.140 --> 00:04:45.313 I've just done this so that you can see 109 00:04:45.313 --> 00:04:47.557 that things are working properly. 110 00:04:47.557 --> 00:04:49.760 It can be a very natural mistake that you make 111 00:04:49.760 --> 00:04:52.379 that will cause this particular error. 112 00:04:52.379 --> 00:04:54.786 We're going to go and configure this manually. 113 00:04:54.786 --> 00:04:56.947 I'm going to open the database tab again 114 00:04:56.947 --> 00:04:59.030 and click on plus. 115 00:04:59.030 --> 00:05:00.823 I'm going to choose data source, 116 00:05:00.823 --> 00:05:03.554 and then I'm going to choose sqlite xerial, 117 00:05:03.554 --> 00:05:05.137 this one down here. 118 00:05:05.991 --> 00:05:10.417 Next, you can actually come over here and use the ellipses 119 00:05:10.417 --> 00:05:14.447 next to the file, over here to the right or the file label, 120 00:05:14.447 --> 00:05:17.687 and that's one way to navigate to the actual folder. 121 00:05:17.687 --> 00:05:18.520 But you might be looking at that thinking, 122 00:05:18.520 --> 00:05:21.057 "Well, isn't this just quicker than just type in the name?" 123 00:05:21.057 --> 00:05:23.779 Because you know the name is music.sqlite. 124 00:05:23.779 --> 00:05:26.981 You could come over here and just type in music. 125 00:05:26.981 --> 00:05:29.259 With the theory being that music.sqlite, 126 00:05:29.259 --> 00:05:32.049 we can see it's over here in our project folder, 127 00:05:32.049 --> 00:05:34.819 so we don't need to worry about a path. 128 00:05:34.819 --> 00:05:36.253 I've changed the name as you can see there 129 00:05:36.253 --> 00:05:37.821 now to music.sqlite. 130 00:05:37.821 --> 00:05:38.907 You change it to whatever the name 131 00:05:38.907 --> 00:05:41.729 of the database file is on your system. 132 00:05:41.729 --> 00:05:44.871 That does work in that the test connexion button, 133 00:05:44.871 --> 00:05:48.213 which I'm going to press now, it does actually work. 134 00:05:48.213 --> 00:05:50.206 It says successful. 135 00:05:50.206 --> 00:05:52.707 But on Windows it doesn't report an error. 136 00:05:52.707 --> 00:05:56.040 With that said, if we click on okay now. 137 00:05:57.286 --> 00:05:59.201 Notice that, I'm not sure whether you were paying attention, 138 00:05:59.201 --> 00:06:00.855 but there's this little arrow, it was appearing 139 00:06:00.855 --> 00:06:03.575 to the left of the database name. 140 00:06:03.575 --> 00:06:05.748 The one that we normally click to get into the database 141 00:06:05.748 --> 00:06:09.296 to have a look at the tables and columns, etc, 142 00:06:09.296 --> 00:06:11.234 but then that disappeared. 143 00:06:11.234 --> 00:06:13.386 We can't browse the database now. 144 00:06:13.386 --> 00:06:15.803 The other thing is we go back to the code. 145 00:06:15.803 --> 00:06:19.636 We're still getting some weird warnings there. 146 00:06:21.222 --> 00:06:22.113 We're still getting a problem 147 00:06:22.113 --> 00:06:23.704 with resolving the symbol albums 148 00:06:23.704 --> 00:06:26.058 and resolving the table albums. 149 00:06:26.058 --> 00:06:29.020 In other words, IntelliJ is not recognising those. 150 00:06:29.020 --> 00:06:30.931 The thing is, it's not going to recognise those 151 00:06:30.931 --> 00:06:35.279 until you provide the full path to the file. 152 00:06:35.279 --> 00:06:37.735 That might make sense to just type in the name 153 00:06:37.735 --> 00:06:39.943 without a path that I actually did there, 154 00:06:39.943 --> 00:06:40.861 for the moment at least, 155 00:06:40.861 --> 00:06:42.745 or at least for this version of IntelliJ 156 00:06:42.745 --> 00:06:44.561 it doesn't actually work like that. 157 00:06:44.561 --> 00:06:46.277 But fortunately we can fix that. 158 00:06:46.277 --> 00:06:48.491 We can just go back to the data source properties. 159 00:06:48.491 --> 00:06:51.908 We can right-click and choose properties. 160 00:06:53.239 --> 00:06:55.801 I'm right-clicking the database file obviously. 161 00:06:55.801 --> 00:06:56.801 Alternatively I could have used 162 00:06:56.801 --> 00:06:59.012 the little wrench button there to get into the properties 163 00:06:59.012 --> 00:07:03.179 at the top of the toolbar there, just above the file name. 164 00:07:05.040 --> 00:07:08.239 If I change that now and actually click on the ellipses. 165 00:07:08.239 --> 00:07:11.822 This time if I now go to that folder again. 166 00:07:15.475 --> 00:07:18.642 I'll select my database, if I'll open, 167 00:07:19.718 --> 00:07:21.569 with a full path this time. 168 00:07:21.569 --> 00:07:22.756 Test connexion. 169 00:07:22.756 --> 00:07:23.605 Well, that still works. 170 00:07:23.605 --> 00:07:25.780 If I click on okay this time. 171 00:07:25.780 --> 00:07:26.846 You can see it having done, 172 00:07:26.846 --> 00:07:28.729 we firstly have got this little green arrow here. 173 00:07:28.729 --> 00:07:31.528 The arrows have disappeared from our path and code, 174 00:07:31.528 --> 00:07:33.308 but also we've got the little arrow now. 175 00:07:33.308 --> 00:07:35.484 We can click, we can open up tables and open up 176 00:07:35.484 --> 00:07:37.780 and get access to the columns. 177 00:07:37.780 --> 00:07:41.503 In any event, that's how to configure a data source manually 178 00:07:41.503 --> 00:07:43.005 instead of drag and drop. 179 00:07:43.005 --> 00:07:44.998 Along the way I also showed you a little problem 180 00:07:44.998 --> 00:07:47.973 that can pop up if you don't actually use the ellipses 181 00:07:47.973 --> 00:07:50.643 to select the database file with a full path. 182 00:07:50.643 --> 00:07:52.335 Make sure you do do that 183 00:07:52.335 --> 00:07:54.874 until IntelliJ hopefully can handle this problem 184 00:07:54.874 --> 00:07:56.545 and actually fix it. 185 00:07:56.545 --> 00:07:58.007 Incidentally, what we just did there 186 00:07:58.007 --> 00:08:00.054 with the manual configuration. 187 00:08:00.054 --> 00:08:01.202 Well, that's what you'd need to do 188 00:08:01.202 --> 00:08:03.827 if you were connecting to a client server database 189 00:08:03.827 --> 00:08:06.660 such as sql server or perhaps DB2. 190 00:08:07.715 --> 00:08:09.234 Just close the database tab, 191 00:08:09.234 --> 00:08:11.604 now that we've got our database centre find. 192 00:08:11.604 --> 00:08:14.811 I'm going to delete the code that I initially added, 193 00:08:14.811 --> 00:08:17.449 and we're going to start coding. 194 00:08:17.449 --> 00:08:19.744 We need to import sqlite, obviously, 195 00:08:19.744 --> 00:08:22.208 but also we need to import tkinter. 196 00:08:22.208 --> 00:08:24.804 And we're going to do that in the python2 friendly way 197 00:08:24.804 --> 00:08:26.124 and that's because this app is almost not going 198 00:08:26.124 --> 00:08:30.151 to be able to work with python2.7 and up. 199 00:08:30.151 --> 00:08:33.971 I'm going to start with the import to sqlite3. 200 00:08:33.971 --> 00:08:38.138 I'm going to need to add a try, colon, import tkinter. 201 00:08:39.219 --> 00:08:41.108 You've seen this code before. 202 00:08:41.108 --> 00:08:44.275 We need to add an except import error, 203 00:08:46.506 --> 00:08:48.756 colon, and that's python 2. 204 00:08:50.355 --> 00:08:54.522 In that case we're going to do import Tkinter as tkinter. 205 00:08:59.138 --> 00:09:01.100 Then we just can start with our connexion, 206 00:09:01.100 --> 00:09:03.433 conn equals sqlite3.connect. 207 00:09:04.966 --> 00:09:09.454 And of course the file name should be music.sqlite. 208 00:09:09.454 --> 00:09:11.994 If by chance you haven't renamed it and it's still db, 209 00:09:11.994 --> 00:09:15.134 obviously you need to change it to that name. 210 00:09:15.134 --> 00:09:17.272 All right, so next we're going to set up a window. 211 00:09:17.272 --> 00:09:19.315 It's a good idea to start with an idea 212 00:09:19.315 --> 00:09:21.606 of what it should look like. 213 00:09:21.606 --> 00:09:23.803 We're going to be creating a simple layout 214 00:09:23.803 --> 00:09:27.486 that I'm going to show you on the slide. 215 00:09:27.486 --> 00:09:29.915 That's what we're going to try and create here. 216 00:09:29.915 --> 00:09:31.463 You can see that it's pretty basic, 217 00:09:31.463 --> 00:09:34.460 but it demonstrates some very useful techniques 218 00:09:34.460 --> 00:09:37.613 for subclassing an existing class. 219 00:09:37.613 --> 00:09:40.499 We want to put a scroll-bar next to each list box, 220 00:09:40.499 --> 00:09:41.332 but we're going to put them 221 00:09:41.332 --> 00:09:43.621 in the same column as their listbox. 222 00:09:43.621 --> 00:09:47.371 In essence we're going to need three columns. 223 00:09:49.332 --> 00:09:52.910 The space between the lists will be set using padding, 224 00:09:52.910 --> 00:09:55.038 but there's something I want to demonstrate 225 00:09:55.038 --> 00:09:57.695 when we come to subclass the listboxes. 226 00:09:57.695 --> 00:10:00.621 We're going to set the padding on the left of each list, 227 00:10:00.621 --> 00:10:02.917 but for the far right of the display, 228 00:10:02.917 --> 00:10:04.742 I'm going to use another column 229 00:10:04.742 --> 00:10:07.887 to keep the songs list away from the edge of the window. 230 00:10:07.887 --> 00:10:09.082 You don't have to do that, 231 00:10:09.082 --> 00:10:13.249 I'm only doing it to make explaining something else easier. 232 00:10:15.548 --> 00:10:19.270 We also want a title, as you can see, above each box, 233 00:10:19.270 --> 00:10:21.604 so there'll be at least two rows. 234 00:10:21.604 --> 00:10:23.540 Because there's going to be far more artists 235 00:10:23.540 --> 00:10:25.165 than albums or songs, 236 00:10:25.165 --> 00:10:29.332 we're going to span the artists listbox over two rows. 237 00:10:31.949 --> 00:10:35.352 We're also going to leave a blank row along the bottom, 238 00:10:35.352 --> 00:10:36.566 and that's to keep everything away 239 00:10:36.566 --> 00:10:38.140 from the edge of the window. 240 00:10:38.140 --> 00:10:40.158 That's four rows in total. 241 00:10:40.158 --> 00:10:42.054 Now that we've decided all of that, 242 00:10:42.054 --> 00:10:46.029 we can go back and set up these windows. 243 00:10:46.029 --> 00:10:48.070 We're going to continue on 244 00:10:48.070 --> 00:10:51.536 and we're going to type mainwindow 245 00:10:51.536 --> 00:10:53.036 equals tkinter.Tk, 246 00:10:54.766 --> 00:10:57.266 parenthesis, mainwindow.title, 247 00:11:00.521 --> 00:11:03.005 parenthesis and in single quotes, 248 00:11:03.005 --> 00:11:05.505 Music Db Browser as the title. 249 00:11:07.217 --> 00:11:08.470 Then we want to set the geometry, 250 00:11:08.470 --> 00:11:10.803 so it's mainwindow.geometry. 251 00:11:12.265 --> 00:11:15.535 We're going to go for 1024 by 768, 252 00:11:15.535 --> 00:11:18.225 so we need parenthesis and in single quotes, 253 00:11:18.225 --> 00:11:19.058 1024x768. 254 00:11:23.055 --> 00:11:26.242 Let's go ahead now and configure the columns. 255 00:11:26.242 --> 00:11:28.492 Mainwindow.columnconfigure. 256 00:11:30.775 --> 00:11:34.905 We're going to go with zero, comma, space, 257 00:11:34.905 --> 00:11:36.405 weight equals two. 258 00:11:37.736 --> 00:11:40.319 Mainwindow.columnconfigure one, 259 00:11:42.054 --> 00:11:44.137 comma, weight equals two. 260 00:11:45.542 --> 00:11:49.709 Mainwindow.columnconfigure, parenthesis, two, comma, space, 261 00:11:51.067 --> 00:11:52.567 weight equals two. 262 00:11:53.479 --> 00:11:56.896 And last one, mainwindow.columnconfigure, 263 00:11:59.060 --> 00:12:01.143 three, weight equals one. 264 00:12:04.425 --> 00:12:08.592 Just as a reminder that's the spacer column on right. 265 00:12:11.512 --> 00:12:13.314 We now want to configure our rows. 266 00:12:13.314 --> 00:12:17.252 That's going to be mainwindow.rowconfigure, 267 00:12:17.252 --> 00:12:22.143 parenthesis, zero, comma, space, weight equals one. 268 00:12:22.143 --> 00:12:24.560 Then mainwindow.rowconfigure, 269 00:12:26.560 --> 00:12:28.726 parenthesis, one, comma, 270 00:12:28.726 --> 00:12:30.703 weight equals five. 271 00:12:30.703 --> 00:12:34.786 Mainwindow.rowconfigure, parenthesis, two, comma, 272 00:12:35.739 --> 00:12:38.061 space, weight equals five. 273 00:12:38.061 --> 00:12:42.517 And lastly, mainwindow.rowconfigure, parenthesis, 274 00:12:42.517 --> 00:12:45.767 three, comma, space, weight equals one. 275 00:12:47.949 --> 00:12:49.011 As you can see there, 276 00:12:49.011 --> 00:12:51.365 I've given more weight to the middle two rows 277 00:12:51.365 --> 00:12:54.104 and that's because they contain the listboxes. 278 00:12:54.104 --> 00:12:55.583 If you're not too sure what I'm doing here, 279 00:12:55.583 --> 00:12:58.265 do go back and check the tkinter videos 280 00:12:58.265 --> 00:12:59.930 in section 11 of the course, 281 00:12:59.930 --> 00:13:02.995 because I go into detail about what all this stuff means. 282 00:13:02.995 --> 00:13:04.466 I'm assuming at this stage of the course 283 00:13:04.466 --> 00:13:06.703 you've actually been through that. 284 00:13:06.703 --> 00:13:09.887 Next we need our labels and listboxes. 285 00:13:09.887 --> 00:13:10.920 We're going to create them 286 00:13:10.920 --> 00:13:13.480 after setting up the columns and rows. 287 00:13:13.480 --> 00:13:15.970 We're going to start with, and put a comment here 288 00:13:15.970 --> 00:13:18.257 just to indicate what we're doing. 289 00:13:18.257 --> 00:13:20.840 This is going to be the labels. 290 00:13:22.373 --> 00:13:26.752 We'll start with tkinter, that's going to be .label, 291 00:13:26.752 --> 00:13:29.919 parenthesis, mainwindow, comma, space, 292 00:13:31.241 --> 00:13:34.960 text equals, then artist in double quotes, 293 00:13:34.960 --> 00:13:39.127 right parenthesis then .grid, parenthesis, row equal zero, 294 00:13:40.189 --> 00:13:44.356 comma, space, column equal zero, right parenthesis. 295 00:13:45.823 --> 00:13:48.222 Let's just copy that line task, 296 00:13:48.222 --> 00:13:50.081 because we need two more labels. 297 00:13:50.081 --> 00:13:52.888 The first one is going to be, 298 00:13:52.888 --> 00:13:54.263 everything the same up until text. 299 00:13:54.263 --> 00:13:57.048 We're going to change the text to albums. 300 00:13:57.048 --> 00:13:59.077 Then the grid row reference, everything is the same, 301 00:13:59.077 --> 00:14:01.917 column is one, and for the third one 302 00:14:01.917 --> 00:14:03.386 that's going to be the third label, 303 00:14:03.386 --> 00:14:04.769 it's going to be songs. 304 00:14:04.769 --> 00:14:08.936 That's still on row zero, and the text is going to be songs. 305 00:14:11.290 --> 00:14:13.453 Okay, I love that. 306 00:14:13.453 --> 00:14:17.120 We've done that okay, and let's continue on. 307 00:14:18.465 --> 00:14:22.382 We're now going to work on the artists listbox. 308 00:14:24.823 --> 00:14:28.302 We're going to start with artistList 309 00:14:28.302 --> 00:14:30.385 equal to tkinter.listbox, 310 00:14:32.753 --> 00:14:34.753 parenthesis, mainwindow. 311 00:14:36.487 --> 00:14:38.904 Then we want artistList.grid, 312 00:14:40.891 --> 00:14:43.350 parenthesis, row equals one, 313 00:14:43.350 --> 00:14:46.510 comma, space, column equal zero, comma, 314 00:14:46.510 --> 00:14:49.677 space, sticky equals, in single quotes 315 00:14:50.518 --> 00:14:53.768 nsew, comma, space, rowspan equals two, 316 00:14:55.462 --> 00:14:59.556 comma, space and then padx equals parenthesis, 30, 317 00:14:59.556 --> 00:15:01.253 comma, space, zero. 318 00:15:01.253 --> 00:15:04.682 And then two right parenthesis to finish off the line. 319 00:15:04.682 --> 00:15:06.737 Then we need to also add a config. 320 00:15:06.737 --> 00:15:08.487 So artistList.config, 321 00:15:10.775 --> 00:15:13.483 parenthesis, and it's going to be border equals two, 322 00:15:13.483 --> 00:15:15.150 comma, space, relief 323 00:15:17.234 --> 00:15:20.888 is equal to, single quotes, sunken 324 00:15:20.888 --> 00:15:23.529 and then we just end parenthesis. 325 00:15:23.529 --> 00:15:26.496 That's our artist listbox, then we want to do 326 00:15:26.496 --> 00:15:29.251 the same for albums listbox and songs listbox, 327 00:15:29.251 --> 00:15:31.751 so let's go ahead and do that. 328 00:15:32.752 --> 00:15:35.335 This is going to be the albums. 329 00:15:37.183 --> 00:15:39.600 I'm going to start by albumLV 330 00:15:41.014 --> 00:15:43.014 equals tkinter.Variable, 331 00:15:45.441 --> 00:15:47.441 parenthesis, mainwindow. 332 00:15:49.173 --> 00:15:50.506 And albumLV.set, 333 00:15:52.322 --> 00:15:53.977 two left parenthesis there, 334 00:15:53.977 --> 00:15:56.199 then we want the text in double quotes, 335 00:15:56.199 --> 00:15:57.616 choose an artist, 336 00:15:59.166 --> 00:16:02.228 and a comma after the trailing double quote 337 00:16:02.228 --> 00:16:04.718 and then the two ending parenthesis. 338 00:16:04.718 --> 00:16:06.551 Then we want albumList 339 00:16:07.934 --> 00:16:10.954 is equal to tkinter.Listbox 340 00:16:10.954 --> 00:16:14.704 again, parenthesis, mainwindow, comma, space, 341 00:16:15.718 --> 00:16:18.301 listvariable, all in lowercase, 342 00:16:19.283 --> 00:16:23.366 equals albumLV that we defined on line 34 and 35. 343 00:16:25.975 --> 00:16:27.502 Then we want to set the grid, 344 00:16:27.502 --> 00:16:31.419 so it's going to be albumList.grid, parenthesis 345 00:16:33.044 --> 00:16:34.953 and we're going to start with row equals one, comma, 346 00:16:34.953 --> 00:16:38.178 space, column equals one, comma, space 347 00:16:38.178 --> 00:16:41.511 then sticky equals, single quotes, nsew, 348 00:16:44.006 --> 00:16:46.749 comma, space then padx equals, 349 00:16:46.749 --> 00:16:49.493 in parenthesis, 30, comma, space, zero 350 00:16:49.493 --> 00:16:52.510 then the two right parenthesis to end the line. 351 00:16:52.510 --> 00:16:54.264 Then we need a config as well, 352 00:16:54.264 --> 00:16:57.264 that's going to be albumList.config, 353 00:16:59.302 --> 00:17:03.130 border equals two in parenthesis, and relief equal sunken 354 00:17:03.130 --> 00:17:06.785 and sunken has single quotes around it. 355 00:17:06.785 --> 00:17:07.618 Sunken. 356 00:17:09.437 --> 00:17:10.904 All right. 357 00:17:10.904 --> 00:17:12.044 I'm making more space here, 358 00:17:12.044 --> 00:17:15.211 and let's finish off the songs listbox 359 00:17:16.170 --> 00:17:18.170 before we end the video. 360 00:17:22.901 --> 00:17:25.274 We're going to start there with our variable again, 361 00:17:25.274 --> 00:17:26.974 so songLV is equal 362 00:17:26.974 --> 00:17:28.557 to tkinter.Variable 363 00:17:30.702 --> 00:17:33.797 and it's going to be mainwindow. 364 00:17:33.797 --> 00:17:37.775 And songLV.set and then two left parenthesis 365 00:17:37.775 --> 00:17:40.525 in double quote, choose an album, 366 00:17:41.730 --> 00:17:44.246 and the double quote to finish off the line 367 00:17:44.246 --> 00:17:47.599 and then a comma, two right parenthesis. 368 00:17:47.599 --> 00:17:50.182 songList equals tkinter.listbox 369 00:17:53.074 --> 00:17:57.045 and it's going to be mainwindow in parenthesis, comma, 370 00:17:57.045 --> 00:18:01.212 then listvariable, all in lowercase, equals songLV. 371 00:18:03.818 --> 00:18:06.485 Then songList.grid, parenthesis, 372 00:18:08.102 --> 00:18:10.097 row equals one, comma, space, 373 00:18:10.097 --> 00:18:12.652 column equals two this time, 374 00:18:12.652 --> 00:18:15.778 space after the comma, and sticky equals, 375 00:18:15.778 --> 00:18:18.627 single quotes, nsew again. 376 00:18:18.627 --> 00:18:20.800 Single quotes around the text there, 377 00:18:20.800 --> 00:18:24.156 comma, space, padx equals and in parenthesis 30, 378 00:18:24.156 --> 00:18:28.399 comma, space, zero, then the two closing right parenthesis. 379 00:18:28.399 --> 00:18:30.042 Then we just need the config, 380 00:18:30.042 --> 00:18:31.625 so songList.config, 381 00:18:33.727 --> 00:18:35.799 border equals two, comma, space 382 00:18:35.799 --> 00:18:39.258 then relief equals, two single quotes, 383 00:18:39.258 --> 00:18:41.767 and it's going to be sunken within that. 384 00:18:41.767 --> 00:18:44.522 Then right parenthesis to close the line over. 385 00:18:44.522 --> 00:18:47.445 That's the user interface elements created, 386 00:18:47.445 --> 00:18:48.952 so we should be able to start a main loop 387 00:18:48.952 --> 00:18:50.558 and see how it works. 388 00:18:50.558 --> 00:18:52.537 Let's quickly do that before we end the video. 389 00:18:52.537 --> 00:18:55.620 I'm just going to put a code in here. 390 00:19:01.019 --> 00:19:01.852 Main loop. 391 00:19:03.343 --> 00:19:04.770 And the code is going to be pretty simple, 392 00:19:04.770 --> 00:19:07.853 it's going to be mainwindow.mainloop. 393 00:19:10.321 --> 00:19:15.149 We're going to print, closing database connexion. 394 00:19:15.149 --> 00:19:18.982 Of course we open that right up on line seven, 395 00:19:20.932 --> 00:19:22.793 I think I see up there. 396 00:19:22.793 --> 00:19:27.525 Then we need to actually close this, so conn.close. 397 00:19:27.525 --> 00:19:29.192 Let's just run that, 398 00:19:31.931 --> 00:19:33.742 and have a bit of look here. 399 00:19:33.742 --> 00:19:35.781 That's close to what we originally said we wanted, 400 00:19:35.781 --> 00:19:37.985 but we're missing scroll bars though. 401 00:19:37.985 --> 00:19:41.818 Let's start looking at that in the next video.