Tutorial 4: Java Graphics Basics


Introduction

This tutorial covers:


I. Sample Program

Create a local directory comp212/tutorials/04 for this lab and copy the files ~/comp212/tutorials/04/*.java and ~/comp212/tutorials/04/*.class.  These are the Java source code and byte code for a GUI application that (almost) meets the requirements of milestone #2 of project #1.  To see how the application behaves, run the command: java BPControl. You should see a window appear.  This window has two main panels: a left (west) panel and a right (east) panel.  Each panel has a button at the top (north) and a graphics a panel at the center.  If you click on the left button, you should see body parts moving to the right.  If you continue to click when there is no more body part, you will see an exception thrown.  Click on the right button and you should see the body parts move to the left.  Play around with this program and record its behavior.  The program is designed according to the MVC pattern as shown in the UML diagram below.

mvc.png (22290 bytes)

In the above diagram, class BPList is the model.   It represents the list of body parts, each of which is a concrete implementation of the Drawable interface.  An interface, in Java, is a special construct that is similar to an abstract class.  All the methods in an interface are purely abstract, that is they have no code body.  In addition, an interface cannot have non-static fields.  Java uses interface as way to allow a special form of multiple inheritance, which we not discuss for now.  The main control, BPControl,  references two BPList objects:one for the left panel of the BodyPartsGUI object, and one for the right panel of the GUI.  The action listener for the left button handles the click button event by asking the left BPList to remove one body part from the front of the list and then asking the right to insert it at the end.  The listener for right button does the reverse.  The source code for BPControl provided is incomplete. 

Exercises:

1. Complete the code for BPControl.  Add the RArmPart to the left list.  Then recompile and run the program to make sure that it works as before. 

2. When you try to remove a body part from an empty list, it throws a runtime exception (NoSuchElementException).  Add some code to take care of this problem. 

3.  Write the code for one more body part and add to the list of body parts for drawing (see for example RArmPart.java)

We now look at how to draw body parts.

II. Basic Java Graphics

The simplest to draw graphics in Java is to extend JPanel, a Swing component, and override its paintComponent (Graphics g) method in order to draw on the graphics object g.  Whenever Java tries to render a Swing GUI component, it calls the component's paintComponent (Graphics g) method with the current graphics context as the parameter.  In the code for paintComponent (Graphics g), you almost always call super.paintComponent (g) in order to get the correct internal (hidden) rendering sequence.  The code for BodyPartsCanvas illustrates this process.  BodyPartsCanvas is where the list of body parts, BPList, draws itself.  The view, BodyPartsGUI, contains two instances of BodyPartsCanvas in order to draw the two lists of body parts.

public class BodyPartsCanvas extends JPanel
{
    // Other fields and methods...

    // ...

    public void paintComponent (Graphics g)
    {
        super.paintComponent (g);
        // code to draw on g....
    }
}

You never call paintComponent (Graphics g) directly.   Instead, you should call repaint () to let Java schedule the repaint process and properly call paintComponent.   This is illustrated in the code for the action listeners for the two buttons in BPControl.

_frame.get_jButtonLeft().addActionListener (
    new java.awt.event.ActionListener()
    {
        public void actionPerformed (ActionEvent e)
        {
            // code to manipulate _rightBPList and _leftBPList here;

            _frame.get_pnlBodyPartsLeft().repaint();   // redraw the left body parts list
            _frame.get_pnlBodyPartsRight().repaint(); // redraw the right body parts list.
        }
    });

Below is a UML diagram displaying a partial taxonomy tree for Java GUI components.   We are only interested in working with Swing components.  The Swing components all start with a capital 'J'.

swing.png (12190 bytes)

Note that JPanel extends JComponent, which extends Container.  So JPanel is a Container and can contains any AWT/Swing component.  This is an example of the composite pattern.

Exercise:  Write a simple GUI that displays the body parts that are given to you when it comes into existence.

III. Milestone #2

Milestone #2 for project #1 is to build an MVC GUI application to test the body parts list class and its supporting class.  Here you are given the GUI view, the control, and fragments of the model BPList and its variants.  What is left for you to program is basically implementing the state pattern for BPList. You are free to use/modify the given code as you see fit.  Get started!

dxnguyen@cs.rice.edu
revised 02/13/00