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
Slide 1
Joan Boone
jpboone@email.unc.edu
Summer 2020
Slide 2
Slide 3
Command line interface PyCharm Run Window Python tkinter
Slide 4
– GUI design and web design both require widgets, layout
management, and event handling
– Both are developed using languages
Slide 5
– button, checkbutton, radiobutton, listbox – label, entry, text, scale, scrollbar – frame, menu, menubutton
with a widget
Slide 6
GUI Programming in Python, but there is much variation in platform support and maintenance.
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
– Python documentation: tkinter – Python interface to Tcl/Tk – TkDocs has a useful tutorial with good widget descriptions – Python Course: Tkinter Tutorial
Slide 7
Frame Button Label Entry
Source: TkDocs
Frames are containers for other widgets that organize and simplify layout Labels show static text (or images), usually to identify another element
Buttons are 'controls' that allow users to perform some action, for example, calculate a result, save a file, or quit the application Entry widget allows the user to enter a single line of input as text
Slide 8
Radiobutton
Source: TkDocs
Checkbutton Combobox Text
Radiobuttons allow
several mutually exclusive options Checkbuttons allow multiple selections among mutually exclusive options Combobox allows one selection from a list of options Text widget supports the input and display of multiple lines of text
Slide 9
frame_demo.py
Slide 10
import tkinter class MyGUI: def __init__(self):
# 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.bottom_frame = tkinter.Frame(self.main_window) # 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! self.top_frame.pack() self.bottom_frame.pack() # Enter the tkinter main loop. tkinter.mainloop() # Create an instance (object) of the MyGUI class.
my_gui = MyGUI()
frame_demo.py self is a variable that refers to the object class defines the attributes and methods
for an object. Every class has an init method that initializes the object.
Creates an object from the MyGUI class definition. When MyGUI() is called, the init method for the class is executed to create the object
Slide 11
Slide 12
kilo_converter.py kilo_converter2.py
Better version: uses a Label widget to display the result in the window Initial version: uses a separate message box to display the result
Slide 13
kilo_converter2.py main_window top_frame mid_frame bottom_frame prompt_label kilo_entry descr_label miles_label calc_button quit_button
Slide 14
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 15
kilo_converter2.py # 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) # Pack the top frame's widgets. self.prompt_label.pack(side='left') self.kilo_entry.pack(side='left') The pack method determines where a widget should be positioned and makes the widget visible when the window is displayed.
Slide 16
kilo_converter2.py # 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
Slide 17
kilo_converter2.py # 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') self.quit_button.pack(side='left') 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) When the Convert button is clicked, the convert function is called
Slide 18
Replace the default window title ('tk') self.main_window.title("Kilometer Converter") Modify the default window dimensions self.main_window.geometry('400x150')
Slide 19
Update kilo_converter2.py to also convert from miles to kilometers
Initial display Miles to Kms Kms to Miles
Slide 20
Slide 21
Specifying colors, fonts, and padding is similar to how this is done in HTML and CSS for web development.
–
HTML color names can be used, and there is also a list of Tk colors
–
And optionally, by size (e.g., 8, 10, 12, 14) and style (normal, italic, bold)
–
padx adds space on the left and right, pady adds space above and below
Slide 22
Set the background color of the main window: self.main_window.configure(background='lightblue') Add some padding around the buttons when you pack them: self.km2mi_button.pack(side='left', padx=10, pady=10) Set the font for the prompt label when you create the Label: self.prompt_label = Tkinter.Label(self.top_frame,
text='Enter a distance:', font='Verdana 12')
Slide 23
button clicked, the function is called
Clicking a button changes the value of this variable to a predefined value associated with each RadioButton widget
Slide 24
self.radio_var = tkinter.IntVar() self.km2mi_radio = tkinter.Radiobutton(self.mid_frame, text='Kms to Miles', variable=self.radio_var, value=1, command=self.convert_km2mi) self.mi2km_radio = tkinter.Radiobutton(self.mid_frame, text='Miles to Kms', variable=self.radio_var, value=2, command=self.convert_mi2km) km2mi_converter_radio.py
Variable associated with all buttons Unique value associated with a button
Slide 25
Valid numeric input Invalid numeric input
Slide 26
Problem: Different widgets have different sizes and you want them placed in an organized and visually appealing way in the window
complex algorithm to determine how to make everything fit within the window constraints
Tkinter has 3 layout managers
relative terms. Have complete control, but more complex.
by row and column.
References
Slide 27
Pack Layout Manager
group other widgets
lay out widgets
Grid Layout Manager
group widgets
using row and column attributes
Slide 28
self.prompt_label = tkinter.Label(self.main_window, text='Enter a distance:', font='Verdana 12 italic', background=bg_color).grid(row=0, column=0, padx=10, pady=5)
How to specify the grid layout for the 'Enter a distance:' label
km2mi_converter_grid_layout.py