GUI (Part 1) - tstorrnetnz/teaching2022 GitHub Wiki

How to think like a computer scientist (HTTLACS)

Otago Workbook L2

Otago Workbook L3

Learning Aim: Be able to make a simple GUI

What is a GUI?

A Graphical User Interface is how most people interact with a computer program. GUI's have buttons, check boxes, windows, menus etc. This is in contrast to terminal programs which use text in a terminal only.

A GUI interface in java

A java GUI made using the Swing Toolkit

A terminal program in Java

A terminal application running Speedtest.

The GUI in your program takes care of the user-interaction. The hidden (back end) of your program completes the logic, data and saving/loading aspects. This is called Event driven programming.

Event driven programming

Creating a GUI

There are two main ways to create a GUI:

  1. Hand-code the GUI, just like we have hand-coded everything in Replit so far.
  2. Use a special program, an Integrated Development Environment (IDE), that allows you to select, drag and drop GUI components e.g. windows, panels, buttons etc.

For both 1 and 2 above you need to hand-code the program logic - what happens when events are triggered, e.g. a button is pushed.

We are going to make a simple hand-coded GUIs (this week) as well as make GUIs using an IDE (next week).

Making a hand-coded GUI, however simple, requires a reasonable amount of code. Chapter 4 of the L3 Otago workbook covers hand-coding GUI's well. Replit can be used to code GUI's. However, there is a special 'trick' to getting them to work. This page describes how to create Java GUI's in Repl.

For you to do:

  • Work through Chapter 4 (pg 79 -114) of the Otago Workbook L3 , completing Tasks 1-11. Create a new repl for each task - and add to your Google Document. Note that this is a lot of work!
  • Do Task 14 on page 111 (the GUI times table tester)
  • Extension: Task 17 (phone survey) on pg 112

Chapter 4, Task 2

Task 2 - FlowLayout

Task 4 extension

Task 4 extension - some nice if/else || or in here!