Lesson 1

Hello World

Objectives

Importing the library

First, we need to import the appJar library

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

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

More widgets

We can add more labels, using the same command:

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:

Widget settings

Or, by changing individual widget settings:

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

Extensions:

Lesson 2

Hello World, again...

Objectives

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

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:

Global variables

Global variables allow the GUI to remember things

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

Extensions:

Lesson 3

Login form

Objectives

Getting started

Start out by creating a GUI with:

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

Entry fields

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

Buttons

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.

Interactivity

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:

Interactivity

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:

Dialogs

Then we can show either an infoBox or an errorBox:

Depending on if the password if right or wrong…

Dialogs

Privacy

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

Extensions:

Lesson 4

Light bulb moment?

Objectives

Getting started

Start out by creating a GUI with:

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

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.

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:

Make sure pupils have the two image files.

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

Extensions:

Lesson 5

Magic 8 ball

Objectives

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

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

Getting started

Do a little configuration:

And go...

Functions

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

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

Answers

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

Extensions:

Try to validate the question:

Lesson 6

Simple calculator

Objectives

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

Alignment

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.

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:

We're also going to format the label:

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.

Demo

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.

Demo

Error messsage

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

Extensions: