8. Introducing Graphics

8.1 The Abstract Window Toolkit (AWT)

So far, all interactions with an application have been via the command line. However, many applications benefit from a Graphical User Interface (GUI).
All of the remaining checkpoints and the projects use GUIs to display the program output.
GUIs can be used with stand-alone programs (applications) or may be provided as applets for viewing on web pages using a Java-enabled browser.
Although the construction of GUIs for applications and applets is very similar there are differences in the way the classes are implemented . This section is concerned only with applications. Constructing and running applets will be covered in Section 10.
The AWT (Abstract Window Toolkit) is an extensive library of Java classes for creating GUIs. The AWT is provided as part of the core Java package.
$% latex2html id marker 2494 \fbox {\fbox{ \parbox{10cm} { \medskip {\underline{\... ... available in its complete form in the examples in Section \ref{example7} } }}}$

8.2 The anatomy of an AWT GUI

The AWT provides ready-made classes for

containers e.g. windows, frames.
visual components e.g. buttons, text boxes.
custom drawing e.g. lines, shapes.

It also provides a framework for responding to user-generated events such as mouse-click, text input (this will be covered in Section 9). Elements used to create a GUI are part of the inheritance hierarchy shown below.

$\epsfig {file=figs/AWT.eps,width=13 cm}$

Most GUI elements are sub-classes of the Component class. These sub-classes fall into two groups:

The Container class. This includes the Frame and Dialog sub-classes which are used to hold other components.
- The Frame class is used as the "top-level" container for GUI applications. It is an empty window used to hold the visual components. Borders, titles, menus etc can also be added to a frame.
- The Dialog class is used for secondary windows that depend on another window. One typical use of Dialog boxes is to display error messages
The visual component classes. These describe components that you can see or interact with e.g. Button, Checkbox, Label, TextField and TextArea.

Custom drawing of lines, shapes etc is handled a bit differently. We will look at how to do this later in this section.

8.3 Building a GUI step-by-step

We'll create a simple GUI that graphically displays the (inevitable) "hello world" message.

First, we must import the AWT packages -


    import java.awt.*;
    import java.awt.event.*;

Next we create a container to hold the components that we need. For applications we create a subclass of frame so that we can override the methods to create the GUI -
```
    class SimpleGui extends Frame
    {
        // constructor
        public SimpleGui()
        {
        }
    }
```

Now we can create and configure the visual components needed. To display a single line of read-only text we use a Label object -


    // component to be added to the Frame
    Label msg;

    // constructor
    public SimpleGui()
    {
    // initialise label
    // Label constructor takes text to be displayed as first argument
    // Optional second argument gives text justification
    msg = new Label("Hello World", Label.CENTER);
    }

Now add the Label component to the Frame container -


    // constructor
    public SimpleGui()
    {
    // initialise label
    msg = new Label("Hello World", Label.CENTER);

    // add label to Simple GUI
    add(msg);
    }

Finally, add code needed to enable the user to close the window (this is an example of event-handling in Java) -


    // constructor
    public SimpleGui()
    {
    // initialise Label
    msg = new Label("Hello World", Label.CENTER);

    // add Label to Simple GUI
    add(msg);

    // this code enables you to close the window
    addWindowListener(new WindowAdapter ()
        {
        public void windowClosing(WindowEvent e)
        {
            System.exit(0);
        }
        });
    }

This gives the complete code for the class SimpleGui. Now we can write a test program to display it -


 class HelloWorld {
    public static void main (String [] args)
    {
    SimpleGui testGui = new SimpleGui();

    // set size of GUI
    testGui.setSize(200,100);

    // and make it visible
    testGui.setVisible(true);
    }
}

You must set the size of the GUI and make it visible.

The code for HelloWorld.java is in Section 26 T he supplementary material (Section 26) lists some useful visual components and methods for creating Gui's. There are also several layout managers you can use to help layout the components in a container.

$% latex2html id marker 2520 \fbox {\fbox{ \parbox{10cm} { \medskip {\underline{\... ...he full set of AWT classes at : {\tt \$API/java/awt/package-summary.html }} }}}$

8.4 Using graphics

Custom painting is provided via the Graphics class, which is part of the java.awt package.
The Graphics class has methods for drawing lines, drawing and filling shapes and displaying text. It also has methods to set the colour, font etc.
Before starting to do custom painting using the Graphics class we need to understand how GUI's draw themselves.
A GUI will draw itself
- for the first time (when it is created).
- in response to changes in its appearance e.g. moving, covering or re-sizing the window.
- because something is happening inside the program.
When a GUI needs to draw itself it starts with the highest component in the hierarchy that needs to be redrawn and works its way down to the bottom-most components.
In this way, each component draws itself before any of the components it contains. This ensures that a Frame's background, for example, is visible only where it isn't covered by one of the components it contains.
Every AWT component has a paint method which is called when the component is drawn. You don't need to call the paint method explicitly as the decision to re-draw is taken by the AWT.
There is generally no need to override the paint methods of standard visual components such as Button, Checkbox etc.
Frames and other containers appear blank on the screen. To do custom painting we must override the paint method of the container that is to be painted.

The paint method signature is:


     public void paint(Graphics g)
    {
    // method body
    }

The only argument to the paint method is a Graphics object. This is called the graphics context for the component. It supplies the methods necessary to draw onto the area of the screen represented by that component.
$% latex2html id marker 2534 \fbox {\fbox{ \parbox{10cm} { \medskip {\underline{\... ...ng tools. \item Drawing is done in the {\tt paint()} method. \end{itemize}} }}}$

8.5 The `repaint()` method

Generally, the GUI calls the paint method every time a component's appearance changes. In practice, many events may occur over a short period of time. In this case the event handler and the paint method may not be able to keep up with the number of events generated and the application will no longer respond.
Using the repaint() method allows you to run your program so that the paint method is scheduled to run only at regular intervals. This helps to keep the appearance of your screen upto date with the most recent events.
As an example: let us write a GUI that will display a circle and then move it from left to right across the screen.

The frame's paint() method contains the code for drawing the circle:


    public void paint(Graphics g)
    {
        // Draw a circle on the screen
        g.setColor(Color.yellow);
        g.fillOval(x,y,w,h);
    }

There is also a method which calculates the new co-ordinates for the circle and then calls the frame's repaint() method:


    public void moveCircle()
    {
	// size and width of frame
	Dimension d = getSize();
	int W = d.width;
	// increment for moving circle on screen
	int incr = 5;
	//  calculate new x co-ordinates for circle
	if (x < W)
	    {
		x+=incr;
	    }
	else
	    {
		x=0;
	    }
	try
	    {
		// wait a while to smooth the display
		Thread.sleep(200);
	    }
	catch(InterruptedException e)
	    {	
	    }
	repaint();
    }

$% latex2html id marker 2550 \fbox {\fbox{ \parbox{10cm} { \medskip {\underline{\... ...upply the {\tt repaint()} method with a Graphics object as an argument. } }}}$

Finally, here is a code snippet to run the animation for a number of steps:


        ThisFrame f = new ThisFrame();
        f.setVisible(true);
	for (int i=0;i<1000;++i)
	    {
		f.moveCircle();
	    }

The complete code for this example is given in MovingShape.java in Section 26

8.6 Building a GUI using custom graphics

Objective : We want to build a GUI that will display a red rectangle 40*40 pixels on a blue background.

As with the HelloWorld example, first we create a Frame subclass - DrawingGui - as the top-level container.

This will be the drawing surface for our custom painting. Therefore we need to override the Paint method of the DrawingGui class -


    import java.awt.*;
    import java.awt.event.*;

    class DrawingGui extends Frame
    {
        // constructor
        public DrawingGui()
        {
            // set the background colour of the Frame
            setBackground(Color.blue);
            // must also add code to enable you to close the window
        }

        public void paint(Graphics g)
        {
            // code to do custom painting goes here
        }
    }

Now add the code to draw a rectangle in the Frame using the methods supplied with the Graphics object g.

The method we need is g.drawRect(x,y,w,h), where x and y are the co-ordinates of the top left corner, w and h the width and height of the rectangle.


        public void paint(Graphics g)
        {
            // set the drawing colour
            g.setColor(Color.red);

            // this draws a rectangle 20*20 pixels at position (100,100)
            g.drawRect(100,100,20,20);
        }

The paint method is called automatically every time the Gui needs to be drawn.
This will draw the outline of a rectangle.To fill in the shape we would use g.fillRect(x,y,w,h).

The complete code is in the examples in Section 26.

8.7 The coordinate system

Each component has its own integer coordinate system, ranging from (0, 0) to (width - 1, height - 1), with each unit representing the size of one pixel.
As the figure below shows, the upper left corner of a component's painting area is (0, 0). The X coordinate increases to the right, and the Y coordinate increases downward.
$\epsfig {file=figs/painting.eps,width=8 cm}$

8.8 Other containers

The Graphics class has methods to draw rectangles, ovals, lines, text, polygons and arcs. Some useful methods are listed in the examples in Section 26. Also see: $API/java/awt/Graphics.html

In the last example we have used the top-level container i.e. the whole window as the drawing surface. There are other container classes we can use as a drawing surface:
A Canvas object can be used if we want to draw just onto part of the window. It provides a blank rectangular area of the screen onto which the application can draw. A Canvas object does nothing on its own; the paint method must be overridden in order to perform custom graphics on the canvas.
The Panel class is a general-purpose Container subclass. A top-level Frame is often divided into Panels, for example if one area of the screen displays controls such as Buttons, TextFields and the other area shows the results of a simulation.

There is an example using Panels in Section 26

$% latex2html id marker 2600 \fbox {\fbox{\parbox{10cm} { \medskip {\underline{\s... ... able to do Checkpoint 4 : a cellular automaton simulation of traffic flow} }}}$