Getting Started with Graphics Programming

slimwhimperSoftware and s/w Development

Nov 3, 2013 (3 years and 9 months ago)

69 views

Getting Started with Graphics
Programming


Graphics Class Hierarchy


Frames


Creating frames, centering frames, adding
components to frames


Layout Managers


FlowLayout, GridLayout, BorderLayout


Drawing on Panels


The

paintComponent()

method


Using Colors


Drawing Geometric Figures


Lines, Rectangles, Ovals, Arcs, and Polygons

Getting Started with Graphics
Programming


Graphics Class Hierarchy


Frames


Layout Managers


Drawing on Panels


Using Colors


Drawing Geometric Figures

Graphical User Interface (GUI)


AWT
-

Abstract Windowing Toolkit




import java.awt.*;


(Heavyweight) AWT components are automatically mapped to the
platform
-
specific components.


SWING
-

GUI for Java (since Version 1.2)


import javax.swing.*;


(Lightweight) Swing components are painted directly on canvas
using Java code (excepts for the components that are subclasses of
java.awt.Window

and
java.awt
.
Panel
). Swing components are
less dependent on platform and use less of the native GUI
resources.

GUI Concepts


Component
: This is superclass of all user interface
classes (Buttons, Text Boxes, Labels, Menus, Lists,
etc
).


Container
: This is to group components.


Frames, panels and applets are examples of containers.


Panel
: This is invisible container that holds UI
components. Panels can be nested.
JPanel

can be used
as a canvas to draw graphics.


Layout Manager
: A manager is used to position and
place
components

in a
container
.


Graphics:
This is an abstract class that provides a
graphical context for drawing shapes and strings.

GUI Concepts, cont.


JComponent
: This is superclass for all the lightweight
Swing components. Its subclasses (
JLabel,JList,
JButton,JMenu
, etc.) are the basic elements for
constructing the GUI.


Color:

This class deals with the colors of graphics
components.


Font:

This is used for string drawing in
Graphics
.
You can specify font type (SansSerif), style (Bold), and size (24
points).


Event Handling:

How to respond to events such
as mouse clicks, button clicks, keyboard input, frame
events.

Java Class Hierarchy

Object

Component

Container

Panel

Window

Frame

JFrame

javax.swing
starts with

J

J
Component

J
Panel

JButton

JLabel

JCheckBox

...

JComponent


.


JButton

JMenuItem

JCheckBoxMenuItem

AbstractButton

JComponent

JMenu

.JRadioButtonMenuItem

.JToggleButton

JCheckBox

JRadioButton

.JCo
mboBox

.JInternalFrame

.JLayeredPane

.JList

.JMenuBar

.JOptionPane

.JPopupMenu

.JProgressBar

.JPane

.JFileChooser

.JScrollBar

.JScrollPane

.JSeparator

.JSplitPane

.JSlider

.JTabbedPane

.JTable

.JTableHeader

.JTextField

.JTextComponent

.JEditorPane

.JT
extArea

.JToolBar

.JToolTip

.JTree

.JRootPane

.JPanel

.JPasswordField

.JColorChooser

.JLabel

Frames


Frame is a window that is not contained inside
another window.


Frame is the basis to contain other user interface
components in Java graphical applications.


The
Frame

class can be used to create windows.

UI Components

Frame
Pull-down Menus
User Interface
Components (UI)
Panel
Panel
Panel
UI
Panel
UI
Panel
UI
Applet
Panel
User Interface
Components
Panel
User Interface
Components
Panel
User Interface
Components
Panel
User Interface
Components
panel
Pull-down Menus
Creating Frames

import javax.swing.*;

public class MyFrame {


public static void main(String[] args) {


JFrame frame = new JFrame("Test Frame");


frame.setSize(400,300);


frame.setVisible(true);


frame.setDefaultCloseOperation(


JFrame.EXIT_ON_CLOSE);


}


}

Centering Frames



By default, a frame is displayed in the upper
-
left corner of the screen.



To display a frame at a specified location, use
the
setLocation(x,y)

method in the
JFrame

class. This method places the upper
-
left corner of a frame at location (x,y).

Centering Frames, cont.

screenHeight
screenWidth
frameHeight
screenWidth
(x, y)
Frame
Screen
(0,0)
Centering Frames

import javax.swing.*;

public class MyFrame {


public static void main(String[] args) {


JFrame frame = new JFrame("Test Frame");


frame.setVisible(true);


frame.setDefaultCloseOperation(


JFrame.EXIT_ON_CLOSE);



frame.setSize(400,300);


Dimension frameSize = frame.getSize();



Dimension screenSize =


Toolkit.getDefaultToolkit().getScreenSize();


int x = (screenSize.width
-

frameSize.width)/2;


int y = (screenSize.height
-

frameSize.height)/2;


frame.setLocation(x,y);


}


}

Adding Button into a Frame


The button is always centered in the frame and
occupies the entire frame no matter how you resize the
frame.



This is because components are put in the frame by
the
content

pane
’s layout manager, and the default
layout manager for the
content pane

places the button
in the center.



For some functions, such as adding a JComponent, you cannot
use
JFrame.add
, but instead you must first get the associated
Container object of the JFrame ,
ContentPane
, with
JFrame.getContentPane()
, and add to that.

Adding Button into a Frame


JFrame frame = new JFrame();


frame.setTitle("Test JButton");


Container cp = frame.getContentPane();


JButton button = new JButton("OK");


cp.add(button);

Layout Managers


Java’s layout managers provide a level of
abstraction to automatically map your user
interface on all windowing systems.


The UI components are placed in
containers
.
Each container has a layout manager to arrange
the UI components within the container.


Kinds of Layout Managers


FlowLayout


GridLayout


BorderLayout


GridBagLayout


CardLayout

Kinds of Layout Managers

CardLayout ... later

The
FlowLayout

Manager


The
FlowLayout

is the simplest layout manager.


The components are arranged in the container from left
to right in the order in which they were added.


When one row becomes filled, a new row is started.



Default layout for panels.



Can be centered, left or right:
FlowLayout.LEFT,


FlowLayout.CENTER, or FlowLayout.RIGHT.

Flow Layout: examples

FlowLayout

Constructors


public FlowLayout(int align, int hGap, int
vGap)


Constructs a new
FlowLayout

with a specified alignment,
horizontal gap, and vertical gap. The
gaps

are the distances in

pixel between components.


public FlowLayout(int alignment)


Constructs a new
FlowLayout

with a specified alignment and
a default gap of five pixels for both horizontal and vertical.


public FlowLayout()


Constructs a new
FlowLayout

with a default center alignment
and a default gap of five pixels for both horizontal and
vertical.

FlowLayout
: Example

import javax.swing.*;

import java.awt.*;

public class MyFrame

{


public MyFrame()


{


Container container = getContentPane();


container.setLayout(new FlowLayout());


for(int i=1; i <= 10; i++)


container.add(new JButton(“Component”+i));


}


public static void main(String[] args) {


MyFrame frame = new MyFrame();


frame.setTitle(“Test FlowLayout”);


frame.setDefaultCloseOperation(


JFrame.EXIT_ON_CLOSE);


frame.setSize(200,200);


frame.setVisible(true);


}


}

FlowLayout
: Example

Container container = getContentPane();

container.setLayout(new FlowLayout());

The
GridLayout

Manager



The
GridLayout

manager arranges components

in a grid (matrix) formation with the number of

rows and columns defined by the constructor.



The components are placed in the grid from left to
right starting with the first row, then the second, and so
on.

GridLayout

Constructors


public GridLayout(int rows, int columns)


Constructs a new
GridLayout

with the specified
number of rows and columns.


public GridLayout(int rows, int columns,


int hGap, int vGap)


Constructs a new
GridLayout

with the specified
number of rows and columns, along with specified
horizontal and vertical gaps between components.

Border Layout


Screen is divided into 5 areas:


Centre, North, South, East, West.


Centre area is greediest (will take as much space as
possible).


Others will try to paint at least to their preferred size.


All components will try to maximise themselves.


Most useful one for laying out of main frame.

The
BorderLayout

Manager

The
BorderLayout

manager divides the window into five
areas: East, South, West, North, and Center.

Components are added to a
BorderLayout

by using
method


add(Component, constraint);


where

constraint

is



BorderLayout.East,


BorderLayout.South,


BorderLayout.West,


BorderLayout.North,
or



BorderLayout.Center.


Example

public MyFrame()

{


Container container = getContentPane();


container.setLayout(new BorderLayout(5,10));



container.add(new JButton(“East”,


BorderLayout.East);


container.add(new JButton(“South”,


BorderLayout.South);


container.add(new JButton(“West”,


BorderLayout.West);


container.add(new JButton(“Center”,


BorderLayout.Center);


container.add(new JButton(“Center”,


BorderLayout.North);


}


The
BorderLayout

Manager

Using Panels as Containers


Panels act as smaller containers for grouping
user interface components.


It is recommended that you place the user
interface components in panels and place the
panels in a frame.


You can also place panels in a panel.


Border Layout Nested

Example: Microwave oven

This example uses panels to organize components.

The program creates a user interface for a microwave oven.

Example: Two
Panels

JPanel p1 = new JPanel();

p1.setLayout(new GridLayout(4,3));

for(i=1; i<=9; i++) {


p1.add(new JButton(“ ”+i));

}

p1.add(new JButton(“ 0”));

p1.add(new JButton(“Start”));

p1.add(new JButton(“Stop”));

//

JPanel p2 = new JPanel();

p2.setLayout(new BorderLayout());

p2.add(new JTextField(“Time to be displayed here”),


BorderLayout.NORTH);

p2.add(p1,BorderLayout.CENTER);

Example: Add
Panels

Container container = getContentPane();

container.setLayout(new BorderLayout());

container.add(p2, BorderLayout.EAST);

container.add(new Button(“Food to be placed here”),
BorderLayout.CENTER);


Drawing on Panels



JPanel

can be used to draw graphics (including
text) and enable user interaction.



To draw in a panel, you create a new class that
extends
JPanel

and override the
paintComponent()

method to tell the panel
how to draw things.



You can then display strings, draw geometric
shapes, and view images on the panel.

The
Color

Class

Color

c

=

new

Color(r,

g,

b)
;

r
,
g
, and
b

specify a color by its red, green, and
blue components.

Example:

Color

c

=

new

Color(
128
,

100
,

100
)
;

Setting Colors

You can use the following methods to set the
component’s background and foreground colors:

setBackground(Color c);

setForeground(Color c);

Example:

setBackground(Color.yellow);
setForeground(Color.red);

Drawing Geometric Figures


To draw in a panel, create a new class that extends
JPanel

and overrides the
paintComponent()

method.


Then one can display strings, draw geometrical shapes,
and view images on the panel.



Although one can draw things directly in a frame or
an applet using the
paint()

method, using
JPanel

for to draw messages and shapes and to show images
is
recommended
; this way the drawing does not
interfere with other components.

Drawing Geometric Figures



The signature of the
paintComponent

method:

public void paintComponent(Graphics g)


The
Graphics

object
g

is created automatically by the
Java runtime system. This object controls how information
is drawn.


g.drawLine(x1,y1,x2,y2);


g.drawRect(x0,y0,width,height);

Drawing Geometric Figures


Drawing Lines


Drawing Rectangles


Drawing Ovals


Drawing Arcs


Drawing Polygons


Drawing Strings

Drawing Lines

g
.
drawLine(x
1
,

y
1
,

x
2
,

y
2
)
;

(
x
1

, y
1
)
(x
2
, y
2
)
Drawing Rectangles


g.drawRect(x, y, w, h);


g.fillRect(x, y, w, h);

(
x, y)
w

h
Drawing Rounded Rectangles


g.drawRoundRect(x, y, w, h, aw, ah);


g.fillRoundRect(x, y, w, h, aw, ah);


(x, y)

w

h

ah

aw

Drawing Ovals


g
.
drawOval(x,

y,

w,

h)
;


g
.
fillOval(x,

y,

w,

h)
;


(x, y)

w

h

Drawing Arcs


g.drawArc(x, y, w, h, angle1, angle2);


g.fillArc(x, y, w, h, angle1, angle2);

(
x, y)
w

h
angle1
angle2
Drawing Polygons

int[]

x

=

{
40
,

70
,

60
,

45
,

20
}
;

int[]

y

=

{
20
,

40
,

80
,

45
,

60
}
;

g
.
drawPolygon(x,

y,

x
.
length)
;

g
.
fillPolygon(x,

y,

x
.
length)
;

(
x[0], y[0])
(
x[1], y[1])
(
x[2], y[2])
(
x[3], y[3])
(x[4], y[4])
Drawing Polygons, cont.

int[] x = {40, 70, 60, 45, 20};

int[] y = {20, 40, 80, 45, 60};

Polygon

poly

=

new

Polygon(x,y,
5
)
;

g
.
drawPolygon(poly)
;

g
.
fillPolygon(poly)
;

(
x[0], y[0])
(
x[1], y[1])
(
x[2], y[2])
(
x[3], y[3])
(x[4], y[4])
Example: Drawing

import javax.*;

import java.awt.*;

public class TestGraphics()

{


public TestGraphics() {


setTitle(“Test Draw”);


getContentPane().add(new DrawPanel());


}


public static void main(Strings[] args) {


TestGraphics frame = new TestGraphics();


frame.setSize(300,300);


frame.setVisible(true);


frame.setDefaultCloseOperation(


JFrame.EXIT_ON_CLOSE);


}

}

Example: Drawing

public class DrawPanel extends JPanel

{


public void paintComponent(Graphics g)


{


super.paintComponent(g);


setBackground(Color.white);


g.setColor(Color.red);


g.drawRect(100,100,100,100);


g.drawString(“Test Draw”,110,230);


g.setColor(Color.green);


g.drawLine(50,50,250,250);


}

}