Interactive Computer Systems 2021
Tutorial 02
The tutorial program for Interactive Computer Systems is intended to explore both practical
content around the development of Android apps using Kotlin as well as discussing some of
the theory concepts discussed in lectures. It is expected that the first part of each tutorial will
involve some discussion and participatory work, with the later part of each tutorial being free
time to complete the practical components. In weeks three and six you will be expected (before
the end of the session) to show your completed apps to the tutor. They will need to be marked
off and will not be able to be marked at a later date or outside of your registered tutorial.
Tutorial Discussion Questions
10 minutes - discusison in small groups* and with class**
1. *Find another person in your tute group to work with. Given the following software
system, draft a brief persona (name, tag line, age, gender, education level, 1 grokkability
item, and a personality cue (positive or negative)).
Wayfinding app running on a mobile device that gives a user the ability to find the most
direct path between two points within a complex interconnected building system (multiple
floors and multiple buildings). The app will allow a user to specify their level of accessibility,
allowing the app to subsequently tailor a path that mitigates or removes impediments based
on the users mobility difficulties. Paths are presented as a birds eye maps, sequences of
still shots of key locations along a path, or a stitched together sequence of videos of someone
walking along the path.
Write your brief persona on a piece of paper and include the FANs and names of each
partner on the sheet. Hand the sheet up to the tutor before the end of the session.
Practical Skills
As mentioned the tutorials will also involve practical work for you to complete. You will begin
in the first three weeks of tutorials getting familiar with Java Swing. If you are new to Java
then you will need to review material and get up to speed - this topic will NOT be teaching
the basics of Java as acquired in CP1. This practical content will initially guide you through
specific tasks and will then ask you to complete unguided exercises. Your work will be assessed
by a demonstrator and a grade awarded for the material covered in tutorials. By the end of the
first three weeks of tutorials you will have enough knowledge of Swing components to construct
a functional application to address the requirements of the Academic Support System.
Checkpoint 04
Review Tutorial 2 Slides.
For the first task this week you are to write a program that displays a numberic keypad that
might appear on a phone. Above the keypad buttons, show a label that displays the numbers
as they are picked. To the right of the keypad buttons, include another button to clear the
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
1
Interactive Computer Systems 2021
display. Use a border layout to manage the overall presentation, and a grid layout to manage
the keypad buttons. Put a border around the keypad buttons to group them visually, and a
border around the display.
Start by checking out the project Tutorial02Task01. Inspect the classes that have been provided,
as with the first tutorial you will see that the Phone class is complete, you will need to finish
the implementation of the PhonePanel class.
Open the PhonePanel class. You will see that we again have the error with the class declaration
and the extends statement. If you hover over JPanel (indicated as an error by the red text) it
will give you an option to import class - click this (or use the keyboard shortcut presented). A
new import statement for javax.swing.* should have been added to your code.
Define an instance variable of type JLabel named displayLabel, this will act as our screen to
display the phone number we enter for our phone.
We want to define a clear layout for the phone screen so to do this we will use a panel structure
and will define two panels - declare instance variables of type JPanel named keyPanel and
clearPanel.
To help with the structure of our phone we will use a Border Layout style. Once defined we
can then “place” our components (panels) where we want based on the locations available to a
Border Layout. Set the layout of the PhonePanel to BorderLayout.
Now instantiate and define the displayLabel. It should be instatiated with a string that is
a single space character (e.g. " "), the background colour should be set to white, and it
should have a lowered Bevel border. To define the border style for our component invoke the
setBorder method of the displayLabel. This method accepts as an argument an object of
the border style type (e.g. BevelBorder) or for simple component embelishments you can use
the BorderFactory class).
Once you have defined these features add the displayLabel to the PhonePanel in the NORTH
section of BorderLayout.
Now we can define the panel that will hold our keys for our phone keyboard. Bind a newly
created JPanel to keyPanel, set a 4x3 GridLayout for keyPanel and set a simple black line
border (4px in thickness).
Because our buttons are going to perform the same action we are going to create a local button
that we will repurpose for each of the numbers and the clear button and will attach the same
listener to each button - differentiating the action based on the values associated with what the
action event source is defined as.
Declare a new JButton named button and while we are here we’ll also declare our listener for
the buttons:
KeyListener phoneBtnListener = new KeyListener();
When you add this line of code you will see that IntelliJ prompts you that there is an error.
Hover over KeyListener and select More Options - you can see a range of options presented
but we want to select Create inner class ‘KeyListener’. Amend the class declaration to
reference the ActionListener interface and create an empty actionPerformed method to avoid
errors.
Now we want to create and add the 12 buttons that make up our phone keypad, starting with
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
2
Interactive Computer Systems 2021
key 1. The final row of keys should be ‘*’, ‘0’, and ‘’. Follow these steps to create the
number 1 button:
1. Bind a new JButton to button - with "1" as the argument,
2. Use the setMnemonic method to associate the keyboard key 1 with this button,
3. Attach the phoneBtnListener to the button,
4. Add the button to the keyPanel.
After defining the first button, add the keyPanel to the PhonePanel using BorderLayout.CENTER
to locate the key pad appropriately. When you run your application it should look like the
following:
Now that you have set up the first button, repeat the process for the other buttons. Running
the application should result in the following:
After the code you have used to define the buttons and add them to the keyPanel you
should create a new JButton with a label of "Clear", a mnemonic of ‘C’ and attach the
phoneBtnListener to the button. You should also set up a tool tip for this button that
displays the message "Clear the display" when the user hovers their mouse over the button
- which results in:
Now change the preferred size of the PhonePanel so that it is 250x250.
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
3
Interactive Computer Systems 2021
Now you need to implement the functionality that executes with each press of a button. Since
we don’t have a unique identifyer for each button we need another way to determine which
button had been pressed - we will use the button label. To access the String of the button
label we need to cast the action event source to a JButton and then retrieve the text from the
button. In the actionPerformed method you need to create a new temporary JButton and then
bind a cast version of the action event, i.e.:
JButton source = (JButton)event.getSource();
Now that we have a button that contains the information associated with the button that
executed the actionPerformed method we can retrieve the label text with source.getText().
Define a selection statement where the condition checks if the button text is equal to ”Clear”,
if true then set the displayLabel to an empty string, otherwise append the text from the button
pressed to the existing string assigned to displayLabel. For example if the displayLabel currently
displays ”1234” and the user presses the number 9 button then displayLabel would then disply
”12349”.
Run your application and ensure it looks like the following and behaves as expected. Show
the demonstrator your source code and the application operation to have the work checked off.
This task is worth 3 marks for this week’s tutorial.
Next task over the page.
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
4
Interactive Computer Systems 2021
Checkpoint 05
File ColorOptions.java contains a program that will display a set of radio buttons that let the
user change the background colour of the GUI. The file ColorOptionsPanel.java contains the
skeleton of the panel for this program. Open the files and study the code that is already there.
You will note that in ColorOptionsPanel.java there is an array colour containing 5 colours
already defined. Your task is to add an array of radio buttons so that a click of a radio button
will cause the background of the panel to change to the corresponding colour in the colour array.
1. Define colorButton to be an array of NUM_COLORS objects of type JRadioButton.
2. Instantiate each colorButton with the appropriate colour as the label (for example, the
first button should be labeled ”Yellow”). The first button (corresponding to yellow) should
be on (true) initially.
3. Recall that radio buttons must be grouped and that the selection of a radio button
produces an action event. Hence you must have a ButtonGroup object and an ActionListener.
Note that the skeleton of an ActionListener named ColorListener is already provided. So,
you need to:
(a) Instantiate a ButtonGroup object and a ColorListener object. Comments in the code
indicate where to do this.
(b) Each radio button needs to be added to your ButtonGroup object, the background
color needs to be set (use white), your ColorListener needs to be added, and the
button needs to be added to the panel. All of these can be done using a single
for loop. So, add a for loop that goes through the radio buttons adding each to
your ButtonGroup object, setting the background of each to white, adding your
ColorListener to each, and adding each to the panel.
4. Fill in the body of the actionPerformed method. This method needs to go through the
buttons to determine which is selected and then set the background color accordingly. A
simple for loop can do this. Use the isSelected method to determine if a button is selected
(for example, if (colorButton[i].isSelected())....). Use the color array to set the
background colour.
5. Test your program!
Verify the program looks like the below image and behaves as expected.
Show your demonstrator your code and demonstrate the functionality of your application and
the output. This task is worth 4 marks for this week’s tutorial.
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
5
Interactive Computer Systems 2021
// ********************************************************************
// ColorOptions.java
//
// Uses an array of radio buttons to change the background colour.
// ********************************************************************
import javax.swing.*;
public class ColorOptions
{
// -----------------------------------------------------------
// Creates and presents the frame for the colour change panel.
// -----------------------------------------------------------
public static void main (String[] args)
{
JFrame colorFrame = new JFrame ("Colour Options");
colorFrame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
ColorOptionsPanel panel = new ColorOptionsPanel();
colorFrame.getContentPane().add (panel);
colorFrame.pack();
colorFrame.setVisible(true);
}
}
// ***********************************************************************
// ColorOptionsPanel.java
//
// Represents the user interface for the ColorOptions program that lets
// the user change background colour by selecting a radio button.
// ***********************************************************************
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class ColorOptionsPanel extends JPanel
{
private final int WIDTH = 350, HEIGHT = 100, FONT_SIZE = 20;
private final int NUM_COLORS = 5;
private Color [] color = new Color[NUM_COLORS];
private JLabel heading;
// ------------------------------------------------------------------
// Sets up a panel with a label at the top and a set of radio buttons
// that control the background colour of the panel.
// ------------------------------------------------------------------
public ColorOptionsPanel ()
{
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
6
Interactive Computer Systems 2021
// Set up heading and colors
heading = new JLabel ("Choose the background colour!");
heading.setFont (new Font ("Helvetica", Font.BOLD, FONT_SIZE));
color[0] = Color.yellow;
color[1] = Color.cyan;
color[2] = Color.red;
color[3] = Color.green;
color[4] = Color.magenta;
// Instantiate a ButtonGroup object and a ColorListener object
// Set up the panel
add (heading);
setBackground (Color.yellow);
setPreferredSize (new Dimension (WIDTH, HEIGHT));
// Group the radio buttons, add a ColorListener to each,
// set the background colour of each and add each to the panel.
}
// ***************************************************************
// Represents the listener for the radio buttons.
// ***************************************************************
private class ColorListener implements ActionListener
{
// -------------------------------------------------------
// Updates the background colour of the panel based on
// which radio button is selected.
// ------------------------------------------------------
public void actionPerformed (ActionEvent event)
{
}
}
}
Next task over the page.
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University
7
Interactive Computer Systems 2021
Checkpoint 06
Write a program that uses dialog boxes to obtain three integer values (one dialog box for each),
and displays the average and square of the sum of the values. Use another dialog box to see
whether the user wants to continue.
See below for the sequence of dialog boxes.
Once you have completed the functionality of the application show your demonstrator your
source and the execution of the application. This task is worth 3 marks for this week’s tutorial.
Interactive Computer Systems, Brett Wilkinson, 2021
College of Science and Engineering, Flinders University