Python GUI

​Creating GUIs with Python

​What is a GUI?

A GUI (graphical user interface) is a system of interactive visual components for computer software. A GUI displays objects that convey information, and represent actions that can be taken by the user. The objects change color, size, or visibility when the user interacts with them.

​How do you pronounce GUI?

​GUI is often pronounced by saying each letter (G-U-I or gee-you-eye). It sometimes is also pronounced as "gooey."

Multiple Choice

What does GUI stand for?

• graphical user interface

• game under inspection

• graphing unit intercept

• graphic undergoing improvement

​GUI Example

​A GUI includes GUI objects, like icons, cursors, and buttons. These graphical elements are sometimes enhanced with sounds, or visual effects like transparency and drop shadows. Using these objects, a user can use the computer without having to know commands.

Multiple Choice

What word do we use to describe all of the grapical elements of an interactive computer program?

• Button

• Function

• GUI

• Python

​What are the elements of a GUI?

To make a GUI as user-friendly as possible, there are different elements and objects that the user use to interact with the software.

​What are the elements of a GUI?

Button - A graphical representation of a button that performs an action in a program when pressed

Dialog box - A type of window that displays additional information, and asks a user for input.

Icon - Small graphical representation of a program, feature, or file.

Menu - List of commands or choices offered to the user through the menu bar.

​

​What are the elements of a GUI?

Menu bar - Thin, horizontal bar containing the labels of menus.

Tab - Clickable area at the top of a window that shows another page or area.

Toolbar - Row of buttons, often near the top of an application window, that controls software functions.

Window - Rectangular section of the computer's display that shows the program currently being used.​

Multiple Choice

Which of the follow is NOT an element of a GUI?

• Button

• Window

• Dialog box

• If statement

​Importing Tkinter

To get started, we'll first need to start by importing Tkinter. We will start by creating a window then we will learn how to add widgets such as buttons, combo boxes, etc, then we will play with their properties​.

​

Importantly, the code used to create a GUI is a loop. All of your widgets, properties, and functions need to be inside the main loop. IT CANNOT BE BELOW THE MAIN LOOP LINE.​

​

​

​Importing Tkinter

​Adding this code...

​Looks like this...

Multiple Choice

The program we are writing is contained inside of a Loop. This means...

• We cannot add code below the main loop line

• The window will keep opening and closing

• We cannot add buttons

• Adding code anywhere is fine

​Adding Lables

To add a label to our previous example, we will create a label using the label class like this:

​We can set its position on the window by using the place command and x/y coordinates

Multiple Choice

Which code determines the placement of the label?

• lbl.place(x=0, y=0)

• text="Hello"

• fg="red"

• font=20

Multiple Choice

Which code determines what the label says?

• lbl.place(x=0, y=0)

• text="Click here"

• fg="red"

• font=20

​Adding Buttons

We can add a button to our code in a similar way that we added lables. The one difference is that buttons have a configure option called "command".​ Command is the function that runs when you click on the button. The command window.destroy closes the entire window.

Multiple Choice

Which line of code runs a function when the button is clicked?

• command =

• text =

• font =

• place(x=0, y=0)

​Coding a function for the button

We can ​create functions that run when you click a button. These functions will be important for making our buttons actually do things when clicked. These functions can change settings and appearances, get text from user input, and make our app interactive.

Multiple Select

What types of things can we code a function to do when a button is clicked?

(Select all that apply)

• Change app settings and appearances

• Get text from user input

• Make the app interactive

​Coding a function for the button

​These are two examples of possible functions you could create. Notice how both codes use the configure line of code to adjust settings when the button is clicked.

Multiple Choice

What type of code makes a button do things when it is clicked?

• Print statement

• Input

• Function

• List

​Coding a function for the button

​Using the configure line of code allows us to change the appearance and settings of various widgets in the app.

​

lbl.configure​ - adjusts the lable (lbl)

window.configure - adjusts the window​

Multiple Select

Which line or lines of code change the color of the window?

(Select all that apply)

• 47

• 48

• 51

• 52

• 53

Multiple Select

Which line or lines of code change what the label says?

(Select all that apply)

• 47

• 48

• 51

• 52

• 53

​Most apps and programs will require user input to be interactive. Sometimes a user will have to type in their name, address, or even a password.

​

​

​Getting User Input

​To allow user input, we will need a text entry field. When creating a text entry field you will need to specify the width and the placement.

​Once we have created a text input field, we can create a function that gets the user input and uses it.

​Getting User Input

​The txt.get( ) command gets the text that the user input

​

The txt.delete(0, END) command deletes all of the text in the text entry field​

​Getting User Input

​Putting it all together, we can create a password entry system

Multiple Choice

Which type of code can get the user input to use in your program?

• txt.get( )

• txt.delete( )

• txt.place( )

• text = "This is a label"

Multiple Choice

If you want to clear the text entry field and make it empty, what type of code should you utilize?

• txt.get( )

• txt.delete( )

• txt.place( )

• text = "This is a label"

Multiple Select

Which types of code did we use to create a password entry system?

(Select all that apply)

• If/Else

• Function

• List

• Variable

Multiple Choice

True or False

The attached image is an example of a GUI that you could create with all of the code mentioned previously.

• True

• False

Match

Match the following

• Requires a function to work when clicked

• Uses text from a text entry field

• Changes what a label looks like

• This can be used to keep track of clicks or other data

• Determines the positioning of widgets in your app

Button

txt.get( )

lbl.configure

Variable

place(x= ,y= )

• Button

• txt.get( )

• lbl.configure

• Variable

• place(x= ,y= )