Starting Pymodoro8:31 with Kenneth Love
Let's start our Pymodoro application. We'll get the app running, create a class to handle the window's configuration and functionality, and start building pieces of our app. We'll create a frame, a grid, and our banner.
The official docs for Tkinter aren't the best in the world but they'll get you started. The documentation from effbot hasn't been updated in about a decade but it's actually still mostly accurate. These are my two main resources for learning Tkinter and preparing this workshop.
Terms and things
Tk() - A Tkinter application. This is what is responsible for the window or application you see on your screen. You'll end up binding most things to this.
mainloop() - The loop that keeps your Tkinter app running. This loop runs forever.
Frame - An invisible box that you can put things in.
Label - A piece of text on the screen.
Button - A button (whodathunk?!)
StringVar - A variable that holds onto a string.
IntVar - A variable that holds onto an int.
trace() - A way to follow the changes and access of a variable.
rowconfigure() - Methods to configure the number and weight of columns and rows.
pack() - Method to insert a widget in the available space.
All right, so I'm here in my new script which I've called pymodoro, 0:00 cuz I'm super creative at naming stuff. 0:03 And again we just need to import tkinter, and 0:06 we of course need to make our thing there, and we need to call mainloop. 0:11 And so mainloop just makes it run forever. 0:19 We wanna be safe, so what we probably wanna do is put this inside 0:22 of an if __name__ == 0:27 '__main__', then we'll call that. 0:32 Actually ,let's put both of these things down in here. 0:37 There we go. 0:42 So that way it only gets created if it's legitimately like being run as a script. 0:43 So, one of the nice things with tkinter is that you can create a class 0:49 that controls like your window, or even just part of your window and 0:53 other classes that control other parts of your window. 0:58 So we're gonna make a class that controls our entire application. 1:00 And so we're going to do that. 1:04 And then we're going to register our root app, 1:08 because we've gotta kick it root down, with that class. 1:10 So it's a little bit weird. 1:14 Let's walk through how to do this. 1:16 So we're going to call this class Pymodoro. 1:17 Inside the def __init__ we're going 1:21 to take an argument that we're gonna call master. 1:25 So this is like the master window, the master application, the master process, 1:30 kind of however you wanna think about that and 1:35 then we're gonna say self.master = master. 1:38 And that's all we have to do for that bit, and 1:42 then down here we do Pymodoro and we pass in root. 1:44 And then we still call root.mainloop. 1:48 That doesn't change. 1:51 All right, so if we run it right now, all we do is get a window like we did before. 1:52 Just a little white square, not really all that interesting. 1:56 So, how do we start putting stuff into this in a more logical way? 2:00 Well, what we can do is we can use a grid, which I think we should do, 2:06 and normally when we're using a grid, we want to use a frame, and 2:12 a frame is just an invisible box that we can put things into. 2:17 And so what we're gonna do is we're gonna make a frame, and 2:21 then we're gonna put our grid into that frame. 2:23 All right. 2:25 So here inside our __init__, we're gonna do self.mainframe, cuz it's our mainframe. 2:27 It's the outside part there. 2:33 It's a tkinter.Frame, and it belongs to self.master. 2:34 And just in case, we're gonna set the background equal to white. 2:40 And then we want to pack this mainframe in. 2:44 This is like one of the very few times we're gonna use pack here, and 2:48 we wanna make sure that the frame takes up the entire window. 2:51 So the fill is gonna be tkinter.BOTH, and expand is gonna be True. 2:55 Expand can be 1, it can be a string, 3:02 it can be whatever, it just has to be truthy or falsy. 3:05 If we run this, 3:08 we're not gonna see anything new, because we haven't made our grid. 3:09 Even once we've made the grid we won't see anything, but 3:12 the grid's our first step, so let's start with this. 3:15 So I'm actually gonna make a new method called build_grid, 3:17 and this is just going to control the building of the grid, okay? 3:23 So I'm gonna do self.mainframe. 3:29 And I'm gonna use this thing called columnconfigure. 3:32 And I'm setting the column and then the weight. 3:35 Now let me do the rest of these and then I'll explain what they are. 3:40 So we're gonna do rowconfigure. 3:44 And then row 1. 3:50 And then, Row 2. 3:53 Okay. 4:00 So what does this do? 4:01 So we have a grid, right? 4:02 It has an x and y, it has columns and rows. 4:03 So, what we said is that we're gonna have one column, which is column 0, 4:06 and it has a weight of 1. 4:10 Now, this weight 1 means for 4:11 it to be resized proportionately to everything else. 4:13 And then here we have three rows. 4:17 Row 0 and row 2, so the top row and the bottom row, they both have a weight of 0, 4:20 so they're not going to resize, they're gonna stay their own size. 4:25 But row 1, which is our middle one, is going to 4:29 take up as much room as it needs to while the other two rows maintain their size. 4:33 Okay, we don't want them to grow, but we do want that middle one to grow. 4:38 Okay, so now we're gonna call in here, 4:42 self.build_grid, so the grid gets built. 4:46 Okay, so now that we have something, let's add our banner, 4:52 our logo, to the top of the window, all right? 4:57 So again, I like to do this as its own method. 5:01 So let's say build_banner, and it doesn't take any arguments. 5:05 Most of our methods here are not gonna take arguments, so 5:11 we're gonna build_banner, and banner is going to be 5:13 a tkinter.label, of course, and it's gonna belong to the mainframe. 5:18 And let's set the background to be black, and 5:25 again, we could do that as bg instead of background if we wanted. 5:30 The text, I want it to say it's just Pymodoro, and 5:35 I want the foreground to be white. 5:39 We're gonna set the font, and to set the font we have to pass in a tuple, or 5:43 a tuple, and we specify the font that we want. 5:47 So in this case, I want Helvetica, and then the font size that we want, so 24. 5:51 I'll link in the teachers notes to documentation for 5:58 how to do a lot more stuff with type. 6:01 You can do all things are type, but 6:03 we're not going to worry about it too much for right now. 6:05 You know what, let's do red and, yeah, let's do white. 6:07 Makes more since right, pomodoro, it's a tomato, if you didn't know, 6:13 pomodoro is apparently Italian for tomato. 6:16 Okay, so then we have add this to our grid, so we're going to call banner.grid. 6:18 And so since we have it, our mainframe's a grid, 6:26 we can specify where this thing goes in the grid. 6:29 So we want this to be in row 0, because we want this to be on the top, and 6:31 we want it to be in column 0 because it needs to be, we want it right here, right? 6:37 0, 0. 6:43 Okay. 6:45 And then, we're going to pass in the stickiness, okay? 6:46 So stickiness, or sticky rather, we specify an iterable, a string, 6:54 a list of strings, stuff like that. 6:59 And we specify the directions that we want something to be. 7:01 So if you think about a square, the top would be north, 7:04 the sides would be east and west, and the bottom would be south. 7:09 So we're specify where we want this to stick to. 7:11 Well, our column, or our row rather, is not going to resize vertically, 7:14 it's never gonna get taller, so we only have to worry about sticking to the sides. 7:18 So we're gonna tell it to stick to east and west, or 7:21 you could say west and east if you want to type we instead of ew. 7:24 Then, I wanna give it a little bit of padding on the sides, and 7:28 on the top and bottom. 7:32 So to pad the sides, I'll do padx=10, and then to pad the top and 7:33 bottom, I'll say pady=10. 7:37 Cuz x is our horizontal, and y is our vertical. 7:40 These specify padding. 7:44 Padding is blank space between the content and the edge. 7:45 So we're gonna specify this on the x and y-axis. 7:48 Give it 10 to each. 7:50 Okay. 7:52 So, we've got some stuff. 7:53 Oh, sorry. 7:56 We need to come back up here after we build this grid. 7:56 And we need to do self.build_banner. 8:00 There we go. 8:03 Okay. So now, let's try running it. 8:04 And see what we get. 8:10 All right, and here is what we've got. 8:15 So we just have a banner that just resizes with the window. 8:21 Nothing amazing, but we've got something. 8:25
You need to sign up for Treehouse in order to download course files.Sign up