October 30th, 2013

Graphical Applications and Frame Windows

A graphical application shows information inside a frame: a window with a title bar.
To show a frame, construct a JFrame object, set its size, and make it visible

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);
   }
}

The JFrame class is a part of the javax.swing package. Swing is the nickname for the graphical user interface library in Java. The “x” in javax denotes the fact that Swing started out as a Java extension before it was added to the standard library.
In order to display a drawing in a frame, declare 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.

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);
   }
}

When the component is shown for the first time, the paintComponent method is called automatically.
The method is also called when the window is re-sized, or when it is shown again after it was hidden.
The Graphics class is primitive. The designers of Java created the Graphics2D class, which extends the Graphics class. Whenever the Swing toolkit calls the paintComponent method, it actually passes a parameter of type Graphics2D

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);
   }
}

Applets have two advantages. They don’t need separate component and viewer classes; you only implement a single class. And, more importantly, applets run inside a web browser, allowing you to place your creations on a web page for all the world to admire.

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

/*
   An applet that draws two rectangles.
*/
public class RectangleApplet extends JApplet
{  
   public void paint(Graphics g)
   {  
      // Prepare for extended graphics
      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);
   }
}

Here is the simplest possible file to display the rectangle applet:

If you know HTML, you can proudly explain your creation, by adding text and more HTML tags:

 
 


Here is my first applet:

 
 

To run the applet, you have two choices. You can use the applet viewer, a program that is included with the Java Software Development Kit from Sun Microsystems. You simply start the applet viewer, giving it the name of the HTML file that contains your applets:

appletviewer RectangleApplet.html

The applet viewer only shows the applet, not the HTML text (see the left figure).
You can also show the applet inside any Java-enabled web browser, such as Firefox or Safari. (If you use Internet Explorer, you probably need to configure it. By default, Microsoft supplies either an outdated version of Java or no Java at all. Go to the java.com web site and install the Java plugin.) The second figure shows the applet running in a browser. As you can see, both the text and the applet are displayed.

Drawing Text:
You often want to put text inside a drawing, for example, to label some of the parts. Use the drawString method of the Graphics2D class to draw a string anywhere in a window. You must specify the string and the x- and y-coordinates of the basepoint of the first character in the string. For example,

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

Colors

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

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);
   }
}

Exercise 1: In this exercise, you will explore a simple way of visualizing a Rectangle object. The setBounds method of the JFrame class moves a frame window to a given rectangle. Complete the following program to visually show the translate method of the Rectangle class: 


import java.awt.Rectangle; 
import javax.swing.JFrame; 
import javax.swing.JOptionPane; 

public class TranslateDemo 
{
 
  public static void main(String[] args) 
   {
    // Construct a frame and show it

    JFrame frame = new JFrame(); 
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    frame.setVisible(true); 

    // Your work goes here:

    // Construct a rectangle and set the frame bounds 

    JOptionPane.showMessageDialog(frame, "Click OK to continue"); 

    // Your work goes here: 

    // Move the rectangle and set the frame bounds again
  }
} 

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
   An action listener that prints a message.
*/
public class ButtonListener implements ActionListener
{
   public void actionPerformed(ActionEvent event)
   {
      System.out.println("You clicked me!!!!");
   }            
}

import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;

/**
   This program demonstrates how to install an action listener.
*/
public class ButtonViewer
{  
   private static final int FRAME_WIDTH = 100;
   private static final int FRAME_HEIGHT = 60;

   public static void main(String[] args)
   {  
      JFrame frame = new JFrame();
      JButton button = new JButton("Click here if you dare!");
      frame.add(button);
     
      ActionListener listener = new ButtonListener();
      button.addActionListener(listener);

      frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setVisible(true);
   }
}

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

/**
   This component displays a circle that can be moved. 
*/
public class ShapeComponent extends JComponent
{  
   private static final int SQUARE_X = 100;
   private static final int SQUARE_Y = 100;
   private static final int SQUARE_WIDTH = 50;
   private static final int SQUARE_HEIGHT = 50;

   private Ellipse2D.Double circle;

   public ShapeComponent()
   {  
      // The rectangle that the paintComponent method draws
      circle = new Ellipse2D.Double(SQUARE_X, SQUARE_Y, SQUARE_WIDTH, SQUARE_HEIGHT);         
   }

   public void paintComponent(Graphics g)
   {  
      Graphics2D g2 = (Graphics2D) g;

      g2.draw(circle);
   }

   /**
      Moves the rectangle to the given location.
      @param x the x-position of the new location
      @param y the y-position of the new location
   */
   public void moveTo(int x, int y)
   {
      circle = new Ellipse2D.Double(x, y, SQUARE_WIDTH, SQUARE_HEIGHT);
      repaint();      
   }
} 

import java.awt.event.MouseListener;
import java.awt.event.MouseEvent;
import javax.swing.JFrame;
import java.awt.Color;

/**
   This program displays a ShapeComponent.
*/
public class ShapeComponentViewer
{  
   private static final int FRAME_WIDTH = 300;
   private static final int FRAME_HEIGHT = 400;

   public static void main(String[] args)
   {        
      final ShapeComponent component = new ShapeComponent();

      // Add mouse press listener         

      class MousePressListener implements MouseListener
      {  
         public void mousePressed(MouseEvent event)
         {  
            int x = event.getX();
            int y = event.getY();
            component.moveTo(x, y);
         }

         // Do-nothing methods
         public void mouseReleased(MouseEvent event) {}
         public void mouseClicked(MouseEvent event) {}
         public void mouseEntered(MouseEvent event) {}
         public void mouseExited(MouseEvent event) {}
      }
         
      MouseListener listener = new MousePressListener();
      component.addMouseListener(listener);

      JFrame frame = new JFrame();
      frame.getContentPane().setBackground(new Color(255, 0, 0));
      frame.add(component);

      frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setVisible(true);
   }
} 

Classwork:
Use the resources given to create a new GUI application, YI_CrazyCircle.py and its JFrame to generate random colors background and random filled circles whenever you click the mouse on the window.
Hint: To be able to also change the background at random create a rectangle of size equivalent to the JFrame. Instead of creating two public classes, create one inner class, the JComponnet inside main so it can have access to the JFrame size.