CS 46A - Lecture 8

Pre-class reading

• Sections 2.11 - 2.13, 3.9

Graphical Applications and Frame Windows

To show a frame:

1. Construct an object of the JFrame class:

   JFrame frame = new JFrame();

2. Set the size of the frame:

   frame.setSize(300, 400);

3. If you'd like, set the title of the frame:

   frame.setTitle("An Empty Frame");

4. Set the "default close operation":

   frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

5. Make the frame visible:

   frame.setVisible(true);

A Frame Window

ch02/emptyframe/EmptyFrameViewer.java

import javax.swing.JFrame;

public class EmptyFrameViewer
{
   public static void main(String[] args)
   {
      JFrame frame = new JFrame();

      frame.setSize(300, 400);
      frame.setTitle("An Empty Frame");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

      frame.setVisible(true);
   }
}

Drawing on a Component

• In order to display a drawing in a frame, define a class that extends the JComponent class
• Place drawing instructions inside the paintComponent method. That method is called whenever the component needs to be repainted:

  public class RectangleComponent extends JComponent
  {
     public void paintComponent(Graphics g)
     {
        Drawing instructions go here
     }
  }

Classes Graphics and Graphics2D

• Graphics class lets you manipulate the graphics state (such as current color)
• Graphics2D class has methods to draw shape objects
• Use a cast to recover the Graphics2D object from the Graphics parameter:

  public class RectangleComponent extends JComponent
  {
     public void paintComponent(Graphics g)
     {
        // Recover Graphics2D
        Graphics2D g2 = (Graphics2D) g;
        . . .
     }
  }

• Call method draw of the Graphics2D class to draw shapes, such as rectangles, ellipses, line segments, polygons, and arcs:

  public class RectangleComponent extends JComponent
     {
     public void paintComponent(Graphics g)
     {
        . . .
        Rectangle box = new Rectangle(5, 10, 20, 30);
        g2.draw(box);
        . . .
     }
  }

Drawing Rectangles

ch02/rectangles/RectangleComponent.java

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JComponent;

/*
   A component that draws two rectangles.
*/
public class RectangleComponent extends JComponent
{  
   public void paintComponent(Graphics g)
   {  
      // Recover Graphics2D
      Graphics2D g2 = (Graphics2D) g;

      // Construct a rectangle and draw it
      Rectangle box = new Rectangle(5, 10, 20, 30);
      g2.draw(box);

      // Move rectangle 15 units to the right and 25 units down
      box.translate(15, 25);

      // Draw moved rectangle
      g2.draw(box);
   }
}

Using a Component

1. Construct a frame.
2. Construct an object of your component class:

   RectangleComponent component = new RectangleComponent();

3. Add the component to the frame:

   frame.add(component);

4. Make the frame visible.

ch02/rectangles/RectangleViewer.java

Lecture 8 Clicker Question 1

Suppose the  RectangleComponent's paintComponent method is:

   public void paintComponent(Graphics g)
   {  
      Rectangle box = new Rectangle(10, 10, 10, 10);
      g.draw(box);
      box.translate(10, 10);
      g.draw(box);
      box.translate(10, 10);
      g.draw(box);
      box.translate(10, 10);
   }

What does it draw?

1. Three squares aligned horizontally
2. Three squares aligned diagonally
3. Four squares aligned diagonally
4. Nothing—there is a compile-time error

Ellipses and Circles

• Ellipse2D.Double describes an ellipse
• This class is an inner class — doesn't matter to us except for the import statement:

  import java.awt.geom.Ellipse2D; // no .Double

• Must construct and draw the shape:

  Ellipse2D.Double ellipse = new Ellipse2D.Double(x, y, width, height);
  g2.draw(ellipse);

An Ellipse

Lines

• To draw a line:

  Line2D.Double segment = new Line2D.Double(x1, y1, x2, y2);
  g2.draw(segment);

  or,

  Point2D.Double from = new Point2D.Double(x1, y1);
  Point2D.Double to = new Point2D.Double(x2, y2);
  Line2D.Double segment = new Line2D.Double(from, to);
  g2.draw(segment);

Drawing Text

g2.drawString("Message", 50, 100);

Colors

• Standard colors Color.BLUE, Color.RED, Color.PINK etc.
• Specify red, green, blue between 0 and 255:

  Color magenta = new Color(255, 0, 255);

• Set color in graphics context:

  g2.setColor(magenta);

• Color is used when drawing and filling shapes:

  g2.fill(rectangle); // filled with current color

Predefined Colors and Their RGB Values

Alien Face

ch02/face/FaceComponent.java

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import javax.swing.JComponent;

/*
   A component that draws an alien face
*/
public class FaceComponent extends JComponent
{  
   public void paintComponent(Graphics g)
   {  
      // Recover Graphics2D 
      Graphics2D g2 = (Graphics2D) g;

      // Draw the head
      Ellipse2D.Double head = new Ellipse2D.Double(5, 10, 100, 150);
      g2.draw(head);

      // Draw the eyes
      g2.setColor(Color.GREEN);
      Rectangle eye = new Rectangle(25, 70, 15, 15);
      g2.fill(eye);
      eye.translate(50, 0);
      g2.fill(eye);

      // Draw the mouth
      Line2D.Double mouth = new Line2D.Double(30, 110, 80, 110);
      g2.setColor(Color.RED);
      g2.draw(mouth);

      // Draw the greeting
      g2.setColor(Color.BLUE);
      g2.drawString("Hello, World!", 5, 175);
   }
}

ch02/face/FaceViewer.java

import javax.swing.JFrame;

public class FaceViewer
{
   public static void main(String[] args)
   {
      JFrame frame = new JFrame();
      frame.setSize(150, 250);
      frame.setTitle("An Alien Face");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

      FaceComponent component = new FaceComponent();
      frame.add(component);

      frame.setVisible(true);
   }
}

Lecture 8 Clicker Question 2

What do the following instructions draw?

Point2D.Double p1 = new Point2D.Double(0, 0);
Point2D.Double p2 = new Point2D.Double(10, 30);
Point2D.Double p3 = new Point2D.Double(20, 0);

Line2D.Double segment1 = new Line2D.Double(p1, p2);
Line2D.Double segment2 = new Line2D.Double(p2, p3);

1. The letter X
2. The letter V
3. A + sign
4. None of the above

Shape Classes

• When drawing a complex shape, make it into a class
• Then you can draw more than one

Shape Class Outline

public class Car
{
   public Car(int x, int y)
   {
      // Remember position
      . . .
   }

   public void draw(Graphics2D g2)
   {
      // Drawing instructions
      . . .
   }
}

Three (!) Classes

• The Car class is responsible for drawing a single car.
• CarComponent constructs two Car objects and calls their draw methods
• CarViewer shows CarComponent in frame

Drawing a Car

• Secret weapon: graph paper

• Translates into drawing instructions

  g2.draw(new Ellipse2D.Double(20, 10, 10, 10)); // wheel
   ...

Setting the Top Left Corner

• That car always has top left corner (0, 0)
• Want arbitrary (xLeft, yTop)
• Add to all x and y values:

  g2.draw(new Ellipse2D.Double(xLeft + 20, yTop + 10, 10, 10))

• Set in constructor

  public class Car
  {
     private int xLeft;
     private int yTop;
  
     public Car(int x, int y)
     {
        xLeft = x;
        yTop = y;
     }
     ...
  }

ch03/car/Car.java

import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Line2D;
import java.awt.geom.Point2D;

/**
   A car shape that can be positioned anywhere on the screen.
*/
public class Car
{
   private int xLeft;
   private int yTop;

   /**
      Constructs a car with a given top left corner.
      @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)
   {
      xLeft = x;
      yTop = y;
   }

   /**
      Draws the car.
      @param g2 the graphics context
   */
   public void draw(Graphics2D g2)
   {
      Rectangle body 
            = new Rectangle(xLeft, yTop + 10, 60, 10);      
      Ellipse2D.Double frontTire 
            = new Ellipse2D.Double(xLeft + 10, yTop + 20, 10, 10);
      Ellipse2D.Double rearTire
            = new Ellipse2D.Double(xLeft + 40, yTop + 20, 10, 10);

      // The bottom of the front windshield
      Point2D.Double r1 
            = new Point2D.Double(xLeft + 10, yTop + 10);
      // The front of the roof
      Point2D.Double r2 
            = new Point2D.Double(xLeft + 20, yTop);
      // The rear of the roof
      Point2D.Double r3 
            = new Point2D.Double(xLeft + 40, yTop);
      // The bottom of the rear windshield
      Point2D.Double r4 
            = new Point2D.Double(xLeft + 50, yTop + 10);

      Line2D.Double frontWindshield 
            = new Line2D.Double(r1, r2);
      Line2D.Double roofTop 
            = new Line2D.Double(r2, r3);
      Line2D.Double rearWindshield
            = new Line2D.Double(r3, r4);
   
      g2.draw(body);
      g2.draw(frontTire);
      g2.draw(rearTire);
      g2.draw(frontWindshield);      
      g2.draw(roofTop);      
      g2.draw(rearWindshield);      
   }
}

ch03/car/CarComponent.java

import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JComponent;

/**
   This component draws two car shapes.
*/
public class CarComponent extends JComponent
{  
   public void paintComponent(Graphics g)
   {  
      Graphics2D g2 = (Graphics2D) g;

      Car car1 = new Car(0, 0);
      
      int x = getWidth() - 60;
      int y = getHeight() - 30;

      Car car2 = new Car(x, y);

      car1.draw(g2);
      car2.draw(g2);      
   }
}

ch03/car/CarViewer.java

import javax.swing.JFrame;

public class CarViewer
{
   public static void main(String[] args)
   {
      JFrame frame = new JFrame();

      frame.setSize(300, 400);
      frame.setTitle("Two cars");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

      CarComponent component = new CarComponent();
      frame.add(component);

      frame.setVisible(true);
   }
}

Lecture 8 Clicker Question 3

How many classes are needed to produce a program that displays the following?

1. Three classes
2. Four classes
3. Five classes
4. Six classes