1. Xiaoying Gao Computer Science Victoria University of Wellington Copyright: Xiaoying Gao, Peter Andreae, Victoria University of Wellington UI methods, Graphical Output COMP 102 #5 2013T2

2. © Xiaoying Gao, Peter Andreae COMP102 5:2 Menu What methods can you call on the UI object? Using documentation to find out about classes Programs with Graphical output Good design with variables Administrivia: Class Rep: ganzevmich@myvuw.ac.nz, Jason.oreg@gamil.comganzevmich@myvuw.ac.nz Tomorrow: last day for withdrawal with refund

3. © Xiaoying Gao, Peter Andreae COMP102 5:3 Summary of Java program structure A Class specifies a type of object TemperatureCalculator.class describes TemperatureCalculator objects A Class contains a collection of methods each method is an action the objects can perform. TemperatureCalculator objects can do celsiusToFahren, fahrenToCelsius, printFormula If you have an object, you can call its methods on it. A method definition specifies how to perform the action A method contains statements each statement specifies one step of performing the action Declaration and Assignment statements Method call statements

4. © Xiaoying Gao, Peter Andreae COMP102 5:4 A class can have constants Inside a class, outside a method public static final double top = 100.0; public static final double left = 150.0; public static final double doorWidth = 0.8;

5. © Xiaoying Gao, Peter Andreae COMP102 5:5 Variables /** Print out the conversion formulas (version 2) */ public void printFormula () { String formula; formula = "Celsius = (Fahrenheit - 32) *5/9" ; UI.println( formula ); } A variable is a place that can hold a value. Must specify the type of value that can be put in the variable ⇒ “Declare” the variable. Must put a value into a variable before you can use it ⇒ “assign” to the variable Can use the value by specifying the variable’s name Can change the value in a variable (unlike mathematical variable) "

6. © Xiaoying Gao, Peter Andreae COMP102 5:6 Assignment Statements /** Print out the conversion formulas (version 2) */ public void printFormula () { String formula; formula = "Celsius = (Fahrenheit - 32) *5/9" ; UI.println( formula ); } Assignment Statement: where = what ; name-of-place= specification-of-value ; formula= " Celsius = (Fahrenheit - 32) *5/9" Compute the value and put it in the place 〈 variable 〉〈 expression 〉 =; "

7. © Xiaoying Gao, Peter Andreae COMP102 5:7 Declarations and Assignments Variable must be declared before you use it Must be declared only once in a method (strictly, once in a block) Must be assigned a value before it is used in an expression Can declare variable before first assignment or Declare variable in the first assignment statement: /** Print out the conversion formulas (version 2) */ public void printFormula () { String formula = " Celsius = (Fahrenheit - 32) *5/9" ; UI.println( formula ); } "

8. © Xiaoying Gao, Peter Andreae COMP102 5:8 Expressions /** Convert from fahrenheit to celsius */ public void fahrenToCelsius(){ double fahren = UI.askDouble("Fahrenheit:" ); double celsius= (fahren - 32) * 5 / 9; UI.println(“ -> " + celsius + “ C"); } Expressions describe how to compute a value. Expressions are constructed from values variables operators (+, -, *, /, etc) method calls that return a value sub-expressions, using (… ) … + for Strings: "concatenates" the Strings

9. © Xiaoying Gao, Peter Andreae COMP102 5:9 A model/metaphor for the computer If you are giving instructions to someone/something, it helps to understand how they think and what they can do! Your program is run by the "Java Virtual Machine" The JVM is like a clerk with alzheimers – only remembers what he writes down with a clipboard for the instructions he is currently working on looking out at the user through an opaque window (the UI window) which he can write on (but the writing only appears on the outside) can see a stream of characters that the user types on the keyboard

10. © Xiaoying Gao, Peter Andreae COMP102 5:10 Method Definition: Like a pad of worksheets public void fahrenToCelsius(){ double fahren = UI.askDouble("Fahrenheit:"); double celsius = (fahren – 32) * 5 / 9; UI.println(“ -> " + celsius + “ C"); } Calling a Method: tempCalc1.fahrenToCelsius(); ⇒ get a “copy” of the method worksheet ⇒ perform each action in the body. ⇒ throw the worksheet away (losing all the information on it) Method Calls: worksheet metaphor public void fahrenToCelsius(){ double fahren = UI.askDouble("Fahrenheit:"); double celsius = (fahren – 32) * 5 / 9; UI.println(“ -> " + celsius + “ C"); } 86 0 30 0

11. © Xiaoying Gao, Peter Andreae COMP102 5:11 What can the UI do? UI is a predefined object (strictly, it is a class with static methods, which acts like a predefined object ) Has methods for text input from the user eg UI.askString("What is your name?") text output eg UI.println(" * " + name + " * "; graphical output eg UI.drawRect(100, 100, 300, 150) making buttons, sliders, etc How do you find out about all the methods? How do your find out what arguments you need to provide?

12. © Xiaoying Gao, Peter Andreae COMP102 5:12 Read the Documentation! Full documentation for all the standard Java library code (the "API" : Application Programming Interface) Version of Java API documentation on course web site: "Java Documentation" in side bar http://ecs.victoria.ac.nz/Courses/COMP102_2013T2/JavaResources Tailored for Comp 102 Includes documentation of the comp102 library: (UI, Trace, etc,) puts most useful classes at the top of the list. Use the documentation while you are programming!

13. © Xiaoying Gao, Peter Andreae COMP102 5:13 Some UI methods: read the documentation Text: UI.clearText()UI.print(anything ) UI.println(anything ) UI.println() UI.printf( format-string, values…) UI.askString(prompt-string ) UI.askDouble(prompt-string ) UI.askInt(prompt-string ) UI.askBoolean(prompt-string ) UI.next()UI.nextInt()UI.nextDouble UI.nextLine() UI.hasNext() UI.hasNextIntUI.hasNextDouble() Graphics: UI.clearGraphics() UI.setColor(color ) UI.drawRect(left, top, wd, ht )UI.fillRect(left, top, wd, ht ) … UI.drawOval(left, top, wd, ht )UI.fillOval(left, top, wd, ht ) … UI.drawLine(x1, y1, x2, y2 )UI.drawImage(file, left, top )

14. © Xiaoying Gao, Peter Andreae COMP102 5:14 Programs with graphics output Write a program to draw a face with a hat: Design What shapes can we draw? UI has methods to draw rectangles, ovals, lines, arcs,… ⇒ Draw one green rectangle, one green line, one orange oval, How do we draw them? Need to set the color first then call the draw/fill methods: must specify the positions and size rectangles/ovals: left, top, width, height lines: x and y of each end. one orange oval, one green rectangle, one green line x y (0,0) Shapes drawn on top of previous shapes Coordinates measured from left and top

15. © Xiaoying Gao, Peter Andreae COMP102 5:15 FaceWithHat program Design: Method faceWithHat(): set color to orange draw oval set color to green draw rectangle draw line Must work out the coordinates: oval: rectangle: line: x y ≈ 600 ≈500

16. © Xiaoying Gao, Peter Andreae COMP102 5:16 Writing the program Need import statements Need a class (with a descriptive comment) what name? Need a method (with a descriptive comment) what name? what actions? import comp102.*; import java.awt.Color; /** Draws little pictures on the graphics pane */ public class Drawer { /** Draw an orange face with a brimmed hat */ public void faceWithHat() { // actions } } Write the method body as comments first

17. © Xiaoying Gao, Peter Andreae COMP102 5:17 Writing the program: using comments import comp102.*; import java.awt.Color; /** Draws little pictures on the graphics pane */ public class Drawer { /** Draw an orange face with a brimmed hat*/ public void faceWithHat() { // set color to orange // draw oval @(200,100) 100x150 // set color to green // draw rectangle @(200,90) 100x50 // draw line (180,140) to (320, 140) } Now express each comment in Java (look up the documentation if necessary) Do it in BlueJ!

18. © Xiaoying Gao, Peter Andreae COMP102 5:18 Writing the program import comp102.*; import java.awt.Color; /** Draws little pictures on the graphics pane */ public class Drawer { /** Draw an orange face with a brimmed hat*/ public void faceWithHat() { UI.setColor(Color.orange);// set color to orange UI.fillOval(200, 100, 100, 150);// draw oval UI.setColor(Color.green);// set color to green UI.fillRect(200, 90, 100, 50);// draw rectangle UI.drawLine(180, 140, 320, 140);// draw line } } Express each comment in Java (look up the documentation if necessary)

19. © Xiaoying Gao, Peter Andreae COMP102 5:19 Compile, Run, and Test the program. Fix the errors!

20. © Xiaoying Gao, Peter Andreae COMP102 5:20 Improving the design This program is very inflexible: What if We want the face & hat to be in a different position? We want the face & hat to be bigger or smaller? We want the hat to be taller? …. We want to draw two of them? Current design is filled with literal values ⇒ difficult to change Better design: Use variables ⇒ easier to write and easier to change

21. © Xiaoying Gao, Peter Andreae COMP102 5:21 Variables to specify face & hat center top faceWd faceHt hatWd brimYhatHt

22. © Xiaoying Gao, Peter Andreae COMP102 5:22 Improving the program /** Draw an orange face with a brimmed hat*/ public void faceWithHat() { double center = 250;// horizontal center of face double top = 100;// top of face double faceWd = 100; double faceHt = 1.5 * faceWd; double hatHt = 0.3 * faceHt; double hatWd = 0.96 * faceWd; double brimWd = 1.6 * hatWd; double brimY = top + 0.25 * faceHt; UI.setColor(Color.orange); UI.fillOval(center-faceWd/2, top, faceWd, faceHt); // face UI.setColor(Color.green); UI.fillRect(center-hatWd/2, brimY-hatHt, hatWd, hatHt); // hat crown UI.drawLine(center-brimWd/2, brimY, center+brimWd/2, brimY)//brim }

23. © Xiaoying Gao, Peter Andreae COMP102 5:23 Principle of good design Use well named variables where-ever possible, rather than literal values ⇒ easier to understand ⇒ easier to get right ⇒ much easier to modify Choosing the right variables is an art!! why did I choose "center" instead of "faceLeft" or "brimLeft" ? why did I choose "top" to be the top of the face, not the hat? We have effectively parameterised the drawing three values (center, top, faceWd) control the whole thing.