Tkinter GUI Application Development HOTSHOT

As a GUI programmer, you will generally be responsible for deciding three aspects of your program:

Let us delve deeper into each of these three components in the context of Tkinter.

The pack geometry derives its name from the fact that it literally packs widgets on a first-come-first-serve basis in the space available in the master frame in which widgets are pushed.

The pack geometry manager fits "slave widgets" into "parent spaces". When packing the slave widgets, the pack manager distinguishes between three kinds of spaces:

The most commonly used options in pack() include:

Let's take a look at some demo code that illustrates some of the pack features. Here's the code snippet (code 1.04.py) that generates a GUI like the following screenshot:

from Tkinter import *
root = Tk()
Button(root, text="A").pack(side=LEFT, expand=YES, fill=Y)
Button(root, text="B").pack(side=TOP, expand=YES, fill=BOTH)
Button(root, text="C").pack(side=RIGHT, expand=YES, fill=NONE, anchor=NE)
Button(root, text="D").pack(side=LEFT, expand=NO, fill=Y)
Button(root, text="E").pack(side=TOP, expand=NO, fill=BOTH)
Button(root, text="F").pack(side=RIGHT, expand=NO, fill=NONE)
Button(root, text="G").pack(side=BOTTOM, expand=YES, fill=Y)
Button(root, text="H").pack(side=TOP, expand=NO, fill=BOTH)
Button(root, text="I").pack(side=RIGHT, expand=NO)
Button(root, text="J").pack(anchor=SE)
root.mainloop()

The description of the code is listed as follows:

The description for the rest of the lines is left as an exercise for you to explore. The best way to study this piece of code would be to comment out all lines of code and introduce each successive button one after another. At each step, try to resize the window to see the effect it has on various buttons.

We will use the pack geometry manager in some of our projects, so it would be a worthwhile exercise to get acquainted with pack and its options.

For a complete pack manager reference refer to the The pack manager section in Appendix B, Quick Reference Sheets.

While you can create complicated layouts by nesting widgets in multiple frames, you can find the grid geometry manager more suitable for most of the complex layouts.

The grid geometry manager is most easy to understand and, perhaps, the most useful geometry manager in Tkinter. The central idea of the grid geometry manager is to divide the container frame into a two-dimensional table divided into a number of rows and columns. Each cell in the table can then be targeted to hold a widget. In this context, a cell is an intersection of imaginary rows and columns. Note that in the grid method, each cell can hold only one widget. However, widgets can be made to span multiple cells.

Within each cell you can further align the position of the widget using the STICKY option. The sticky option decides how the widget is expanded, if its container cell is larger than the size of the widget it contains. The sticky option can be specified using one or more of the N, S, E, and W, or NW, NE, SW, and SE options.

Not specifying stickiness defaults to stickiness to the center of the widget in the cell.

Let us now see a demo code that illustrates some of the features of the grid geometry manager. The code in 1.06.py generates a GUI-like figure as shown:

from Tkinter import *
root = Tk()
Label(root, text="Username").grid(row=0, sticky=W)
Label(root, text="Password").grid(row=1, sticky=W)
Entry(root).grid(row=0, column=1, sticky=E)
Entry(root).grid(row=1, column=1, sticky=E)
Button(root, text="Login").grid(row=2, column=1, sticky=E)
root.mainloop()

The description of the code is listed as follows:

In a more complex scenario, your widgets may span across multiple cells in the grid. To enable a grid to span multiple cells, the grid method offers very handy options such as rowspan and columnspan.

Furthermore, you may often need to provide some padding between cells in the grid. The grid manager provides padx and pady options to provide padding to place around the widget in a cell.

Similarly, there are ipadx and ipady options for internal padding. The default value of external and internal padding is 0.

Let us see an example of the grid manager, where we use most of the common arguments to the grid method such as row, column, padx, pady, rowspan, and columnspan in action.

The code 1.08.py is a demonstration of grid() geometry manager options:

from Tkinter import *
top = Tk()
top.title('Find & Replace')

Label(top,text="Find:").grid(row=0, column=0, sticky='e')
Entry(top).grid(row=0,column=1,padx=2,pady=2,sticky='we',columnspan=9)

Label(top, text="Replace:").grid(row=1, column=0, sticky='e')
Entry(top).grid(row=1,column=1,padx=2,pady=2,sticky='we',columnspan=9)

Button(top, text="Find").grid(row=0, column=10, sticky='ew', padx=2, pady=2)
Button(top, text="Find All").grid(row=1, column=10, sticky='ew', padx=2)
Button(top, text="Replace").grid(row=2, column=10, sticky='ew', padx=2)
Button(top, text="Replace All").grid(row=3, column=10, sticky='ew', padx=2)

Checkbutton(top, text='Match whole word only').grid(row =2, column=1, columnspan=4, sticky='w')
Checkbutton(top, text='Match Case').grid(row =3, column=1, columnspan=4, sticky='w')
Checkbutton(top, text='Wrap around').grid(row =4, column=1, columnspan=4, sticky='w')

Label(top, text="Direction:").grid(row=2, column=6, sticky='w')
Radiobutton(top, text='Up', value=1).grid(row=3, column=6, columnspan=6, sticky='w')
Radiobutton(top, text='Down', value=2).grid(row=3, column=7, columnspan=2, sticky='e')

top.mainloop()

Notice how just 14 lines of core grid manager code generates a complex layout such as the one shown in the following screenshot. In contrast, developing this with the pack manager would have been much more tedious:

Another grid option that you can sometimes use is the widget.grid_forget() method. This method can be used to hide the widget from the screen. When you use this option, the widget exists in its place but becomes invisible. The hidden widget may be made visible again but any grid options that you had originally assigned to the widget will be lost.

Similarly, there is a widget.grid_remove() method that removes the widget, except that in this case when you make the widget visible again, all its grid options will be restored.

For a complete grid() reference, refer to the the The grid manager section in Appendix B, Quick Reference Sheets.

Now we will delve into configuring grid column and row sizes.

Different widgets have different heights and widths. So when you specify the position of a widget in terms of rows and columns, the cell automatically expands to accommodate the widget.

Normally the height of all grid rows is automatically adjusted to be the height of its tallest cell. Similarly, the width of all grid columns is adjusted to be equal to the width of the widest widget cell.

If you then want a smaller widget to fill a larger cell or to stay at any one side of the cell, you use the sticky attribute on the widget to control that.

You can, however, override this automatic sizing of columns and rows using the following code:

w.columnconfigure(n, option=value, ...)  AND 
w.rowconfigure(N, option=value, ...)

Use these to configure the options for a given widget, w, in the column, n, specifying values for the options, minsize, pad, and weight.

The options available here are as mentioned in the following table:

w.columnconfigure(0, weight=2)
w.columnconfigure(1, weight=3)

The columnconfigure() and rowconfigure() methods are often used to implement dynamic resizing of widgets, especially on resizing the root window.

The place geometry manager is the most rarely used geometry manager in Tkinter. Nevertheless, it has its uses in that it lets you precisely position widgets within its parent frame using the X-Y coordinate system.

The place manager can be assessed using the place() method on all standard widgets.

The important options for place geometry include:

Other options commonly used with place() include width and anchor (the default is NW). Refer to the code in 1.09.py for a demonstration of the common place option:

from Tkinter import *
root = Tk()
# Absolute positioning
Button(root,text="Absolute Placement").place(x=20, y=10)
# Relative positioning
Button(root, text="Relative").place(relx=0.8, rely=0.2, relwidth=0.5, width=10, anchor = NE)
root.mainloop()

You may not see much of a difference between absolute and relative positions simply by looking at the code or the window frame. If, however, you try resizing the window, you will notice that the button placed absolutely does not change its coordinates, while the relative button changes its coordinates and size to fit the new size of the root window.

For a complete place() reference, check out the The place manager section in Appendix B, Quick Reference Sheets.

The place manager is rarely used. This is because if you use it you have to worry about the exact coordinates. If say you make a minor change for one widget, it is very likely that you will have to change the X-Y values for other widgets as well, which can be very cumbersome.

We will not use the place manager in our projects. However, knowing that options for coordinate-based placement exist can be helpful in certain situations.

The simplest way to add functionality to a button is called command binding, whereby the callback function is mentioned in the form of command = some_callback in the widget option.

Take a look at the following sample code:

def my_callback ():
  # do something
  Button(root,text="Click",command= my_callback) 

Note that my_callback is called without parentheses () from within the widget command option. This is because when the callback functions are set, it is necessary to pass a reference to a function rather than actually calling it.

If the callback does not take any argument, it can be handled with a simple function like the one we just used. However, if the callback needs to take some arguments, we can use the lambda function as shown in the following code snippet:

def my_callback (somearg):
  #do something with argument
  Button(root,text="Click",command=lambda: my_callback ('some argument'))

Python borrows syntax from a functional program called the lambda function. The lambda function lets you define a single-line, nameless function on the fly.

The format for using lambda is lambda arg: #do something with arg in a single line, for instance:

lambda x: return x^2

The command button binds by default to the left mouse click and the Space bar. It does not bind to the Return key. Therefore, if you bind a button using the command function, it will react to the Space bar and not the Return key. This is counter-intuitive to many Windows users. What's worse is you cannot change this binding of the command function. The moral is that command binding, though a very handy tool, does not provide you the the independence to decide your own bindings.

Fortunately, Tkinter provides an alternative form of event binding mechanism called bind() to let you deal with different events. The standard syntax for binding an event is as follows:

widget.bind(event, handler)

When an event corresponding to the event description occurs in the widget, it calls the associated handle passing an instance of the event object as the argument, with the event details.

Let us look at an example of the bind() method (refer to the code file 1.10.py):

from Tkinter import *
root = Tk()
Label(root, text='Click at different\n locations in the frame below').pack()
def mycallback(event):
  print dir(event)                         
  print "you clicked at", event.x, event.y
myframe = Frame(root, bg='khaki', width=130, height=80)
myframe.bind("<Button-1>", mycallback)       
myframe.pack()
root.mainloop()

The description of the code is listed as follows:

When you run this code, it produces a window like the one shown. When you left-click anywhere in the frame, it outputs messages to the console. A sample message passed to the console is as follows:

['__doc__', '__module__', 'char', 'delta', 'height', 'keycode', 'keysym', 'keysym_num', 'num', 'send_event', 'serial', 'state', 'time', 'type', 'widget', 'width', 'x', 'x_root', 'y', 'y_root']
You clicked at 63 36.

In the previous example, you saw how we used the event <Button-1> to denote the left-click of a mouse. This is a built-in pattern in Tkinter that maps it to the mouse's left-click event. Tkinter has an exhaustive mapping scheme that exactly identifies events such as this one.

Here are some examples to give you an idea of event patterns:

In general, the mapping pattern takes the following form:

<[event modifier-]...event type [-event detail]>

Typically an event pattern will comprise of:

Let's take a look at a practical example of the event binding on widgets. (See the code in 1.11.py for the complete working example). The following is a modified snippet of code to give you a flavor of the commonly used the event bindings:

widget.bind("<Button-1>",callback)  #bind widget to left mouse click
widget.bind("<Button-2>", callback) # bind to right mouse click
widget.bind("<Return>", callback)# bind  to Return(Enter) Key 
widget.bind("<FocusIn>", callback) #bind  to  Focus in Event
widget.bind("<KeyPress-A>", callback)# bind  to keypress A
widget.bind("<KeyPress-Caps_Lock>", callback)# bind to CapsLockkeysym
widget.bind("<KeyPress-F1>", callback)# bind widget to F1 keysym
widget.bind("<KeyPress-KP_5>", callback)# bind to keypad number 5
widget.bind('<Motion>', callback) # bind to motion over widget
widget.bind("<Any-KeyPress>", callback) # bind to any keypress

Rather than binding an event to a particular widget, you can also bind it to the Toplevel window. The syntax remains the same except that now you call it on the root instance of the root window like root.bind().

In the previous section, you saw how to bind an event to an instance of a widget. This can be called instance level binding.

However, there might be times when you need to bind events to the entire application. At other times you may want to bind the event to a particular class of widget. Tkinter provides different levels of binding options for this:

You need variables with a wide variety of widgets. You likely need a string variable to track what the user enters into the entry widget or text widget. You most probably need Boolean variables to track whether the user has checked the Checkbox widget. You need integer variables to track the value entered in a Spinbox or Slider widget.

In order to respond to changes in widget-specific variables, Tkinter offers its own variable class. The variable that you use to track widget-specific values must be subclassed from this Tkinter variable class. Tkinter offers some commonly used predefined variables. They are StringVar, IntVar, BooleanVar, and DoubleVar.

You can use these variables to capture and play with changes in the value of variables from within your callback functions. You can also define your own variable type, if required.

Creating a Tkinter variable is simple. You simply call the required constructor:

mystring = StringVar()
ticked_yes = BooleanVar()
option1 = IntVar()
volume = DoubleVar()

Once the variable is created, you can use it as a widget option, as follows:

Entry(root, textvariable = mystring) 
Checkbutton(root, text="Remember Me", variable=ticked_yes)
Radiobutton(root, text="Option1", variable=option1, value="option1") #radiobutton
Scale(root, label="Volume Control", variable=volume, from =0, to=10) # slider

Additionally, Tkinter provides access to the value of variables using set() and get() methods:

myvar.set("Wassup Dude") # setting  value of variable
myvar.get() # Assessing the value of variable from say a callback

A demonstration of the Tkinter variable class is available in the code file 1.12.py. The code generates a window like the following screenshot: