Second Summer 2006


Lab July 31: Graphical User Interfaces
Let's examine Chapter 10 carefully:

from Tkinter import *

root = Tk()
The program above simply creates a window. Let's decorate it:
from Tkinter import *
root = Tk()
root.title("July 31, 2006")
root.geometry("100x300")
There is a title now, and the size is determined by us.

Entering the window's event loop is done this way:

from Tkinter import *
root = Tk()
root.title("July 31, 2006")
root.geometry("100x300")
root.mainloop()
Be careful: the last line is for non-IDLE development.
from Tkinter import *
root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
# root.mainloop()
app = Frame(root)
app.grid()
lbl = Label(app, text="My name is Mario Alberto")
lbl.grid()
That's how you define a label and how you position it in the frame.

If you were to run this by double-clicking on its icon you'd need the mainloop() line.

Now let's play with buttons:

from Tkinter import *
root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
# root.mainloop()
app = Frame(root)
app.grid()
lbl = Label(app, text="My name is Mario Alberto")
lbl.grid()
bOne = Button(app, text="Click me!")
bOne.grid()
bTwo = Button(app)
bTwo.configure(text="Push me instead!")
bTwo.grid()
The buttons don't do anything, their placement is mysterious but predictable (?!).

Now we reorganize: from Tkinter import *

class Application(Frame):
    def __init__(self, master):
        Frame.__init__(self,master)
        self.grid()
        self.createWidgets()
    def createWidgets(self):
        self.lbl = Label(self, text="My name is Mario Alberto")
        self.lbl.grid()
        self.bOne = Button(self, text="Click me!")
        self.bOne.grid()
        self.bTwo = Button(self)
        self.bTwo.configure(text="Push me instead!")
        self.bTwo.grid()


root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
app = Application(root)
Now we simplify a little:
from Tkinter import *

class Application(Frame):
    def __init__(self, master):
        Frame.__init__(self,master)
        self.grid()
        self.clicks = 0
        self.createWidgets()
    def createWidgets(self):
        self.bOne = Button(self)
        self.bOne["text"] = "Total clicks: 0 (zero)"
        self.bOne.grid()


root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
app = Application(root)
But we need to get some reaction from the program:
from Tkinter import *

class Application(Frame):
    def __init__(self, master):
        Frame.__init__(self,master)
        self.grid()
        self.clicks = 0
        self.createWidgets()
    def createWidgets(self):
        self.bOne = Button(self)
        self.bOne["text"] = "Total clicks: 0 (zero)"
        self.bOne["command"] = self.update
        self.bOne.grid()
    def update(self):
        self.clicks += 1
        self.bOne["text"] = "Total clicks: " + str(self.clicks)

root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
app = Application(root)
Thus we have seen an event handler in action.

Let's work out a few more details:

from Tkinter import *

class Application(Frame):
    def __init__(self, master):
        Frame.__init__(self,master)
        self.grid()
        self.clicks = 0
        self.createWidgets()
    def createWidgets(self):
        self.bOne = Button(self)
        self.bOne["text"] = "Click me."
        self.bOne["command"] = self.update
        self.bOne.grid()
        self.textArea = Text(self, width=40, height=10, wrap=WORD)
        self.textArea.grid()

    def update(self):
        self.clicks += 1
        self.textArea.delete(0.0, END)
        self.textArea.insert(0.0, "Total clicks: " + str(self.clicks))

root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
app = Application(root)
This allows us to report feedback to the user.

Let's collect information from the user:

from Tkinter import *

class Application(Frame):
    def __init__(self, master):
        Frame.__init__(self,master)
        self.grid()
        self.balance = 0
        self.createWidgets()
    def createWidgets(self):
        self.user = Entry(self)
        self.user.grid()
        self.bOne = Button(self)
        self.bOne["text"] = "Click me."
        self.bOne["command"] = self.update
        self.bOne.grid()
        self.textArea = Text(self, width=40, height=10, wrap=WORD)
        self.textArea.grid()
        
    def update(self):
        self.balance +=float(self.user.get())
        self.textArea.delete(0.0, END)
        self.textArea.insert(0.0, "Current balance: " + str(self.balance))

root = Tk()
root.title("July 31, 2006")
root.geometry("300x300")
app = Application(root)
With all this and the information in the book a lab assignment will be posted here.

Lab Assignment for the day:

  1. Check out this program (label is updated too):
    from Tkinter import *
    
    class Application(Frame):
        def __init__(self, master):
            Frame.__init__(self,master)
            self.grid()
            self.balance = 0
            self.createWidgets()
        def createWidgets(self):
            self.v = StringVar()
            self.w = Label(self, textvariable=self.v)
            self.v.set("This is the text for the label.")
            self.w.grid()
            self.user = Entry(self)
            self.user.grid()
            self.bOne = Button(self)
            self.bOne["text"] = "Click me."
            self.bOne["command"] = self.update
            self.bOne.grid()
            self.textArea = Text(self, width=40, height=10, wrap=WORD)
            self.textArea.grid()
            
        def update(self):
            self.balance +=float(self.user.get())
            self.textArea.delete(0.0, END)
            self.textArea.insert(0.0, "Current balance: " + str(self.balance))
            self.v.set("Current balance: " + str(self.balance))
    
    root = Tk()
    
    root.title("July 31, 2006")
    root.geometry("300x300")
    app = Application(root)
    Check http://effbot.org/tkinterbook/label.htm for details.

  2. The grid layout has additional options:
    from Tkinter import *
    
    class Application(Frame):
        def __init__(self, master):
            Frame.__init__(self,master)
            self.grid()
            self.createWidgets()
        def createWidgets(self):
            self.one = Label(self, text="Demonstration of GridLayout manager use.")
            self.one.grid(row=0, column=0, columnspan=2)
            self.two = Label(self, text="Type password: ")
            self.two.grid(row=1, column=0)
            self.two = Entry(self)
            self.two.grid(row=1, column=1)
    
    root = Tk()
    
    root.title("July 31, 2006")
    root.geometry("300x300")
    app = Application(root)

The lab assignment is this:

Create a user interface for Homework Ten

This is due Thu at the end of the day and will appear in the gradebook as Lab Jul 31-Aug 03.


Last updated: July 30, 2006 by Adrian German for A201/A597