In this video, learn how to enhance the GUI by adding several widgets. Add a menu and tabs, and populate those tabs with LabelFrames, Labels, Comboboxes, and text entries using the Grid layout manager. Plus, add spacing around the widgets to make the GUI look great.
- [Instructor] In this video, we will create a simple GUI. We will continue with the GUI we created in the previous video, but we will add lots of widgets to it. We enhanced our GUI by importing more modules. Import the menu module from Tkinter and also the ttk module. Now, the first tks stands for themed tk, and this ttk module has other widgets than the regular tk module.
Here, we declare function that cleanly quits the GUI. We call win quit followed by win destroy and then exit. Next, we create a menu bar by calling the Menu constructor assigned to a variable, and we configure our window and assign the menu bar as the Menu. Now, we add menu items. We add a fileMenu, and add a command called New. We add a separator, and we add another command to the fileMenu called Exit, and here, we say the command, when we click the Exit menu item is underscore quit.
That's the function we just looked at up here. So, when we click the Exit menu item, this function will be called, and it will exit the GUI. Then, we create another menu item, and we call it About and Help, and this, we don't connect any commands here, so those things actually don't do anything. But we will see, in a moment, that they do exist, and we can click them. So after that, we create a Tab Control.
In Tkinter, it's called Notebook. Actually, it's in tk. That's why we need ttk. So, ttk Notebook will create a Tab Control, and the parent is our window, so we pass a win here. Then, we use the Tab Control we just created. We create individual tabs, and, after creating it, we still have to add the tab to the Tab Control. So we make the Tab Control the father, the parent, and then, we add the tab we just created to the Tab Control.
And we do that twice, so we create two tabs. And then, in order to make them visible, we have to use the pack geometry manager. Then, down here, we start the window mainloop, and, when we run it, it looks like this. We have two tabs, tab one and tab two. We have a file, New menu. There's a separator. We have Help, About, and we have a new Exit. When we click the Exit menu item, it actually exits the GUI.
Now, the GUI we just created was rather tiny, not very useful. The reason why is because we didn't put any widgets into the two tabs into the Notebook control. So, we do that here. So, what we do first is we call, we create a ttk LabelFrame, that's a container that will hold other widgets, and we assign it to this variable here, weather conditions frame. And then, we position it, column zero, row zero, give it some padding, and we just the grid layout manager to do so.
This will come in very handy very soon. Then, after we have created a label frame, we now create a label, and we just the label frame as the parent, and we give it a text, and we also align it within the label frame. So, the label frame itself is in column zero, row zero. The label within the label frame is in column zero, row zero. But that's inside of this frame. So, when we run it, it now looks like this.
So, we have our two tabs. And because we created the label frame widget, with this size, now we can actually see something. So, what we can see is the GUI and take it into automatically expand as far as it has to to hold the widgets that have been created. So, this here is the label frame, and this is a label within the label frame. Next, we create a combobox. Create a combobox, and we position it in column one, row zero into the same weather conditions frame.
So, the label here is in column zero, row zero. Our combobox will be in column one, row zero, which means it will be to the right of the label. Now, we give the combobox some values of some cities, and we say, when we run it, the combobox should be selected, the current selection should be in this number zero in the tuple. So, zero's Los Angeles, one would be London, and two would be Rio.
So, they're saying, current, make the current zero. When we run it, we have our new combobox next to the label. And when we drop down, you can see the other cities. Now, one thing we can notice is that Rio has a long name, and we can't see the whole name. We can select it, and then we can move the arrows to the right. But it would be better if you could see the whole name. So, one way to do it is to get the maximum of all the values that are part of the combobox.
So we say, len x for x in citySelected values. These are our values, it's a dictionary. And then, we get the max of them. So we get the max widths of the names, and here we assign the max widths to new widths. And then, we call config on the combobox, and we change the widths. Originally, we had set it to 12 pixels, so here, we change it to whatever is the longest city. So, when we now run it, we can see Los Angeles is still selected, but there's more space here.
When we use the drop-down, we can see all of Rio de Janeiro, Brazil, and so that fits. Now, for some reason, we get some extra space here. Some, we don't really want that, or maybe we do, but there's a way to get rid of it. So, let's change this. So that's way we saved the max widths here in new widths because, now, we uncomment this and say our new width should actually be the max width minus four pixels. When we run the code again, when we select Rio de Janeiro, we can see the whole city and the country, but there's no extra white space to the right.
So that's one way to do it. Next, we're going to add more labels, and we're also going to add some entries next to the labels and set up a combobox. We're going to add entries and then, entry is basically a one-line text entry. So what we do is, in order to make them all the same size, we say entry widths to a certain size here. And then, we use entry widths in all of them. And also, what we do is we set the state to read-only, so we want to be able to read and copy and paste the values from those entries, but we don't want to be able to modify them for our weather app we're going to be creating a little bit later.
So, when we round this, now, we have many labels, and to the right of each is a read-only entry, and we still have our location with the three cities we placed into them. Click the other tab, nothing there yet, and we can still close the GUI as before. What we can see is that all of our labels are left aligned, aligned to the west. Now, sometimes, it makes it hard to find the entry box that is associated with the label.
So we can easily change that by changing this sticky property to east, E stands for east, which means aligned to the right. So, when we round this change code. Now, our labels are all aligned to the right, except for the location one, we didn't change that one, we left that aligned to west. So all the others are aligned east, so they are just next to the entries, and we can compare that to the previous one. So, here, in the previous code, we align them to the west, and now they are aligned to the east.
Now, after we have created all of these widgets, we can, in a very simple loop, add some spacing around all of them. So, for all the children that belong to the weather conditions frame, we can add some padx, some pady, which means add some spacing in the x and y locations, and we do that for each child. We call it grid configure, changing the original padx and pady values. So, when we run the code, we can see that there is some space between the label and the entry, and also between the entry and the border here.
All of them, we did that in one simple loop here, and we can compare that to our previous code, our previous GUI. You can see there was no spacing in between and also in the y direction. There's more space in between all of those widgets, so it looks less crowded as a result of the GUI getting a little bit bigger and a little bit wider. Not much, a little bit. So, again, just by these two lines of code, and it's usually a good idea to play around with the values like we do x six, y six; x six, y three.
In the end, what we are running right now is padx four and pady equals two, and it looks like this.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Running Python programs within Eclipse
- Setting breakpoints
- Using the PyDev debugger
- Using design patterns
- Creating a GUI application with Tkinter
- Writing a Windows scheduling service