Download EE2E1 Lecture 5

EE2E1. JAVA Programming
Lecture 5
Graphics programming and Swing
Contents







Overview of graphics in Java – AWT & Swing
Frames
Swing inheritance hierarchy
Displaying graphics in frames – panels
Displaying text in graphics windows
Drawing simple graphics
Digital image processing in Java
Overview of graphics in Java –
AWT & Swing


Most modern application programs use
sophisticated graphics and have powerful graphical
user interfaces

Spreadsheets

Word processing

Web browsers

Email programs
Its important to extend our knowledge from
writing crude console-based programs to portable
graphical applications

Java, unlike C & C++, has standard packages for
graphics

2 related packages and sub-packages support
graphics in Java


java.awt (Abstract Windows Toolkit)

javax.swing
AWT is ‘peer-based’

Depends on graphical elements native local
platform’s graphics system

Unix/Windows graphical programs written
using AWT will have a different ‘look and feel’


Swing is much more platform independent

Graphical components are pre-built and are
simply painted onto windows

Relies less on the underlying runtime
environment

Usually slower than AWT-based programs
In practice graphical programs are a mixture of
Swing and AWT classes

AWT takes care of all of the event handling for
GUI’s (see later)
Frames
A frame is a top level window which is a
container for graphical components
(canvas, buttons, menus etc)
 The AWT has a Frame class and Swing has
a JFrame class
 The following program displays an empty
frame

import javax.swing.*;
class MyFrame extends JFrame
{
public MyFrame()
{
setTitle("My first graphics program");
setSize(400,300);
}
}
public class FrameTest
{
public static void main(String[] args)
{
JFrame frame=new MyFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}

A class MyFrame is defined which is a sub-class
of JFrame

A title is added

The frame is sized to 400x300 (by default, a
frame is 0x0)

The frame is created by a call to the constructor

The application terminates when the window is
closed

The frame is displayed by a call to
JFrame.setVisible(true)

This creates a separate thread which runs until
the program is terminated – the main thread
terminates
Swing inheritance hierarchy
The JFrame class inherits attributes from
higher level container classes
 Typically for resizing and positioning
frames
 Class names beginning with ‘J’ are Swing
classes – everything else is part of AWT

Component
Container
JComponent
Window
…..
Frame
JPanel
JFrame

Most swing components (for example
JPanel) are derived from the JComponent
class

JFrame, being a top level window, is
derived from the Window class

Other top level windows include JApplet
and JDialog
Top Level Containers : JDialog

javax.swing.JDialog:




More simple and limited than frames
Typically used for showing a short message on the screen
Also has a border and a title bar
Use the static method of JoptionPane to show standard
dialog boxes:
JOptionPane.showMessageDialog(null, "4+2=6");
Top Level Containers:JFileChooser

javax.swing.JFileChooser:


Allows the the user to choose a file
Supports “open” and “save”: showOpenDialog(),showSaveDialog()
JFileChooser fc = new JFileChooser();
int returnVal = fc.showOpenDialog(null);
if(returnVal == JFileChooser.APPROVE_OPTION)
System.out.println("File: " + fc.getSelectedFile());
14
Top Level Containers: JFrame

javax.swing.JFrame:


Top-level window with a title and a border.
Usually used as a program's main window
Internal Containers



Not Top level containers
Can contain other non-top level components
Examples:
–
–
–
JScrollPane: Provides a scrollable view of its
components
JSplitPane: Separates two components
JTabbedPane: User chooses which
component to see
16
Displaying graphics in frames –
panels
Frames are containers – they can contain
other user interface/graphical components
 A frame contains a content pane into which
components can be added
 The following code is typical

Container contentPane=frame.getContentPane();
Component c= ….; // UI or graphical component
contentPane.add (c); // Add to the frame

Frame
Content
pane
Panels


Panels (JPanel class) are added to the content
pane
Panels are themselves containers
 The can contain other UI components
 They also have a surface onto which graphics
can be drawn
 Text
 Basic shapes (lines, boxes etc)
 Images
Panels

Panels themselves are general purpose containers
allowing other graphics components to be easily
added
JFrame
JPanel
CIS 068
Drawing on panels

The paintComponent() method in
JComponent (a superclass of JPanel) must
be overridden

paintComponent() is called automatically
when the window has to be drawn or
redrawn – for example when it is moved by
the user. It is also called when the repaint()
method of a panel is called

The following code creates a class MyPanel
into which graphics can be drawn
class MyPanel extends JPanel
{
public void paintComponent(Graphics g)
{
super.paintComponent(g);
// Code placed here to draw graphics
}
}

The Graphics object defines the graphics
context (fonts, line styles, colours etc)

A call to super.paintComponent() calls the
paintComponent() method in JComponent
(the base class of JPanel)

This call sets up the graphics context and
performs other complex tasks
Displaying text in graphics
windows

Text can be drawn onto panels using the
Graphics.drawString() method

The text font and size can be optionally set/reset

The following program draws a string onto a panel

The panel is then added to a frame which is
then displayed using JFrame.setVisible(true)
import javax.swing.*;
import java.awt.*;
public class MyPanel extends JPanel
{
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawString("Hello there!",150,125);
}
}
import java.awt.event.*;
import javax.swing.*;
import java.awt.*;
public class HelloFrame extends JFrame
{
public HelloFrame()
{
setTitle("Drawing a string example");
setSize(400,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container contentPane=getContentPane();
contentPane.add(new MyPanel());
}
}
public class FrameTest
{
public static void main(String[] args)
{
JFrame frame=new HelloFrame();
frame.setVisible(true);
}
}

Text fonts can be set/reset


The existing font applies until it is reset
The following code sets a bold Helvetica
font with a larger font size
public class MyPanel extends JPanel
{
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Font f=new Font(“Helvetica”,Font.BOLD,25);
g.setFont(f);
g.drawString("Hello there!",150,125);
}
}
Drawing simple graphics


Class java.awt.Graphics contains methods which
allow simple graphics to be drawn in different
colours
Graphics.setcolor() sets the drawing colour
 Colour is represented by the class
java.awt.Color(int red, int blue, int green)
defining the RGB components
 Preset constants exist (defined as static constants
in Color)
 Color.red
 Color.orange
 Color.pink
 etc

Examples of different shapes

Graphics.drawLine(int x1, int y1, int x2, int y2)
draws a straight line from (x1,y1) to (x2,y2)

Graphics.drawRect(int x, int y, int w, int h)
draws a rectangle from upper left hand corner
(x,y) with width w and height h

Graphics.drawOval(int x, int y, int w, int h)
draws an outline of an ellipse with a ‘bounding
rectangle’ as above

Graphics.drawPolygon(int[] xc, int[] yc, int n)
draws a polygon with n vertices with the coordinates being stored in arrays xc and yc

Graphics.fillOval (int x, int y, int w, int h) fills
the oval with the current draw colour
class DrawPanel extends JPanel
{
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.setColor(Color.red);
g.drawRect(20,30,50,50);
g.setColor(Color.green);
g.drawOval(100,30,90,60);
g.fillOval(100,30,90,60);
g.setColor(Color.yellow);
int[] xcoords={180,200,250,275,225};
int[] ycoords={170,130,130,150,200};
g.drawPolygon(xcoords,ycoords,5);
g.fillPolygon(xcoords,ycoords,5);
}
}
Swing Components
35
Swing Components
Swing components
We will see in the next lecture how we can
put these together to build graphical user
interfaces (GUI’s)
 Swing tutorial
 Swing component examples

Digital Image Processing in Java

Digital Image Processing (DIP) deals with manipulation of
digital images using a digital computer
 Java can support and handle digital image processing
efficiently using various functions.
Digital Image Processing in Java

Java BufferedImage class is a subclass of the Image class
 It is used to handle and manipulate the image data
 All BufferedImage objects have an upper left corner
coordinate of (0, 0)
x
y
pixel

Documented in
http://docs.oracle.com/javase/7/docs/api/java/awt/image
/BufferedImage.html
Digital Image Processing in Java

Creating a BufferedImage object is easy

Both RGB and Greyscale images can be created
import java.awt.image.BufferedImage;
...
BufferedImage img = new BufferedImage(256, 256,
BufferedImage.TYPE_INT_RGB);




BufferedImage.TYPE_INT_RGB specifies RGB
BufferedImage.TYPE_INT_ARGB specified RGB
with an additional alpha (transparency channel)
BufferedImage.TYPE_BYTE_GRAY specifies
greyscale
etc
Digital Image Processing in Java

Using a BufferedImage object to read/write pixels
is easy
int r = 10; // red component 0...255
int g = 20; // green component 0...255
int b = 30; // blue component 0...255
int col = (r << 16) | (g << 8) | b;
img.setRGB(x, y, col);
Colour c = new Color(img.getRGB(x, y));
int red=c.getRed();
int green=c.getGreen();
int blue=c.getBlue();
Digital Image Processing in Java

Reading and writing a BufferedImage object
from/to file is also easy

A variety of file types (jpg, png etc) can be used

png is losless, jpg is lossy

Other file types can be created such as gif, bmp etc.

Makes use of the utility class javax.imageio.ImageIO
and static methods read(…) and write(…)

Check the docs for details!
import javax.imageio.ImageIO;
Digital Image Processing in Java

Example code snippet
import javax.imageio.ImageIO;
import java.io.File;
import java.awt.image.BufferedImage;
public class ImageIOExample {
public static void main(String[] args)
{
BufferedImage bImage = null;
try{
File image = new File(“myImageFile");
bImage = ImageIO.read(image);
ImageIO.write(bImage, “png",
new File("/image.png"));
ImageIO.write(bImage, “gif",
new File("myDir/image.gif"));
}
catch(Exception e){}
}
}
Digital Image Processing in Java

Displaying a BufferedImage object is also easy

We use the drawImage() method in a the JPanel class
public class ImagePanel extends Jpanel
{
private BufferedImage image;
public ImagePanel() {….}
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
}
Digital Image Processing in Java
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import javax.swing.*;
import java.awt.*;
public class ImageIOExample {
public static void main(String[] args)
{
BufferedImage bImage = null;
try{
File image = new File("Rooney.jpg");
bImage = ImageIO.read(image);
}
catch(Exception e){}
JFrame frame=new JFrame();
frame.setSize(400,500);
ImagePanel panel=new ImagePanel(bImage);
Container contentPane=frame.getContentPane();
contentPane.add(panel);
frame.setVisible(true);
}
}
Digital Image Processing in Java
class ImagePanel extends JPanel
{
private BufferedImage image;
public ImagePanel(BufferedImage im) {image=im;}
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
}
class ImageProcessor
{
// Add our image processing algorithms here!
}
Digital Image Processing in Java
class ImageProcessor
{
// Add our image processing algorithms here!
private BufferedImage image;
public ImageProcessor(BufferedImage im) {image=im;}
public void toGreyscale()
{
for (int x=0; x<image.getWidth(); x++)
for (int y=0; y<image.getHeight(); y++)
{
Color c = new
Color(image.getRGB(x, y));
int red=c.getRed();
int green=c.getGreen();
int blue=c.getBlue();
int grey=(red+green+blue)/3;
// roughly!
Color greyRGB=new
Color(grey,grey,grey);
image.setRGB(x,y,greyRGB.getRGB());
Digital Image Processing in Java

As an exercise, see if you can create an
ImageProcessor object within the
ImageIOExample main method and then
call it’s toGreyscale() method
And finally ….



Swing/AWT are massive and complex
 We have only scratched the surface
Typically Java API’s have been built on top of
Swing
 Java2D
 Java3D
In practice, you would use these to do real work
for example involving image processing or 3D
rendering