1 Computer Science of Graphics and Games MONT 105S, Spring 2009 Session 20 Graphical User Interface (GUI)

2 Graphical User Interface (GUI) The Graphical User Interface (GUI) allows the user to interact with a program using buttons, text boxes, etc. We will use a library of Python classes, Tkinter, to generate the elements of the GUI. GUI classes: FrameHolds other GUI elements LabelDisplays non-editable text ButtonPerforms an action when the user clicks it. EntryAccepts and displays one line of text. TextAccepts and displays multiple lines of text. CheckbuttonAllows user to select options from a list. RadiobuttonAllows user to select a single option of several

3 Event Driven Programming GUI's use Event Driven Programming. The program executes an event loop. The loop continually checks for the occurrence of an event. If an event occurs, the program executes the event handler. It then returns to the event loop to wait for another event.

4 The root window We must have a window to display the GUI. This is called the root window. Example: from Tkinter import *#Import classes root = Tk( )#create the root window root.title("Simple GUI")#Specify title bar text root.geometry("300x150")#Specify width and height root.mainloop( )#run the event loop

5 Using a Frame and Labels A frame contains all the other GUI elements. It's master (the thing that contains it) is the root window. app = Frame(root)#Create the frame with root as master app.grid( )#Make the frame visible A label is text that cannot be edited by the user. lbl = Label(app, text = "I'm a label")#Create a label in the frame lbl.grid( )#Make it visible

6 Using Buttons Creating a button: bttn1 = Button(app, text = "I do nothing.")#Create a button bttn1.grid( )#Make it visible Specifying a command: def button_print( ):#Event handler print "The button has been clicked!"... bttn2 = Button(app, text = "Click me!")#Create button bttn2["command"] = button_print#Bind function bttn2.grid( )#Show button

7 Adding Text Entry Field Writing to an entry box: def button_print( ): global my_entry#the name of the entry field message = "The button was clicked." my_entry.delete(0, END)#Clear the entry field my_entry.insert(0, message) #insert the message... my_entry = Entry(app, width = 35)#width parameter is optional my_entry.grid( )

8 Getting information from an Entry field Use the get( ) function to retrieve whatever's typed in the text field: def button_print( ): global my_entry msg = my_entry.get( )#Get input from user from entry field if msg == "secret": message = "You guessed the password!" else: message = "Try again." my_entry.delete(0, END) my_entry.insert(0, message)... my_entry = Entry(app, width = 35) my_entry.grid( )

9 Using a Text box A text box is similar to an entry field: def button_print( ): global my_entry global txtBox msg = my_entry.get( )#Get input from user from entry field if msg == "secret": message = "You guessed the password!" else: message = "Try again." txtBox.delete(0.0, END)#Need to specify row and column txtBox.insert(0.0, message)... txtBox = Text(app, width = 35, height = 5, wrap = WORD) txtBox.grid( )