1 / 38

Graphics Supplement JOptionPane and JFrame

Graphics Supplement JOptionPane and JFrame. 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)

alaina
Download Presentation

Graphics Supplement JOptionPane and JFrame

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related