1. GUI’s and eventhandlers in java Martin Jagersand

2. Today GUI design in practice Swing vs AWT (Abstract windowing toolkit) Example application: Calculator

3. GUI practicalities 1.Drawing GUI components, buttons etc. Original java came with AWT New class library: Swing 2.Connecting buttons, sliders etc to code. –Eventhandlers

4. Containers: Frame –top level container (window) –Has typical window components such as close buttons, possible scroll down menus etc Panel –intermediate container –Organizes contained components Atomic components –Buttons, labels etc. –Presents bits of info, allow interaction

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

6. Comparison: AWT classes

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

8. Layout examples

9. Border layout Container contentPane = getContentPane(); //Use the content pane's default BorderLayout. //contentPane.setLayout(new BorderLayout()); //unnecessary contentPane.add(new JButton("Button 1 (NORTH)"), BorderLayout.NORTH); contentPane.add(new JButton("2 (CENTER)"), BorderLayout.CENTER);

10. Event handling How to connect graphics to action Handled though interfaces “ActionListeners” Programmers implement and specialize these for their application

11. Event handling Source object: e.g. button Target object: programmed to react appropriately

12. Event handling example public class Beeper... implements ActionListener {... //where initialization occurs: button.addActionListener(this);... public void actionPerformed(ActionEvent e) {...//Make a beep sound... }

13. Event handling patterns: Reactor pattern Single object: 1.Draws graphics 2.Handles events.

14. Event handling patterns 2 Monitor pattern Combined listener/handler monitors (and acts on) what happens in source

15. Event handling patterns 3 Delegator pattern Listener uses services of other objects to respond to events.

16. Case study: Calculator GUI Was assignment 1 a couple of years ago…

17. Design idea 1 Use several nested panes for structurally different components: Numeric keypad Alfa keypad Immediate results display Command history display Jframe

18. Structure Abstract into two classes: 1.Extend Jframe to set up the window and menu bars 2.Extend Jpanel to set up and arrange the calculator buttons and displays

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

20. JPanel Calculator panel class CalculatorPanel extends JPanel implements ActionListener, KeyListener Implements reactive pattern.

21. Hierarchy of panels class CalculatorPanel extends Jpanel : setLayout(new BorderLayout()); //Component and panel setup JPanel eastPanel = new JPanel(); eastPanel.setLayout(new BorderLayout()); //display display = new JTextField(12); display.setHorizontalAlignment(JTextField.RIGHT); display.setEditable(false); Color col = new Color(255,255,255); display.setBackground(col); display.addKeyListener(this); Font f = new Font("MonoSpaced", Font.BOLD, 10); display.setText("0"); eastPanel.add(display, "North");

22. Hierarchy of panels 2 //scroll capability JScrollPane scrollPane = new JScrollPane(numList); scrollPane.setFont(f); add(scrollPane, "West"); scrollPane.addKeyListener(this); //button panels JPanel moreButs = new JPanel(); moreButs.setLayout(new GridLayout(4, 2)); : eastPanel.add(moreButs, "West"); : centerpanel = new JPanel(); centerpanel.setLayout(new GridLayout(4, 4)); eastPanel.add(centerpanel, "Center"); : add(eastPanel, ("Center")); Add history window, alfa and numeric buttons to intermediate pane Add intermediate pane

23. Adding atomic items private void addButton(Container c, String s) { JButton b = new JButton(s); c.add(b); b.addKeyListener(this); b.addActionListener(this); but = b; } Take care of event handling in same class (Reactive pattern)

24. Adding atomic items //button panels JPanel moreButs = new JPanel(); moreButs.setLayout(new GridLayout(4, 2)); String moreButtons[] = {"C ", "CE", "M+", "M-", "MR", "MC", SQRT, "%"}; for (i = 0; i < 8; i++) { addButton(moreButs, moreButtons[i]); } eastPanel.add(moreButs, "West"); 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");

25. Eventhandlers Mouse events //mouse events public void actionPerformed(ActionEvent evt) { st = evt.getActionCommand(); doAction(st); } Call calculation procedure with string of events Required in interface

26. Eventhandlers Key events //Event handlers public void keyAction(KeyEvent e) { char c = e.getKeyChar(); //handy substitutions if (c == '*') c = 'x'; else if (c == 'p') c = '+'; //enable the Enter keys else if (c == '\n' || c==141) c = '='; else if (c == 'c') c = '%'; st = c + ""; if (c == 'q') st = SQRT; else st = c + ""; doAction(st); }

27. Remains Write the method “doAction” to perform the actual calculations based on the string of events. (exercise)

28. Resulting interface: