Chapter 13 GUI Programming COSC 1436 Fall, 2016 Nov 16, 2016 Hong Sun Graphical User Interfaces • What is a GUI • –A graphical user interface allows the user to interact with the operating system and other programs using graphical elements such as icons, buttons, and dialog boxes. • Event-Driven • –GUI program must respond to the actions of the user. The user causes events to take place, such as the clicking of a button, and the program must respond to the events. • Using the tkinter Module The tkinter stands for “TK interface” Allows you to create simple GUI programs. Use import tkinter sentence Tkinter • The only GUI packaged with Python itself • Based on Tcl/Tk. Popular open-source scripting language/GUI widget set developed by John Ousterhout (90s) • Tk used in a wide variety of other languages (Perl, Ruby, PHP, etc.) • Cross-platform (Unix/Windows/MacOS) • It's small (~25 basic widgets) Basic tkinter Widgets a component of an interface Typical steps in using Tkinter • You create and configure widgets (labels, buttons, sliders, etc.) • You pack them (geometry) • You implement functions that respond to various GUI events (event handling) • You run an event loop The Big Picture • A GUI lives in at least one graphical window • Here it is.... an empty window (no widgets) • This window is known as the "root" window • Usually only one root window per application Root(Main) Window • To create a new root window: • Import tkinter main_window=tkinter.Tk() • To start running the GUI, start its loop main_window.mainloop() • mainloop() function runs like an infinite loop until you close the main window. • This isn't very exciting. Just a blank window Widgets Widget Configuration Widget Events Widget State • Example: Checkbox # Create IntVar objects to use with the Checkbuttons. cb_var1 = tkinter.IntVar() # Set the intVar objects to 0. cb_var1.set(0) cb1 = tkinter.Checkbutton(main_window, \ text=Debug mode', variable=cb_var1) cb1. get() ## get current state Widget State • Example: label • self.avg = tkinter.StringVar() # To update avg_label • self.avg_label = tkinter.Label(self.avg_frame, \ • textvariable=self.avg) self.average = (self.test1 + self.test2 + \ self.test3) / 3.0 # Update the avg_label widget by storing # the value of self.average in the StringVar # object referenced by avg. self.avg.set(self.average) Widgets as Building Blocks Packing • Widgets have to be placed somewhere within a window (geometry) • The pack() method does this • By default, pack places a widget centered at the top of a window Choosing Sides Anchoring Multiple Widgets • More than one widget can be packed self.label1 = tkinter.Label(self.top_frame, \ text='Winken') self.label2 = tkinter.Label(self.top_frame, \ text='Blinken') self.label1.pack(side='top') self.label2.pack(side=‘left') Frames • Frames are like a sub-window • A space to hold widgets • Used to group widgets together self.top_frame = tkinter.Frame(self.main_window) self.bottom_frame = tkinter.Frame(self.main_window) # put lable widgets on the top_frame self.label1 = tkinter.Label(self.top_frame, \ text='Winken') self.label2 = tkinter.Label(self.top_frame, \ text='Blinken') self.label3 = tkinter.Label(self.top_frame, \ text='Nod') Using Frames • Typically used to subdivide a window into logical components • Widgets are then placed into each frame • Frame is used as the "parent" window Frame Example Standard Dialogs • tkinter.messagebox.showinfo("FYI","I am about to destroy your computer") Entry Dialogs • Enter string, integers, floats self.kilo_entry = tkinter.Entry(self.top_frame, \ width=10) Lab Exercises • Lab and homework: • Programming Exercises: p562 #1,#3.