Chapter 13 GUI Programming

COSC 1436 Summer, 2018 July 19, 2018 Dr. Zhang 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) • http://effbot.org/tkinterbook/ 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 • Code example: SimpleGUI.py 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 • Code Example: empty_window.py 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: Button button_demo.py

• 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 Code Example: checkbutton_demo.py 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 Packing • widget.pack( pack_options ) Here is the list of possible options − • expand: When set to true, widget expands to fill any space not otherwise used in widget's parent. • fill: Determines whether widget fills any extra space allocated to it by the packer, or keeps its own minimal dimensions: NONE (default), X (fill only horizontally), Y (fill only vertically), or BOTH (fill both horizontally and vertically). • side: Determines which side of the parent widget packs against: TOP (default), BOTTOM, LEFT, or RIGHT. 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 • Code example: frame_demo.py Frame Example Grid Geometry Manager

• The grid manager is the most flexible of the geometry managers in Tkinter. If you don’t want to learn how and when to use all three managers, you should at least make sure to learn this one. • The grid manager is especially convenient to use when designing dialog boxes. If you’re using the packer for that purpose today, you’ll be surprised how much easier it is to use the grid manager instead. Instead of using lots of extra frames to get the packing to work, you can in most cases simply pour all the widgets into a single container widget, and use the grid manager to get them all where you want them. (I tend to use two containers; one for the dialog body, and one for the button box at the bottom.) Grid Geometry Manager

• Using the grid manager is easy. Just create the widgets, and use the grid method to tell the manager in which row and column to place them. You don’t have to specify the size of the grid beforehand; the manager automatically determines that from the widgets in it. Label(master, text="First").grid(row=0) Label(master, text="Second").grid(row=1) e1 = Entry(master) e2 = Entry(master) e1.grid(row=0, column=1) e2.grid(row=1, column=1) 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) Variable Classes • Some widgets (like text entry widgets, radio buttons ,checkbutton and so on) can be connected directly to application variables by using special options: variable, textvariable, onvalue, offvalue, and value. This connection works both ways: • if the variable changes for any reason, the widget it's connected to will be updated to reflect the new value. These Tkinter control variables are used like regular Python variables to keep certain values. It's not possible to hand over a regular Python variable to a widget through a variable or textvariable option. The only kinds of variables for which this works are variables that are subclassed from a class called Variable, defined in the Tkinter module. Variable Classes • They are declared like this: • x = StringVar() # Holds a string; default value "" • x = IntVar() # Holds an integer; default value 0 • x = DoubleVar() # Holds a float; default value 0.0 • x = BooleanVar() # Holds a boolean, returns 0 for False and 1 for True • To read the current value of such a variable, call the method get(). The value of such a variable can be changed with the set() method. Lab Exercises

• http://www.python- course.eu/python_tkinter.php