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

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

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)

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)

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)

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

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)

A Captioned Image

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

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,

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

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"

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

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

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

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

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

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

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)

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

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

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

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