1. Peter Andreae Computer Science Victoria University of Wellington Copyright: Peter Andreae, Victoria University of Wellington Event-driven Input COMP 102 #19 2014T1

2. © Peter Andreae COMP 102 19:2 Menu GUI’s Buttons Listeners PuppetMaster program Admin: No lecture Friday. Labs this week as usual, but continuing Assig 6. Test #2: Mon12 May 5-6pm, (6-7pm for PHYS114 students)

3. © Peter Andreae COMP 102 19:3 Nicer User Interaction Designing good User Interfaces is an art! Text based interaction has strengths and limitations; eg + very flexible + good for expert users – slow for new/infrequent users and slow typists. – have to know the options and possiblities – hard to deal with graphical elements – error/typo prone Graphical User Interfaces have strengths and limitations: – limitations on options – only what is shown on screen – slow for expert users (unless very well designed) + good for new/infrequent users + options are explicit and obvious + excellent for graphical elements – more complicated to construct Each kind is appropriate for different tasks

4. © Peter Andreae COMP 102 19:4 GUI’s and Event driven input In a GUI, the interaction is controlled by the user, not by the program User initiates "events" Program responds

5. © Peter Andreae COMP 102 19:5 PuppetMaster How does Java respond to buttons etc? Smile Frown Right Walk Speak Distance Left

6. © Peter Andreae COMP 102 19:6 Event Driven Input Frown Left The JVM (Java Virtual Machine) = the "clerk" Listeners: listening to Smile button: PuppetMaster-3 listening to Frown button: PuppetMaster-3 : listening to Distance slider: PuppetMaster-3 listening to Speak textField: PuppetMaster-3 PuppetMaster-3 What happens when user clicks Frown button: JVM notices the event, looks up the listener tells PuppetMaster-3 calls buttonPerformed("frown") on PuppetMaster-3 watching PuppetMaster Constructor: - creates the object - sets up buttons and records "Listeners" - makes figure - then stops Speak Distance Right Smile Walk The JVM then watches the interface

7. © Peter Andreae COMP 102 19:7 Setting up event-driven input Setting up the GUI: Add buttons, sliders, and textfields to the UI Specify which object is going to "listen" to them. Specify how it will respond Setting up the listener object: declare that it is a kind of object that can respond to buttons define a “buttonPerformed” method that specifies how to respond. declare that it is a kind of object that can respond to sliders define a “sliderPerformed” method that specifies how to respond. declare that it is a kind of object that can respond to textFields define a “textFieldPerformed” method that specifies how to respond.

8. © Peter Andreae COMP 102 19:8 PuppetMaster: Design Structure of the PuppetMaster class: public class PuppetMaster … { // fields to store values between events/method calls private …. // Constructor public PuppetMaster(){ // set up the buttons, slider, textField // initialise fields } // methods to respond to the buttons, slider, textField public void … }

9. © Peter Andreae COMP 102 19:9 Smile Frown Speak Left Right Walk Distance 1100 PuppetMaster: setting up Buttons etc public class PuppetMaster … { // fields // constructor public PuppetMaster(){ UI.addButton( "Smile", this); UI.addButton( "Frown", this); UI.addButton( "Left", this); UI.addButton( "Right", this); UI.addButton( "Walk", this); UI.addTextField( "Speak", this); UI.addSlider( "Distance", 1, 100, 20, this); … } // methods to respond } Name of the slider min initial value max Object that will be listening Object that will be listening Name of button Name of textField Object that will be listening

10. © Peter Andreae COMP 102 19:10 Smile Frown Speak Left Right Walk Distance 1100 PuppetMaster: setting up Buttons etc public class PuppetMaster … { // fields // constructor public PuppetMaster(){ UI.addButton( "Smile", this); UI.addButton( "Frown", this); UI.addButton( "Left", this); UI.addButton( "Right", this); UI.addButton( "Walk", this); UI.addTextField( "Speak", this); UI.addSlider( "Distance", 1, 100, 20, this); … } // methods to respond } Object must be the right kind of Listener Object must be the right kind of Listener Object must be the right kind of Listener Object must be the right kind of Listener Object must be the right kind of Listener Object must be the right kind of Listener Object must be the right kind of Listener UIButtonListener UITextFieldListener UISliderListener Being just a PuppetMaster is not enough!

11. © Peter Andreae COMP 102 19:11 PuppetMaster: responding to buttons public class PuppetMaster implements UIButtonListener, …{ // fields // constructor public PuppetMaster(){ UI.addButton("Smile", this); UI.addButton("Frown", this); ⋮ } /** Respond to button presses */ public void buttonPerformed(String buttonName){ if (buttonName.equals("Smile")){ // what to do when the Smile button is clicked (tell the cartoon figure to smile) } else if (buttonName.equals("Frown")){ // what to do when the Frown button is clicked } else …. A promise that the class will have all the actions required of an UIButtonListener The method every UIButtonListener must have A PuppetMaster object is also a UIButtonListener

12. © Peter Andreae COMP 102 19:12 PuppetMaster: Fields Actions on the CartoonFigure happen in response to different events ⇒ will be in different method calls ⇒ need to store figure in a field, not a local variable. puplic class PuppetMaster implements UIButtonListener, … { private CartoonFigure figure ; // the figure being controlled : //Constructor to set up the GUI and initialise the figure public PuppetMaster(){ UI.addButton("Smile", this); // this object will respond UI.addButton("Frown", this); : this.figure = new CartoonFigure(200, 100, "blue"); } // respond to the buttons etc public void buttonPerformed(String buttonName){ :

13. © Peter Andreae COMP 102 19:13 PuppetMaster: putting it together public class PuppetMaster implements UIButtonListener, …{ private CartoonFigure figure ; private double walkDist = 20 ; public PuppetMaster(){ UI.addButton("Smile", this); // this object will respond UI.addButton("Frown", this); : this.figure = new CartoonFigure(200, 100, "blue"); } /** Respond to button presses */ public void buttonPerformed(String buttonName){ if (buttonName.equals("Smile")) { this.figure.smile() } else if (buttonName.equals("Frown")){ this.figure.frown() } : else if (buttonName.equals("Walk")){ this.figure.Walk( ? ) } : else …. Need to remember the distance from when the user last change the distance slider this.walkDist );} Typical design: fields to store values from one event, for use by another event Typical design: fields to store values from one event, for use by another event

14. © Peter Andreae COMP 102 19:14 Responding to buttons Button-49 name: “ Frown ” listener: PuppetMaster-3 worksheet: buttonPerformed: if (button.equals(…. else if (button.equals(… : button: "Frown" this: PuppetMaster-3 PuppetMaster-3 walkDist: 20 figure: CartoonFigure-11 Button-48 name: “ Smile ” listener: PuppetMaster-3 Smile Frown Speak Distance Walk Button-50 name: “ Walk ” listener: PuppetMaster-3 CartoonFigure-11 emotion: "smile" figX: 100 figY: 200direction: "right" imgBaseName: "blue"

15. © Peter Andreae COMP 102 19:15 GUI: Mouse input Just like buttons, except don’t have to put anything on screen Each press, release, click on the graphics pane will be an event Must tell UI which object is listening to mouse events UI.setMouseListener(this); Must declare that the class is a UIMouseListener Must define method to say how to respond the the mouse: public void mousePerformed(String action, double x, double y) { if (action.equals("pressed") ) { // what to do if mouse button is pressed } else if (action.equals("released") ) { // what to do if mouse button is released } else if (action.equals("clicked") ) { // what to do if mouse button is clicked } } Where action occurred

16. © Peter Andreae COMP 102 19:16 Using the mouse. Want to let user specify input with the mouse, eg: drawing lines Typical pattern: On "pressed", just remember the position On "released", do something with remembered position and new position 1 2 (100,80) (260,90)

17. © Peter Andreae COMP 102 19:17 Mouse Input // let user draw lines on graphics pane with the mouse. public class LineDrawer implements UIMouseListener{ private double startX, startY; public LineDrawer(){ UI.setMouseListener(this); } public void mousePerformed(String action, double x, double y) { if (action.equals("pressed") ) { this.startX = x; this.startY = y; } else if (action.equals("released") ) { UI.drawLine(this.startX, this.startY, x, y); }

18. © Peter Andreae COMP 102 19:18 Selecting Colors: JColorChooser public class LineDrawer implements UIMouseListener, UIButtonListener{ private double startX, startY; private Color currentColor = Color.black; public LineDrawer (){ UI.setMouseListener(this); UI.addButton("Color", this); } public void mousePerformed(String action, double x, double y) { if (action.equals("pressed") ) { this.startX = x; this.startY = y; } else if (action.equals("released") ) { UI.drawLine(this.startX, this.startY, x, y); } public void buttonPerformed(String button){ if (action.equals(“Color") ) { this.currentColor = JColorChooser.showDialog(null, "Choose Color", this.currentColor); UI.setColor(this.currentColor); }