1. David Streader Computer Science Victoria University of Wellington Copyright: David Streader, Victoria University of Wellington GUI and the UI API COMP 112 2014T1 #6

2. COMP 112 6: 2 Progrmming for User Interaction Programming requires you to understand both the building blocks your language gives you and what you are trying to achieve. Good programing design and Design Patterns We are not going to consider what makes a well designed User Interaction. We are going to talk about the Building blocks of UI programming. 1.Text bases UI (revision) 2.Graphical UI Listener Pattern

3. COMP 112 6: 3 Text base UI import ecs100.UI; Java text base UI 1.inputs from System.in.read(). – the keybord and 2.outputs to System.out.println().– the screen Output to the screen (standard out) Print to screen - UI.print (“Hellow”); Print to screen and new line - UI.println (“Hellow”); UI.print (“Hellow\n”); == UI.println (“Hellow”); Integer,int,boolean,…. Are valid println parameters.

4. COMP 112 6: 4 Typed input from the keyboard UI.askInt( question ); UI.askString( question ); UI.askBoolean( question ); … These methods have built in error checking unlike the java primitives. Time line for execution: 1.The question is displayed on the screen 2.The program waits till Rtn ( Enter ) is keyed 3.Then the command returns the input text and ends Text base UI Program System Call Back 3 1 2

5. COMP 112 6: 5 Graphical UI import ecs100.*; Graphical objects can be displayed Input from the mouse can be processed Displaying images from a file (in the directory where the code is held) at top left location x=10,y=100. UI.drawImage ("main.jpg", 10, 100); You can draw lines, arcs, rectangles, strings, ovals and polygons in a similar way. in BlueJ type UI.draw and Ctrl space for details.

6. COMP 112 6: 6 The Listener Pattern The Listener pattern also know as Observer pattern see http://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Observer_pattern With Text UI remember there is both your program and the system’s keyboard driver. Executing UI.askString (“what?”) 1.display “what?” 2.wait 3.the system calls your program back after user input. Graphical UI can has many forms of interaction buttons, mouse clicks,…. Where your program restarts (what is called back) depends upon the form of the interaction.

7. COMP 112 6: 7 Just Buttons Tell system I listen for button events Add a Button Executed when Button pushed (Revision)

8. COMP 112 6: 8 Observer Pattern GUI programing is based on this Pattern! Understand it. Later you will need to implement both sides: The observer and The system (code to call back the observer) People think in metaphors People code metaphors Learn useful metaphors and you will code useful programs!

9. COMP 112 6: 9 Listen for mouse events Treat Mouse events just like Button events: 1.Tell the system you are listening for mouse events 2.Implement the method that the system will call back Interface Executed after mouse event listening for mouse events

10. COMP 112 6: 10 Mouse events What are the mouse events that we can listen for? In the ecs100 library we have mousePerformed action s 1."pressed” mouse down 2."released” mouse up 3."clicked” mouse down and up (with 1 and 2) Draw a rectangle with top left where pressed and bottom right where mouse released. Google “java mouse events”

11. COMP 112 6: 11 MouseListener Example Note the use of setMouseMotionListener(this) listens for MouseListener events plus two additional events 1."moved” mouse moved 2."dragged” mouse down then move Show the rectangle while dragging. Same interface Different listener

12. COMP 112 6: 12 Method called back by mouse use

13. COMP 112 6: 13 TextField Add 1. interface UITextFieldListener 2. method textFieldPerformed Parameter name appears over the text field and newText contains what ever the user typed into the field.

14. COMP 112 6: 14 KeyListener To listen to key pressing add 1.Interface UIKeyListener 2.Sign up to listen UI.setKeyListener(this); 3.method keyPerformed(String k) Works like the other listeners. 1. First the object signs up to listen 2.The program waits 3.The key even occurs 4.The system calls keyPerformed

15. COMP 112 6: 15 Objects give structure The simplest OO design is to construct a class for each type of real object you are interested in: Example: 1.One class for the GUI 2.One class for robots If you need two or more robots construct two or more objects from the robot class In BlueJ all Classes exist in same directory In the GUI Class you can construct robots and then call methods on them. Even though the code is in a separate.java file