Graphics Supplement JOptionPane and JFrame

1. Graphics Supplement JOptionPane and JFrame

2. About the course • About course website: • Go to dropbox upper right corner: Latest news I posted a topic about course websites in August and you should have received it in email (probably the university’s email) • Search my name on google.com or university’s website • Homeworks and Labs: late work not accepted, graded by TAs • If the dropbox doesn’t work, email it to any of the TAs • Free CSCE 145 and 146 tutoring is available at the ACE Center in Bates House (http://www.housing.sc.edu/ace/locations.html). CSCE 145: MWTh 7:30 – 10 pm CSCE 146:  Th 7:30 - 10 pm  Information about all tutoring sponsored by the Student Success Center is here: http://www.sa.sc.edu/ssc/peertutoring/

3. Last Time • Increment, Decrement operators ++, -- • class String • Escape characters, e.g. \n, \’ • Input, output, named constants • while loop

4. JOptionPane (Chap.2) • JOptionPane can be used to construct windows that interact with the user.

5. JOptionPane • The JOptionPane class is imported by import javax.swing.JOptionPane; • The JOptionPane class produces windows for obtaining input or displaying output.

6. JOptionPane • classJOptionPaneDemo, listing 2.11 Sample Screen Output

7. JOptionPane • UseshowInputDialog() for input. • Only string values can be input. • To convert an input value from a string to an integer use the parseInt() method from the Integer class, use appleCount = Integer.parseInt(appleString);

8. JOptionPane • Output is displayed using the showMessageDialogmethod. JOptionPane.showMessageDialog(null, "The total number of fruits = " + totalFruitCount);

9. JOptionPane • Syntax • Input String_Variable = JOptionPane.showInputDialogue(String_Expression); • Output JOptionPane.showMessageDialog(null, String_Expression); • System.exit(0) ends the windowing programs.

10. JOptionPane Cautions • If the input is not in the correct format, the program will crash. • If you omit the last line (System.exit(0)), the program will not end (and use computer resources), even when theOK button in the output window is clicked. • Always label any output.

11. Inputting Numeric Types • JOptionPane.showInputDialog can be used to input any of the numeric types. • Figure 2.8 Methods for converting strings to numbers

12. Multi-Line Output Windows • To output multiple lines using the method JOptionPane.showMessageDialog, insert the new line character '\n' into the string used as the second argument. JOptionPane.showMessageDialog(null, "The number of apples\n" + "plus the number of oranges\n" + "is equal to " + totalFruit);

13. Multi-Line Output Windows • Figure 2.10 A dialog window containing multiline output

14. Quiz 2 • Write a Java program that reads a number (any type is fine) using JOptionPane, multiply 5, then displays the result using JOptionPane. • Make sure you write your name and your section of 145 on your paper.

15. Quiz 2 solution • import javax.swing.JOptionPane; • public class JOptionPaneDemo • { • public static void main(String[] args) • { • String s = • JOptionPane.showInputDialog("Enter number of apples:"); • int n = Integer.parseInt(s); • n = n * 5; • JOptionPane.showMessageDialog(null, • "The total number of fruits = \n" + n); • System.exit(0); • } • }

16. JFrame (Chap.2) • The class JFrame can be used to create a standalone GUI application

17. Creating a JFrameApplication 1. import javax.swing.JFrame; 2. extends JFrame; 3. Add what is called a constructor (who has the same name as the class!!) public NameOfClass() { setSize(600,400); setDefaultCloseOperation(EXIT_ON_CLOSE); } 4. Add public void paint(Graphics canvas) { //your code to draw things here }

18. Creating a JFrameApplication 5. Add a main method that displays the window public static void main(String[] args) { HappyFaceJFrame guiWindow = new HappyFaceJFrame(); guiWindow.setVisible(true); }

19. classHappyFaceJFrame, listing 2.10 • import javax.swing.JFrame; • import java.awt.Color; • import java.awt.Graphics; • public class HappyFaceJFrame extends JFrame • { • /* • public static final int FACE_DIAMETER = 200; • public static final int X_FACE = 100; • public static final int Y_FACE = 50; • public static final int EYE_WIDTH = 10; • public static final int EYE_HEIGHT = 20; • public static final int X_RIGHT_EYE = 155; • public static final int Y_RIGHT_EYE = 100; • public static final int X_LEFT_EYE = 230; • public static final int Y_LEFT_EYE = Y_RIGHT_EYE; • public static final int MOUTH_WIDTH = 100; • public static final int MOUTH_HEIGHT = 50; • public static final int X_MOUTH = 150; • public static final int Y_MOUTH = 160; • public static final int MOUTH_START_ANGLE = 180; • public static final int MOUTH_DEGREES_SHOWN = 180; • */

20. classHappyFaceJFrame, listing 2.10 • public void paint(Graphics canvas) • { • canvas.drawOval(100, 50, 200, 200); • canvas.fillOval(155, 100, 10, 20); • canvas.fillOval(230, 100, 10, 20); • canvas.drawArc(150, 160, 100, 50, 180, 180); • /* • //Draw face outline: • //canvas.setColor(Color.RED); • canvas.drawOval(X_FACE, Y_FACE, FACE_DIAMETER, FACE_DIAMETER); • //Draw eyes: • //canvas.setColor(Color.green); • canvas.fillOval(X_RIGHT_EYE, Y_RIGHT_EYE, EYE_WIDTH, EYE_HEIGHT); • canvas.fillOval(X_LEFT_EYE, Y_LEFT_EYE, EYE_WIDTH, EYE_HEIGHT); • //Draw mouth: • canvas.drawArc(X_MOUTH, Y_MOUTH, MOUTH_WIDTH, MOUTH_HEIGHT, • MOUTH_START_ANGLE, MOUTH_DEGREES_SHOWN); • */ • } • public HappyFaceJFrame() • { • setSize(400,400); • setDefaultCloseOperation(EXIT_ON_CLOSE); • } • public static void main(String[] args) • { • HappyFaceJFrame guiWindow = new HappyFaceJFrame(); • guiWindow.setVisible(true); • } • }

21. Objects and Methods • Recall that a method is an action which can be performed by an object. • In this section, we’ll name our object canvasand we’ll use it to draw figures inside a window. • The paint method specifies what is drawn. • The paint method is invoked automatically when the program is run. The following slides are from Chap. 1 for JApplet (for applets), but it’s suitable to JFrame too.

22. Screen Coordinate System • Figure 1.6 The x-coordinate is the number of pixels from the left. The y-coordinate is the number of pixels from the top (not from the bottom). pixels: a 1024 * 768 resolution screen

23. Drawing Ovals and Circles • The drawOvalmethod draws only the outline of the oval. canvas.drawOval(100, 50, 90, 50); • The fillOvalmethod draws a filled-in oval. canvas.fillOval(100, 50, 90, 50);

24. Drawing Ovals and Circles • The drawOval and fillOval methods take four arguments. • The first two arguments indicate the upper-left corner of an invisible rectangle around the oval. • The last two arguments indicate the width and height of the oval. • A circle is just an oval whose height is the same as its width.

25. Drawing Ovals and Circles • Figure1.7 The Oval Drawn by canvas.drawOval(100, 50, 90, 50) • (first two parameters: coordinates of the upper left point of its circumscribed rectangle)

26. Size and Positions of Figures • Sizes and positions are given in pixels. • Think of the display surface as being a two-dimensional grid of individual pixels.

27. Drawing Arcs • The drawArcmethod draws an arc. drawArc(100, 50, 200, 200, 180, 180); • The drawArcmethod takes six arguments. • The first four arguments are the same as the four arguments needed by the drawOvalmethod. • The last two arguments indicate where the arc starts, and the number of degrees through which is sweeps. • 0 degrees is horizontal and to the right. • When it goes counterclockwise, we say it sweeps a positive degree; otherwise it sweeps a negative degree.

28. Specifying an Arc • Figure 1.8a

29. Specifying an Arc • Figure 1.8b

30. Specifying a Drawing Color (Chap. 3) When drawing a shape inside an applet’s paint method, think of the drawing being done with a pen that can change colors. The method setColor changes the color of the "pen." canvas.setColor(Color.YELLOW); Drawings done later appear on top of drawings done earlier.

31. Specifying a Drawing Color • Listing 3.6class YellowFace Sample screen output

32. Specifying a Drawing Color • Figure 3.10 Predefined Colors for the setColor Method

33. Creating a JFrameApplication 1. import javax.swing.JFrame; 2. extends JFrame; 3. Add what is called a constructor (who has the same name as the class!!) public NameOfClass() { setSize(600,400); setDefaultCloseOperation(EXIT_ON_CLOSE); } 4. Add public void paint(Graphics canvas) { //your code to draw things here }

34. Creating a JFrameApplication 5. Add a main method that displays the window public static void main(String[] args) { HappyFace guiWindow = new HappyFace(); guiWindow.setVisible(true); }

35. Homework 2 • http://www.cse.sc.edu/~huhns/csce145/Homework/prog2.html • 1. Use JOptionPane to input the diameter. • 2. Calculate and output the results. Math.sqrt(x) – square root of x • 3. Draw an outline of the graphic image using JFrame. • 4. Draw a filled graphic image using JFrame.

36. Question • How to pass the diameter we obtained to the class and let the JFrame use it? • class HappyFaceJFrameEasy

37. HappyFaceJFrameEasy.java • import javax.swing.JFrame; • import java.awt.Color; • import java.awt.Graphics; • import javax.swing.JOptionPane; • public class HappyFaceJFrameEasy extends JFrame • { • int r2; • public void paint(Graphics canvas) • { canvas.setColor(Color.BLUE); • canvas.drawOval(100, 50, r2, r2); • } • public HappyFaceJFrameEasy(int r) • { r2 = r; • setSize(400,400); • setDefaultCloseOperation(EXIT_ON_CLOSE); • } • public static void main(String[] args) • { String s = JOptionPane.showInputDialog("Enter your radius (an integer):"); • int r = Integer.parseInt(s); • HappyFaceJFrameEasy guiWindow = new HappyFaceJFrameEasy(r); • guiWindow.setVisible(true); • JOptionPane.showMessageDialog(null,"the area is " + Math.PI * r * r); • } • }

38. To calculate the coordinates • canvas.drawOval(x, y, Width, Height) • Suppose coordinates of point A’ is (Xa0, Ya0),the yellow square A’B’D’C’ and the red square ABDC are squares whose centers are also the red circle’s center. • To draw the red square, first question is what point A’s coordinates are assuming the radius of the circle is r? • Xa = Xa0 + the horizontal distance between A and A’ = Xa0 + (r - CE) = Xa0 + (r – r / Math.sqrt(2)) • Ya = Ya0 + (r – r / Math.sqrt(2)) • A’s coordinates are (Xa, Ya) • Do similar thing to calculate the side length.