UTSA Graphical User Interface Worksheet

CSPG1205 – Introduction to Programming[Mini Project – 15 Marks]
Last Date of Submission: 22nd May 2023
Objective
: To enhance student’s problems solving skills, make
students to design a problem of their own, analyze with team and solve.
Outcome Coverage : 5, 7, 8
Group Size
: 2 or 3
Graduate Attributes : Creativity, Innovation, Critical Thinking, Analysis,
Problem Solving, Teamwork
Mini Project Specifications:
Design and implement a user interface using Python and tkinter module with
the following criteria:
The user Interface must include:
✓
✓
✓
✓
✓
✓
✓
At least 4 Entry widgets and one Text Widget.
Take a button to add the values entered in 4 Entry Widgets to a File.
Take a button to display the values from File to a Text Widget
Take a button to perform search operation.
Take a button to perform Delete / Modify (Any one operation of your choice).
Take a button to clear all the widgets and make them empty.
The Interface shall have your name and ID and current date and time.
Recommendations:
✓ Use Exceptions wherever required.
✓ Add other widgets such as Menu / Radio / Check ……
✓ Add one image to the Interface.
✓ Make your Interface a ‘Look and Feel’ Application.
✓ Show current date and time
Documents Required:
✓ A brief description of the Mini project
✓ a single Jupyter Notebook
Marks Distribution:
Implementation of given specifications
Implementation with beyond expectations
Viva / Questions
On Time Submissions with proper format
: 10 Marks
: 02 Marks
: 02 Marks
: 01 Mark
Topic 12
Graphical User
Interface
Graphical User Interface
A Graphical User Interface (GUI) is a type of
interface that allows the user to interact with an
electronic device through graphical icons, buttons
and widgets.
Some applications of GUI.
a. A
calculator
with
user
interface
and
functionalities.
b. Text editors and other coding app
c. Games like chess, sudoku and solitaire
d. Chrome, Firefox and other browsers
2
The Libraries
Python has several libraries that user can use to
compose a GUI application. The most famous ones
are the tkinter, WxPython, PyGTK, and PyQT.
This chapter will focus on Tkinter.
tkinter
Stands for tk interface
Python’s standard GUI framework
Simple and open source.
It comes preinstalled in Python3
3
Creating a Basic GUI
Steps in Creating a basic GUI app
1. Importing the module (tkinter)
2. Creating the main window (container)
3. Add any number of widgets to the main window
4. Apply the event trigger on widgets
Output:
where m is the name of the main window object
mainloop() – a method, which is an infinite loop to run the application,
and wait for an event to occur and process the event as long as the
window is not closed.
4
Tkinter GUI library
Tk provides widgets, top-level windows, and geometry
managers.
1. Widgets Button, Canvas, checkbutton,
combobox, label, frame, listbox, radiobutton, text,
menu, message, spinbox, notebook, progress bar,
entry, labelframe, menubutton, tk_optionMenu,
panedWindow, progressbar,
scale, scrollbar,
separator, sizegrip, treeview
2. Top-level
windows
–
tk_chooseColor,
tk_chooseDirectory, tk_dialog, tk_getOpenFile,
tk_getSaveFile, tk_messageBox, tk_popup, toplevel
3. Geometry managers – place, grid, pack
5
Geometry Managers
Three geometry manager classes
1. pack() method – organizes the widget in blocks
before placing in the parent widget.
2. grid() method – organized widgets in grid
(table-like structure) before placing in the parent
widget.
3. place() method – organizes the widgets by
placing them on specific positions directed by the
programmer.
6
Button Widget
a. Button – used to create command buttons.
General Syntax:
w = Button(master, option=value)
where master is the parameter used to represent parent window
Other options or properties of Button
bg, command, font, image, width, height, activebackground,
activeforeground
7
Canvas Widget
b. Canvas – used to draw pictures and other layouts.
General Syntax:
w = Canvas(master, option=value)
Example:
Other options or properties of Canvas
bg, bg, cursor, highlightcolor, width, height
8
CheckButton widget
c. CheckButton – to select any number of options
General Syntax:
w = CheckButton (master, option=value)
Example:
Other options or properties of CheckButton
title, activebackground, activeforeground, bg, command, font, image
9
Entry widget
d. Entry – used to input single line entry from the user. For
multiple line text input, use the Text widget.
General Syntax:
w = Entry (master, option=value)
Example:
Other options or properties of Entry
bd, bg, cursor, command, highlight color, width, height
10
Label widget
e. Label – display box where you can put any text or image.
General Syntax:
w = Label (master, option=value)
Example:
Other options or properties of Label
bd, bg, cursor, command, font, image, width, height
11
ListBox widget
f. ListBox – offer a list to the user
General Syntax:
w = ListBox (master, option=value)
Example:
Other options or properties of ListBox
highlightcolor, bg, bd, font, image, width, height
12
RadioButton widget
g. RadioButton – offer multi-choice option, but user has to
choose only one option
General Syntax:
w = RadioButton (master, option=value)
Other options or properties of RadioButton
activebackground, activeforeground, bg, command, font, image,
width, height
13
SpinBox widget
h. SpinBox – value can be input by selecting a fixed value of
numbers.
General Syntax:
w = SpinBox (master, option=value)
Other options or properties of SpinBox
activebackground, disabledbackground, bg, bd, cursor, command,
width, from_, to
14
Menu widget
i. Menu – used to create all kinds of menus
General Syntax:
w = Menu (master, option=value)
Other options or properties of Menu
activebackground, activeforeground, title, bg, command, font, image
15
Scale widget
j. Scale – used to provide a graphical slider that allows to select any value
from that scale.
General Syntax:
w = Scale (master, option=value)
Other options or properties of Scale
cursor, activebackground, bg, orient, from_, to, image, width
16
Text widget
k. Text – used to accept and display multi-line text.
General Syntax:
w = Text (master, option=value)
Other options or properties of Text
highlightcolor, insertbackground, bg, font, image,width, height
17
Other widgets
Note that all of the widgets have the same syntax:
variableName = NameOfWidget(ParentWindow,
option=value)
For other widgets like Frame, MenuButton, Message,
Scrollbar, and PannedWindow, you may have additional
reading at the tutorial link below:
https://www.geeksforgeeks.org/python-gui-tkinter/
18
Top Level Widget
• A Toplevel widget is used to create a window on top of all
other windows.
• The Toplevel widget is used to provide some extra information
to the user and also when our program deals with more than
one application.
Note : When you close the top-level window, the root or main window will still be
opened, but if you close the main window, the two forms will be closed.
19
Messagebox Widget
• used to display the message boxes in the python applications.
SYNTAX:
messagebox.Function_name(title, message [, options])
Function_Name:
• showinfo(): Show some relevant information to the user.
• showwarning(): Display the warning to the user.
• showerror(): Display the error message to the user.
• askquestion(): Ask question and user has to answered in yes
or no.
• askokcancel(): Confirm the user’s action regarding some
application activity.
• askyesno(): User can answer in yes or no for some action.
• askretrycancel(): Ask the user about doing a particular task
again or not.
20
Messagebox Widget
messagebox.Function_name(title, message [, options])
21
askopenfile() function
Used to directly open a file and read data from it.
22
asksaveasfile() function
Used to save user’s file.
23
Creating a simple GUI application
Example 1: Create a program that will allow user to enter his or her
name, and will display the name in a message box when the submit
button is clicked.
24
Creating simple GUI application
Example 2: Create a program that will allow user to read two numeric
inputs and will display it’s sum, difference, product and quotient. Use try
statement to handle the exceptions and display the exceptions in a
message box. Design your interface similar to the one below:
25
Solution to Example #2
Take note that this solution is
incomplete. It only solve adding two
numbers. Add more functions to solve
subtraction, multiplication and
division.
26
References
Romano, Fabrizio. Learn Python Programming : A Beginner’s Guide to Learning
the Fundamentals of Python Language to Write Efficient, High-Quality Code,
2nd Edition, Packt Publishing, Limited, 2018. ProQuest Ebook Central,
http://ebookcentral.proquest.com/lib/shctom/detail.action?docID=5446038.
Created from shctom on 2020-09-06 21:39:46.
Adithya Sharma (2019). Introduction to GUI With Tkinter in Python. Retrieved
from https://www.datacamp.com/community/tutorials/gui-tkinter-python
https://www.geeksforgeeks.org/python-gui-tkinter/?ref=lbp
27