1CS480: Graphical User Interfaces. Dario Salvucci, Drexel University. Lecture 6: Event-Driven Programming

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Handling GUI events Ok, you’ve made a basic GUI. Now the user does something — an event occurs. How do you handle the event? Wait, what events are we talking about? User clicks a button, presses Return while typing in a text field, or chooses a menu item User closes a frame (main window) User presses a mouse button while the cursor is over a component User moves the mouse over a component Component becomes visible Component gets the keyboard focus Table or list selection changes

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Programming the GUI Sequential/procedural programming – your program is (almost) always in control – for user input, the program dictates when/how, and the user responds yourFoo() yourSubFoo() systemFoo() yourSubFoo() yourFoo()

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Programming the GUI Sequential/procedural programming (cont.) – the good points easy to think about: one event, then the next, … easy to design and represent with well-known models easy to program with today’s programming languages – the big bad point program dictates when/how user must respond Great for the programmer… What about the user?!?!?

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Programming the GUI Event-driven programming – system / toolkit handles much of processing – events on a queue, handled in turn – advantages flexible interaction — user decides when/how easier coding — you code only the “important” stuff better for the programmer and the user! MAIN LOOP yourClickHandler() yourScrollHandler() yourKeyHandler()...

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Ways to handle events “Macintosh-style” event handling – decide what the event is – figure out what window it goes to – handle the event void handleEvent (event) { switch (event->type) { case MOUSE_CLICK: window = event->window; > case …: } Note: Pseudocode!

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Ways to handle events Listener model – create widget, register listener function – listener function called for each event void myButtonClickCallback (window, other_data) { … } void main () { button = new Button (label, …); registerCallback (button, CLICK_CALLBACK, &(myButtonClickCallback)); } NB: Pseudocode!

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Doing the Math, reveals... Object-oriented event handling – the way Java does it! – based on the OOP component hierarchy define event-handling methods for any object, just not the components! components can (of course) inherit these methods from parent components, same for all objects. – Based on the Model-View-Control Architecture. Listeners are the Control. – now let’s look at this in detail…

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Model-View-Controller Architecture What defines a component? In Swing (and similar frameworks), a component has three crucial elements: – model: what data is associated with component – view: how the component is displayed on-screen – controller: how the component responds to user interaction / events For example, a JTextArea component – Model: The text, stored in a String object. – View: A white window with text cursor. – Controller: A listener that updates the String

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Model-View-Controller Architecture Another Example: the scrollbar How about a menu? a toolbar? Model min = 0 max = 255 value = 87 ViewController mouse click on end mouse click on bar mouse drag on scroller

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Model-View-Controller Architecture All three elements are interdependent! Why is this breakdown useful? – multiple components can tied to same model – models can have different “look & feel”s Model View Controller Component User Conduit

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 The Model Is The Program Models are your internal representation of the state of the program. Use any data structure you want, its up to the Component to visualize it. You program the Component to display it the way you want! You program the Model to store the data (hopefully efficiently) the way you want!

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Event Listeners, the definitions. Event sources generate events Event listeners respond to them User clicks a button, presses Return whileActionListener typing in a text field, or chooses a menu item User closes a frame (main window)WindowListener User presses a mouse button while the cursorMouseListener is over a component User moves the mouse over a componentMouseMotionListener All of these are in the JavaDocs!

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 ActionEvent A class with three methods: We won’t use these methods at the moment, but the keep the class in mind! String getActionCommand (); int getModifiers (); String paramString ();

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 ActionListener An interface with a single method: We implement the interface as follows: public interface ActionListener { void actionPerformed (ActionEvent e); } public class MyClassThatListens … implements ActionListener { … public void actionPerformed (ActionEvent e) { … } … }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 The 3-step program to handling events Code that implements the listener class Code that implements the listener methods Code that registers the listener to a source public class MyClass implements ActionListener { … } component.addActionListener (instanceOfMyClass); public void actionPerformed (ActionEvent e) { … }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Simple example (note: applet!) Beep when the user clicks the button import javax.swing.JApplet;import javax.swing.JButton; import java.awt.Toolkit;import java.awt.BorderLayout; import java.awt.event.ActionListener;import java.awt.event.ActionEvent; public class Beeper extends JApplet implements ActionListener { JButton button; public void actionPerformed(ActionEvent e) { Toolkit.getDefaultToolkit().beep(); } public void init() { button = new JButton("Click Me"); getContentPane().add(button, BorderLayout.CENTER); button.addActionListener(this); } step 1step 2step 3 Note: Don’t worry about the applet specifics, like init()…

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 KeyEvent Another event class, like ActionClass Has many methods, including: char getKeyChar (); // returns character typed int getModifiers (); // returns typed modifiers (shift, ctrl, etc.)

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 KeyListener Another interface, like ActionListener Includes several methods: public interface KeyListener { public void keyPressed (KeyEvent e); // press public void keyReleased (KeyEvent e); // release public void keyTyped (KeyEvent e); // press+release }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 “KeyTest” example MyKeyListener class public class MyKeyListener implements KeyListener { public void keyTyped (KeyEvent e) { char c = e.getKeyChar(); KeyTest.windowPrint (String.valueOf (c)); // Note: uses windowPrint from ProgramTemplate.java } public void keyPressed (KeyEvent e) { } public void keyReleased (KeyEvent e) { } } do we need these?

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 “KeyTest” example KeyTest class public class KeyTest { … public static void main (String[] args) { … frame.addKeyListener (new MyKeyListener()); … }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 “KeyTest2” example The last example defined a full class for a new KeyListener in the usual way. It’s prim & proper, but gets bulky. Too many classes. You can internalize! A quicker way of saying the same thing frame.addKeyListener (new KeyListener() { public void keyTyped (KeyEvent e) { char c = e.getKeyChar(); windowPrint (String.valueOf (c)); } public void keyPressed(KeyEvent e) { } public void keyReleased(KeyEvent e) { } });

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Our old friend “ClickMe” public class ClickMe { … public static void main (String[] args) { initialize (); JButton button = new JButton ("Click Me!"); button.addActionListener (new ActionListener () { public void actionPerformed (ActionEvent e) { buttonAction(); } }); … > frame.addWindowListener(new WindowAdapter() { public void windowClosing (WindowEvent e) { System.exit(0); } }); … }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 WindowListener Another listener interface Includes lots of methods: public interface WindowListener { public void windowActivated(WindowEvent e); public void windowClosed(WindowEvent e); public void windowClosing(WindowEvent e); public void windowDeactivated(WindowEvent e); public void windowDeiconified(WindowEvent e); public void windowIconified(WindowEvent e); public void windowOpened(WindowEvent e); }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 WindowAdapter Implements the WindowListener interface with null (do-nothing) methods Do we need this? Do we want this? Why is this only for multi-method interfaces? public class WindowAdapter implements WindowsListener { public void windowActivated(WindowEvent e) { } public void windowClosed(WindowEvent e) { } public void windowClosing(WindowEvent e) { } public void windowDeactivated(WindowEvent e) { } public void windowDeiconified(WindowEvent e) { } public void windowIconified(WindowEvent e) { } public void windowOpened(WindowEvent e) { } }

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Adapters vs. Interfaces Why use an adapter? – less code, less verbosity – cleaner (?) Why use an interface? – forces you to think about each method (?) – new classes can implement many interfaces, but can only extend one class/adapter

CS338: Graphical User Interfaces. Michael Czajkowski, Drexel University.1 Adapters vs. Interfaces The first is fine; the second is not! public class MyListener implements KeyListener, WindowsListener { public void keyPressed (KeyEvent e); public void keyReleased (KeyEvent e); … public void windowActivated(WindowEvent e) { … } public void windowClosed(WindowEvent e) { … } … } public class MyListener extends KeyAdapter, WindowsAdapter { public void keyPressed (KeyEvent e); public void keyReleased (KeyEvent e); … public void windowActivated(WindowEvent e) { … } public void windowClosed(WindowEvent e) { … } … } There is no multiple inheritance in Java!