1. Whatcha doin'? Aims: Begin to create GUI applications. Objectives:
All: Understand what a GUI is.
Most: Make a simple GUI application.
Some: Feel confident in experimenting with GUI features.

2. Graphical User Interface
All of the programs we have written so far have been console applications.
We have only interacted with them using the keyboard.
In this session, we are going to look at how we can make a GUI program.
We will be able to interact with it using the mouse.
This is not the one we are doing today.
Just an example ...

3. Click Counter
The first thing we are going to do is make a simple click counter.
This will help us learn the basics.
After that we can try something a bit more interesting.
We need to import tkinter - this is the module with the GUI building stuff.
Then we make a function to change the text of the button.
We simply set the button's text field to the value of the current text field plus one.

4. Some of this may seem a bit odd.
Just try it for now ...
We are making a Tk object called root.
It has a title and a size.
Within that object, we make a frame.
This allows the things we add next to be displayed.
We make a label and a button.
They have text associated with them
The padx and pady bits add a bit of vertical and horizontal padding.
This means that if the button is clicked, the click function gets called.
Important: – don't put brackets after the function name as you would normally!

5. You may wonder why some of the words we have been using in this program start with capital letters:Tk
Frame
Label
Button
Also, you may have noticed that we passed in “root” as an argument when we made the “app” and then passed “app” when we made the label and the button.
Well, these are features of Object Oriented Programming.
I don't plan to go into that in detail now, but once you get used to using tkinter, you'll find it quite straightforward.
Now we are going to use our skills to make an app based on
the “Magic 8-Ball”.

6. If you have ever used a “Magic 8-Ball”, you'll know that you are supposed to ask a yes or no question.
The ball then replies with one of the following twenty replies:
It's a good idea to type these into a new Python file called eight_ball.py now.
If you want to save yourself some typing, you can find the answers on wikipedia.

7. You have probably realised already that the “Magic 8-Ball” is not magic.
It's just a 20-sided die with a different answer on each face.
Let's get started on the rest of the program ...
This is what to put just above the answers that you have already typed in.

8. Now we are going to set up the GUI.
Hopefully, this is familiar enough from our click counter.
We are just setting up the size and title of the window.
Note: You may want to play with the dimensions a bit to get it to look nice on your system.

9. First we set up a label.
The “columnspan” attribute means that the label can go across several columns. This helps us to set things out neatly.
The ask_box is where the user enters text. We set it to be 30 characters wide.
We use focus_force() so that there's no need to click in the text box when the program is started. It's automatically active.
We then make the button that will shake the 8 Ball. By choosing it to be placed in column 1, it will appear to the right of the left sides of the other elements.

10. Now we are going to add an image.
The tkinter module does not accept all types of images.
You can download the image I used here:
First we load the image into a variable using the PhotoImage() function.
Then we set the image attribute of our label to be that image.
The file “8ball.ppm” must be in the same folder as the program.

11. Now we set up the display box
Now we set up the display box. We make it thirty characters wide and three high.
Then we enable word-wrap.
We set its status as “DISABLED” because we don't want the user to be able to type in this box.
Finally, we set the mainloop running.
Now we just need to add the two functions our program relies on – submit() and display(). These go above all the GUI bits, right underneath the list of answers.

12. But first ...
In the program, we are going to use a new function from the random module.
As you can see, choice() is just an easier way to access an element at a random position in an array.

13. Now for those functions.
This is the only bit of error handling I have built in so far.
If the user presses the button without typing anything, the 8 Ball refuses to give an answer.
The get() function gives us whatever has been entered in the text entry box.
If there was a question, we use choice() to pick a random answer to send to display().

14. This is the display() function. First it clears the ask box.
Next, it unlocks the text display box, so that we modify it.
Then it deletes anything that might have been in there.
Finally, it writes the new text into the box and locks it again.
And that is it!

15. Something that may help you with the tasks ...
To find the last letter in a string (or the last element in a list) use index -1.
There's also a handy string method called endswith() ...

16. Task
Once you have tested the 8-Ball program, I'd like you to make some modifications. The new 8-Ball should not answer:
-> questions that do not end with a question mark.
-> questions that contain only numbers.
-> one-word questions.
Extension:
If you finish that, why not make a little app of your own?
Perhaps a GUI version of the Caesar Cipher.