Just Enough Python 7 - introductory GUI continued

If you completed the tutorials, so far, you have a basic knowledge of Python and are getting an idea of what a simple GUI is like.
Now we are going to expand on the gui and introduce another fundamental aspect of Python, functions. You have used built-in functions and functions from packages, but to build a working gui you need to be able to define your own.


We are going to make a gui that looks like the one above. It is a new version of the guessing game that we saw in a prevous tutorial. And the code looks like this

# gui program using guizero with text fields and a button

from guizero import App, Text, TextBox, PushButton

# Function definition
def makeAGuess():
    pass
   
# set up the app
app = App(title="Guessing game")

message = Text(app, text="Type a guess in the box below, a number from 1 to 10")

# A simple layout that positions a textBox
# where a guess will be entered...
guessBox = TextBox(app,"")

# adds a pushbutton to accept the guess...
button = PushButton(app, makeAGuess, text="Guess")

# and then puts another textBox to display the result
responseBox = TextBox(app,"")

app.display()
You should recognise some of it from the last program. I have taken out some the previous explanatory comments and added more for the new code.

We need to look at two things, here, how to define our own function (and why we want to do it) and the new elements of the gui.

Let's start with the gui, at the comment "set up the app". The next couple of lines are from the previous program. They create the gui and then create a message inside the main window.

Now, look at these lines...

# A simple layout that positions a textBox
# where a guess will be entered...
guessBox = TextBox(app,"")


 This is where the extra gui layout begins. We first create a TextBox and assign it to the variable guessBox (this will allow us to manipulate the TextBox later). The TextBox is given two parameters, the first is the name of the app (same as with message) that the TextBox should belong to. The second is a string that will be displayed in the box, which for the moment should be blank. This second parameter is an empty string, i.e. it is a proper string value but it contains no characters (this is called a null string).

This box will be used to enter the guess in our guessing game.

The next line adds a pushbutton to the window.

# adds a pushbutton to accept the guess... 
button = PushButton(app, makeAGuess, text="Guess") 

The format is similar to the text box except that there are three parameters not two. The first one is, as always the app to which it belongs and the last one is the string that will be displayed on the button. The second parameter is the name of a function. 

Now, you already know about functions, they do things, get a random number, print something on the screen , that sort of thing. And when we press a button on a GUI, it’s because we want to do something. Clicking a button invokes some sort of action and the action to be performed is defined by a function.

We have specified that the function is called makeAGuess, so when the button is clicked, the function makeAGuess will be invoked.

So now we have to jump back to the beginning of the program, just after the import stuff. After the comment, you'll see a function definition, it begins with the word def, then the name of the function (in this case makeAGuess) with a pair of braces attached, then a colon and this is followed by one or more lines of Python code that are indented. 

# Function definition 
def makeAGuess(): 
    pass 

The first thing to say is that the braces are there to enclose any parameters, the data that you can give to a function. In this case there are no parameters but the braces have to be there anyway. 

The second thing is that there isn't much happening in this function. Normally, there would be several lines of code in the definition ; in this case there is only one - pass. Guess what this does? That's right, absolutely nothing! Python gives us this statement, which does nothing, as a convenience. We don’t want to define the function properly, right now, because we are just concentrating on the gui. We will put the proper code in later. 

What we have here, is just the framework of our application. If you run it it will display the window with the text fields and the button. You can type in the text fields and click on the button and the gui works fine. That is a good start. Now we need to put in the logic of our guessing game. 

We'll do that in the next lesson 

I nearly forgot, the last part of the code.

# and then puts another textBox to display the result 
responseBox = TextBox(app,"") 

This creates another text box that we will use for feedback after a guess (whether it right or wrong). It’s very similar to the previous one.

Finally the last line starts the gui running as in our last program.




Comments

Popular posts from this blog

Just Enough Python

Learn to code with C

Introduction to Python by Andrew Ng