Graphics

slimwhimperSoftware and s/w Development

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

60 views


Learn about the types of Graphics that
are available


Develop a basic Graphics applet


Develop a basic Graphics application


Review the Java API and use it to
enhance the previous projects


(You won’t be learning the cutting
-
edge graphics for games, just the
basics.)

Here are some terms that you’ll encounter
in your lesson on graphics:


AWT


Swing


Applet/JApplet


Graphics object


init()


GUI


Graphics can be simple or
complex, but they are just data
like a text document or sound.


Java is very good at graphics,
especially for the web and small
devices like phones.

Java can write applications or
applets, as you know by now.


It can make graphics in either one,
and has two libraries to do it with:


Swing (the newer kind) or AWT
(Abstract Windowing Toolkit, the
older kind).

To start, here’s a basic applet that
demonstrates Java graphics using
AWT:


import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

Try to compile this
code and run it as an
applet.

What do you see?

import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

The first lines are
import statements, to
load the AWT and
Applet libraries.


If you were making a
Swing version, you
would load Swing
libraries.

import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

Our class is called
BasicGraphics, and it
extends Applet to
inherit Applet
properties.

import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

Inside the applet, we
have just one method:
paint()

(Remember from
Applets that other
methods are optional.)

It has one parameter,
called the “abstract
Graphics object”, and
we call it “g”.

Get used to this, you
need to tell paint()
what to paint on!

import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

paint() has two methods
inside of it: setColor and
fillRect


g.setColor(Color.red); is
the command to color
whatever graphic “thing”
we have “red”.

The computer still
doesn’t know what
Graphic “thing” g is going
to be!

import java.awt.*;

import java.applet.Applet;


public class BasicGraphics extends Applet {


public void paint(Graphics g) {


g.setColor(Color.red);


g.fillRect(10, 20, 40, 40);


} // end paint()

} // end class BasicGraphics

g.fillRect(10, 20, 40, 40)
tells the applet to make g
into a “fillRect”, which is
a “filled rectangle”.

10 is the starting x
-
position in the applet,

20 is the starting y
-
position in the applet

40 is the width and the
other 40 is the height.

Remember what color
will fill it? Red!














By they way, a computer
screen has reverse geometry,
kind of.

It’s still (x, y), but the “origin”
is the upper left corner. Then
you add to the
right

and/or
down
.

The box on the left
demonstrates how you would
measure an 800x600 screen.

“X” is at about (400, 100).

0,0

800,600

800,0

0,600

How do you remember all of this stuff?
You don’t!


All of this is listed in the Java API. To see the methods that you can use
on “g”, our Graphics object, look at this link:


http://java.sun.com/j2se/1.5.0/docs/api/java/awt/Graphics.html#method_s
ummary


Want to see a simple edit? Change g.fillRect to g.fillOval in your
program.


You can do whatever changes you want, just find it in the API and make
sure your parameters are filled in correctly!

What would that applet look like if we
used Swing instead of the old AWT?


import javax.swing.*;

import java.awt.*;


public class BasicSwingGraphics extends
javax.swing.JApplet

{


public void paint(Graphics g) {


/* Draw the square. */


g.setColor(Color.red);


g.fillOval(10, 20, 40, 40);


} // end paint()

} // end class BasicSwingGraphics

Why is there a Swing and an AWT?


AWT was the original graphics library for Java. However, all programs
looked like their “host”. That is, when they ran on a Mac, they looked
like Mac programs, and when they ran on Windows, they looked like
Windows programs.


Programmers wanted to force the “look and feel”, so they built Swing on
top of AWT. Yes, Swing includes all of AWT.


AWT is still seen as better for applets, but that’s fading due to AJAX,
another web programming technique.

Applets need a web page to run, but
applications can run on their own.


Now we’ll take a look at an application
written in Swing!




import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}



public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

First, we import the
Swing libraries (notice
it’s java
x
.swing) to
support our work.

import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}



public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

Then, we begin our
class. We don’t
extend Applet, we
extend JFrame,
because applications
use them to hold
graphics.

import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}



public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

The class constructor
creates:

-
location and size of
the frame

import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}



public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

The class constructor
creates:

-
the way it closes (this
one is that little “X” box
on the top right

import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}



public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

The class constructor
creates:

-
visibility (you can see it)

-
title (the blue bar on top)

import javax.swing.*;

public class SimpleFrame extends JFrame

{



public SimpleFrame()



{



setBounds(50,100,400,150);



setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);



setVisible(true);



setTitle("This is a test frame!");



}




public static void main(String[] args)



{



new SimpleFrame();



}

}

//from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

Finally, we have a
main method to create
the frame!

Compile and run it!

Now you’re an expert on Java Graphics


NOT!!!


However, you did create your first “Graphical User Interface”, or GUI
(pronounced “gooey”, like something on your shoe at the movies).


It’s a vast subject, but plenty of free resources. See more at:


http://java.com



examples of Java game and cellphone graphics


http://java.sun.com/docs/books/tutorial/uiswing/index.html

-

The
beginner’s tutorial book to Swing graphics


And search the web for other examples. Don’t forget the API!

Now try the “Graphics Lab”.


You’ll build on the applets you saw in
this lesson.