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