Download COMP201 Java Programming

COMP201 Java Programming
Part II: GUI Programming
Topic 8: Basics of Graphics
Programming
Reading: Chapter 7
COMP201 Topic 8 / Slide 2
Outline

Introduction: Ingredients of Swing GUI

Creating a frame (window)

Displaying information in a panel




Displaying texts
2D shapes
Colors and fonts
Images
COMP201 Topic 8 / Slide 3
Introduction: Ingredients of Swing GUI

Build GUI with javax.Swing, JDK1.2

Better than java.awt, JDK1.1
Top-level
container: JFrame (Window) in this case

Menu bar (optional)

contentPane: contains all visible components

Intermediate containers to organize
various GUI components: JPanels in this case
JPanel2
JPanel1
JPanel3
COMP201 Topic 8 / Slide 4
Introduction: Ingredients of Swing GUI


To create a swing GUI
1.
Create a top-level container: JFrame
2.
Get contentPane of the top-level container
3.
Create JPanels and add GUI components to the JPanels
4.
Layout the JPanels onto the contentPane.
JPanels can contain


Atomic components such as JButtons and Jlabels (Topic 10)
Custom graphics such as text, shapes, and images (This Topic)
COMP201 Topic 8 / Slide 5
Creating a Frame

Frame: top-level window, not contained inside another
window.

Use JFrame class in javax.swing package.

What can you do with JFrame:
- toFront/toBack
- Create a new one
- is/setResizable
- get/setSize
- get/setLocation - dispose
- setIconImage
- get/setTitle
- show/hide
COMP201 Topic 8 / Slide 6
Creating a Frame

Most methods for working with JFrame inherited from
superclasses:
Object
Ancestor of all GUI objects
Component
Container
JComponent
JPanel
Window
Frame
JFrame
COMP201 Topic 8 / Slide 7
Creating a Frame

java.awt.Component:
getLocation, setBounds, setLocation,
getSize, setSize, setBackground,
setForeground, repaint, ……

java.awt.Window:
toFront, toBack, show, hide, ……

java.awt.Frame:
dispose, setResizable, setTitle,
setIcomImage, ……
COMP201 Topic 8 / Slide 8
Creating a Frame

Example:
class SimpleFrame extends JFrame
Default constructor of
{
JFrame is called.
public SimpleFrame()
{
setSize(WIDTH, HEIGHT);
}
public static final int WIDTH = 300;
public static final int HEIGHT = 200;
}
Default
size of a JFrame: 0x0
COMP201 Topic 8 / Slide 9
Creating a Frame

Things to know about coordinates
–
–
–
–
Units are expressed pixels (depends on resolution)
Coordinate system is vertically-flipped from Cartesian
(0,0) is upper left corner of screen
Frame defaults to location (0,0) and size (0,0)
COMP201 Topic 8 / Slide 10
Creating a Frame
import javax.swing.*;
public class SimpleFrameTest
{
public static void main(String[] args)
{
SimpleFrame frame = new SimpleFrame();
frame.setDefaultCloseOperation
(JFrame.EXIT_ON_CLOSE);
frame.show();
}
} // SimpleFrameTest.java


Create a SimpleFrame.
Show it.
JDK1.3 feature
COMP201 Topic 8 / Slide 11
Internal Structure of JFrame
JFrame
JRoot
JLayerPane
menu bar
content pane
glass pane
Button
COMP201 Topic 8 / Slide 12
Instance fields of JRootPane:
protected JMenuBar menuBar
protected Container contentPane
protected JLayeredPane layeredPane
 Manages the menu bar and content pane.
 Menu bar positioned at top of frame and content
pane fills the remaining area
protected Component glassPane
The glass pane that overlays the menu bar and
content pane, so it can intercept mouse movements
and such.
…..
COMP201 Topic 8 / Slide 13
Creating a Frame

Frame Positioning: Want a frame that



Is centered in the middle of the screen
Covers ¼ of the screen (Run CenteredFrameTest.java).
Coordinate system:

Units are expressed in pixels (effects depend on monitor resolution)
COMP201 Topic 8 / Slide 14
Creating a Frame

Also need dimension of screen, which is platform dependent

Get system-dependent info using java.awt.Toolkit
class:
getDefaultToolkit --- static method for creating a Toolkit object
getScreenSize --- get size of screen
getImage --- load image
class CenteredFrame extends JFrame
{
public CenteredFrame()
{
// get screen dimensions
Toolkit kit = Toolkit.getDefaultToolkit();
Dimension screenSize = kit.getScreenSize();
int screenHeight = screenSize.height;
int screenWidth = screenSize.width;
// center frame in screen
setSize(screenWidth / 2, screenHeight / 2);
setLocation(screenWidth / 4, screenHeight / 4);
// set frame icon and title
Image img = kit.getImage("icon.gif");
setIconImage(img);
setTitle("CenteredFrame");
}} //CenteredFrameTest.java
COMP201 Topic 8 / Slide 16
Displaying Information in a Frame

An Example:

To create a GUI
1.
Create a top-level container: JFrame
2.
Get contentPane of the top-level
container
3.
Create JPanels and add GUI
components to the JPanels
4.
Add the JPanels onto the
contentPane.
COMP201 Topic 8 / Slide 17
Displaying Information in a Frame

How to add JPanel onto the contentPane of JFrame?
JPanel p = new JPanel();
Container cPane = frame.getContentPane();
cPane.add(p);
COMP201 Topic 8 / Slide 18
Displaying Information in a Frame

How to add custom graphics, in this case a text string, to JPanel?
 A JPanel draws its contents by calling its paintComponent
method (inherited from JComponent).

We can:
– Define a new class that extends JPanel
– Override the paintComponent method to draw what we want.
Class MyPanel extends JPanel
{ public paintComponent(Graphics g)
{ super.paintComponent(g); // draw background
// code for drawing
}
}
COMP201 Topic 8 / Slide 19
Displaying Information in a Frame

Method paintComponent is called automatically when
opening, resizing, and moving window.

Never call it explicitly.

Use the repaint method of Component to force
repainting.
COMP201 Topic 8 / Slide 20
Displaying Information in a Frame

How to tell paintComponent(Graphics g) what and
how to draw?

The method takes a java.awt.Graphics object as input.

We encapsulate information about what/how to draw in the
Graphics object.

Next:
–
–
–
–
Displaying texts
Colors and fonts
2D shapes
Images
COMP201 Topic 8 / Slide 21
Example: NotHelloWorld

Step1. Derive a new class NotHelloWorldPanel by extending
JPanel and specify what we want to draw on the panel and how.
class NotHelloWorldPanel extends JPanel
{
public void paintComponent(Graphics g)
{ // Draw background
super.paintComponent(g);
g.drawString("Not a Hello, World program",
MESSAGE_X, MESSAGE_Y);
}
public static final int MESSAGE_X = 75;
public static final int MESSAGE_Y = 100;
} //NotHelloWorld.java

Step2 : Derive a new class NotHelloWorldFrame by extending
JFrame, create a NotHelloWorldPanel and add it to the
contentPane of the frame.
class NotHelloWorldFrame extends JFrame
{
public NotHelloWorldFrame()
{
setTitle("NotHelloWorld");
setSize(WIDTH, HEIGHT);
// add panel to frame
NotHelloWorldPanel panel = new
NotHelloWorldPanel();
Container contentPane = getContentPane();
contentPane.add(panel);
}
public static final int WIDTH = 300;
public static final int HEIGHT = 200;
} //NotHelloWorld.java
• Step3 : Create a NotHelloWorldFrame and show it.
import javax.swing.*;
import java.awt.*;
public class NotHelloWorld
{
public static void main(String[] args)
{
NotHelloWorldFrame frame = new NotHelloWorldFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.show();
}
}
COMP201 Topic 8 / Slide 24
Using Text Fonts


Class java.awt.Font
Create Font objects:
Font f1 = new Font(“Serif”, Font.PLAIN, 20);
Font f2 = new Font(“Serif”, Font.PLAIN +
Font.ITALIC, 16);

Using fonts:
Graphics g;
g.setFont(f1);
g.drawString("Not a Hello, World program",
75, 100);
COMP201 Topic 8 / Slide 25
Using Text Fonts

Only 5 font families guaranteed to exist
–
–
–
SansSerif, Serif, Monospaced, Dialog, DialogInput
Can ask for others by name(“Arial”) but may not get what
you want
Find out all available fonts on a machine using the
getAvailableFontFamilyNames method of the
GraphicsEnvironment class.

Style limited to PLAIN, BOLD, ITALIC

Default using plain 12pt SansSerif
COMP201 Topic 8 / Slide 26
Using Text Fonts

Class java.awt.FontMetrics
Methods for getting information about fonts:
NotHelloWorld2.java
COMP201 Topic 8 / Slide 27
Using Colors


Class java.awt.Color
Create new color objects:
Color c = new Color(100, 25, 200);
•
•

Red-green-blue (RGB) color model
Each component can have in range 0 to 255
13 predefined color constants
Color.black, Color.red, Color.green, etc.

Using Colors:
Graphics2D g;
g.setPaint(Color.pink); g.drawString(“Hi”, 55, 55);
g.setPaint(c); g.drawString(“there”, 80, 55);
public void paintComponent(Graphics g)
{ super.paintComponent(g);
setFonts(g);
String s1 = "Not a ";
String s2 = "Hello, World";
String s3 = " Program";
int w1 = fm.stringWidth(s1);
int w2 = fim.stringWidth(s2);
int w3 = fm.stringWidth(s3);
Dimension d = getSize();
int cx = (d.width - w1 - w2 - w3) / 2;
int cy = (d.height - fm.getHeight()) / 2 +fm.getAscent();
g.setFont(f);
g.drawString(s1, cx, cy);
cx += w1;
g.setFont(fi);
g.setColor(Color.red);
g.drawString(s2, cx, cy);
cx += w2;
g.setFont(f);
g.drawString(s3, cx, cy);
}
COMP201 Topic 8 / Slide 29
2D Shapes
 You can draw lines, rectangles, ellipses, etc, using class
java.awt.Graphics
drawLine, drawArc, drawPolygon
drawPolyline, drawRect, drawRoundRect,
draw3DRect, fillRect,

The subclass java.awt.Graphics2D is better

Need cast:
public void paintComponent(Graphics g)
{
Graphics2D g2 = (Graphics2D) g;
…
}
COMP201 Topic 8 / Slide 30
2D Shapes

You can draw by using the methods shown on the previous slides.

It’s better to use the geometric shape classes: java.awt.geom.*
Line2D, Rectangle2D, Ellipse2D, Point2D, …
 All those classes implement the Shape interface and Graphics2D has
method draw(Shape s)

All are abstract classes with two concrete static inner classes. E.g.
Rectangle2D.Double, Rectangle2D.Float
Usually use the Double version.
 The Float version saves space but is troublesome
float f = 1.2; //illegal.
Need cast: float f = (float) 1.2;

See DrawTest.java
COMP201 Topic 8 / Slide 31
2D Shapes: draw rectangles
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
// draw a rectangle
double leftX = 100;
double topY = 100;
double width = 200;
double height = 150;
Rectangle2D rect = new Rectangle2D.Double(leftX,
topY,width, height);
g2.draw(rect);
COMP201 Topic 8 / Slide 32
2D Shapes:draw line and circle
// draw the enclosed ellipse
Ellipse2D ellipse = new Ellipse2D.Double();
ellipse.setFrame(rect);
g2.draw(ellipse);
// draw a diagonal line
g2.draw(new Line2D.Double(leftX, topY,
leftX + width, topY + height));
// draw a circle with the same center
double centerX = rect.getCenterX();
double centerY = rect.getCenterY();
double radius = 150;
Ellipse2D circle = new Ellipse2D.Double();
circle.setFrameFromCenter(centerX, centerY,
centerX + radius, centerY + radius);
g2.draw(circle);}}
COMP201 Topic 8 / Slide 33
Drawing Lines and Shapes

Paint Mode


Default: last drawn shape covers earlier one.
XOR mode:
If you draw one shape twice in XOR mode, the
second one erases the first one.
COMP201 Topic 8 / Slide 34
Displaying Images


Java Toolkit object can read GIF and JPEG files.
Get image from file
Image image =
Toolkit.getDefaultToolkit().getImage(FileName);

Get image from the Net:
URL u = new URL(http://www.somehwere/ImageFile);
Image image = Toolkit.getDefaultToolkit().getImage(u);

Display image:
g.drawImage(image, x, y, null);
COMP201 Topic 8 / Slide 35
Displaying Images

Java spawn a separate thread to load image, which run
in parallel with the main thread.

Use MediaTracker class to wait until image is
completely loaded before drawing

public ImagePanel()
{ image = Toolkit.getDefaultToolkit().getImage
("Cat.gif");
MediaTracker tracker = new MediaTracker(this);
tracker.addImage(image, 0);
try { tracker.waitForID(0); }
catch (InterruptedException e) {}
}
Example: ImageTest.java
COMP201 Topic 8 / Slide 36
Summary

To create a Swing GUI

Create JPanels and add GUI components to the JPanels
– Custom graphics:
 Override the paintComponent(Graphics g) method

Encapsulate what and how to draw in the graphics object
– Predefined GUI components: simply add to the panel (Topic 10)
– Hierarchical: Panels can contain other panels

Create a top-level container: JFrame and layout the JPanels
onto the contentPane of the container