1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:03,430 ROBERT MALATE: Good afternoon, this is CS50, and thank you 3 00:00:03,430 --> 00:00:05,480 for coming to today's seminar. 4 00:00:05,480 --> 00:00:08,650 Today, we are going to cover GUI with Python's Tkinter. 5 00:00:08,650 --> 00:00:13,570 My name is Robert Jomar Malate and this is Tkinter. 6 00:00:13,570 --> 00:00:16,630 So you might be asking, what is Tkinter? 7 00:00:16,630 --> 00:00:20,890 Well it's a library in Python that provides a lightweight GUI, 8 00:00:20,890 --> 00:00:24,250 or also known as a Graphical User Interface. 9 00:00:24,250 --> 00:00:25,430 It's quite simple. 10 00:00:25,430 --> 00:00:29,940 It's not too complex so it would be a fun project to do. 11 00:00:29,940 --> 00:00:31,690 This is great for making your apps visual. 12 00:00:31,690 --> 00:00:35,020 For example, here, if you create a program 13 00:00:35,020 --> 00:00:36,590 that generates a random password. 14 00:00:36,590 --> 00:00:40,570 So let's say, for example, you call it the Random Password Generator. 15 00:00:40,570 --> 00:00:44,280 You would put the number of characters and then it gives a certain password. 16 00:00:44,280 --> 00:00:48,620 However, that's a little bit boring, but what if you could bring that to life? 17 00:00:48,620 --> 00:00:51,100 Tkinter provides that opportunity here and it's 18 00:00:51,100 --> 00:00:54,180 great for making simple Python apps such as this, 19 00:00:54,180 --> 00:01:00,040 where it turns from this from the command prompt to a Graphical User 20 00:01:00,040 --> 00:01:00,690 Interface. 21 00:01:00,690 --> 00:01:04,950 22 00:01:04,950 --> 00:01:06,950 Now the objectives for today's seminar is-- 23 00:01:06,950 --> 00:01:10,610 what we're going to cover is one simple GUI building, which is basically 24 00:01:10,610 --> 00:01:14,180 the basics of Tkinter, where we'll learn how to insert entry fields 25 00:01:14,180 --> 00:01:16,380 and labels into our app. 26 00:01:16,380 --> 00:01:18,410 And additionally, we want to insert buttons 27 00:01:18,410 --> 00:01:21,230 and we want to display the results of some action, 28 00:01:21,230 --> 00:01:23,420 such as pressing the button. 29 00:01:23,420 --> 00:01:26,000 However, what we're not going to cover is advanced methods, 30 00:01:26,000 --> 00:01:31,250 such as including pictures or including audio or game making, because this 31 00:01:31,250 --> 00:01:34,160 requires another Graphical User Interface built onto Python 32 00:01:34,160 --> 00:01:36,260 that is separate from Tkinter. 33 00:01:36,260 --> 00:01:39,410 And additionally, we're not going to cover object-oriented programming. 34 00:01:39,410 --> 00:01:46,990 Most of the documentation of Tkinter is done in object-oriented programming. 35 00:01:46,990 --> 00:01:49,030 But what I want to try to do for you guys today 36 00:01:49,030 --> 00:01:52,014 is give you a brief introduction of how Tkinter works 37 00:01:52,014 --> 00:01:53,180 and what you can do with it. 38 00:01:53,180 --> 00:01:56,160 39 00:01:56,160 --> 00:02:02,120 So for the setup, Tkinter can't run on the CS50 ide or any online ide 40 00:02:02,120 --> 00:02:04,981 so you're going to need to install Python onto your computer. 41 00:02:04,981 --> 00:02:06,230 You can follow this link here. 42 00:02:06,230 --> 00:02:10,860 Go to Python.org/downloads. 43 00:02:10,860 --> 00:02:13,830 From there, you can select Python 3 and download that. 44 00:02:13,830 --> 00:02:17,520 And usually Tkinter is automatically installed in there, but if it's not, 45 00:02:17,520 --> 00:02:20,160 what you want to do is put this in your command line-- 46 00:02:20,160 --> 00:02:22,262 sudo pip install tkinter-- 47 00:02:22,262 --> 00:02:23,470 and you should be good to go. 48 00:02:23,470 --> 00:02:26,600 49 00:02:26,600 --> 00:02:30,680 So after you're done with your setup, you have a text editor open. 50 00:02:30,680 --> 00:02:32,350 Everything is all set. 51 00:02:32,350 --> 00:02:35,560 Let's start coding. 52 00:02:35,560 --> 00:02:36,070 So Tkinter. 53 00:02:36,070 --> 00:02:38,000 The mindset you want to have for Tkinter is 54 00:02:38,000 --> 00:02:41,850 think of it as a stained glass where you have the frame 55 00:02:41,850 --> 00:02:45,840 and inside that frame is separate pieces of glass. 56 00:02:45,840 --> 00:02:49,287 So for example, in this stained glass, you have the frame over here. 57 00:02:49,287 --> 00:02:51,870 However, you can see it's made up of multiple pieces of glass, 58 00:02:51,870 --> 00:02:56,010 such as this black glass here, this glass for the light saber. 59 00:02:56,010 --> 00:03:00,660 You can think of that analogy as a way to construct your Tkinter GUI app. 60 00:03:00,660 --> 00:03:04,980 Over here, you have your window, which is the frame, and in that frame 61 00:03:04,980 --> 00:03:08,070 is going to be separate blocks, where inside those blocks 62 00:03:08,070 --> 00:03:11,085 you can put your labels, your entry fields, and your buttons. 63 00:03:11,085 --> 00:03:14,840 64 00:03:14,840 --> 00:03:17,330 So first, let's create the label. 65 00:03:17,330 --> 00:03:20,930 Let's create the window. 66 00:03:20,930 --> 00:03:24,220 So I'm going to open up my text editor and I'm 67 00:03:24,220 --> 00:03:30,970 going to save this and let's call this MyApp1.py. 68 00:03:30,970 --> 00:03:35,930 App So what do we want to do? 69 00:03:35,930 --> 00:03:38,930 So first, we want to of course import the Tkinter library. 70 00:03:38,930 --> 00:03:42,760 So what we'll do is import Tkinter. 71 00:03:42,760 --> 00:03:46,180 And to shorten the phrasing, we'll just say import Tkinter as tk. 72 00:03:46,180 --> 00:03:50,240 73 00:03:50,240 --> 00:03:53,250 Now next up is we want to create the window. 74 00:03:53,250 --> 00:03:55,500 So how do we do that? 75 00:03:55,500 --> 00:03:56,910 Well we can declare a variable. 76 00:03:56,910 --> 00:04:00,160 Let's just call it Window. 77 00:04:00,160 --> 00:04:02,380 And let's set that window equal to tk.tk. 78 00:04:02,380 --> 00:04:05,270 79 00:04:05,270 --> 00:04:08,770 So what this is saying is that the window variable now 80 00:04:08,770 --> 00:04:11,960 has the properties of all the stuff in Tkinter. 81 00:04:11,960 --> 00:04:14,950 82 00:04:14,950 --> 00:04:18,029 Now what we want to do is actually make that window 83 00:04:18,029 --> 00:04:22,890 run but it's kind of weird how Tkinter works because it's kind of like window 84 00:04:22,890 --> 00:04:27,160 is now part of it, so you kind of have to call it like a function. 85 00:04:27,160 --> 00:04:30,480 However, there is a special function that need to call, so what you would do 86 00:04:30,480 --> 00:04:32,802 is put window.mainloop. 87 00:04:32,802 --> 00:04:37,777 88 00:04:37,777 --> 00:04:41,640 And what this is saying is that you declared a window 89 00:04:41,640 --> 00:04:46,240 and what main loop does, it runs everything inside that window. 90 00:04:46,240 --> 00:04:47,120 So let's save this. 91 00:04:47,120 --> 00:04:54,780 92 00:04:54,780 --> 00:05:05,250 [INAUDIBLE] 93 00:05:05,250 --> 00:05:06,780 And there you have it. 94 00:05:06,780 --> 00:05:09,680 You have a Tkinter window right here. 95 00:05:09,680 --> 00:05:11,000 This is the window you created. 96 00:05:11,000 --> 00:05:13,730 So this is essentially the frame that you want 97 00:05:13,730 --> 00:05:15,792 to create to start building your apps. 98 00:05:15,792 --> 00:05:17,750 However, there are some things you notice here. 99 00:05:17,750 --> 00:05:21,350 For example, one, there was a default size of just about a few 100 00:05:21,350 --> 00:05:22,790 hundred pixels. 101 00:05:22,790 --> 00:05:24,630 And over here, you don't have a title. 102 00:05:24,630 --> 00:05:26,940 It just shows tk. 103 00:05:26,940 --> 00:05:30,670 The next thing we want to do is try to add a title to our own. 104 00:05:30,670 --> 00:05:33,700 And as you can refer here to the PowerPoint, 105 00:05:33,700 --> 00:05:38,700 tk declares this variable as the frame. 106 00:05:38,700 --> 00:05:42,390 Title will input whatever title you want for the app. 107 00:05:42,390 --> 00:05:48,250 And Geometry sets the size in pixels of what the window will be. 108 00:05:48,250 --> 00:05:52,050 So let's go back to our app and let's code that in. 109 00:05:52,050 --> 00:05:57,960 So what we'll do is window.title and then we can put a phrase in there. 110 00:05:57,960 --> 00:06:00,120 And let's say this is called My App. 111 00:06:00,120 --> 00:06:06,230 112 00:06:06,230 --> 00:06:09,120 And then we want to set the size of this window to default size 113 00:06:09,120 --> 00:06:12,950 so when the user opens it, it comes out as an aesthetic size. 114 00:06:12,950 --> 00:06:17,000 And let's say we want a square of about 400 by 400 pixels. 115 00:06:17,000 --> 00:06:26,280 116 00:06:26,280 --> 00:06:28,620 And one thing you want to notice here is that it's 117 00:06:28,620 --> 00:06:32,140 between main loop and the declaration of window. 118 00:06:32,140 --> 00:06:34,410 The reason is because main loop kind of works 119 00:06:34,410 --> 00:06:37,800 like a function, where if you call it at certain places, 120 00:06:37,800 --> 00:06:40,500 it's going to call it but not include stuff. 121 00:06:40,500 --> 00:06:45,180 So for example, if window.mainloop was in line 5 instead of line 10, 122 00:06:45,180 --> 00:06:48,690 we would not see the title or the window would not change 123 00:06:48,690 --> 00:06:52,809 to the certain geometry shape you want. 124 00:06:52,809 --> 00:06:53,600 So let's save this. 125 00:06:53,600 --> 00:06:58,170 126 00:06:58,170 --> 00:07:04,156 Let's close our old GUI and let's run it again. 127 00:07:04,156 --> 00:07:06,780 And as you can see, this time it came out to a different shape. 128 00:07:06,780 --> 00:07:10,780 This time, this is a window 400 by 400 pixels. 129 00:07:10,780 --> 00:07:13,200 And now it has the title called My App. 130 00:07:13,200 --> 00:07:16,240 131 00:07:16,240 --> 00:07:21,730 Now we got the frame down but we want to add the pieces of glass 132 00:07:21,730 --> 00:07:23,960 to the stained glass over here. 133 00:07:23,960 --> 00:07:27,474 So what we would do is call certain arguments. 134 00:07:27,474 --> 00:07:30,640 We want to give it certain properties, and among the ones we're going to use 135 00:07:30,640 --> 00:07:36,250 today is .label, .button, .entry, and .text, 136 00:07:36,250 --> 00:07:40,160 where each of them take a certain argument. 137 00:07:40,160 --> 00:07:44,960 138 00:07:44,960 --> 00:07:48,410 So what we want to do first is we're going to create a label, 139 00:07:48,410 --> 00:07:52,005 then we're going to create a button, and then we're going to add an entry field. 140 00:07:52,005 --> 00:07:53,630 Now these are not going to do anything. 141 00:07:53,630 --> 00:07:56,671 For example, if you press the button, it's not going to display anything, 142 00:07:56,671 --> 00:08:00,624 but what we want to do is just to try to see how it'll work. 143 00:08:00,624 --> 00:08:01,790 So let's go back to our app. 144 00:08:01,790 --> 00:08:08,730 145 00:08:08,730 --> 00:08:09,920 And we can do-- 146 00:08:09,920 --> 00:08:12,964 now this is the part where you want to comment your lines of code, 147 00:08:12,964 --> 00:08:16,130 mainly because you want to just keep it organized because it could get messy 148 00:08:16,130 --> 00:08:18,120 a little bit quickly. 149 00:08:18,120 --> 00:08:20,850 So first, let's create the prompt. 150 00:08:20,850 --> 00:08:26,020 So let's call this Label and let's call the prompt Title. 151 00:08:26,020 --> 00:08:29,220 152 00:08:29,220 --> 00:08:31,440 And what we'll do is tk.label. 153 00:08:31,440 --> 00:08:35,130 154 00:08:35,130 --> 00:08:37,950 And we can pass in text into it. 155 00:08:37,950 --> 00:08:42,380 And let's say, "Hello world, welcome to CS50 and welcome to my app." 156 00:08:42,380 --> 00:08:51,785 157 00:08:51,785 --> 00:08:54,270 App. 158 00:08:54,270 --> 00:08:59,820 Now the thing is, what you just did is you gave the piece of stained glass 159 00:08:59,820 --> 00:09:04,440 but you don't know where that piece of stained glass is actually going to go. 160 00:09:04,440 --> 00:09:08,700 So what you want to do is you need to declare, where is it going to go? 161 00:09:08,700 --> 00:09:14,190 So what you'll do is call Title because Title is the label. 162 00:09:14,190 --> 00:09:18,090 You want to place it on the window, so we'll do title.grid. 163 00:09:18,090 --> 00:09:22,420 164 00:09:22,420 --> 00:09:26,350 And what we want to do is specify the column or row, 165 00:09:26,350 --> 00:09:30,500 but automatically, what Tkinter does, it sets it to the row 0, 0. 166 00:09:30,500 --> 00:09:34,670 So if you were to refer back to the coordinates here, 167 00:09:34,670 --> 00:09:36,620 this box here would be 0, 0. 168 00:09:36,620 --> 00:09:42,670 This would be 0, 1, 0, 2, 1, 0, 1, 1, 1, 2, and so on. 169 00:09:42,670 --> 00:09:48,080 170 00:09:48,080 --> 00:09:50,530 So now that we created our label, let's go test this out. 171 00:09:50,530 --> 00:09:55,820 172 00:09:55,820 --> 00:09:58,670 And as you can see here, now we have the window, the frame, 173 00:09:58,670 --> 00:10:00,950 we have the title, a certain geometry, and now 174 00:10:00,950 --> 00:10:04,400 we added our label that says, "Hello world, welcome to CS50 175 00:10:04,400 --> 00:10:06,530 and welcome to my app." 176 00:10:06,530 --> 00:10:08,770 Now let's add a little more functionality. 177 00:10:08,770 --> 00:10:13,020 Let's add entry fields and let's add a button. 178 00:10:13,020 --> 00:10:17,400 So let's call this Button 1. 179 00:10:17,400 --> 00:10:19,230 And what we'll do is tk.button. 180 00:10:19,230 --> 00:10:22,514 181 00:10:22,514 --> 00:10:27,660 And we want to give it some text, so maybe let's say-- 182 00:10:27,660 --> 00:10:30,670 let's call this button to prompt the user to say "Click me." 183 00:10:30,670 --> 00:10:35,100 184 00:10:35,100 --> 00:10:38,970 And as I've said before, we need to place this button somewhere 185 00:10:38,970 --> 00:10:42,390 and we want to place it under, so we'll do button1.grid. 186 00:10:42,390 --> 00:10:44,650 187 00:10:44,650 --> 00:10:46,650 Now here's the point I would like to remind you, 188 00:10:46,650 --> 00:10:52,110 that since the code is read from top to bottom 189 00:10:52,110 --> 00:10:56,330 and the way the grid is displayed is from 0, 0, 0, 1, 0, 2, 190 00:10:56,330 --> 00:10:58,050 it'll read chronologically. 191 00:10:58,050 --> 00:11:03,609 So since this appears first, this will be in 0, 0, this will be in 0, 1. 192 00:11:03,609 --> 00:11:05,650 But if we were to switch it around-- for example, 193 00:11:05,650 --> 00:11:08,121 if you were to put the button first, the button's 194 00:11:08,121 --> 00:11:10,620 going to be the first to appear in the window, then the next 195 00:11:10,620 --> 00:11:13,830 below that is the prompt. 196 00:11:13,830 --> 00:11:15,650 So we want to specify it. 197 00:11:15,650 --> 00:11:20,340 Let's say column equals 0 and row will equal 1. 198 00:11:20,340 --> 00:11:24,085 199 00:11:24,085 --> 00:11:25,710 And over here, we'll do the same thing. 200 00:11:25,710 --> 00:11:27,960 We'll specify column 0 but row will equal 1. 201 00:11:27,960 --> 00:11:42,510 202 00:11:42,510 --> 00:11:44,860 And as you can see here, now we added the button. 203 00:11:44,860 --> 00:11:46,205 Let's add the entry field next. 204 00:11:46,205 --> 00:11:55,430 205 00:11:55,430 --> 00:11:59,214 Let's call this Entry Field 1. 206 00:11:59,214 --> 00:12:00,130 And we'll do tk.entry. 207 00:12:00,130 --> 00:12:05,740 208 00:12:05,740 --> 00:12:10,060 Now the thing with Entry field, it's kind of like an HTML form or a Submit 209 00:12:10,060 --> 00:12:14,290 form where there's a blank box and then you type whatever you want inside it. 210 00:12:14,290 --> 00:12:18,652 There are certain arguments that insert it but we'll cover more on that later. 211 00:12:18,652 --> 00:12:20,860 So what we'll do is, now we declared the entry field, 212 00:12:20,860 --> 00:12:24,370 we want to place it on the grid, so we'll do entryfield1.grid. 213 00:12:24,370 --> 00:12:27,380 214 00:12:27,380 --> 00:12:31,080 We want to put this entry field right below our button. 215 00:12:31,080 --> 00:12:44,890 216 00:12:44,890 --> 00:12:47,430 And as you can see here, now we have our entry field inside. 217 00:12:47,430 --> 00:12:50,430 218 00:12:50,430 --> 00:12:53,970 So that's pretty much it for the setup of the Tkinter. 219 00:12:53,970 --> 00:12:56,970 Now we want to try to build it up from there. 220 00:12:56,970 --> 00:13:03,540 So, ahead of time, I wrote some programs that display this, 221 00:13:03,540 --> 00:13:06,150 so let's refer to this one. 222 00:13:06,150 --> 00:13:07,140 App2.py. 223 00:13:07,140 --> 00:13:09,380 So as you can see here, this is the same thing. 224 00:13:09,380 --> 00:13:11,570 We're declaring a window. 225 00:13:11,570 --> 00:13:14,150 The title of that window is going to be My Awesome App. 226 00:13:14,150 --> 00:13:18,530 The geometry of that window is going to be a square of 300 by 300 pixels. 227 00:13:18,530 --> 00:13:21,470 Here, we're going to have a label that says, "This is CS50. 228 00:13:21,470 --> 00:13:24,030 Welcome to my awesome app." 229 00:13:24,030 --> 00:13:28,400 We're going to have an entry field there, a button, and a text field. 230 00:13:28,400 --> 00:13:46,360 231 00:13:46,360 --> 00:13:49,320 This was the app we created. 232 00:13:49,320 --> 00:13:51,640 Now we want to include-- 233 00:13:51,640 --> 00:13:56,590 now this is for you guys to see how it looks like and how it works. 234 00:13:56,590 --> 00:13:58,420 But this is kind of bland. 235 00:13:58,420 --> 00:13:59,290 A little bit boring. 236 00:13:59,290 --> 00:14:02,260 So what if you say that you want to change the font of this label 237 00:14:02,260 --> 00:14:05,530 or you want to make this button red. 238 00:14:05,530 --> 00:14:08,740 So let's say we want to change the font of this to Times New Roman, 239 00:14:08,740 --> 00:14:13,360 maybe size 20 font, and maybe let's make the button red so the user will 240 00:14:13,360 --> 00:14:15,550 be more inclined to push it. 241 00:14:15,550 --> 00:14:18,400 Well I wrote code ahead of time for this one. 242 00:14:18,400 --> 00:14:22,510 This is the same exact one except it takes in extra arguments. 243 00:14:22,510 --> 00:14:26,200 So first, you can notice here that label has additional arguments. 244 00:14:26,200 --> 00:14:28,630 For example, we still have the text. 245 00:14:28,630 --> 00:14:31,000 However, now we have the font. 246 00:14:31,000 --> 00:14:35,170 And what this font is specifying is that will be Times New Roman 247 00:14:35,170 --> 00:14:37,300 and it will be size 20 font. 248 00:14:37,300 --> 00:14:39,520 Now this is not the only arguments for it. 249 00:14:39,520 --> 00:14:44,430 There are documentation on these but we'll refer to them later. 250 00:14:44,430 --> 00:14:48,500 And then also you notice on the button that it has the text "Click me" 251 00:14:48,500 --> 00:14:54,070 but also has bg, or background, as color red. 252 00:14:54,070 --> 00:14:55,320 So let's try running this app. 253 00:14:55,320 --> 00:15:02,590 254 00:15:02,590 --> 00:15:05,910 And as you can see here, now we have some new-- 255 00:15:05,910 --> 00:15:09,610 our app looks a lot more creative and a lot more different. 256 00:15:09,610 --> 00:15:13,430 This time, it has Times New Roman font and the button is now red. 257 00:15:13,430 --> 00:15:17,760 258 00:15:17,760 --> 00:15:20,010 So as you can see, there are a lot of arguments 259 00:15:20,010 --> 00:15:26,010 that you can pass on to these, and you can find these arguments at fbot.org. 260 00:15:26,010 --> 00:15:29,640 And here you can see a lot of new resources of the documentation they 261 00:15:29,640 --> 00:15:33,290 include for Tkinter. 262 00:15:33,290 --> 00:15:38,740 Now before we begin on making an app, let's start with the general steps. 263 00:15:38,740 --> 00:15:44,510 So step number zero is you want to plan out a layout for your app. 264 00:15:44,510 --> 00:15:48,590 As you can see here, we need to treat Tkinter 265 00:15:48,590 --> 00:15:53,540 as a frame, where we have the frame and we have the pieces of stained glass 266 00:15:53,540 --> 00:15:56,377 and we want to put those stained glass in certain places. 267 00:15:56,377 --> 00:15:57,960 That's why we want to lay out our app. 268 00:15:57,960 --> 00:16:00,920 So for example, let's say we want to create an app where 269 00:16:00,920 --> 00:16:04,470 it displays a greeting, it takes in your name, 270 00:16:04,470 --> 00:16:09,270 and it displays, hello, your name. 271 00:16:09,270 --> 00:16:13,600 So what we'll do is we'll add a label here, 272 00:16:13,600 --> 00:16:17,800 another label here that prompts the user to ask them for their name, an entry 273 00:16:17,800 --> 00:16:21,430 field here, a button, and below that button 274 00:16:21,430 --> 00:16:24,670 will be a text field that will pop out that will 275 00:16:24,670 --> 00:16:29,300 say the user's name and a greeting. 276 00:16:29,300 --> 00:16:31,040 So we planned out our app. 277 00:16:31,040 --> 00:16:33,758 Next is we want to create the window of our app. 278 00:16:33,758 --> 00:16:39,130 279 00:16:39,130 --> 00:16:46,996 So let's create a new app and we can call this NewApp.py. 280 00:16:46,996 --> 00:16:50,676 281 00:16:50,676 --> 00:16:52,300 And let's start by creating the window. 282 00:16:52,300 --> 00:16:59,110 So first, we want to import the Tkinter library as tk, and remember, 283 00:16:59,110 --> 00:17:02,920 tk is just a shorter way of saying Tkinter 284 00:17:02,920 --> 00:17:07,510 because normally we would have to put Tkinter.label or Tkinter.button. 285 00:17:07,510 --> 00:17:11,790 But using tk, we can use shorter characters. 286 00:17:11,790 --> 00:17:18,470 Now we want to declare the window, so we'll do window will equal tk.tk. 287 00:17:18,470 --> 00:17:22,040 And we want to add the title and geometry of the window, 288 00:17:22,040 --> 00:17:31,215 so window will equal window.geometry. 289 00:17:31,215 --> 00:17:35,420 290 00:17:35,420 --> 00:17:39,970 Let's make it 400 by 400 pixels. 291 00:17:39,970 --> 00:17:43,330 And next what we want to do is add the title, 292 00:17:43,330 --> 00:17:53,790 window.title, and let's call this Greetings. 293 00:17:53,790 --> 00:17:54,540 Greetings blank. 294 00:17:54,540 --> 00:17:57,570 295 00:17:57,570 --> 00:18:00,420 And of course, we don't want to forget the crucial process. 296 00:18:00,420 --> 00:18:04,410 For this to actually exist or for the window to actually pop out, 297 00:18:04,410 --> 00:18:08,430 we're going to need to put the main loop, so we'll do window.mainloop. 298 00:18:08,430 --> 00:18:11,670 299 00:18:11,670 --> 00:18:13,770 And as you can notice from our previous programs 300 00:18:13,770 --> 00:18:16,890 where the main loop is always at the bottom, 301 00:18:16,890 --> 00:18:21,150 we want to push this to the bottom whenever we add new things 302 00:18:21,150 --> 00:18:25,440 or add new entry fields or buttons or else it won't display on the screen. 303 00:18:25,440 --> 00:18:27,980 304 00:18:27,980 --> 00:18:30,740 And one more thing I'd like to note is that you always 305 00:18:30,740 --> 00:18:34,550 want to compile to see where your errors are so this will make debugging easier. 306 00:18:34,550 --> 00:18:39,230 So by taking this step by step, starting with the frame, then the buttons, 307 00:18:39,230 --> 00:18:43,100 and then the function that will run from those buttons, 308 00:18:43,100 --> 00:18:45,740 you'll be able to debug quicker and be able to spot 309 00:18:45,740 --> 00:18:48,890 any problems that occur in your code. 310 00:18:48,890 --> 00:18:52,150 So first, let's compile this. 311 00:18:52,150 --> 00:18:56,830 We'll run Python New App. 312 00:18:56,830 --> 00:19:00,540 As you can see, we got the window and now we got the title. 313 00:19:00,540 --> 00:19:11,000 Now time to add the label prompt, so we'll add label here 314 00:19:11,000 --> 00:19:14,890 and we'll call this Beginning Label, or Label 1. 315 00:19:14,890 --> 00:19:21,060 316 00:19:21,060 --> 00:19:25,290 And let's make it say "Welcome to my app." 317 00:19:25,290 --> 00:19:31,600 318 00:19:31,600 --> 00:19:35,140 And of course we want to place this on the window, so what we'll do 319 00:19:35,140 --> 00:19:36,000 is label1.grid. 320 00:19:36,000 --> 00:19:38,510 321 00:19:38,510 --> 00:19:42,140 And we want to specify this, so originally in our planning stage, 322 00:19:42,140 --> 00:19:45,020 we said we want this welcome greeting to be 323 00:19:45,020 --> 00:19:50,610 in the 0, 0 position or the top leftmost corner of the map. 324 00:19:50,610 --> 00:19:56,010 So we'll put this in column 0, row 0. 325 00:19:56,010 --> 00:20:00,880 326 00:20:00,880 --> 00:20:03,060 And now we want to add the next label that will 327 00:20:03,060 --> 00:20:05,650 ask the user for what is their name. 328 00:20:05,650 --> 00:20:06,900 So we'll create another label. 329 00:20:06,900 --> 00:20:07,816 Let's call it Label 2. 330 00:20:07,816 --> 00:20:15,400 331 00:20:15,400 --> 00:20:17,770 And let's ask them, "What is your name?" 332 00:20:17,770 --> 00:20:22,690 333 00:20:22,690 --> 00:20:24,510 And we are going to place it on our grid. 334 00:20:24,510 --> 00:20:34,846 335 00:20:34,846 --> 00:20:36,720 Now we want to compile this code to make sure 336 00:20:36,720 --> 00:20:39,240 that it is placing at the appropriate places we want 337 00:20:39,240 --> 00:20:40,830 the labels to appear in our window. 338 00:20:40,830 --> 00:20:46,830 339 00:20:46,830 --> 00:20:48,810 And we now do have a bug. 340 00:20:48,810 --> 00:20:52,540 Now I think I just spotted the bug and the main reason 341 00:20:52,540 --> 00:20:54,490 is because we misspelled. 342 00:20:54,490 --> 00:20:56,140 So be very careful of your spelling. 343 00:20:56,140 --> 00:20:59,340 And one thing that Tkinter doesn't really take note of 344 00:20:59,340 --> 00:21:02,110 is, for example, if I just put cat here, cat 345 00:21:02,110 --> 00:21:06,490 is not really a function or an argument but it will accept it. 346 00:21:06,490 --> 00:21:10,990 So this is really important for you to check the documentation 347 00:21:10,990 --> 00:21:14,340 to look for legitimate arguments that you could pass on to the function. 348 00:21:14,340 --> 00:21:26,700 349 00:21:26,700 --> 00:21:28,560 Let's run this again. 350 00:21:28,560 --> 00:21:29,850 And there we have it. 351 00:21:29,850 --> 00:21:33,020 We have the first label at the very top leftmost corner 352 00:21:33,020 --> 00:21:36,020 position that says, "Welcome to my app," and the next label that 353 00:21:36,020 --> 00:21:37,490 says, "What is your name?" 354 00:21:37,490 --> 00:21:39,490 right below it. 355 00:21:39,490 --> 00:21:42,630 Now let's add the entry field where the entry field will 356 00:21:42,630 --> 00:21:46,710 go right next to your name so the user knows-- so it will look prettier 357 00:21:46,710 --> 00:21:49,300 and it will look a little more intuitive. 358 00:21:49,300 --> 00:21:51,360 So what we want to do is add the entry fields. 359 00:21:51,360 --> 00:21:57,700 360 00:21:57,700 --> 00:21:59,820 And let's call this Entry 1. 361 00:21:59,820 --> 00:22:07,259 362 00:22:07,259 --> 00:22:08,175 And we'll do tk.entry. 363 00:22:08,175 --> 00:22:13,880 364 00:22:13,880 --> 00:22:16,400 Now remember, again, we're not accepting any arguments 365 00:22:16,400 --> 00:22:20,250 here because we want the user to put in something. 366 00:22:20,250 --> 00:22:21,500 So we'll just leave it blank. 367 00:22:21,500 --> 00:22:24,410 And we want to place that right beside the second label of "What 368 00:22:24,410 --> 00:22:25,490 is your name?" 369 00:22:25,490 --> 00:22:31,550 So it will belong in the same row but go to a different column. 370 00:22:31,550 --> 00:22:40,830 So we'll do entry1.grid, column 1, row 1. 371 00:22:40,830 --> 00:22:50,590 372 00:22:50,590 --> 00:22:51,910 So it seems working fine. 373 00:22:51,910 --> 00:22:55,120 The stuff we wanted is placed in the right places. 374 00:22:55,120 --> 00:22:58,210 And for over here, we can input characters. 375 00:22:58,210 --> 00:23:01,340 We can even input numbers. 376 00:23:01,340 --> 00:23:03,038 Now let's add the button. 377 00:23:03,038 --> 00:23:13,570 378 00:23:13,570 --> 00:23:15,790 So we'll just call this Button 1. 379 00:23:15,790 --> 00:23:22,130 380 00:23:22,130 --> 00:23:23,880 And of course, again, we want to place it. 381 00:23:23,880 --> 00:23:29,160 So let's say we want to place it right below the name prompt. 382 00:23:29,160 --> 00:23:31,350 So "What is your name?", and right below that, 383 00:23:31,350 --> 00:23:33,420 we want to put the button over there. 384 00:23:33,420 --> 00:23:38,890 So it will belong to the 0th column and in the second row. 385 00:23:38,890 --> 00:23:47,650 So we'll do button1.grid, column 0 and row 2. 386 00:23:47,650 --> 00:23:55,250 387 00:23:55,250 --> 00:24:00,230 And in that button, we want to have a prompt phrase, so let's make 388 00:24:00,230 --> 00:24:01,530 the button say, "Click me." 389 00:24:01,530 --> 00:24:12,520 390 00:24:12,520 --> 00:24:16,150 Now we have the general components created of our app now. 391 00:24:16,150 --> 00:24:20,650 We have the labels, we have the entry fields, and we have the buttons. 392 00:24:20,650 --> 00:24:22,990 But the thing is, for example, if I were to just put 393 00:24:22,990 --> 00:24:28,000 my name, Robert, it's not actually going to do anything 394 00:24:28,000 --> 00:24:30,510 because the button is just a button. 395 00:24:30,510 --> 00:24:32,512 It just exists right there. 396 00:24:32,512 --> 00:24:34,720 This is the part where we're going to need to include 397 00:24:34,720 --> 00:24:38,120 a command argument or a function. 398 00:24:38,120 --> 00:24:40,920 So we're going to close this window and go back to our app. 399 00:24:40,920 --> 00:24:44,220 400 00:24:44,220 --> 00:24:48,730 And because of the way the programs are read in a computer from top to bottom, 401 00:24:48,730 --> 00:24:51,430 we're going to need to put the function above the button, 402 00:24:51,430 --> 00:24:55,350 because if the button is the one that's going to be calling the function, 403 00:24:55,350 --> 00:24:58,680 we want to put the function above it. 404 00:24:58,680 --> 00:25:00,180 So we'll define our functions here. 405 00:25:00,180 --> 00:25:10,980 406 00:25:10,980 --> 00:25:15,980 And let's call this first function the Phrase Generator, 407 00:25:15,980 --> 00:25:20,210 where it will return your name and a phrase put together. 408 00:25:20,210 --> 00:25:27,540 409 00:25:27,540 --> 00:25:30,300 And to make this a little more fun, let's 410 00:25:30,300 --> 00:25:34,380 make the phrase generate random phrases that we manually input. 411 00:25:34,380 --> 00:25:38,730 So for example, it could say "hello," "what's up," "aloha." 412 00:25:38,730 --> 00:25:46,610 So first, we want to also import the random module, 413 00:25:46,610 --> 00:25:49,040 and let's start defining the functions. 414 00:25:49,040 --> 00:25:50,855 So Phrase Generator phrase. 415 00:25:50,855 --> 00:25:52,820 First, we need to create the list of phrases 416 00:25:52,820 --> 00:25:56,120 that the computer will pick from, so what we'll do 417 00:25:56,120 --> 00:26:02,340 is we'll create a list called Phrases and we'll put it as a list. 418 00:26:02,340 --> 00:26:04,440 And let's say we'll pass in three phrases. 419 00:26:04,440 --> 00:26:08,920 We'll say "hello," "what's up,"-- 420 00:26:08,920 --> 00:26:12,320 421 00:26:12,320 --> 00:26:17,720 "hello," "what's up," and "aloha." 422 00:26:17,720 --> 00:26:21,130 And from my home island, we'll also include a phrase 423 00:26:21,130 --> 00:26:23,090 that's also "hi" called [INAUDIBLE]. 424 00:26:23,090 --> 00:26:26,090 425 00:26:26,090 --> 00:26:32,150 Now what we want to do is get that phrase from the entry field. 426 00:26:32,150 --> 00:26:36,020 So this is the function we're going to call, is .get. 427 00:26:36,020 --> 00:26:37,970 So we want to store this inside a function. 428 00:26:37,970 --> 00:26:39,170 Let's call this Name. 429 00:26:39,170 --> 00:26:41,970 430 00:26:41,970 --> 00:26:44,490 And we're going to convert this to a string. 431 00:26:44,490 --> 00:26:46,810 And what we want to get is from the entry field, 432 00:26:46,810 --> 00:26:49,530 so we're going to go to Entry Field 1 and we 433 00:26:49,530 --> 00:26:55,540 want to get whatever is stored inside it and store it in the variable name. 434 00:26:55,540 --> 00:26:57,490 So we'll do entry1.get. 435 00:26:57,490 --> 00:27:07,030 436 00:27:07,030 --> 00:27:08,620 Now we already got the components. 437 00:27:08,620 --> 00:27:10,630 We got the list of phrases. 438 00:27:10,630 --> 00:27:12,870 We got the name. 439 00:27:12,870 --> 00:27:14,000 Now let's return this. 440 00:27:14,000 --> 00:27:16,640 441 00:27:16,640 --> 00:27:18,954 So we're going to do some string concatenation here. 442 00:27:18,954 --> 00:27:20,120 We're going to call phrases. 443 00:27:20,120 --> 00:27:23,150 444 00:27:23,150 --> 00:27:25,910 And we're going to randomly select one of these phrases, 445 00:27:25,910 --> 00:27:36,590 so we'll do random.randint from 0 to 3 plus name. 446 00:27:36,590 --> 00:27:39,270 So essentially what this Phrase Generator is doing 447 00:27:39,270 --> 00:27:45,930 is it has a list of phrases and you're getting the name from the entry field 448 00:27:45,930 --> 00:27:47,180 and you're concatenating them. 449 00:27:47,180 --> 00:27:51,290 So for example, for my name Robert, it'll say "Hello, Robert," "What's up, 450 00:27:51,290 --> 00:27:55,030 Robert," "Aloha, Robert," or ""[INAUDIBLE],, Robert." 451 00:27:55,030 --> 00:27:58,050 And any of those will be random. 452 00:27:58,050 --> 00:28:00,990 Now the key thing to focus on here is not 453 00:28:00,990 --> 00:28:04,290 the fact about the string concatenation or the random 454 00:28:04,290 --> 00:28:07,304 but this is just one of the things that you could do with Python-- 455 00:28:07,304 --> 00:28:08,220 with Python's Tkinter. 456 00:28:08,220 --> 00:28:12,114 457 00:28:12,114 --> 00:28:15,310 So now we created the Phrase Generator, but the thing 458 00:28:15,310 --> 00:28:18,220 is, it just returns the phrase. 459 00:28:18,220 --> 00:28:20,440 If we just press the button-- so for example, 460 00:28:20,440 --> 00:28:23,800 if we were just to compile this-- 461 00:28:23,800 --> 00:28:27,250 and one more thing I forgot to add, we also want to add the command. 462 00:28:27,250 --> 00:28:31,490 What command does is give the button the ability to call any function. 463 00:28:31,490 --> 00:28:39,187 So since our function is called Phrase Generator, we'll leave it there. 464 00:28:39,187 --> 00:28:40,520 Now we're going to compile this. 465 00:28:40,520 --> 00:28:44,230 466 00:28:44,230 --> 00:28:51,380 So for instance, if I put "Robert," it does nothing. 467 00:28:51,380 --> 00:28:53,180 The main reason is because-- 468 00:28:53,180 --> 00:28:58,160 OK, so it did return the phrase, and as you can see here from the command 469 00:28:58,160 --> 00:29:00,410 terminal, there was no errors. 470 00:29:00,410 --> 00:29:04,840 But it had nowhere to return that phrase to. 471 00:29:04,840 --> 00:29:06,970 So what we want to do is call the last piece 472 00:29:06,970 --> 00:29:10,720 of the puzzle of our stained glass of our app, which 473 00:29:10,720 --> 00:29:17,500 will be the text field, which will say the greeting and the user's name. 474 00:29:17,500 --> 00:29:18,770 So let's close our app here. 475 00:29:18,770 --> 00:29:25,850 476 00:29:25,850 --> 00:29:28,370 Now let's define another function. 477 00:29:28,370 --> 00:29:32,850 Now what this function will do is it'll take the Phrase Generator from Phrase 478 00:29:32,850 --> 00:29:37,900 Generator and return an output-- 479 00:29:37,900 --> 00:29:40,180 a text field where the user can input. 480 00:29:40,180 --> 00:29:42,250 Similar to the entry field but just a lot bigger 481 00:29:42,250 --> 00:29:45,580 and can resize and where the user can change the inputs 482 00:29:45,580 --> 00:29:47,930 and copy and paste the inputs. 483 00:29:47,930 --> 00:29:57,980 So let's define this as Phrase Display, where I'll take in no arguments, 484 00:29:57,980 --> 00:29:59,130 and let's call-- 485 00:29:59,130 --> 00:30:04,280 now remember that Phrase Display has no idea of what Phrase Generator did, 486 00:30:04,280 --> 00:30:08,330 so we want to actually get the greeting from Phrase Generator 487 00:30:08,330 --> 00:30:12,600 and make it display in Phrase Display. 488 00:30:12,600 --> 00:30:16,500 So what we'll do is we'll store it in the variable Greeting 489 00:30:16,500 --> 00:30:19,866 and we're going to call Phrase Generator. 490 00:30:19,866 --> 00:30:25,210 491 00:30:25,210 --> 00:30:28,210 And what we're going to do next is we're going to create the text field. 492 00:30:28,210 --> 00:30:36,410 493 00:30:36,410 --> 00:30:40,890 So this is going to be a little more cryptic than usual but bear with me. 494 00:30:40,890 --> 00:30:45,530 This is the part where we're going to see our code come to life. 495 00:30:45,530 --> 00:30:47,900 So what we're going to do is greeting. 496 00:30:47,900 --> 00:30:50,148 We're going to call this GreetingDisplaytk.text. 497 00:30:50,148 --> 00:30:57,340 498 00:30:57,340 --> 00:31:02,730 And what this master window is saying is that it's putting it inside the window. 499 00:31:02,730 --> 00:31:06,810 And the thing is, it doesn't have a specified height and size yet, 500 00:31:06,810 --> 00:31:09,420 so it could appear any dimensions. 501 00:31:09,420 --> 00:31:10,830 Usually it appears small. 502 00:31:10,830 --> 00:31:12,870 So we want to specify this. 503 00:31:12,870 --> 00:31:24,500 So let's say we'll give it a height of 10 and width of 30. 504 00:31:24,500 --> 00:31:28,690 And as before, we want to actually place this onto our grid, 505 00:31:28,690 --> 00:31:33,380 so we'll call this greetingdisplay.grid. 506 00:31:33,380 --> 00:31:37,650 And we want this to display right below our button 507 00:31:37,650 --> 00:31:40,790 so it can be nice for the user, after they press this button, 508 00:31:40,790 --> 00:31:42,620 they see their greeting. 509 00:31:42,620 --> 00:31:46,979 So what we'll do is look for the button and we'll 510 00:31:46,979 --> 00:31:49,020 put it in the same column but the row beneath it. 511 00:31:49,020 --> 00:32:08,530 512 00:32:08,530 --> 00:32:10,480 Now the thing is, we're not yet done here. 513 00:32:10,480 --> 00:32:14,040 So we did place the greeting, but the thing 514 00:32:14,040 --> 00:32:19,720 is, how do we actually insert the greeting into the text field? 515 00:32:19,720 --> 00:32:22,090 So this is what we want to do. 516 00:32:22,090 --> 00:32:30,120 We'll do greetingdisplay.insert because Greeting Display is the text field 517 00:32:30,120 --> 00:32:34,900 and what we want to insert inside it is the greeting. 518 00:32:34,900 --> 00:32:40,520 So we'll do a little cryptic tk.n and we want to put in the greeting. 519 00:32:40,520 --> 00:32:48,080 520 00:32:48,080 --> 00:32:50,450 Now let's try compiling this and running this program. 521 00:32:50,450 --> 00:32:53,915 522 00:32:53,915 --> 00:32:56,400 I'll input my name. 523 00:32:56,400 --> 00:32:59,570 It still does nothing. 524 00:32:59,570 --> 00:33:01,750 So if we look back at our code, when we press 525 00:33:01,750 --> 00:33:06,730 the button, the function or the command we assigned it was Phrase Generator. 526 00:33:06,730 --> 00:33:09,270 However, Phrase Generator just returns the phrases, 527 00:33:09,270 --> 00:33:12,770 but when it returns the phrases, it doesn't put it anywhere. 528 00:33:12,770 --> 00:33:15,520 It's actually Phrase Display that returns it. 529 00:33:15,520 --> 00:33:18,272 So what do we want to do is change the command from-- 530 00:33:18,272 --> 00:33:20,730 instead of Phrase Generator, we want to put Phrase Display. 531 00:33:20,730 --> 00:33:26,546 532 00:33:26,546 --> 00:33:28,916 Let's close our app. 533 00:33:28,916 --> 00:33:32,970 Let's compile it and run it again. 534 00:33:32,970 --> 00:33:34,077 Now we got our app. 535 00:33:34,077 --> 00:33:34,910 Big moment of truth. 536 00:33:34,910 --> 00:33:39,240 537 00:33:39,240 --> 00:33:43,950 And as you can see here, it's a complete app, where we have our labels, 538 00:33:43,950 --> 00:33:47,160 we have our names, it took my name, I press "Click me," it said, 539 00:33:47,160 --> 00:33:49,202 "[INAUDIBLE], Robert." 540 00:33:49,202 --> 00:33:51,430 We can press again because this is random, 541 00:33:51,430 --> 00:33:53,180 because every time we press the button, it 542 00:33:53,180 --> 00:33:57,650 calls Phrase Display and Phrase Display calls Phrase Generator. 543 00:33:57,650 --> 00:34:01,880 And remember that Phrase Generator generates random greetings every time, 544 00:34:01,880 --> 00:34:04,270 so what you can do is just press the button again. 545 00:34:04,270 --> 00:34:05,565 It says "Aloha." 546 00:34:05,565 --> 00:34:06,190 Press it again. 547 00:34:06,190 --> 00:34:07,370 "[INAUDIBLE]." 548 00:34:07,370 --> 00:34:09,219 "Aloha." 549 00:34:09,219 --> 00:34:10,630 "What's up." 550 00:34:10,630 --> 00:34:12,100 Can we get a "Hello?" 551 00:34:12,100 --> 00:34:13,270 Yep, we got a "hello." 552 00:34:13,270 --> 00:34:14,520 Now we're back to "what's up." 553 00:34:14,520 --> 00:34:18,400 554 00:34:18,400 --> 00:34:20,814 So let's play around with this a little more. 555 00:34:20,814 --> 00:34:23,230 So just to prove, let's say, what if my name was a number? 556 00:34:23,230 --> 00:34:29,330 Let's say it was 3.1415. 557 00:34:29,330 --> 00:34:32,739 It's saying, "Hello, pi," or whatever digits of pi you use. 558 00:34:32,739 --> 00:34:40,650 559 00:34:40,650 --> 00:34:45,280 Now we skip a lot of steps over here but let's just recap what we just did. 560 00:34:45,280 --> 00:34:47,710 One, we planned the layout of our app, where 561 00:34:47,710 --> 00:34:50,500 we wanted our app to have two labels-- 562 00:34:50,500 --> 00:34:57,340 one in the 0, 0 position, one in the 0, 1 position-- 563 00:34:57,340 --> 00:35:01,190 an entry field right next to the label in the 0, 1 position. 564 00:35:01,190 --> 00:35:05,050 565 00:35:05,050 --> 00:35:07,320 Actually, let's refer to this. 566 00:35:07,320 --> 00:35:09,610 So what did we just do? 567 00:35:09,610 --> 00:35:12,700 So first, we planned the layout of our app. 568 00:35:12,700 --> 00:35:15,100 So we said that we wanted this to be in the 0, 0 569 00:35:15,100 --> 00:35:17,710 position, or the leftmost corner, and right below 570 00:35:17,710 --> 00:35:20,770 that, we want to have a label that says, "What is your name?" 571 00:35:20,770 --> 00:35:24,190 And right beside that label, we want to have an entry field where 572 00:35:24,190 --> 00:35:29,520 the user can put in any entries. 573 00:35:29,520 --> 00:35:33,430 And right below those things, we want to put a button. 574 00:35:33,430 --> 00:35:37,870 And after we click that button, we want a text field to display. 575 00:35:37,870 --> 00:35:41,170 So we planned the layout of our app. 576 00:35:41,170 --> 00:35:44,100 Next step, what we did was create the window for our app. 577 00:35:44,100 --> 00:35:46,720 578 00:35:46,720 --> 00:35:53,680 So this occurs in lines here, where we declared the window, tk.tk, 579 00:35:53,680 --> 00:35:56,270 we declared the title of the window-- 580 00:35:56,270 --> 00:35:59,035 and as you can see here, that's greetings blank. 581 00:35:59,035 --> 00:36:01,980 It says "greetings blank" here. 582 00:36:01,980 --> 00:36:04,420 And then we also set the geometry. 583 00:36:04,420 --> 00:36:07,830 Now just keep in mind that the geometry is not 584 00:36:07,830 --> 00:36:11,580 set-- you can resize it all you want-- but this is the default geometry when 585 00:36:11,580 --> 00:36:15,290 the code first runs. 586 00:36:15,290 --> 00:36:18,740 And of course, we included the main loop in order to make this all appear. 587 00:36:18,740 --> 00:36:25,370 588 00:36:25,370 --> 00:36:27,980 So we created the window for the app. 589 00:36:27,980 --> 00:36:33,110 Next what we did is declared the size and placed the labels, buttons, entry 590 00:36:33,110 --> 00:36:34,730 fields on the window. 591 00:36:34,730 --> 00:36:37,220 And we used the ideas of grids to place them. 592 00:36:37,220 --> 00:36:40,310 593 00:36:40,310 --> 00:36:50,560 So as you can see over here and back in our code, we have a label that says, 594 00:36:50,560 --> 00:36:52,010 "Welcome to my app." 595 00:36:52,010 --> 00:36:55,750 It's in column 0, row 0 and appears so over there. 596 00:36:55,750 --> 00:37:00,460 And right below that, the row below it, it asks, "What is your name?" 597 00:37:00,460 --> 00:37:03,570 And the label also does display that. 598 00:37:03,570 --> 00:37:07,860 Entry fields, what we did is put it right beside the label that 599 00:37:07,860 --> 00:37:11,470 asks, "What is your name?" 600 00:37:11,470 --> 00:37:14,410 And then below that entry field, we included a button, 601 00:37:14,410 --> 00:37:19,960 and what that button will do, it'll say the words, "Click me," 602 00:37:19,960 --> 00:37:23,860 and when you click it, you run a command-- 603 00:37:23,860 --> 00:37:25,650 you will run the function, Phrase Display. 604 00:37:25,650 --> 00:37:32,830 605 00:37:32,830 --> 00:37:35,920 So we did steps two and three where we placed the labels. 606 00:37:35,920 --> 00:37:39,070 Next, we want to connect the buttons and entry fields to one another 607 00:37:39,070 --> 00:37:40,610 through functions. 608 00:37:40,610 --> 00:37:43,780 Now this was a critical step in trying to connect my name 609 00:37:43,780 --> 00:37:47,377 and put it inside the entry field, so let's reflect 610 00:37:47,377 --> 00:37:48,460 on what we did back there. 611 00:37:48,460 --> 00:37:55,060 612 00:37:55,060 --> 00:37:57,650 So let's say the name was pi. 613 00:37:57,650 --> 00:37:58,810 Entry 1. 614 00:37:58,810 --> 00:38:02,650 What is stored in Entry 1 is the string, pi. 615 00:38:02,650 --> 00:38:07,660 616 00:38:07,660 --> 00:38:10,320 So let's refer back to our Phrase Generator. 617 00:38:10,320 --> 00:38:13,680 What Phrase Generator does, it takes a string of phrases. 618 00:38:13,680 --> 00:38:16,290 And this is the critical part, entry1.get. 619 00:38:16,290 --> 00:38:25,010 What it is saying is that, hey, Python, go to the Entry 1 field, 620 00:38:25,010 --> 00:38:29,480 pull whatever's in there and put it in this variable called Name. 621 00:38:29,480 --> 00:38:32,150 And then to make it a little fancy, we randomized the greeting 622 00:38:32,150 --> 00:38:35,600 so we can get different ones every time we press the button. 623 00:38:35,600 --> 00:38:37,676 And we did some string concatenation. 624 00:38:37,676 --> 00:38:41,080 625 00:38:41,080 --> 00:38:44,860 Now, after that, what we did was Phrase Display, 626 00:38:44,860 --> 00:38:48,280 where we're going to store that concatenated string of a greeting. 627 00:38:48,280 --> 00:38:51,670 If it was, "Hello, pi," it'll be stored in Greeting. 628 00:38:51,670 --> 00:38:54,430 629 00:38:54,430 --> 00:38:59,180 Next is the other critical step where we actually connected the text. 630 00:38:59,180 --> 00:39:06,150 So this is where we declared the text field to appear, 631 00:39:06,150 --> 00:39:11,580 and as you can see here, it's column 0, row 3, right where we want it. 632 00:39:11,580 --> 00:39:17,370 It's right below the button, because keep in mind that the button is row 2. 633 00:39:17,370 --> 00:39:19,050 Now the text field is row 3. 634 00:39:19,050 --> 00:39:22,540 635 00:39:22,540 --> 00:39:26,500 And next what we did is we took that greeting and we want 636 00:39:26,500 --> 00:39:30,700 to insert it into that text field. 637 00:39:30,700 --> 00:39:34,870 So what we did is greetingdisplay.insert, tk n, 638 00:39:34,870 --> 00:39:38,410 and passed in the Greeting variable. 639 00:39:38,410 --> 00:39:44,330 So if we run this again, we get our complete app. 640 00:39:44,330 --> 00:39:48,770 Now Tkinter is not just limited to this and there are a lot more resources 641 00:39:48,770 --> 00:39:50,420 available out there. 642 00:39:50,420 --> 00:39:52,640 CleverProgrammer.com Programmer is one that I 643 00:39:52,640 --> 00:39:57,350 would recommend to try to search up more functionality for Tkinter but also 644 00:39:57,350 --> 00:39:59,420 just to learn a little bit more Python. 645 00:39:59,420 --> 00:40:05,710 And also next is fbot.org, where this is the most documented place of Tkinter-- 646 00:40:05,710 --> 00:40:09,150 not every single variable of Tkinter is documented here 647 00:40:09,150 --> 00:40:11,150 but this is the best one I've found that doesn't 648 00:40:11,150 --> 00:40:15,200 deal with object-oriented programming, because as one of my research 649 00:40:15,200 --> 00:40:19,070 says before that, Tkinter has not been well documented 650 00:40:19,070 --> 00:40:22,712 but this one will be the best place where you can to find the resources you 651 00:40:22,712 --> 00:40:23,420 need for Tkinter. 652 00:40:23,420 --> 00:40:25,930 653 00:40:25,930 --> 00:40:28,930 So overall what I wanted to do for you guys for doing 654 00:40:28,930 --> 00:40:33,910 GUI Tkinter is not try to create an app that simply just generates your name, 655 00:40:33,910 --> 00:40:36,580 but I want to give you a tool that uses it. 656 00:40:36,580 --> 00:40:41,620 And I believe that Python's Tkinter is one way of doing it. 657 00:40:41,620 --> 00:40:43,850 I can't wait to see what you guys will do with it 658 00:40:43,850 --> 00:40:46,330 and I hope you have fun with it. 659 00:40:46,330 --> 00:40:48,090 Thank you. 660 00:40:48,090 --> 00:40:49,704