Core Java

Graphics Programming

Slide navigation: Forward with space bar, → arrow key, or PgDn. Backwards with ← or PgUp.

Understand the design decisions behind the Swing Toolkit

Introducing Swing

• Java 1.0 had the Abstract Window Toolkit (AWT):
  • Worked on Windows, Mac OS, X11.
  • “Lowest common denominator” of the target platforms.
  • Inconsistent in look and feel, behavior.
  • Write once, debug everywhere.
• Java 1.2 put a new UI toolkit, called Swing, on top of the AWT foundations.
• In Swing, all UI widgets are painted from scratch.
• Pluggable look and feel can mimic the host platform or provide a cross-platform look.
• Other graphical user interface toolkits:
  • Java FX
  • SWT
  • Android

Display frame windows

Creating Frames

• Frame=Top-level window with a title bar.
• Not painted by Swing—window decorations come from host OS.
• Extend JFrame class:

  class SimpleFrame extends JFrame
  {
     public SimpleFrame() { setSize(300, 200); }
  }

• Set the “default close operation” and show the frame:

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

• Add that code to the event queue:

  EventQueue.invokeLater(() ->
  {
     frame initialization
  });

• All code that updates Swing components must run in the event thread.

simpleFrame

Frame Properties

• Change position and appearance:

  setLocation
  setBounds
  setIconImage
  setTitle
  setResizable
  

• Can get screen dimensions from Toolkit object:

  Toolkit kit = Toolkit.getDefaultToolkit();
  Dimension screenSize = kit.getScreenSize();
  

• Alternatively, fill frame with UI elements, and then call:

  frame.pack();
  

sizedFrame

Drawing on a Component

• Draw onto a component, not directly onto a frame.
• Add one or more components to the frame:

  frame.add(comp);
  

• A component extends the JComponent class:

  class MyComponent extends JComponent
  {
     public void paintComponent(Graphics g)
     {
        code for drawing
     }
  }

• Use the Graphics object for drawing:

  g.drawString("Not a Hello World program", 75, 100);
  

• A component should tell how big it wants to be:

  public Dimension getPreferredSize() { return new Dimension(300, 200); }

notHelloWorld

Display graphical shapes

Geometrical Shapes

• You can use the Graphics object to draw shapes:

  g.drawRect(75, 100, 200, 150);
  

• The Java 2D library provides objects for shapes.
• Can choose between float and double coordinates:

  Rectangle2D rect1 = new Rectangle2D.Double(7.5, 10.0, 200, 150);
  Rectangle2D rect2 = new Rectangle2D.Float(7.5F, 10.0F, 200, 150);

• Point2D is a point, Line2D a line:

  Point2D start = new Point2D.Double(10, 20);
  Point2D end = new Point2D.Double(100, 110);
  Line2D line = new Line2D.Double(start, end);
  

• Use draw method of Graphics2D class to draw any shape:

  Graphics2D g2 = (Graphics2D) g;
  g2.draw(line);
  

Rectangular Shapes

• Rectangle2D and Ellipse2D are “rectangular” shapes.
• An ellipse is specified by its bounding box:
  
• RectangularShape class has methods:

  getX/getY
  getWidth/getHeight
  getCenterX/getCenterY
  getMaxX/getMaxY
  setFrame
  

draw

Display colors, fonts, and images

Using Color

• Set the “paint” before drawing:

  g2.setPaint(Color.RED);
  g2.drawString("Warning!", 100, 100);

• Use fill instead of draw to fill a shape:

  g2.fill(rect); // fills rect with current paint

• Color constants for these colors:

  BLACK BLUE CYAN DARK_GRAY GRAY GREEN LIGHT_GRAY MAGENTA ORANGE PINK RED WHITE YELLOW

• Custom RGB colors:

  g2.setPaint(new Color(0, 128, 128)); // a dull blue-green

• Set background color:

  comp.setBackground(Color.PINK);
  

fill

Fonts

• The GraphicsEnvironment.getAvailableFonts method gives an array of all fonts.
• Font is constructed from face name, style, point size:

  Font font1 = new Font("SansSerif", Font.BOLD, 14);

• Logical font names:

  SansSerif, Serif, Monospaced, Dialog, DialogInput
  

• Font styles:

  Font.PLAIN, Font.BOLD, Font.ITALIC, Font.BOLD + Font.ITALIC

• Use deriveFont to change properties:

  Font font2 = font1.deriveFont(18F); // Change point size
  Font font3 = font1.deriveFont(Font.ITALIC); // Change style
  

Measuring String Dimensions

• In a proportionally spaced font, cannot compute string widths from point size.
• Get bounds from font render context:

  FontRenderContext context = g2.getFontRenderContext();
  Rectangle2D bounds = sansbold14.getStringBounds(message, context);

• Bounds are relative to baseline:

  double stringWidth = bounds.getWidth();
  double stringHeight = bounds.getHeight();
  double ascent = -bounds.getY();
  

  

listFonts

font

Images

• Easiest way to load an image:

  Image image = new ImageIcon(filename).getImage();
  

• An image isn't a shape, so you need to draw it like this:

  g.drawImage(image, x, y, null);

• Get image dimensions like this:

  int imageWidth = image.getWidth(null);
  int imageHeight = image.getHeight(null);
  

  • The null arguments are archaic “image observers” that were used for monitoring incremental loading over a dialup internet connection.
• Image tiling:

  for (int i = 0; i * imageWidth <= getWidth(); i++)
     for (int j = 0; j * imageHeight <= getHeight(); j++)
        if (i + j > 0) 
           g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight);
  

image