1 00:00:00,030 --> 00:00:04,290 Great, so now we have a sketch of our graphical user interface and that should 2 00:00:04,290 --> 00:00:09,690 make things easier, so now you can just go ahead and code your graphical user 3 00:00:09,690 --> 00:00:15,660 interface in Python using the Tkinter features, so Tkinter is a library that 4 00:00:15,660 --> 00:00:20,580 we'll be using to make this interface. And I suppose you already know Tkinter 5 00:00:20,580 --> 00:00:25,199 because I explained that in one of the previous sections, so if you don't know 6 00:00:25,199 --> 00:00:30,510 Tkinter, please go back two sections before this, and then you'll be able to 7 00:00:30,510 --> 00:00:36,140 understand what I am talking about here. So I'll keep the sketch on the right and 8 00:00:36,140 --> 00:00:42,629 now you know that to make a graphical user interface with Tkinter, you can 9 00:00:42,629 --> 00:00:48,090 either use the pack method to pack your widgets, or the grid method. We'll be using 10 00:00:48,090 --> 00:00:52,920 the grid method, so it could be a good idea to actually make a grid on your 11 00:00:52,920 --> 00:00:58,079 sketch, so that when you create your widgets, let's say you create a button, 12 00:00:58,079 --> 00:01:02,609 you'd want to pass the number of the row and the number of the column, so having a grid 13 00:01:02,609 --> 00:01:11,909 like this will make things easier. Alright, and I just like to delete this 14 00:01:11,909 --> 00:01:17,640 doc string. We don't need it and it saves me space so that you can see 15 00:01:17,640 --> 00:01:26,430 a cleaner workspace here. Alright, from Tkinter import everything, so I'm not 16 00:01:26,430 --> 00:01:30,270 explaining the code now because you already know these things. If there is 17 00:01:30,270 --> 00:01:38,820 something new, I'll go through it. Window equals to Tk, so the Tk method that 18 00:01:38,820 --> 00:01:48,780 creates a window object, and then you want to apply the main loop method which 19 00:01:48,780 --> 00:01:52,890 is basically a way to wrap up all the widgets that you will enter in this 20 00:01:52,890 --> 00:02:01,469 space now. Alright, so we have four labels here so we have a label title, and 21 00:02:01,469 --> 00:02:07,200 author, year, and ISBN, so I'm just going to create four labels or four label 22 00:02:07,200 --> 00:02:12,800 objects. So I'll name my objects, my variables from l1 to l4. 23 00:02:12,800 --> 00:02:23,900 And we use the label object, label method for that. Window is the parent window and 24 00:02:23,900 --> 00:02:32,240 text would be title. So control enter you can go to the next line no matter where 25 00:02:32,240 --> 00:02:37,400 you are in the previous line, so you don't have to just switch go to here and 26 00:02:37,400 --> 00:02:41,630 then press enter. You just you just press control enter and you go to the next line. 27 00:02:41,630 --> 00:02:53,510 And then you apply the grid method, so the first label is on row 0, column 0 as well. 28 00:02:53,510 --> 00:03:05,140 Then you can just copy this and paste it three more times. So that would be l2, 29 00:03:05,140 --> 00:03:23,000 l3, and l4, and you'd also want to change the text of your label here, and ISBN. 30 00:03:23,000 --> 00:03:31,760 Author would be column 2 as you see from the sketch, so 0 2. Then we have the year. 31 00:03:31,760 --> 00:03:43,790 0, 1 and then 1, 2 for the last label. So let's see what we have. I'd just like to call my script. 32 00:03:43,790 --> 00:03:54,590 Alright, looks promising. Now let's add the entries, so these were 33 00:03:54,590 --> 00:04:03,709 static widgets. Now we need to add some entries, so e1 would be entry and the 34 00:04:03,709 --> 00:04:07,970 entry gets the window as the first parameter just like any other widget does. 35 00:04:07,970 --> 00:04:16,549 And also a text variable parameter, and this text variable parameter, this 36 00:04:16,549 --> 00:04:20,989 expects as an argument the value that the user will enter in the entry widget. 37 00:04:20,989 --> 00:04:28,040 And that is a spatial data type. So you first need to actually create 38 00:04:28,040 --> 00:04:33,860 a data type here, an object with all that data type, so let's call it. We are 39 00:04:33,860 --> 00:04:42,680 creating an entry for the title. Say title text equal to StringVar, so this 40 00:04:42,680 --> 00:04:48,080 is the function that creates this spatial object, and that would be equal 41 00:04:48,080 --> 00:04:54,170 to the title text, so that's it. And you also need to grid this entry widget. 42 00:04:54,170 --> 00:05:04,750 So grid and the first widgets of the title widgets corresponds with row 0 and column 1. 43 00:05:04,750 --> 00:05:27,220 So that's it. I can quickly multiply this here. Author, text. Year, text. 44 00:05:27,220 --> 00:05:38,150 And ISBN text. You also need to change the numbers of the variables. Just like that. 45 00:05:38,150 --> 00:05:45,160 And of course you need to pass that. This user entries in here. So it should 46 00:05:53,540 --> 00:06:03,470 be n, and this too. Alright and lastly you want to specify the rows and columns for 47 00:06:03,470 --> 00:06:14,210 these entries too, so it should be 0, 3 and then we have the year text widget 1, 48 00:06:14,210 --> 00:06:23,680 1, alright, and the last entry 1, 3. Alright, let's check it out. 49 00:06:23,680 --> 00:06:27,280 Yep, looks good. Great, and now it's the turn of the Listbox. 50 00:06:32,110 --> 00:06:43,360 So let's call it list1. Why not? And that would be equal to List box window. 51 00:06:43,360 --> 00:06:50,410 And then you would want to specify the height of your Listbox and width 52 00:06:50,410 --> 00:06:57,220 as well, so I thought about putting 6 and 35. It would be good height and width. 53 00:06:57,220 --> 00:07:02,200 You can you can test different heights and widths and see what comes 54 00:07:02,200 --> 00:07:11,530 better, and then I would like to grid this. So grid. And so this would start at row 55 00:07:11,530 --> 00:07:19,500 number two and column zero, however if we leave it like this 56 00:07:19,500 --> 00:07:27,880 things will not go as we expect actually. We can try this, and as you can see the 57 00:07:27,880 --> 00:07:33,250 list box occupied over only the first cell, so the first cell of the 58 00:07:33,250 --> 00:07:40,210 first column on row zero, one, two, so row 2, column zero. What we want instead 59 00:07:40,210 --> 00:07:44,560 is to span this listbox on the other columns as well, and on the 60 00:07:44,560 --> 00:07:49,180 other rows because we will have buttons here later, so we want to span that. 61 00:07:49,180 --> 00:07:58,120 And you can see the sketch here, so we can add rowspan parameter, and that 62 00:07:58,120 --> 00:08:09,190 would be equal to six and column span as well, so that would be two, alright. 63 00:08:09,190 --> 00:08:14,470 So that would be a list box, however we also need to actually add a scrollbar there, 64 00:08:14,470 --> 00:08:20,410 so that the list can be scrolled when there are lots of data in list, lots 65 00:08:20,410 --> 00:08:27,820 of records. To attach a scrollbar to the list, the logic here works like this. 66 00:08:27,820 --> 00:08:32,680 You create your scrollbar and then you tell your scrollbar about the list that the 67 00:08:32,680 --> 00:08:38,290 scrollbar has to scroll, and then you tell your list as well who it's 68 00:08:38,290 --> 00:08:43,210 scrollbar is, so let's first create the scroll bar, an independent scroll bar. 69 00:08:43,210 --> 00:08:57,010 So let's say sb1 Scrollbar method, and that is attached to the window, and then you 70 00:08:57,010 --> 00:09:11,620 apply the grid method, so the scroll bar would be our row 1, column 3. And once you 71 00:09:11,620 --> 00:09:17,500 created these two objects you want to apply a configure method to the list box, 72 00:09:17,500 --> 00:09:26,260 and a configure method to the scroll bar object, and these configure methods 73 00:09:26,260 --> 00:09:34,180 get arguments, so this would be scrollcommand equals sb1.set. 74 00:09:34,180 --> 00:09:40,510 That's it. So meaning that the vertical scroll bar 75 00:09:40,510 --> 00:09:45,610 along the y-axis will be set to this scroll bar and then you go to the scroll 76 00:09:45,610 --> 00:09:52,600 bar method. Sorry this has to be configure, then you pass command equals 77 00:09:52,600 --> 00:09:59,410 to list1.yview, so that should work. You are passing a command 78 00:09:59,410 --> 00:10:04,270 parameter here, so meaning that when you scroll the bar, the view, the vertical 79 00:10:04,270 --> 00:10:10,390 view of the list will change, so let's see how this goes. And seems like 80 00:10:10,390 --> 00:10:15,160 I've messed up something here, I have put the position of the scroll bar on 81 00:10:15,160 --> 00:10:24,340 row one I guess and column three, yeah. So the scroll bar should be actually row two, 82 00:10:24,340 --> 00:10:30,550 column two, let's check that again. Yeah, seems to be working, though it doesn't 83 00:10:30,550 --> 00:10:36,460 look very centered because we need to span it through the same rows as we 84 00:10:36,460 --> 00:10:44,170 have spanned the listbox here, so we need to add here rowspan parameter, set 85 00:10:44,170 --> 00:10:49,950 it to 6 and now the scroll bar looks centered. 86 00:10:49,950 --> 00:10:58,910 All right so now what we have left is to add these button widgets just here, great. 87 00:10:58,910 --> 00:11:06,589 So we have six buttons, let's start with the first one, we have the button method. 88 00:11:06,589 --> 00:11:14,910 Window and texts. Our buttons have text. View all is the first one, and then I 89 00:11:14,910 --> 00:11:25,800 thought of putting a width of 12, so b1 grid, that would be row 2, column three. 90 00:11:25,800 --> 00:11:54,860 And have five more buttons, so I'll paste this. Six I think, so b2, b3, 4 and 6. 91 00:12:07,459 --> 00:12:13,560 Of course these buttons don't have a command parameter now because later we 92 00:12:13,560 --> 00:12:19,890 will add here a command parameter and that will decide what the buttons will do, but 93 00:12:19,890 --> 00:12:26,459 for now that is just fine, so these buttons will be aligned in column three 94 00:12:26,459 --> 00:12:39,029 all of them, and everyone has a different row value. And six. Great, so let's see 95 00:12:39,029 --> 00:12:52,910 what we got, and boom! I forgot to put a row number for the close button. Seven. 96 00:12:53,740 --> 00:12:58,940 And how it looks better. So this was how to build a graphical user interface. 97 00:12:58,940 --> 00:13:03,980 Of course these buttons don't do anything for now, so in the next lecture I'll show 98 00:13:03,980 --> 00:13:09,230 you how to attach actions to this graphical user interface, so we will work 99 00:13:09,230 --> 00:13:14,120 on the backend and we'll be using SQLite 3 for interacting with the 100 00:13:14,120 --> 00:13:18,920 database and fetching those data in this graphical user interface, so I hope 101 00:13:18,920 --> 00:13:23,720 my routines and my practices will help you to build the graphical user interfaces 102 00:13:23,720 --> 00:13:27,500 with ease, and I'll see you in the next lecture.