1. Peter Andreae Computer Science Victoria University of Wellington Copyright: Peter Andreae, Victoria University of Wellington More Event-driven Input TextFields, Sliders COMP 102 #20 2013T1

2. © Peter Andreae COMP 102 20:2 Menu GUI’s TextFields and Sliders JColorChooser Administrivia: Test

3. © Peter Andreae COMP 102 20:3 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

4. © Peter Andreae COMP 102 20:4 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 this.selectedFigure = cf1; Typically, the “selected object” doesn’t change until user selects another object.

5. © Peter Andreae COMP 102 20:5 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

6. © Peter Andreae COMP 102 20:6 PuppetMaster: selecting a figure. public class PuppetMaster implements UIButtonListener, …{ private CartoonFigure cf1= new CartoonFigure(“blue", 100, 100); private CartoonFigure cf2= new CartoonFigure(“green", 500, 100); private CartoonFigure selectedFigure = cf1; // the selected one private double moveDistance = 20; public PuppetMaster(){ // set buttons etc } 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?

7. © Peter Andreae COMP 102 20:7 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.cf1; } else if (buttonName.equals(“Jan")) { this.selectedFigure = this.cf2; } else if (buttonName.equals("Smile")){ this.selectedFigure.smile(); } ⋮ else if (buttonName.equals(“move")){ this.selectedFigure.move(this.moveDistance ); }

8. © Peter Andreae COMP 102 20:8 PuppetMaster: TextFields & Sliders Jim Jan Talk Distance Move Smile Frown 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 Hello 60

9. © Peter Andreae COMP 102 20:9 Using TextFields public class PuppetMaster implements UIButtonListener, UITextFieldListener{ private CartoonFigure cf1, cf2; // the two Cartoon Figures private CartoonFigure selectedFigure; // the one the user has chosen private double moveDistance = 20; public PuppetMaster(){ UI.addButton("Smile", this); // this object will respond UI.addButton("Frown", this); : UI.addTextField("Talk", this); : } : public void textFieldPerformed(String tfName, String value){ if (tfName.equals("Talk")){ this.selectedFigure.talk(value); } Promising to be a UITextFieldListener The method a UITextFieldListener must have Adding a TextField to the UI The value entered Which textField

10. © Peter Andreae COMP 102 20:10 Using Sliders public class PuppetMaster implements UIButtonListener, UITextFieldListener, UISliderListener { private CartoonFigure cf1 = …, cf2 = …; private CartoonFigure selectedFigure = cf1; private double moveDist = 20; public PuppetMaster(){ UI.addButton("Smile", this); // this object will respond UI.addButton("Frown", this); : UI.addSlider("Move", 0, 100, this.moveDistance, this); : } : public void sliderPerformed(String slider, double value){ if (slider.equals("Move")){ this.moveDist = value; } ListenerMinimum The value enteredWhich slider NameMaximumInitial Changing the slider doesn't move the figure – just changes the distance it will move next time

11. © Peter Andreae COMP 102 20:11 Buttons, TextFields, Sliders Must have a name Add them to the UI, specifying name and a listener object Sliders have additional arguments. The listener object must be of the right type. The listener object must have a method that responds: buttonPerformed textFieldPerformed sliderPerformed When the button/textfield/slider is clicked/entered/changed, the responding method will be called: passing the name of the button/textfield/slider passing the value entered/changed

12. © Peter Andreae COMP 102 20:12 Selecting Colors: JColorChooser public class LineDrawer implements UIMouseListener, UIButtonListener{ private double startX, startY; private Color currentColor = Color.black; public ExampleGui(){ 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){ this.currentColor = JColorChooser.showDialog(null, "Choose Color", this.currentColor); UI.setColor(this.currentColor); }

13. © Peter Andreae COMP 102 20:13 Numbers program Program for constructing files of numbers: Should allow user to enter a set of numbers with the mouse (height of mouse click is the number) Should also list the numbers as they are entered Should save numbers to a file as they are entered User Interface: button to clear screen and select new file. Graphics pane to select (with mouse) and display the numbers Text pane to display list of numbers 130 72 281 98 264 97 Numbers New

14. © Peter Andreae COMP 102 20:14 Numbers: Design Design: When does something happen? button presses mouse clicks Fields to store the file (PrintStream) that the numbers are being saved to to remember the horizontal position of the next bar. Constructor set up the interface Methods to respond to mouse record a new number Method to respond to button clear and start a new file Numbers New

15. © Peter Andreae COMP 102 20:15 Numbers: Design public class Numbers implements UIButtonListener, UIMouseListener{ private PrintStream outputFile; private double barX = 0; private final double base = 450; public Numbers(){ UI.setMouseListener(this); UI.addButton("New", this); UI.drawLine(0, this.base, 600, this.base); } public static void main(String[ ] args){ new Numbers(); } } Numbers New

16. © Peter Andreae COMP 102 20:16 Respond to Mouse: When user clicks/releases: work out the number they meant draw a bar on the graphics pane display it in the text pane print it to the file public void mousePerformed(String action, double x, double y) { if (action.equals("released")) { double number = this.base - y; this.barX = this.barX + 10; UI.fillRect(this.barX, y, 5, number); UI.println(number); this.outputFile.println(number); } } 130 Numbers New if (this.outputFile != null) { this.outputFile.println(number); } What's the problem?

17. © Peter Andreae COMP 102 20:17 Respond to "New" button /** Respond to button presses */ public void buttonPerformed(String button){ if (button.equals("New") ){ this.newFile(); // initialise display, close file, get new file } } public void newFile(){ UI.clearGraphics(); UI.clearText(); UI.drawLine(0, this.base, 600, this.base); this.barX = 0; this.outputFile.close(); try{ this.outputFile = new PrintStream(new File(UIFileChooser.save())); } catch(IOException e) { UI.println("File error: "+e); } } if (this.outputFile != null) { this.outputFile.close(); } Still a problem!

18. © Peter Andreae COMP 102 20:18 Numbers: Better Design public class Numbers implements UIButtonListener, UIMouseListener{ private PrintStream outputFile; private double barX = 0; private final double base = 450; public Numbers(){ UI.setMouseListener(this); UI.addButton("New", this); this.newFile(); } public static void main(String[ ] args){ new Numbers(); } } Numbers New