1. Fundamentals of Programming I Windows, Labels, and Command Buttons
Computer Science 111
Fundamentals of Programming I
Windows, Labels, and Command Buttons

2. Window Attributes
width (window shrink-wraps around widgets by default)
height
title (empty string by default)
background (“white” by default)
resizable (True by default)

3. Optional Arguments to __init__
def __init__(self):
"""Sets up the window."""
EasyFrame.__init__(self, title = "Blue Window",
width = 200, height = 100,
background = "blue",
resizable = False)

4. Method Calls on self (the Window)
def __init__(self):
"""Sets up the window."""
EasyFrame.__init__(self)
self.setTitle("Blue Window")
self.setSize(200, 100)
self.setBackground("blue")
self.setResizable(False)

5. Set the Window’s Attribute Dictionary
def __init__(self):
"""Sets up the window."""
EasyFrame.__init__(self)
self["title"] = "Blue Window"
self.setSize(200, 100)
self["background"] = "blue"
self.setResizable(False)

6. The Label Widget and Its Attributes
The breezypythongui method addLabel
creates an object of type tkinter.Label with the given attributes (text and position are required)
places it in the window’s grid at the given position
returns the label object
The label’s attributes can then be accessed or modified by accessing its attribute dictionary

7. The Label Widget and Its Attributes
font (a tkinter.font.Font object)
background (the color of the rectangular area surrounding the label)
foreground (the text color)
text (the label’s text)
image (a tkinter.PhotoImage object)

8. A Captioned Image

9. A Captioned Image from breezypythongui import EasyFrame
from tkinter import PhotoImage
from tkinter.font import Font

10. A Captioned Image from breezypythongui import EasyFrame
from tkinter import PhotoImage
from tkinter.font import Font
class ImageDemo(EasyFrame):
"""Displays an image and a caption."""
def __init__(self):
"""Sets up the window and widgets."""
EasyFrame.__init__(self, title = "Image Demo", resizable = False)
imageLabel = self.addLabel(text = "",
row = 0, column = 0,
sticky = "NSEW")
textLabel = self.addLabel(text = "Smokey the cat",
row = 1, column = 0,

11. A Captioned Image from breezypythongui import EasyFrame
from tkinter import PhotoImage
from tkinter.font import Font
class ImageDemo(EasyFrame):
"""Displays an image and a caption."""
def __init__(self):
"""Sets up the window and widgets."""
EasyFrame.__init__(self, title = "Image Demo", resizable = False)
imageLabel = self.addLabel(text = "",
row = 0, column = 0,
sticky = "NSEW")
textLabel = self.addLabel(text = "Smokey the cat",
row = 1, column = 0,
# Load the image and associate it with the image label.
self.image = PhotoImage(file = "smokey.gif")
imageLabel["image"] = self.image

12. A Captioned Image from breezypythongui import EasyFrame
from tkinter import PhotoImage
from tkinter.font import Font
class ImageDemo(EasyFrame):
"""Displays an image and a caption."""
def __init__(self):
"""Sets up the window and widgets."""
EasyFrame.__init__(self, title = "Image Demo", resizable = False)
imageLabel = self.addLabel(text = "",
row = 0, column = 0,
sticky = "NSEW")
textLabel = self.addLabel(text = "Smokey the cat",
row = 1, column = 0,
# Load the image and associate it with the image label.
self.image = PhotoImage(file = "smokey.gif")
imageLabel["image"] = self.image
# Set the font and color of the caption.
font = Font(family = "Verdana", size = 20, slant = "italic")
textLabel["font"] = font
textLabel["foreground"] = "blue"

13. Event-Driven Programming
Layout and pop up a window
Wait for events
When an event occurs, respond
Goto step 2

14. Types of Events Button click Menu item selection Check box selection
List box selection
Keyboard entry
Mouse move
Mouse press
Mouse release
Mouse drag

15. A Simple Counter App At startup After one increment
After 23 increments
After reset

16. Analysis
The window includes a label to display the value of the counter, which is 0 at program startup
The window includes two command buttons
The Next button increments the counter and updates the label
The Reset button resets the counter to 0 and updates the label
The class CounterDemo lays out the label and buttons and handles user interactions

17. Design of CounterDemo Two instance variables: Three methods:
self.count - tracks the value of the counter
self.label - shows the value of the counter in the window
Three methods:
__init__ - sets up the window and its widgets, and initializes the count to 0
next - increments the count by 1 and updates the label
reset - sets the count to 0 and updates the label

18. Implementation: Window Layout
from breezypythongui import EasyFrame
class CounterDemo(EasyFrame):
"""Illustrates the use of a counter with an
instance variable."""
def __init__(self):
"""Sets up the window, label, and buttons."""
EasyFrame.__init__(self, title = "Counter Demo")
self.setSize(200, 75)
# Instance variable to track the count.
self.count = 0
# A label to display the count in the first row.
self.label = self.addLabel(text = "0",
row = 0, column = 0,
sticky = "NSEW",
columnspan = 2)
Instance variables always begin with self
They track the state of the object and are visible throughout the class definition

19. Command Buttons
The method addButton adds a widget of type tkinter.Button to the window and returns it
Text, row, and column are required args
Button attributes
text (the button’s label)
image (for “hot spots”)
state (“normal” or “disabled”)
command (a method to run when the button is clicked)

20. Implementation: Window Layout
from breezypythongui import EasyFrame
class CounterDemo(EasyFrame):
"""Illustrates the use of a counter with an
instance variable."""
def __init__(self):
"""Sets up the window, label, and buttons."""
EasyFrame.__init__(self, title = "Counter Demo")
self.setSize(200, 75)
. . .
# Two command buttons.
self.addButton(text = "Next",
row = 1, column = 0,
command = self.next)
self.addButton(text = "Reset",
row = 1, column = 1,
command = self.reset)
A method is referenced in the same way as an instance variable
A method is passed as argument to addButton, which will call it when that button is pressed

21. Methods as Attributes?
Python methods and functions are first-class data objects
They can be passed as arguments to other methods and functions, and returned as the values of other methods and functions
The default command method for a button is a method of no arguments that does nothing

22. Implementation: Handling Events
from breezypythongui import EasyFrame
class CounterDemo(EasyFrame):
"""Illustrates the use of a counter with an
instance variable."""
def __init__(self):
"""Sets up the window, label, and buttons."""
EasyFrame.__init__(self, title = "Counter Demo")
self.setSize(200, 75) .
# Methods to handle user events.
def next(self):
"""Increments the count and updates the display."""
self.count += 1
self.label["text"] = str(self.count)
def reset(self):
"""Resets the count to 0 and updates the display."""
self.count = 0
Each method must have a parameter named self

23. For Next Time Input and output with data fields
Handling errors in a GUI program