CS 46A - Lecture 8

Cover page image

Pre-class reading

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

Classes Graphics and Graphics2D

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

import javax.swing.JFrame;

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

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

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

      frame.setVisible(true);
   }
}

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

An Ellipse

Lines

Drawing Text

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

Colors

Predefined Colors and Their RGB Values

Color RGB Value
Color.BLACK 0, 0, 0     
Color.BLUE 0, 0, 255     
Color.CYAN 0, 255, 255     
Color.GRAY 128, 128, 128     
Color.DARKGRAY 64, 64, 64     
Color.LIGHTGRAY 192, 192, 192     
Color.GREEN 0, 255, 0     
Color.MAGENTA 255, 0, 255     
Color.ORANGE 255, 200, 0     
Color.PINK 255, 175, 175     
Color.RED 255, 0, 0     
Color.WHITE 255, 255, 255     
Color.YELLOW 255, 255, 0     

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

Shape Class Outline

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

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

Three (!) Classes

Drawing a Car

Setting the Top Left Corner

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