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

© Peter Andreae COMP :2 Menu GUI’s Buttons Listeners PuppetMaster program Administrivia:

© Peter Andreae COMP :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

© Peter Andreae COMP :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

© Peter Andreae COMP :5 PuppetMaster How does Java respond to buttons etc? Smile Frown Right Move Talk Distance Left

© Peter Andreae COMP :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 Talk textField: PuppetMaster-3 PuppetMaster-3 When user clicks button: JVM notices the event, tells PuppetMaster-3 buttonPerformed("smile") watching PuppetMaster Constructor: - sets up buttons and records "Listeners" - makes figure - then stops Talk Distance Right Smile Move

© Peter Andreae COMP :7 Setting up event-driven input Setting up the GUI: Add buttons, slider, and textfield to the UI Specify which object is going to "listen" to them. Specify how it will respond Setting up the “responding 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.

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

© Peter Andreae COMP :9 Smile Frown Talk Left Right Move 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( "Move", this); UI.addTextField( "Talk", 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 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 Object that will be listening Name of button Name of textField Being just a PuppetMaster is not enough! Object that will be listening

© Peter Andreae COMP :10 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

© Peter Andreae COMP :11 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){ :

© Peter Andreae COMP :12 PuppetMaster: putting it together public class PuppetMaster implements UIButtonListener, …{ private CartoonFigure figure ; private double distToMove = 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("Move")){ this.figure.move( ? ) } : else …. Need to remember the distance from when the user last change the distance slider this.moveDist );} 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

© Peter Andreae COMP :13 Responding to buttons Button-49 name: “ Frown ” listener: PuppetMaster-3 worksheet: buttonPerformed: if (buttonName.equals(…. else if (buttonName.equals(… : buttonName: "Frown" this: PuppetMaster-3 PuppetMaster-3 moveDistance: 20 figure: CartoonFigure-11 Button-48 name: “ Smile ” listener: PuppetMaster-3 Smile Frown Talk Distance Move Button-50 name: “ Move ” listener: PuppetMaster-3 CartoonFigure-11 emotion: "smile" figX: 100 figY: 200direction: "right" imgBaseName: "blue"

© Peter Andreae COMP :14 PuppetMaster: Problem 1 Suppose we have two figures! Problem: Which figure should smile/turn/move/talk? Event-driven input can be tricky! Smile Frown Talk Distance Left Right Move

© Peter Andreae COMP :15 GUI design: choosing object to act on One typical simple GUI interaction mechanism 1. Select object you want to act on 2.Choose action. Must remember the currently selected object: in a field, because the action will be performed in a later method Typically, the “selected object” doesn’t change until user selects another object.

© Peter Andreae COMP :16 PuppetMaster Problem: two figures Smile Frown Talk Distance Move CartoonFigure-11 emotion: "smile" figX: 110 figY: 200direction: "right" imgBaseName: "blue" CartoonFigure-12 emotion: "frown" figX: 350 figY: 200direction: "left" imgBaseName: "green" PuppetMaster-3 moveDistance: 20 cf1: CartoonFigure-11 cf2: CartoonFigure-12 selectedFigure: CartoonFigure-11

© Peter Andreae COMP :17 PuppetMaster: selecting a figure. public class PuppetMaster implements UIButtonListener, …{ private CartoonFigure cf1, cf2; // the two Cartoon Figures private CartoonFigure selectedFigure; // the selected one private double moveDistance = 20; public PuppetMaster(){ // set buttons etc this.cf1 = new CartoonFigure(“blue", 100, 100); this.cf2 = new CartoonFigure(“green", 500, 100); this.selectedFigure = cf1; } public void buttonPerformed(String buttonName){ if (buttonName.equals("Smile")){ this.selectedFigure.smile(); } else if (buttonName.equals("Frown")){ this.selectedFigure.frown(); } : } How do we change the selectedFigure?

© Peter Andreae COMP :18 PuppetMaster: buttons for selecting public PuppetMaster() { UI.addButton( "Jim", this); UI.addButton( "Jan", this); UI.addButton( "Smile", this); : } /** Respond to button presses */ public void buttonPerformed(String buttonName){ if (buttonName.equals(“Jim")) { this.selectedFigure = this.cfg1; } else if (buttonName.equals(“Jan")) { this.selectedFigure = this.cfg2; } else if (buttonName.equals("Smile")){ this.selectedFigure.smile(); } : else if (buttonName.equals(“move")){ this.selectedFigure.move(this.moveDistance ); }