Principles of Computer Frame windows Science I Drawing with - PDF document

Lecture Outline Principles of Computer  Frame windows Science I  Drawing with shapes, colors, and text  Programming applets Prof. Nadeem Abdul Hamid  Developing test cases CSC 120 – Fall 2005 Lecture Unit 5 - Graphics 1 2 CSC120 — Berry College — Fall 2005 Frame Windows Showing a Frame Window  Graphical application (GUI = Graphical User Construct a JFrame object 1. JFrame frame = new JFrame(); Interface) shows information in a frame Set frame size: width and height 2. window frame.setSize(300, 400);  To show a frame window in Java Set title of frame 3.  Import javax.swing.* package frame.setTitle("An Empty Frame"); Set ‘default close operation’ (so that program exits  Construct JFrame object 4. when user closes the frame)  Set its size, title, close behavior frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  Make it visible Make the frame visible 5. frame.setVisible(true); EmptyFrameViewer.java 3 4 Drawing Shapes Extending JComponent public class RectangleComponent extends JComponent {  You do not draw directly on a frame public void paintComponent(Graphics g) {  To show anything in a frame (button, text, drawing, // drawing instructions go here... etc.) construct an appropriate component object } // end paintComponent method and add it to the frame } // end RectangleComponent class  JComponent class represents blank component  extends keyword indicates that our class,  We extend the JComponent class to have it draw RectangleComponent , inherits all the definitions and some shapes functionality of JComponent  Then add our modified version of JComponent to a frame  But, we override the definition of the paintComponent to display the drawing method so that it does something we want  paintComponent method is called by the Java system whenever the component needs to be redrawn 5 6 1

paintComponent Method Drawing with Graphics2D  Called automatically the first time window is shown public void paintComponent(Graphics g) { // Recover Graphics2D  also called whenever window is resized or shown again Graphics2D g2 = (Graphics2D) g; after being hidden // Construct a rectangle and draw it  Takes a Graphics object parameter Rectangle box = new Rectangle(5, 10, 20, 30);  A Graphics object stores the current graphics state: g2.draw(box); current color, font, background color, line size, etc. // Move rectangle 15 units to the right and 25 units down  Swing toolkit provides Graphics2D class box.translate(15, 25); Graphics2D : extended version of Graphics class that  // Draw moved rectangle allows more sophisticated method to draw two- g2.draw(box); dimensional objects }  To recover Graphics2D object from more primitive Graphics and Graphics2D classes part of java.awt package - Graphics object, use a cast :  needs to be imported Graphics2D g2 = (Graphics2D) g; AWT = Abstract Windowing Toolkit  7 8 Complete RectangleComponent Displaying Rectangle Frame import java.awt.*; // imports all classes in java.awt package import javax.swing.*; To display the RectangleComponent, you need to /**  A component that draws two rectangles. add it to a frame window */ public class RectangleComponent extends JComponent { public void paintComponent(Graphics g) Construct frame as described earlier 1. { Construct object of component class // Recover Graphics2D 2. Graphics2D g2 = (Graphics2D) g; RectangleComponent component = new RectangleComponent(); Add component to the frame 3. // Construct a rectangle and draw it Rectangle box = new Rectangle(5, 10, 20, 30); frame.add(component); g2.draw(box); or frame.getContentPane().add(component); in earlier Java versions // Move rectangle 15 units to the right and 25 units down Make frame visible 4. box.translate(15, 25); // Draw moved rectangle g2.draw(box); } } 9 10 RectangleViewer Class Applets import javax.swing.JFrame;  “Mini-application” embedded in a web page public class RectangleViewer {  Run with browser or applet viewer public static void main(String[] args) { JFrame frame = new JFrame();  Differences (from applications)  Don’t have a main method final int FRAME_WIDTH = 300; final int FRAME_HEIGHT = 400;  Embedded within HTML document (web page) frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);  Subject to more security constraints frame.setTitle("Two rectangles");  Not in control of own execution--respond to browser or frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); viewer RectangleComponent component = new RectangleComponent();  Can program graphics in single class - no need for frame.add(component); separate component and viewer classes frame.setVisible(true); } } 11 12 2

Applet Code Skeleton Running an Applet import java.awt.*;  Need an HTML file with an applet tag import javax.swing.*;  HTML = Hypertext Markup Language public class MyApplet extends JApplet {  Plain text file with formatting commands - ‘tags’ public void paint(Graphics g) {  Browser displays the contents of the file according to the // Recover Graphics2D formatting tags Graphics2D g2 = (Graphics2D) g;  To see HTML of file displayed in your browser, look for a ‘View // Drawing instructions go here ... Source’ command in the menus } }  Simplest file to display an applet:  Extend JApplet instead of JComponent <applet code="RectangleApplet.class" width="300" height="400">  Put drawing code inside paint method instead of </applet> paintComponent instead  RectangleApplet.java 13 14 Another HTML File Viewing Applets  Use applet viewer program with Java SDK <html> appletviewer RectangleApplet.html <head> <title>Two rectangles</title>  Only looks for <applet> tag in a web page-- allows you to </head> test your applets before putting them on a web page <body>  Or use a ‘Java 2-enabled’ browser <p>Here is my <i>first applet</i>:</p> <applet code="RectangleApplet.class"  WARNING: Browsers often save a copy of an width="300" height="400"> applet in memory for a long time (e.g. until the </applet> entire application is exited) so if you change applet </body> code and recompile, then reload the page in the </html> browser, the browser may not use the latest version of the applet 15 16 The Internet Graphical Shapes  1960s - ARPANET  Universities, research institutions  Rectangles…  Initial intent: allow remote execution of programs  Ellipses (and circles)  ‘Killer app’: electronic mail  Use Ellipse2D.Double (or Ellipse2D.Float )  1972 - Internet (Bob Kahn)  Stores coordinates as double values  Collection of interoperable networks  Lines  Share common protocols for transmitting data  Use Line2D.Double (or Line2D.Float )  1983: TCP/IP: Kahn and Vinton Cerf  1989 - WWW (Tim Berners-Lee)  Strange class names indicate they are inner classes  Hyperlinked documents  One class defined inside another  First interfaces clumsy to use  Just import java.awt.geom.Ellipse2D as usual and  1993: Mosaic graphical ‘web browser’ (Marc Andreesen) use above names  Lots of different protocols over Internet  FTP, telnet, gopher, file sharing, IM, smtp, … 17 18 3

Drawing Ellipses and Lines Drawing Strings  Must construct and then draw shape objects  Specify string and basepoint of first character Ellipse2D.Double ellipse = new Ellipse2D.Double(x, y, width, height); g2.draw(ellipse); g2.drawString("Message", 50, 100);  To construct a line object Line2D.Double segment = new Line2D.Double(x1, y1, x2, y2);  or Point2D.Double from = new Point2D.Double(x1, y1); Point2D.Double to = new Point2D.Double(x2, y2); • Give code to draw a circle with center (100, 100) and radius 25 Line2D.Double segment = new Line2D.Double(from, to); • Give code to draw a letter "V" by drawing two line segments g2.draw(segment); 19 20 Colors Predefined Colors and Fills  Graphics context object keeps track of the current  Color class defines commonly used colors drawing color Color.BLUE , Color.RED , Color.ORANGE , … (page 164)  To change the color, supply a Color object to the setColor method  Colors in Java specified by RGB (red-green-blue)  setColor method affects the line color model  To draw shapes filled in with current color  Components given as float values (use an F suffix) between 0.0F and 1.0F Rectangle box = ...; g2.fill( box ); Color magenta = new Color(1.0F, 0.0F, 1.0F); g2.setColor( magenta ); 21 22 Drawing Complex Shapes Finding Shape Coordinates  Good practice: Make a class for each /** grapical object A car shape that can be positioned anywhere on the screen. */ public class Car  Plan complex shapes by making sketches { /** Constructs a car with a given top left corner on (graph) paper @param x the x coordinate of the top left corner @param y the y coordinate of the top left corner */ public Car(int x, int y) { public class Car { . . . } /** Draws the car. public void draw(Graphics2D g2) { @param g2 the graphics context */ // Drawing instructions public void draw(Graphics2D g2) { . . . } } } } 23 24 4