First, we need to import the appJar library
Next, we create a gui – giving it a name (this will be shown in the title of the GUI)
And start it….
Right now, this doesn’t look like much.
We can resize it, minimize, maximize, and close it.
But it doesn't actually do anything...
So, let’s add some stuff to it!
This must be done before we tell the GUI to start
So, let’s add a label:
It requires 2 parameters – a title, and some text to show.
Titles must be unique - they let us get/change widgets later
We can add more labels, using the same command:
As long as each one gets a unique title,
We can change the way the GUI looks.
By changing the GUI settings – this will modify all widgets in the GUI:
Or, by changing individual widget settings:
Note, we use the widget's title to indicate which widget to change.
Let's add a button to the last GUI
We need a function to call, when the button is pressed:
It must receive one parameter – the name of the button
When the button is pressed, the function will be called
Now that we have a working button, let’s get it to change something on the GUI, instead of printing to the terminal.
We can simply set the label’s text to be something new:
Global variables allow the GUI to remember things
Define them outside of a function, then change them in a function:
Start out by creating a GUI with:
Now, let’s add two entry fields to capture the username & password:
Finally, let’s add a function for button presses , and 3 buttons:
Note, this takes an list of Strings for the button names, but they all use the same function.
Now we simply need to code the function to respond to the buttons.
If the user presses CANCEL the GUI should close:
If the user presses RESET, the entry fields should be cleared:
Otherwise, if the user presses SUBMIT we need to check if the username/password are correct and show the relevant message. Use the following code to get the data from the entry fields:
Then we can show either an infoBox or an errorBox:
Depending on if the password if right or wrong…
Finally, you might want to change the password box to show stars instead of the password - replace the earlier addEntryLabel line with:
Start out by creating a GUI with:
Remember to use addButtons for the first row and addButton for the second. They can both use the same function.
Code the function to stop the window if the Exit button is pressed.
Now we’re going to add an image, the library can only handle PNGs and GIFs at the moment.
This needs to be done before the buttons:
Make sure pupils have the two image files.
The final step is to code the buttons to change the image. When the on button is pressed, the image should change to a lit bulb. When the off button is pressed it should revert back
The next project is a simple magic-8 ball. This has 4 rows of widgets:
So, we need to create a window (passing in a title, and also setting it so it cant be resized):
Then, we add the 4 rows of widgets (this time giving separate functions for each button):
Do a little configuration:
Each button will now need its own function, clear will do the same as last time:
Shake will check there is a question (show an error dialog if not) then pick a random answer to show in the label:
It can also play a sound – make sure you have the wav file (the library can only play wav files at the moment).
In order for the shake function to work, you’ll need an array of answers, and to have imported random.
Try to validate the question:
For the next program, we’re going to build a simple calculator. The user types in two numbers, and then clicks the button to get the answers….
The challenge this time is to have multiple widgets on one line. To achieve this, when we add a widget, we need to specify a row and column to put the widget in.
Looking at the layout, there are three rows, the top one has 4 widgets, the next row has one widget, and the bottom row has 3 widgets
The row and column are simply passed as parameters after the name of the items:
We finish by putting focus in the first entry field, ready to type.
For the label, we want it to stretch across all 4 columns, so we put it in the first column (0) and pass a third number which sets how many columns to fill:
We're also going to format the label:
Finally, we add the buttons. We’re going to add them as a block, and again tell them to span 4 columns in the second row.
The program will display the result of all four basic calculations
It will also use a dialog to show the answers, if the user clicks the button.
Finally it will show an error message if the numbers are invalid.
This slideset was created to accompany and support the Python GUI library available at appJar.info