appJar

The ultimate tool for creating GUIs in Python

Lesson 1

Hello World

Objectives

  1. Know how to create an empty GUI
  2. Know how to add a widget, specifically a label, to a GUI
  3. Know how to change the appearance of widgets

Importing the library

First, we need to import the appJar library

Image

Create a GUI

Next, we create a gui – giving it a name (this will be shown in the title of the GUI)

And start it….

Image Image

What about the widgets?

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!

Adding widgets

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

Image Image

More widgets

We can add more labels, using the same command:

Image Image

As long as each one gets a unique title,

GUI settings

We can change the way the GUI looks.

By changing the GUI settings – this will modify all widgets in the GUI:

Image Image

Widget settings

Or, by changing individual widget settings:

Image Image

Note, we use the widget's title to indicate which widget to change.

Extensions:

  1. Change the FG, BG & font of all the labels
  2. Change the starting geometry
  3. Change the resizability
Image

Lesson 2

Hello World, again...

Objectives

  1. Know how to add a button and associated function
  2. Know how to change a label's contents
  3. Know how to use global variables to keep track of stuff

Adding a button

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

Image Image

Changing a widget

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:

Image Image

Global variables

Global variables allow the GUI to remember things

Define them outside of a function, then change them in a function:

Image Image

Extensions:

  1. Get the background colour to change every time the button is pressed….
  2. Do a countdown, close the window when it reaches 0
Image

Lesson 3

Login form

Objectives

  1. Know how to add an entry field, capture & process input
  2. Know how to add multiple buttons, and respond to them
  3. Know how to show dialogs

Getting started

Start out by creating a GUI with:

  • Title - Login
  • BG - green
  • Font – 16
  • Label – Login Window (white FG)
Image

Entry fields

Now, let’s add two entry fields to capture the username & password:

Image Image

Buttons

Finally, let’s add a function for button presses , and 3 buttons:

Image

Note, this takes an list of Strings for the button names, but they all use the same function.

Image

Interactivity

Now we simply need to code the function to respond to the buttons.

If the user presses CANCEL the GUI should close:

Image

If the user presses RESET, the entry fields should be cleared:

Image

Interactivity

Image

Validation

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:

Image

Dialogs

Then we can show either an infoBox or an errorBox:

Image

Depending on if the password if right or wrong…

Dialogs

Image Image

Privacy

Finally, you might want to change the password box to show stars instead of the password - replace the earlier addEntryLabel line with:

Image Image

Extensions:

  1. Add a status bar to show status…
  2. Set the focus to the correct widget each time
  3. Set functions on the entry boxes
Image

Lesson 4

Light bulb moment?

Objectives

  1. Know how to add images
  2. Practice handling button clicks

Getting started

Start out by creating a GUI with:

  • Title – Lights!
  • Two Buttons: On / Off
  • One Button: Exit
Image

Remember to use addButtons for the first row and addButton for the second. They can both use the same function.

Stopping the GUI

Code the function to stop the window if the Exit button is pressed.

Image

Adding images

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:

Image

Make sure pupils have the two image files.

Image

Changing images

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

Image Image

Extensions:

  1. Try enabling/disabling buttons at the right time…
Image

Lesson 5

Magic 8 ball

Objectives

  1. Practice adding an image
  2. Practice using dialogs for validation
  3. Practice arrays and randomization
  4. Know how to produce a sound

Getting started

The next project is a simple magic-8 ball. This has 4 rows of widgets:

  • A text entry
  • 2 buttons
  • An image
  • A Label

Getting started

So, we need to create a window (passing in a title, and also setting it so it cant be resized):

Image

Then, we add the 4 rows of widgets (this time giving separate functions for each button):

Image

Getting started

Do a little configuration:

Image

And go...

Image
Image

Functions

Each button will now need its own function, clear will do the same as last time:

Image

Answers & Sound

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).

Image

Answers

In order for the shake function to work, you’ll need an array of answers, and to have imported random.

Image

Extensions:

Try to validate the question:

  1. Should start with who/what/why/where/when/how
  2. Should have at least 3 spaces

Lesson 6

Simple calculator

Objectives

  1. Know how to add widgets to specific rows/columns and use specific column spans
  2. Know how to give more formatting to labels
  3. Practice number validation and error handling
  4. Practice mathematical operators

Getting started

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

Getting Started

Image

Alignment

The row and column are simply passed as parameters after the name of the items:

Image

We finish by putting focus in the first entry field, ready to type.

Formatting

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:

Image

We're also going to format the label:

Image

Buttons

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.

Image

Demo

The program will display the result of all four basic calculations

Image

It will also use a dialog to show the answers, if the user clicks the button.

Image

Demo

Image

Error messsage

Finally it will show an error message if the numbers are invalid.

Image

Extensions:

  1. Configure a function on first entry box: when enter is pressed – focus moves to the second entry box
  2. Configure a function on second entry box: when enter is pressed – the form is submitted

About

This slideset was created to accompany and support the Python GUI library available at appJar.info