Graphical User Interface (GUI) Programming Joan Boone - PowerPoint PPT Presentation

INLS 560 Programming for Information Professionals Graphical User Interface (GUI) Programming Joan Boone jpboone@email.unc.edu Summer 2020 Slide 1

Topics Part 1 ● Graphical User Interface overview ● Example: Frame demo Part 2 ● Example: Kilometers to Miles Converter Part 3 ● Color, fonts, padding ● Radio buttons ● Layout management Slide 2

Various Python User Interfaces Command line interface Python tkinter PyCharm Run Window Slide 3

Graphical User Interfaces (GUIs) ● Interfaces that allow users to interact with applications using graphical elements (widgets) such as buttons, text fields, and menus. ● Many similarities between GUI elements and their behavior for an application program, and the appearance and behavior of a web page – GUI design and web design both require widgets, layout management, and event handling – Both are developed using languages ● GUI: programming languages (Python, Java, C, etc.) ● Web: HTML, CSS, JavaScript Slide 4

General GUI Concepts Widgets ● All graphical elements in an application window are widgets ● All widgets are part of a window hierarchy. ● Most are considered 'user controls' – button, checkbutton, radiobutton, listbox – label, entry, text, scale, scrollbar – frame, menu, menubutton Layout (or geometry) management ● Determines where to place widgets in a window or frame Event handling ● Respond to user actions (button click, keystrokes) associated with a widget ● Define a callback function to handle the event Slide 5

GUI Frameworks and Toolkits ● Generally, all languages have built-in support for GUIs ● There are many 3 rd party frameworks and toolkits, e.g., GUI Programming in Python, but there is much variation in platform support and maintenance. ● We'll be using the tkinter module because it is included with the Python interpreter, and it's a de facto standard. – tkinter (“Tk interface”) is a standard Python interface to the Tk GUI Toolkit, a cross-platform widget toolkit ● References – Python documentation: tkinter – Python interface to Tcl/Tk – TkDocs has a useful tutorial with good widget descriptions – Python Course: Tkinter Tutorial Slide 6

Frequently Used Widgets Frame Label Labels show static Frames are containers for other text (or images), usually to identify widgets that organize and simplify layout another element or display results Entry Button Buttons are 'controls' that allow users to perform some action, for example, calculate a result, save a file, or Entry widget allows the user quit the application to enter a single line of input as text Source: TkDocs Slide 7

A few more Widgets Radiobutton Combobox Radiobuttons allow Combobox one selection among allows one several mutually selection from exclusive options a list of options Text Checkbutton Checkbuttons allow multiple selections among mutually exclusive options Text widget supports the input and display of multiple lines of text Source: TkDocs Slide 8

Example: Frame Demo frame_demo.py Slide 9

import tkinter Frame class defines the attributes and methods class MyGUI: for an object. Every class has an init def __init__(self): method that initializes the object. Demo # Create the main window widget. self.main_window = tkinter.Tk() # Create two frames, one for the top of the window, and one for the bottom. # Both frames are contained in the self.main_window self.top_frame = tkinter.Frame(self.main_window) self is a variable that self.bottom_frame = tkinter.Frame(self.main_window) refers to the object # Create three Label widgets that are contained in 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') # Packing tells tkinter how to layout the widgets. # If packing is not specified, the widgets are not displayed # Pack the labels that are in the top frame. # Use the side='top' argument to stack vertically self.label1.pack(side='top') self.label2.pack(side='top') self.label3.pack(side='top') # Create three Label widgets for the bottom frame. self.label4 = tkinter.Label(self.bottom_frame, text='Winken') self.label5 = tkinter.Label(self.bottom_frame, text='Blinken') self.label6 = tkinter.Label(self.bottom_frame, text='Nod') # Pack the labels that are in the bottom frame. # Use the side='left' argument to arrange horizontally . self.label4.pack(side='left') self.label5.pack(side='left') self.label6.pack(side='left') # Yes, we have to pack the frames too! Creates an object from the MyGUI class self.top_frame.pack() definition. self.bottom_frame.pack() When MyGUI() is called, the init method # Enter the tkinter main loop. tkinter.mainloop() for the class is executed to create the object # Create an instance (object) of the MyGUI class. frame_demo.py my_gui = MyGUI() Slide 10

Topics Part 1 ● Graphical User Interface overview ● Example: Frame demo Part 2 ● Example: Kilometers to Miles Converter Part 3 ● Color, fonts, padding ● Radio buttons ● Layout management Slide 11

Example: Kilometers to Miles Converter Initial version: uses a separate Better version: uses a Label widget message box to display the result to display the result in the window kilo_converter.py kilo_converter2.py Slide 12

Kilometers to Miles Converter main_window kilo_entry top_frame miles_label mid_frame bottom_frame prompt_label descr_label calc_button quit_button kilo_converter2.py Slide 13

Kms to Miles Converter: pseudocode import tkinter class KiloConverterGUI: def __init__(self): # Create the main window. self.main_window = tkinter.Tk() # Create three frames to group widgets # Create the widgets for the top frame and pack them # Create the widgets for the middle frame and pack them # Create the button widgets for the bottom frame and pack them # Pack the frames. tkinter.mainloop() # Enter the tkinter main loop. # The convert method is called when Convert button is clicked def convert(self): # Convert kilometers to miles # Create an instance of the KiloConverterGUI class. kilo_conv = KiloConverterGUI() kilo_converter2.py Slide 14

Create frames and widgets, then pack them # Create 3 frames to group widgets. self.top_frame = tkinter.Frame() self.mid_frame = tkinter.Frame() self.bottom_frame = tkinter.Frame() # Create the widgets and add to the top frame. self.prompt_label = tkinter.Label(self.top_frame, text='Enter a distance in kilometers:') self.kilo_entry = tkinter.Entry(self.top_frame, width=10) The pack method determines where # Pack the top frame's widgets. a widget should be positioned and self.prompt_label.pack(side='left') makes the widget visible when the self.kilo_entry.pack(side='left') window is displayed. kilo_converter2.py Slide 15

Create widgets for the middle frame that displays the result # Create the widgets for the middle frame. self.descr_label = tkinter.Label(self.mid_frame, text='Converted to miles:') # Create a StringVar object to associate with an output label. self.value = tkinter.StringVar() # Create a label and associate it with the StringVar object. # Any value stored in the StringVar object will automatically # be displayed in the label. self.miles_label = tkinter.Label(self.mid_frame, textvariable=self.value) # Pack the middle frame's widgets. self.descr_label.pack(side='left') self.miles_label.pack(side='left') The miles_label is initially an empty placeholder label to be filled in with the converted value that will be assigned to self.value . descr_label miles_label kilo_converter2.py Slide 16

Create buttons for the bottom frame # Create the button widgets for the bottom frame. self.convert_button = tkinter.Button(self.bottom_frame, text='Convert', command=self.convert) self.quit_button = tkinter.Button(self.bottom_frame, text='Quit', command=self.main_window.destroy) # Pack the buttons. self.convert_button.pack(side='left') When the Convert button is self.quit_button.pack(side='left') clicked, the convert function is called def convert(self): # Get the kilometer value entered # in the kilo_entry widget. kilo = float(self.kilo_entry.get()) # Convert kilometers to miles. miles = format(kilo * 0.6214, '.2f') # Store miles in StringVar object. # This automatically updates # the miles_label widget. self.value.set(miles) kilo_converter2.py Slide 17

Setting Window Title and Size Replace the default window title ('tk') self.main_window.title("Kilometer Converter") Modify the default window dimensions self.main_window.geometry('400x150') Slide 18

Exercise : Add Miles to Kms Conversion Update kilo_converter2.py to also convert from miles to kilometers Add another button to handle the additional conversion ● Add a new function to convert miles to kilometers (kms = miles / 0.6214) ● Replace the label to include a description of the conversion type ● Initial display Kms to Miles Miles to Kms Slide 19

Topics Part 1 ● Graphical User Interface overview ● Example: Frame demo Part 2 ● Example: Kilometers to Miles Converter Part 3 ● Color, fonts, padding ● Radio buttons ● Layout management Slide 20