The University of Texas – Pan American CSCI/CMPE 4341 Topic: Programming in Python Chapter 8: Graphical User Interface Components Xiang Lian The University of Texas – Pan American Edinburg, TX 78539 lianx@utpa.edu Some slides are borrowed and revised from lecture slides of the textbook

Objectives In this chapter, you will: Become aware of using Tkinter module to build graphical user interfaces Create and manipulate labels, text fields, buttons, check boxes, and radio buttons Learn to use mouse events and keyboard events

Introduction Graphical user interface (GUI) enables user interaction via mouse or keyboard with program GUIs built from components called widgets

An Example of GUI Components in an Internet Explorer Button Label Menu Menu bar Text field

Python GUIs

Event Handling GUI components generate events due to user interaction Events drive the program to perform a task Click Change Time Event handler is what you write

tkinter Module Python’s standard GUI package – tkinter module tkinter library provides object-oriented interface to Tk GUI toolkit Each GUI component class inherits from class Widget GUI consists of top-level (or parent) component that can contain children components Class Frame serves as a top-level component try: from Tkinter import * # for Python2 except ImportError: from tkinter import * # for Python3

Python 2.X  Python 3.X Tkinter → tkinter tkMessageBox → tkinter.messagebox tkColorChooser → tkinter.colorchooser tkFileDialog → tkinter.filedialog tkCommonDialog → tkinter.commondialog tkSimpleDialog → tkinter.simpledialog tkFont → tkinter.font Tkdnd → tkinter.dnd ScrolledText → tkinter.scrolledtext Tix → tkinter.tix ttk → tkinter.ttk http://stackoverflow.com/questions/673174/file-dialogs-of-tkinter-in-python-3

tkinter Overview Widget subclasses: Frame Label Widget Entry Text   Frame Label Entry Text Button Checkbutton Radiobutton Menu Canvas Scale Listbox Scrollbar Menubutton Widget Key Subclass name Class name

Label Component – Label Labels Display text or images Provide instructions and other information Created by tkinter class Label

Allows program to access definitions without the module name # Fig. 10.4: fig10_04.py # Label demonstration. from tkinter import * class LabelDemo( Frame ): """Demonstrate Labels""" def __init__( self ): """Create three Labels and pack them""" Frame.__init__( self ) # initializes Frame object # frame fills all available space self.pack( expand = YES, fill = BOTH ) self.master.title( "Labels" ) self.Label1 = Label( self, text = "Label with text" ) # resize frame to accommodate Label self.Label1.pack() self.Label2 = Label( self, text = "Labels with text and a bitmap" ) # insert Label against left side of frame self.Label2.pack( side = LEFT ) # using default bitmap image as label self.Label3 = Label( self, bitmap = "warning" ) self.Label3.pack( side = LEFT ) def main(): LabelDemo().mainloop() # starts event loop if __name__ == "__main__": main() Allows program to access definitions without the module name Parent container inherits from Frame fig10_04.py Base-class constructor initializes top-level component Method pack and its keyword arguments specifies how and where to place components Attribute master references component’s parent Sets title of GUI Create Label component to display specified text Place Label1 with method pack’s default settings Places Label2 against frame’s left side Display warning bitmap image on label Start GUI program

Python Program GUI

Bitmap Images for Labels

Entry Component – TextBox Areas in which users can enter text or programmers can display a line of text Created by Entry class <Return> event occurs when user presses Enter key inside Entry component

Contains functions that display dialogs fig10_06.py # Fig. 10.6: fig10_06.py # Entry components and event binding demonstration. from tkinter import * from tkinter.messagebox import * class EntryDemo( Frame ): """Demonstrate Entrys and Event binding""" def __init__( self ): """Create, pack and bind events to four Entries""" Frame.__init__( self ) self.pack( expand = YES, fill = BOTH ) self.master.title( "Testing Entry Components" ) self.master.geometry( "325x100" ) # width x length self.frame1 = Frame( self ) self.frame1.pack( pady = 5 ) self.text1 = Entry( self.frame1, name = "text1" ) # bind the Entry component to event self.text1.bind( "<Return>", self.showContents ) self.text1.pack( side = LEFT, padx = 5 ) self.text2 = Entry( self.frame1, name = "text2" ) # insert text into Entry component text2 self.text2.insert( INSERT, "Enter text here" ) self.text2.bind( "<Return>", self.showContents ) self.text2.pack( side = LEFT, padx = 5 ) self.frame2 = Frame( self ) self.frame2.pack( pady = 5 ) Contains functions that display dialogs fig10_06.py Configures length and width of top-level component in pixels Create Frame component as container for two Entry components Specifies 5 pixels of vertical space between frame1 and other components Create Entry component and set its name Associate Entry component text1 with Enter key event Specify event handler as second argument Specifies 5 pixels of horizontal space between text1 and other components Display text in Entry component Create frame2 as container for next 2 Entry components

Method config sets Entry component text3’s state to DISABLED self.text3 = Entry( self.frame2, name = "text3" ) self.text3.insert( INSERT, "Uneditable text field" ) # prohibit user from altering text in Entry component text3 self.text3.config( state = DISABLED ) self.text3.bind( "<Return>", self.showContents ) self.text3.pack( side = LEFT, padx = 5 ) # text in Entry component text4 appears as * self.text4 = Entry( self.frame2, name = "text4", show = "*" ) self.text4.insert( INSERT, "Hidden text" ) self.text4.bind( "<Return>", self.showContents ) self.text4.pack( side = LEFT, padx = 5 ) def showContents( self, event ): """Display the contents of the Entry""" # acquire name of Entry component that generated event theName = event.widget.winfo_name() # acquire contents of Entry component that generated event theContents = event.widget.get() showinfo( "Message", theName + ": " + theContents ) def main(): EntryDemo().mainloop() if __name__ == "__main__": main() Method config sets Entry component text3’s state to DISABLED fig10_06.py Display asterisks rather than text in Entry component text4 Event handler displays Entry component’s name and entered text Returns name of component associated with event Returns contents of component Display dialog box Invoke GUI’s event loop

Button Component – Button Buttons Generates events when selected Facilitate selection of actions Created with class Button Displays text or image called button label Each should have unique label

Create Button component displaying specified text label # Fig. 10.7: fig10_07.py # Button demonstration. from tkinter import * from tkinter.messagebox import * class PlainAndFancy( Frame ): """Create one plain and one fancy button""" def __init__( self ): """Create two buttons, pack them and bind events""" Frame.__init__( self ) self.pack( expand = YES, fill = BOTH ) self.master.title( "Buttons" ) # create button with text self.plainButton = Button( self, text = "Plain Button", command = self.pressedPlain ) self.plainButton.bind( "<Enter>", self.rolloverEnter ) self.plainButton.bind( "<Leave>", self.rolloverLeave ) self.plainButton.pack( side = LEFT, padx = 5, pady = 5 ) # create button with image self.myImage = PhotoImage( file = "logotiny.gif" ) self.fancyButton = Button( self, image = self.myImage, command = self.pressedFancy ) self.fancyButton.bind( "<Enter>", self.rolloverEnter ) self.fancyButton.bind( "<Leave>", self.rolloverLeave ) self.fancyButton.pack( side = LEFT, padx = 5, pady = 5 ) def pressedPlain( self ): showinfo( "Message", "You pressed: Plain Button" ) fig10_07.py Create Button component displaying specified text label Associate button with event handler Mouse cursor rolling over button associated with callback Mouse leaving button associated with callback Button components display PhotoImage objects Button displays object indicated by image option

Changes appearance of button when mouse cursor rolls over it def pressedFancy( self ): showinfo( "Message", "You pressed: Fancy Button" ) def rolloverEnter( self, event ): event.widget.config( relief = GROOVE ) def rolloverLeave( self, event ): event.widget.config( relief = RAISED ) def main(): PlainAndFancy().mainloop() if __name__ == "__main__": main() Changes appearance of button when mouse cursor rolls over it Button’s relief specifies how it appears in relation to other components Sets Button component’s relief to GROOVE fig10_07.py Changes appearance of button when mouse cursor leaves it Sets Button component’s relief to RAISED <Enter> event <Leave> event trigger pressed event showinfo(.., ..)

Checkbutton and Radiobutton Components Checkbox Small white square Either blank or contains a checkmark Descriptive text referred to as checkbox label Any number of boxes selected at a time Created by class Checkbutton Radio button Mutually excusive options – only one radio button selected at a time Created by class Radiobutton Both have on/off or True/False values and two states – selected and not selected (deselected)

Attribute font specifies style of text in Entry component # Fig. 10.8: fig10_08.py # Checkbuttons demonstration. from tkinter import * class CheckFont( Frame ): """An area of text with Checkbutton controlled font""" def __init__( self ): """Create an Entry and two Checkbuttons""" Frame.__init__( self ) self.pack( expand = YES, fill = BOTH ) self.master.title( "Checkbutton Demo" ) self.frame1 = Frame( self ) self.frame1.pack() self.text = Entry( self.frame1, width = 40, font = "Arial 10" ) self.text.insert( INSERT, "Watch the font style change" ) self.text.pack( padx = 5, pady = 5 ) self.frame2 = Frame( self ) self.frame2.pack() # create boolean variable self.boldOn = BooleanVar() # create "Bold" checkbutton self.checkBold = Checkbutton( self.frame2, text = "Bold", variable = self.boldOn, command = self.changeFont ) self.checkBold.pack( side = LEFT, padx = 5, pady = 5 ) fig10_08.py Attribute font specifies style of text in Entry component Subclass of Tkinter class Variable Container object for integer with value 0 (false) or 1 (true) Create Checkbutton with label specified by text value variable requires an object of Tkinter Variable or its subclasses BooleanVar boldOn stores state of Checkbutton checkBold Binds selection of Checkbutton to callback

Create another BooleanVar object for the second Checkbutton # create boolean variable self.italicOn = BooleanVar() # create "Italic" checkbutton self.checkItalic = Checkbutton( self.frame2, text = "Italic", variable = self.italicOn, command = self.changeFont ) self.checkItalic.pack( side = LEFT, padx = 5, pady = 5 ) def changeFont( self ): """Change the font based on selected Checkbuttons""" desiredFont = "Arial 10" if self.boldOn.get(): desiredFont += " bold" if self.italicOn.get(): desiredFont += " italic" self.text.config( font = desiredFont ) def main(): CheckFont().mainloop() if __name__ == "__main__": main() Create another BooleanVar object for the second Checkbutton fig10_08.py Returns value of specified Variable object Set font of Entry component text to style specified by checkbox states

fig10_08.py

Subclass of Variable that stores strings # Fig. 10.9: fig10_09.py # Radiobuttons demonstration. from tkinter import * class RadioFont( Frame ): """An area of text with Radiobutton controlled font""" def __init__( self ): """Create an Entry and four Radiobuttons""" Frame.__init__( self ) self.pack( expand = YES, fill = BOTH ) self.master.title( "Radiobutton Demo" ) self.frame1 = Frame( self ) self.frame1.pack() self.text = Entry( self.frame1, width = 40,font = "Arial 10" ) self.text.insert( INSERT, "Watch the font style change" ) self.text.pack( padx = 5, pady = 5 ) self.frame2 = Frame( self ) self.frame2.pack() fontSelections = [ "Plain", "Bold", "Italic", "Bold/Italic" ] self.chosenFont = StringVar() # initial selection self.chosenFont.set( fontSelections[ 0 ] ) fig10_09.py Subclass of Variable that stores strings A group of Radiobuttons modifies the same variable Set StringVar chosenFont to default style Plain

Create Radiobutton with label specified by text value # create group of Radiobutton components with same variable for style in fontSelections: aButton = Radiobutton( self.frame2, text = style, variable = self.chosenFont, value = style, command = self.changeFont ) aButton.pack( side = LEFT, padx = 5, pady = 5 ) def changeFont( self ): """Change the font based on selected Radiobutton""" desiredFont = "Arial 10" if self.chosenFont.get() == "Bold": desiredFont += " bold" elif self.chosenFont.get() == "Italic": desiredFont += " italic" elif self.chosenFont.get() == "Bold/Italic": desiredFont += " bold italic" self.text.config( font = desiredFont ) def main(): RadioFont().mainloop() if __name__ == "__main__": main() Create Radiobutton with label specified by text value Each Radiobutton in a group has same variable value fig10_09.py Option value specifies Radiobutton’s name Returns value of specified Variable object

Mouse Event Handling Events that occur as a result of user interaction with a mouse tkinter events described by strings following pattern <modifier-type-detail> type specifies kind of event (e.g. Button and Return) Button here is mouse button! Specific mouse button is example of a detail Prefix Double is example of a modifier

Mouse Event Handling (cont'd)

Text displayed in component associated with StringVar object # Fig. 10.11: fig10_11.py # Mouse events example. from tkinter import * class MouseLocation( Frame ): """Demonstrate binding mouse events""" def __init__( self ): """Create a Label, pack it and bind mouse events""" Frame.__init__( self ) self.pack( expand = YES, fill = BOTH ) self.master.title( "Demonstrating Mouse Events" ) self.master.geometry( "275x100" ) self.mousePosition = StringVar() # displays mouse position self.mousePosition.set( "Mouse outside window" ) self.positionLabel = Label( self, textvariable = self.mousePosition ) self.positionLabel.pack( side = BOTTOM ) # bind mouse events to window self.bind( "<Button-1>", self.buttonPressed ) self.bind( "<ButtonRelease-1>", self.buttonReleased ) self.bind( "<Enter>", self.enteredWindow ) self.bind( "<Leave>", self.exitedWindow ) self.bind( "<B1-Motion>", self.mouseDragged ) def buttonPressed( self, event ): """Display coordinates of button press""" self.mousePosition.set( "Pressed at [ " + str( event.x ) + ", " + str( event.y ) + " ]" ) fig10_11.py Text displayed in component associated with StringVar object Associate clicking first mouse button with callback buttonPressed Associate releasing first mouse button with callback buttonReleased Associate mouse cursor entering window with callback enteredWindow Associate mouse cursor leaving window with callback exitedWindow Associate holding first button and dragging mouse with mouseDragged Convert x-coordinate of mouse click to string

Changes the text displayed by the Label def buttonReleased( self, event ): """Display coordinates of button release""" self.mousePosition.set( "Released at [ " + str( event.x ) + ", " + str( event.y ) + " ]" ) def enteredWindow( self, event ): """Display message that mouse has entered window""" self.mousePosition.set( "Mouse in window" ) def exitedWindow( self, event ): """Display message that mouse has left window""" self.mousePosition.set( "Mouse outside window" ) def mouseDragged( self, event ): """Display coordinates of mouse being moved""" self.mousePosition.set( "Dragged at [ " + str( event.x ) + def main(): MouseLocation().mainloop() if __name__ == "__main__": main() fig10_11.py Changes the text displayed by the Label

Keyboard Event Handling Keyboard events generated when users press and release keys