1 00:00:00,000 --> 00:00:03,570 So here we go, I have open up Atom here. 2 00:00:03,757 --> 00:00:06,960 So I'm going to use Atom to build the 3 00:00:06,960 --> 00:00:09,900 bookstore program, so to say, that uses 4 00:00:09,900 --> 00:00:14,130 tkinter and sqlite3 as the 5 00:00:14,130 --> 00:00:17,310 libraries. So I'll go ahead and create a 6 00:00:17,310 --> 00:00:18,716 new Python file in here. 7 00:00:18,741 --> 00:00:21,191 [No audio] 8 00:00:21,216 --> 00:00:23,488 Call it script1.py. 9 00:00:23,513 --> 00:00:26,191 [No audio] 10 00:00:26,216 --> 00:00:27,570 Now to build graphical user 11 00:00:27,570 --> 00:00:29,850 interfaces with tkinter you need 12 00:00:29,850 --> 00:00:32,250 tkinter library, and you don't have to 13 00:00:32,250 --> 00:00:35,040 install it, because tkinter is a built 14 00:00:35,040 --> 00:00:37,080 in Python library. So all you have to do 15 00:00:37,080 --> 00:00:40,500 is go ahead and import tkinter. If you 16 00:00:40,500 --> 00:00:44,190 are on Python2, this would be with a 17 00:00:44,190 --> 00:00:47,490 capital T. In Python3, it's 18 00:00:47,580 --> 00:00:50,520 tkinter, simply like that. Good 19 00:00:50,520 --> 00:00:54,000 practice, however, is to actually import 20 00:00:54,030 --> 00:00:56,100 everything from tkinter. 21 00:00:56,100 --> 00:01:02,700 So, from tkinter import all. So why, 22 00:01:02,700 --> 00:01:05,940 we do that? We do that because we're 23 00:01:05,940 --> 00:01:08,340 going to use a lot of tkinter 24 00:01:08,340 --> 00:01:11,160 objects in our scripts. So it makes 25 00:01:11,160 --> 00:01:13,410 sense to just load them all instead of 26 00:01:13,500 --> 00:01:16,260 referencing them with tkinter and dots, and 27 00:01:16,680 --> 00:01:19,230 button, for example. Instead of doing 28 00:01:19,230 --> 00:01:21,630 that, we can just say button, and then 29 00:01:21,660 --> 00:01:24,450 we enter the parameters and so on. So 30 00:01:24,450 --> 00:01:26,825 let me create a graphical user interface now. 31 00:01:28,489 --> 00:01:32,220 Now, a tkinter program is made up of 32 00:01:32,220 --> 00:01:36,450 two main things, we have the window and 33 00:01:36,450 --> 00:01:38,820 you have the widgets. So for example, 34 00:01:38,820 --> 00:01:41,190 the window is whole this 35 00:01:41,190 --> 00:01:43,500 program here, as you see. And then you 36 00:01:43,500 --> 00:01:47,190 have buttons and things like that, which 37 00:01:47,190 --> 00:01:50,010 are called widgets. So first of all, you 38 00:01:50,010 --> 00:01:52,770 need to create the window. And I like to 39 00:01:52,770 --> 00:01:55,830 call my variable window, and that would 40 00:01:55,830 --> 00:02:02,490 be equal to tk. That's it. That would 41 00:02:02,490 --> 00:02:05,100 create an empty window for us but we 42 00:02:05,100 --> 00:02:07,590 need to do something more here. We say 43 00:02:07,620 --> 00:02:09,588 window.mainloop. 44 00:02:09,613 --> 00:02:11,970 [Author typing] 45 00:02:11,995 --> 00:02:15,990 This is always necessary. So we open a window, we 46 00:02:15,990 --> 00:02:18,090 create a window and then everything goes 47 00:02:18,240 --> 00:02:21,660 between these two lines. So you create a 48 00:02:21,660 --> 00:02:24,330 widget between these two. And this is 49 00:02:24,330 --> 00:02:26,760 necessary because if you don't have 50 00:02:26,790 --> 00:02:29,130 this, your program will open up and it 51 00:02:29,130 --> 00:02:32,250 will close in a split of a second, so 52 00:02:32,250 --> 00:02:34,020 basically, this allows you to actually 53 00:02:34,020 --> 00:02:37,350 press that X button on the 54 00:02:37,350 --> 00:02:39,390 corner of your window and close the 55 00:02:39,390 --> 00:02:41,970 program. So this should be always at the 56 00:02:41,970 --> 00:02:45,630 end of your code. I'll save this script, 57 00:02:45,660 --> 00:02:47,644 and I'm going to execute it. 58 00:02:47,669 --> 00:02:50,127 [Author typing] 59 00:02:50,152 --> 00:02:53,310 And we got an error, it says tkinter 'tk' is not 60 00:02:53,310 --> 00:02:56,130 defined. So Python is not recognizing 61 00:02:56,130 --> 00:02:58,320 this function here because it should be 62 00:02:58,710 --> 00:03:04,470 capital T and execute again. This is 63 00:03:04,470 --> 00:03:07,380 the window, and it has nothing inside. So 64 00:03:07,380 --> 00:03:11,640 let's go ahead and add a button. So we 65 00:03:11,640 --> 00:03:13,530 store the main window in a variable, 66 00:03:14,070 --> 00:03:16,290 we're going to do the same for widgets. 67 00:03:16,410 --> 00:03:18,420 So we're going to create variables. 68 00:03:18,630 --> 00:03:21,540 Let's say, b1 equals to Button. So the 69 00:03:21,540 --> 00:03:23,850 Button is a function that generates a 70 00:03:23,850 --> 00:03:27,930 button widget. The Button function takes 71 00:03:27,930 --> 00:03:31,110 some arguments. If you want to get a 72 00:03:31,110 --> 00:03:35,760 full list of arguments, you'd want to do 73 00:03:35,760 --> 00:03:38,550 something called introspection. Let's say I've 74 00:03:38,550 --> 00:03:44,401 python here, and from tkinter import 75 00:03:45,643 --> 00:03:48,330 full, and then let's say Button, 76 00:03:49,110 --> 00:03:52,740 and a question mark. And here you can 77 00:03:52,740 --> 00:03:55,110 see what parameters you can pass 78 00:03:55,140 --> 00:03:56,167 to the Button function. 79 00:03:56,192 --> 00:03:58,931 [Author typing] 80 00:03:58,956 --> 00:04:02,310 Now the very first parameter you would want to add to 81 00:04:02,310 --> 00:04:05,670 a widget is the variable of the window, 82 00:04:05,670 --> 00:04:08,130 of the main window. So you need to tell 83 00:04:08,130 --> 00:04:10,770 your widget, the window that the widget 84 00:04:10,770 --> 00:04:14,100 has to be backed to. So window and then you 85 00:04:14,100 --> 00:04:16,530 can pass parameters, like the one you 86 00:04:16,530 --> 00:04:19,200 see here. Let's say one of the main 87 00:04:19,200 --> 00:04:22,590 parameters would be text, so text 88 00:04:23,940 --> 00:04:27,030 equals, let's say to the string Execute. 89 00:04:27,055 --> 00:04:29,105 [No audio] 90 00:04:29,130 --> 00:04:31,110 So that is the text, the label that 91 00:04:31,110 --> 00:04:33,750 will be displayed over the button. Now 92 00:04:33,750 --> 00:04:36,690 if we try to execute this script now 93 00:04:38,190 --> 00:04:40,050 you'll see that we don't have a button 94 00:04:40,050 --> 00:04:42,000 yet, and that's because we haven't 95 00:04:42,000 --> 00:04:45,390 specified where to put that button. To 96 00:04:45,390 --> 00:04:47,880 do that, you need to use the pack 97 00:04:47,940 --> 00:04:51,840 method, which is a widget method, and then 98 00:04:51,840 --> 00:04:54,930 execute again and now you see them 99 00:04:54,930 --> 00:04:58,080 button. However, there is another way to 100 00:04:58,080 --> 00:04:59,970 actually put your widgets in in your 101 00:05:00,000 --> 00:05:04,710 window, that is the grid method, grid, 102 00:05:05,280 --> 00:05:08,160 and often is a matter of preference. So 103 00:05:08,160 --> 00:05:11,370 whether to use pack or grid, but the 104 00:05:11,370 --> 00:05:13,590 idea of grid is that with a grid 105 00:05:13,590 --> 00:05:15,330 method you have more control on the 106 00:05:15,330 --> 00:05:17,610 position of your buttons or 107 00:05:17,610 --> 00:05:19,620 your widgets in general, because here 108 00:05:19,620 --> 00:05:21,548 you specify the row 109 00:05:21,573 --> 00:05:23,970 [No audio] 110 00:05:23,995 --> 00:05:27,600 and the column where you want to put your button. So 111 00:05:27,600 --> 00:05:30,840 everything starts from zero, and so the 112 00:05:30,840 --> 00:05:33,750 first row has an index of zero and the 113 00:05:33,750 --> 00:05:35,550 first column has an index of zero, and 114 00:05:35,550 --> 00:05:39,390 so on, I actually found illustration for 115 00:05:39,390 --> 00:05:42,750 that. So this is tkinter program, and we 116 00:05:42,750 --> 00:05:44,430 have two rows here. So we have this 117 00:05:44,430 --> 00:05:47,310 first row which should have an index of 118 00:05:47,310 --> 00:05:48,900 zero, and you have the second row which 119 00:05:48,900 --> 00:05:51,870 would have an index of one, and you have 120 00:05:51,895 --> 00:05:55,975 columns, so 0-1-2-3, and so on. Let's say, 121 00:05:56,250 --> 00:05:58,470 the Okay button, which is this one here, 122 00:05:58,770 --> 00:06:03,450 would have a row of 012. So 2 for the 123 00:06:03,450 --> 00:06:08,700 row, and then 0123, 3 for the column. A window might 124 00:06:08,700 --> 00:06:13,110 also have widgets where, which span in 125 00:06:13,110 --> 00:06:16,410 more than one row or a column. In that 126 00:06:16,410 --> 00:06:20,760 case, you'd add another parameter here 127 00:06:20,790 --> 00:06:24,120 called rowspan. And that would be equal 128 00:06:24,120 --> 00:06:27,090 to a number, let's say if you put 2, the 129 00:06:27,090 --> 00:06:29,425 button would span in two rows. 130 00:06:31,129 --> 00:06:34,740 In our case, this is not necessary actually, because 131 00:06:34,740 --> 00:06:38,370 we don't have lots of widgets, we only 132 00:06:38,370 --> 00:06:42,000 have one button. And so let me execute 133 00:06:42,000 --> 00:06:45,210 this script now and see what we get. So 134 00:06:45,210 --> 00:06:48,120 we get a button, which actually does 135 00:06:48,150 --> 00:06:51,360 nothing, because we haven't specified what 136 00:06:51,360 --> 00:06:53,610 action to perform when you're pressing 137 00:06:53,610 --> 00:06:56,610 the button. And I'll explain that in the 138 00:06:56,610 --> 00:06:58,920 next lecture, but for now let's add 139 00:06:58,920 --> 00:07:00,810 some more widgets here, just for you to 140 00:07:00,810 --> 00:07:04,470 get more familiar with widgets. So let's 141 00:07:04,470 --> 00:07:08,584 add an entry widget. And let's say e1 142 00:07:08,609 --> 00:07:11,040 for that. So e1 equals to 143 00:07:11,070 --> 00:07:14,100 Entry, and let me guess what it is for 144 00:07:14,100 --> 00:07:16,635 spirometer, and that's the window parameter. 145 00:07:18,174 --> 00:07:19,830 And we can leave it like that 146 00:07:19,830 --> 00:07:23,940 for now. And let's say a you want grid. 147 00:07:23,965 --> 00:07:26,435 [No audio] 148 00:07:26,460 --> 00:07:29,370 And row, let's keep it in the same row 149 00:07:29,400 --> 00:07:35,910 and column, 1. Save, execute, and here 150 00:07:35,910 --> 00:07:39,030 we have an entry. So what's an entry? An 151 00:07:39,030 --> 00:07:41,730 entry is, it's like an area where you can 152 00:07:41,730 --> 00:07:43,860 enter a value and than you can 153 00:07:43,860 --> 00:07:45,600 interact with widget value in your 154 00:07:45,600 --> 00:07:47,940 script. So let's say you enter 155 00:07:48,000 --> 00:07:51,540 kilometres here, and you'd want to have 156 00:07:51,540 --> 00:07:53,880 a button that converts those kilometers 157 00:07:53,880 --> 00:07:56,160 to miles. So the button will get the 158 00:07:56,160 --> 00:08:00,090 value of this area here. And I need to display 159 00:08:00,090 --> 00:08:03,090 it in another widget, which could be a 160 00:08:03,090 --> 00:08:05,880 text widget. So let's add a text widget. 161 00:08:06,450 --> 00:08:09,990 Let's say, t1 equals the Text window, 162 00:08:09,990 --> 00:08:14,435 of course, and let's say, t1 grid 163 00:08:15,700 --> 00:08:17,575 row 0, 164 00:08:18,357 --> 00:08:21,442 column 2. 165 00:08:23,052 --> 00:08:28,830 That's it, execute. We got a very big text widget because 166 00:08:28,830 --> 00:08:30,570 the default size, the default 167 00:08:30,570 --> 00:08:33,930 height and width is actually quite a big 168 00:08:33,930 --> 00:08:36,660 number, so we need to specify two 169 00:08:36,660 --> 00:08:40,140 parameters for the text widget. We would 170 00:08:40,170 --> 00:08:43,980 need to put the height, let's say, 1 171 00:08:43,980 --> 00:08:48,720 cell and the width, let's say, 20. 172 00:08:48,745 --> 00:08:53,795 [Author typing] 173 00:08:53,820 --> 00:08:58,050 So this is the widget area, and this is 174 00:08:58,050 --> 00:09:01,320 the entry, and this is the button. And 175 00:09:01,320 --> 00:09:03,120 that's it for this lecture. In the next 176 00:09:03,120 --> 00:09:06,570 lecture, I'll show you how to put these 177 00:09:06,570 --> 00:09:08,790 widgets in life so that they can 178 00:09:08,790 --> 00:09:11,617 actually do something. See you in the next lecture.