Today

GUI’s and eventhandlers in java • GUI design in practice

• Swing vs AWT (Abstract windowing toolkit)
• Example application: Calculator
Martin Jagersand

Containers:
GUI practicalities

1. Drawing GUI components, buttons etc. • Frame

• Original java came with AWT – top level container (window)
– Has typical window components such as close buttons,
• New class library: Swing
possible scroll down menus etc
2. Connecting buttons, sliders etc to code. • Panel
– Eventhandlers – intermediate container
– Organizes contained components
• Atomic components
– Buttons, labels etc.
– Presents bits of info, allow interaction

1
 Comparison:
Example
AWT classes

frame = new JFrame(...);

button = new JButton(...);
label = new JLabel(...);
pane = new JPanel();
pane.add(button);
pane.add(label);
frame.getContentPane().add(pane,
BorderLayout.CENTER);

Layouts Layout examples

• Layouts arrange items by specifying the relative

locations in a pane.
• Why layouts? – Make interfaces flexible to
different windows, resizing etc.
• Alternative: use absolute positioning of each item
– Tedious for the programmer
– Inflexible for the user (can’t stretch window to see
more)

2
 Border layout Event handling
Container contentPane = getContentPane();
• How to connect graphics to action
//Use the content pane's default BorderLayout.
//contentPane.setLayout(new BorderLayout()); //unnecessary • Handled though interfaces “ActionListeners”

contentPane.add(new JButton("Button 1 (NORTH)"),

• Programmers implement and specialize these for
BorderLayout.NORTH); their application
contentPane.add(new JButton("2 (CENTER)"),
BorderLayout.CENTER);

Event handling Event handling example

public class Beeper ... implements ActionListener {

...
//where initialization occurs:
button.addActionListener(this);
...
public void actionPerformed(ActionEvent e) {
...//Make a beep sound...
}
}

• Source object: e.g. button

• Target object: programmed to react appropriately

3
 Event handling patterns: Event handling patterns 2
Reactor pattern Monitor pattern
• Single object: • Combined listener/handler monitors (and acts on)
1. Draws graphics what happens in source
2. Handles events.

Event handling patterns 3 Case study:

Delegator pattern Calculator GUI
• Listener uses services of other objects to respond • Was assignment 1 a couple of years ago…
to events.

4
 Design idea 1 Structure

• Use several nested panes for structurally different • Abstract into two classes:
components: 1. Extend Jframe to set up the window and menu bars
2. Extend Jpanel to set up and arrange the calculator
Jframe buttons and displays

Immediate results display

Command
history Alfa Numeric
display keypad keypad

JPanel
JFrame
Calculator panel
Class JavaCalcFrame extends Jframe class CalculatorPanel extends JPanel
//constructor for menu etc implements ActionListener, KeyListener
:
// misc events handling, e.g.:
• Implements reactive pattern.
addWindowListener(new WindowAdapter(){
public void windowClosing(WindowEvent e){
System.exit(0);
}
});
Example of anonymous
: class implementing listener
//Instantiate main panel
Container contentpane = getContentPane();
CalculatorPanel panel = new CalculatorPanel();
contentPane.add(panel);

5
 Hierarchy of panels Hierarchy of panels 2
class CalculatorPanel extends Jpanel //scroll capability
: JScrollPane scrollPane = new JScrollPane(numList);
setLayout(new BorderLayout()); scrollPane.setFont(f);
//Component and panel setup add(scrollPane, "West");
JPanel eastPanel = new JPanel(); scrollPane.addKeyListener(this); Add history
eastPanel.setLayout(new BorderLayout());
//display //button panels
window, alfa and
display = new JTextField(12); JPanel moreButs = new JPanel(); numeric buttons to
display.setHorizontalAlignment(JTextField.RIGHT); moreButs.setLayout(new GridLayout(4, 2));
display.setEditable(false); : intermediate pane
Color col = new Color(255,255,255); eastPanel.add(moreButs, "West");
display.setBackground(col); :
display.addKeyListener(this); centerpanel = new JPanel();
Font f = new Font("MonoSpaced", Font.BOLD, 10); centerpanel.setLayout(new GridLayout(4, 4));
display.setText("0"); eastPanel.add(centerpanel, "Center");
eastPanel.add(display, "North"); :
add(eastPanel, ("Center"));
Add intermediate pane

Adding atomic items Adding atomic items

private void addButton(Container c, String s) //button panels
JPanel moreButs = new JPanel();
{
moreButs.setLayout(new GridLayout(4, 2));
JButton b = new JButton(s); String moreButtons[] = {"C ", "CE", "M+", "M-", "MR", "MC", SQRT,

c.add(b); "%"};

b.addKeyListener(this);
Take care of event handling for (i = 0; i < 8; i++) {
addButton(moreButs, moreButtons[i]);
b.addActionListener(this); in same class }
eastPanel.add(moreButs, "West");
but = b;
}
(Reactive pattern)
centerpanel = new JPanel();
centerpanel.setLayout(new GridLayout(4, 4));

String buttons = "789/456x123-0.+=";

for (i = 0; i < buttons.length(); i++)
addButton(centerpanel, buttons.substring(i, i + 1));
centerpanel.setFont(f);
eastPanel.add(centerpanel, "Center");

6
 Eventhandlers Eventhandlers
Mouse events Key events
//mouse events //Event handlers
public void keyAction(KeyEvent e)
public void actionPerformed(ActionEvent evt)
{
{
char c = e.getKeyChar();
Required in interface //handy substitutions
st = evt.getActionCommand(); if (c == '*') c = 'x';
doAction(st); else if (c == 'p') c = '+';
//enable the Enter keys
}
else if (c == '\n' || c==141)
c = '=';
Call calculation procedure with else if (c == 'c') c = '%';
string of events st = c + "";
if (c == 'q') st = SQRT;
else st = c + "";

doAction(st);
}

Remains Resulting interface:

• Write the method “doAction” to perform the

actual calculations based on the string of events.
(exercise)