1 00:00:00,060 --> 00:00:06,240 So here we go. I have opened up an Atom here so I'm going to use Atom to build 2 00:00:06,240 --> 00:00:15,660 the bookstore program so to say. That uses tkinter and sqlite3 as libraries so 3 00:00:15,660 --> 00:00:25,100 I'll go ahead and create a new Python file in here. Script1.py. 4 00:00:25,369 --> 00:00:30,720 Now to build graphical user interfaces with tkinter you need the tkinter library 5 00:00:30,720 --> 00:00:36,329 and you don't have to install it because tkinter is a built-in Python library. 6 00:00:36,329 --> 00:00:42,200 So all you have to do is go ahead and import tkinter. If you are on python 2, 7 00:00:42,200 --> 00:00:48,809 this would be with a capital T. In Python 3 it's tkinter, simply like that. 8 00:00:48,809 --> 00:00:52,850 9 Good practice however is to actually 10 00:00:52,850 --> 00:01:02,609 import everything from, everything from tkinter so from tkinter import all. So why 11 00:01:02,609 --> 00:01:08,250 why we do that? We do that because we're going to use a lot of tkinter 12 00:01:08,250 --> 00:01:13,200 objects in our scripts so it makes sense to just load them all instead of 13 00:01:13,200 --> 00:01:19,710 referencing them with tkinter.button for example. Instead of doing that we can 14 00:01:19,710 --> 00:01:23,549 just say button and then we enter the parameters and so on. 15 00:01:23,549 --> 00:01:31,619 So let me create a graphical user interface. Now a tkinter program is made 16 00:01:31,619 --> 00:01:38,850 up of two main things. We have the window and you have the widget, so for example 17 00:01:38,850 --> 00:01:43,759 the window is all this program here that you see, and then you have 18 00:01:43,759 --> 00:01:50,189 buttons and things like that which are called widgets, so first of all you need 19 00:01:50,189 --> 00:01:55,979 to create the window, and I like to call my variable window and that would be 20 00:01:55,979 --> 00:02:05,700 equal to tk. That's it. That would create an empty window for us, but we need to do 21 00:02:05,700 --> 00:02:13,680 something more here. We say window.mainloop. This is always necessary. 22 00:02:13,680 --> 00:02:18,870 So we open the window, we create a window and then everything goes between these 23 00:02:18,870 --> 00:02:25,680 two lines, so you create widgets between these two, and this is necessary because if 24 00:02:25,680 --> 00:02:30,780 you don't have these, your program will open up and it will close in a split of a second. 25 00:02:30,780 --> 00:02:37,140 So basically this allows you to actually press that X button 26 00:02:37,140 --> 00:02:41,970 on the corner of a window and cause the program, so this should be always at the 27 00:02:41,970 --> 00:02:50,459 end of your code. Now I'll save this script and going to execute it. 28 00:02:50,459 --> 00:02:56,099 And we got an error it says tkinter, tk is not defined, so python is not recognizing 29 00:02:56,099 --> 00:03:04,349 this function here because it should be capital T. And execute again. And this is 30 00:03:04,349 --> 00:03:11,400 the window and it has nothing inside, so let go ahead and add a button. 31 00:03:11,400 --> 00:03:15,629 So we store the main window in a variable and we're going to do the same for 32 00:03:15,629 --> 00:03:20,129 widgets so we're going to create variables. Let's say b1 equals to button. 33 00:03:20,129 --> 00:03:27,120 So the button is a function that generates a button widget. 34 00:03:27,120 --> 00:03:32,940 The bottom function takes some arguments. If you want to get a full list of arguments you 35 00:03:32,940 --> 00:03:43,129 want to do some code introspection. Let's say iPython here and from tkinter 36 00:03:43,129 --> 00:03:52,979 import all and then let's say button and a question mark. And here you can see 37 00:03:52,979 --> 00:03:59,760 what parameters you get you can pass to the button function. Now the very 38 00:03:59,760 --> 00:04:05,819 first parameter you'd want to add to a widget is the variable of the window, 39 00:04:05,819 --> 00:04:11,159 of the main window, so you need to tell your widget the window that the widget 40 00:04:11,159 --> 00:04:14,519 has to be packed to. So window and then you can pass 41 00:04:14,519 --> 00:04:19,769 parameters like the one you see here. Let's say one of the main parameters 42 00:04:19,769 --> 00:04:26,190 would be text, so text equals let's say to the string execute. 43 00:04:26,190 --> 00:04:32,970 So that is the text, the label that will be displayed over the button. 44 00:04:32,970 --> 00:04:40,050 Now if we try to execute this script now you'll see that we don't have a button 45 00:04:40,050 --> 00:04:45,540 yet and that's because we haven't specified where to put that button. 46 00:04:45,540 --> 00:04:52,290 To do that you need to use the pack method which is a widget method and execute 47 00:04:52,290 --> 00:04:58,920 again and now you see the button. However there is another way to actually put 48 00:04:58,920 --> 00:05:06,990 your widgets in your window. That is the grid method, grid and often it's 49 00:05:06,990 --> 00:05:12,660 a matter of preference whether to use pack or grid, but the idea of grid is that 50 00:05:12,660 --> 00:05:17,370 with the grid method you have more control on the position of your buttons and your 51 00:05:17,370 --> 00:05:24,870 your widgets in general because here you'd specify the row and the column where 52 00:05:24,870 --> 00:05:30,900 you want to put your button, so everything starts from 0 and so 53 00:05:30,900 --> 00:05:36,060 the first row it has an index of 0 and the first column has an index of 0 and so on. 54 00:05:36,060 --> 00:05:42,750 I actually found an illustration for that. So this is a tkinter program and we 55 00:05:42,750 --> 00:05:47,940 have two rows here, so we have this first row whiche should have an index of 0 and you 56 00:05:47,940 --> 00:05:52,500 have the second row which should have an index of the one and you have columns. 57 00:05:52,500 --> 00:05:59,100 So 0 1 2 3 and so on and let's say the ok button which is this one here would have 58 00:05:59,100 --> 00:06:08,400 a row of 0 1 2 so 2 for the row and then 0 1 2 3. 3 for the column. Then you 59 00:06:08,400 --> 00:06:16,200 might also have widgets were which span in more than one row or a column. 60 00:06:16,200 --> 00:06:23,790 In that case you'd add another parameter here called rowspan and that would be 61 00:06:23,790 --> 00:06:31,290 equal to a number. Let's say if you put 2, the button would span in two rows. 62 00:06:31,290 --> 00:06:36,010 In our case this is not necessary actually because we don't have 63 00:06:36,010 --> 00:06:43,210 lots of widgets. We only have one button and so let me execute this script now 64 00:06:43,210 --> 00:06:49,120 and see what we get. So we get a button which actually does nothing because 65 00:06:49,120 --> 00:06:55,270 we haven't specified what action to perform when you're pressing the button and I'll 66 00:06:55,270 --> 00:06:59,710 explain that in the next lecture, but for now let's add some more widgets here. 67 00:06:59,710 --> 00:07:07,240 Just for you to get more familiar with widgets. So let's add an entry widget and 68 00:07:07,240 --> 00:07:13,750 let's say a e1 for that, so entry 1 equals to Entry, and then guess what is the 69 00:07:13,750 --> 00:07:19,630 first parameter? And that's the window parameter, and we can leave it like that for now. 70 00:07:19,630 --> 00:07:30,870 Let's say e1.grid and row, let's keep it in same row and in column1. 71 00:07:30,870 --> 00:07:39,730 Save, execute and here we have an entry. So what's an entry, an entry 72 00:07:39,730 --> 00:07:44,950 it's like an area where you can enter a value and then you can interact with 73 00:07:44,950 --> 00:07:50,490 that value in your script, so let's say you enter kilometers here and you'd want 74 00:07:50,490 --> 00:07:55,870 to have a button that converts those kilometers to miles so the button would 75 00:07:55,870 --> 00:08:02,560 get the value of this area here, and it would display it in another widget which 76 00:08:02,560 --> 00:08:07,720 could be a text widget, so let's add a text widget. Let's say t1 equals Text 77 00:08:07,720 --> 00:08:21,130 window of course, and let's say t1 grid row 0 column 2. 78 00:08:21,130 --> 00:08:29,650 That's it, execute and we got a very big text widget because the default size, 79 00:08:29,650 --> 00:08:35,890 the default height and width is actually quite a big number, so we need to specify 80 00:08:35,890 --> 00:08:43,660 two parameters for the text widget. We would need to put the height let's say 81 00:08:43,660 --> 00:08:55,170 one cell and the width. Let's say 20 and so this is the widget area. 82 00:08:55,170 --> 00:09:02,070 and this is the entry and this is the button. And that's it for this lecture. 83 00:09:02,070 --> 00:09:07,829 In the next lecture I'll show you how to put these widgets in life 84 00:09:07,829 --> 00:09:13,130 so that they can actually do something. See you in the next lecture.