Volume Number: 13 (1997)
Issue Number: 1
Column Tag: Getting Started
By Dave Mark
Two of the first things any Mac programmer learns are the concept of event-loop programming and drawing using QuickDraw. The Java programming learning curve is quite similar in this respect. Last month, we introduced Java's event handling mechanism. This month, we'll explore the java.awt.Graphics class. Specifically, we'll look at the java.awt.Graphics member functions that allow you to draw shapes in your applet window.
This month's applet is called javaDraw. Before you dig into the code, take some time to read the java.awt.Graphics web page (part of the JDK API Documentation from Sun.) Pay special attention to the function names that start with either the words draw or frame. The draw routines are analogous to the QuickDraw paint routines (like PaintRect()) and the frame routines do the same as the QuickDraw frame routines (like FrameRect()).
Create a new project called javaDraw.µ using the Java applet stationery. Create a new source code file named javaDraw.html and add it to the project (replace any existing html file that may have been added to the project.) Here's the html code:
<title>javaDraw</title> <hr> <applet codebase="javaDraw Classes" code="javaDraw.class" width=228 height=160> </applet> <hr> <a href="javaDraw.java">The source.</a>
Next, create a second source code file named javaDraw.java and add it to the project as well (replace any default .java file that may have been added to the project.) Here's the Java code:
import java.awt.*;
public class shapeCanvas extends Canvas
{
final int rectangle=0,
rect3D=1,
roundRect=2,
arc=3,
oval=4,
line=5,
polygon=6;
int whichShape = rectangle;
booleanisFilled = true;
shapeCanvas( int width, int height )
{
setBackground( Color.yellow );
setForeground( Color.red );
resize( width, height );
}
public void SetShape( int newShape )
{
whichShape = newShape;
}
public void SetIsFilled( boolean newIsFilled )
{
isFilled = newIsFilled;
}
public void paint( Graphics g )
{
Rectangler, b;
Polygonpoly;
b = bounds();
r = new Rectangle( 10, 10, b.width - 20,
b.height - 20 );
poly = new Polygon();
poly.addPoint( r.x, r.y );
poly.addPoint( r.x, r.y + r.height );
poly.addPoint( r.x + r.width, r.y + r.height );
poly.addPoint( r.x, r.y + r.height/2 );
poly.addPoint( r.x + r.width, r.y + r.height/2 );
poly.addPoint( r.x, r.y );
if ( isFilled )
{
switch ( whichShape )
{
case rectangle:
g.fillRect( r.x, r.y, r.width, r.height );
break;
case rect3D:
g.fill3DRect( r.x, r.y, r.width, r.height, true );
break;
case roundRect:
g.fillRoundRect( r.x, r.y, r.width, r.height,
16, 16 );
break;
case arc:
g.fillArc( r.x, r.y, r.width, r.height, 0, 270 );
break;
case oval:
g.fillOval( r.x, r.y, r.width, r.height );
break;
case line:
g.drawLine( r.x, r.y, r.x + r.width, r.y + r.height
);
break;
case polygon:
g.fillPolygon( poly );
break;
}
}
else
{
switch ( whichShape )
{
case rectangle:
g.drawRect( r.x, r.y, r.width, r.height );
break;
case rect3D:
g.draw3DRect( r.x, r.y, r.width, r.height, true );
break;
case roundRect:
g.drawRoundRect( r.x, r.y, r.width, r.height,
16, 16 );
break;
case arc:
g.drawArc( r.x, r.y, r.width, r.height, 0, 270 );
break;
case oval:
g.drawOval( r.x, r.y, r.width, r.height );
break;
case line:
g.drawLine( r.x, r.y, r.x + r.width,
r.y + r.height );
break;
case polygon:
g.drawPolygon( poly );
break;
}
}
}
}
public class javaDraw extends java.applet.Applet
{
private Choice shapePopup, fillPopup;
private shapeCanvas sCanvas;
public void init()
{
shapePopup = new Choice();
shapePopup.addItem( "Rectangle" );
shapePopup.addItem( "3D Rectangle" );
shapePopup.addItem( "Rounded Rectangle" );
shapePopup.addItem( "Arc" );
shapePopup.addItem( "Oval" );
shapePopup.addItem( "Line" );
shapePopup.addItem( "Polygon" );
add( shapePopup );
fillPopup = new Choice();
fillPopup.addItem( "Fill Shapes" );
fillPopup.addItem( "Do Not Fill Shapes" );
add( fillPopup );
sCanvas = new shapeCanvas( 208, 110 );
add( sCanvas );
}
public boolean action( Event e, Object obj )
{
if ( e.target == shapePopup )
{
sCanvas.SetShape( shapePopup.getSelectedIndex() );
sCanvas.repaint();
return true;
}
else if ( e.target == fillPopup )
{
sCanvas.SetIsFilled( fillPopup.getSelectedIndex()
== 0 );
sCanvas.repaint();
return true;
}
else
return super.action( e, obj );
}
}
If you would like to specify the application used to run your applet, select Project Settings... from CodeWarrior's Edit menu, then click on the Project/Java Project item in the scrolling list (see Figure 1.) Click on the Set... button and select your preferred applet runner from the standard get file dialog. The screen shots that I used in this column were taken using the Metrowerks Java applet runner that comes with CodeWarrior.
Figure 1. CodeWarrior's Project Setting's dialog, showing the Java Project options.
No matter what applet runner you use, be sure you specify "javaDraw Classes" in the File Name field, to match the "codebase" parameter in your html file.
Once everything is entered and set up just the way you like it, select Run from the Project menu to compile and run your applet. Figure 2 shows the javaDraw applet as it first appears. The applet area consists of two popup menus (known as choices in java-speak) and a canvas area. The top popup lets you select the type of shape you are interested in seeing, and the bottom popup lets you specify whether the shape is drawn or framed (filled or outlined.) The default setting is a filled rectangle.
Figure 2. The javaDraw applet, as it first appears.
Figure 3 shows a framed arc. Take some time to play with all the awt.Graphics shapes, in both framed and filled modes. Note that lines look the same in either mode (both call the same function) and that 3D rectangles look almost exactly the same as rectangles. I'm not sure why this last is true, but hopefully future versions of awt will implement more interesting 3D rectangles.
Figure 3. The javaDraw applet, this time showing a framed arc.
javaDraw consists of two classes. The shapeCanvas class implements the yellow drawing canvas at the bottom of the applet area. The javaDraw class extends the applet class and initiates a shapeCanvas and the two popup menus. We'll start with the shapeCanvas class.
shapeCanvas extends the Canvas class. It starts with a series of constants specified using the final keyword. If a variable is marked as final, it becomes a constant - its initial value may not be changed. The constants represent the items in the shape popup menu. Notice that the first constant was set to zero. That's because popup menu items are zero based.
import java.awt.*;
public class shapeCanvas extends Canvas
{
final int rectangle=0,
rect3D=1,
roundRect=2,
arc=3,
oval=4,
line=5,
polygon=6;
int whichShape = rectangle;
booleanisFilled = true;
The shapeCanvas() constructor sets the Canvas background and foreground colors, then sets the Canvas size to the specified width and height. SetShape() is used to set the whichShape class variable to the current shape, as specified by the popup menu. SetIsFilled() does the same thing for the isFilled boolean, setting it depending on the bottom popup menu setting.
shapeCanvas( int width, int height )
{
setBackground( Color.yellow );
setForeground( Color.red );
resize( width, height );
}
public void SetShape( int newShape )
{
whichShape = newShape;
}
public void SetIsFilled( boolean newIsFilled )
{
isFilled = newIsFilled;
}
The paint() method is called when the Canvas needs to be redrawn. It starts by retrieving the bounding rectangle of the Canvas. This rectangle is inset 10 pixels on each side, with the results stored in r (r is inset inside b).
public void paint( Graphics g )
{
Rectangler, b;
Polygonpoly;
b = bounds();
r = new Rectangle( 10, 10, b.width - 20,
b.height - 20 );
Next, we create a new Polygon and add a series of points to the Polygon, creating a zigzag shape and ending at the same point we started. This last step is important since it "closes" the Polygon. The Polygon is only needed if it is actually selected from the popup. So, we should probably embed this code in the polygon case below. Sorry about my laziness!
poly = new Polygon(); poly.addPoint( r.x, r.y ); poly.addPoint( r.x, r.y + r.height ); poly.addPoint( r.x + r.width, r.y + r.height ); poly.addPoint( r.x, r.y + r.height/2 ); poly.addPoint( r.x + r.width, r.y + r.height/2 ); poly.addPoint( r.x, r.y );
The rest of paint() is made up of a giant if. The first part of the if paints filled shapes. The second part of the if paints framed shapes. Take a look at each of these functions, for they are the heart and soul of the Graphics class. These are the functions that actually draw the Java shapes.
if ( isFilled )
{
switch ( whichShape )
{
case rectangle:
g.fillRect( r.x, r.y, r.width, r.height );
break;
case rect3D:
g.fill3DRect( r.x, r.y, r.width, r.height, true );
break;
case roundRect:
g.fillRoundRect( r.x, r.y, r.width, r.height,
16, 16 );
break;
case arc:
g.fillArc( r.x, r.y, r.width, r.height, 0, 270 );
break;
case oval:
g.fillOval( r.x, r.y, r.width, r.height );
break;
case line:
g.drawLine( r.x, r.y, r.x + r.width,
r.y + r.height );
break;
case polygon:
g.fillPolygon( poly );
break;
}
}
else
{
switch ( whichShape )
{
case rectangle:
g.drawRect( r.x, r.y, r.width, r.height );
break;
case rect3D:
g.draw3DRect( r.x, r.y, r.width, r.height, true );
break;
case roundRect:
g.drawRoundRect( r.x, r.y, r.width, r.height,
16, 16 );
break;
case arc:
g.drawArc( r.x, r.y, r.width, r.height, 0, 270 );
break;
case oval:
g.drawOval( r.x, r.y, r.width, r.height );
break;
case line:
g.drawLine( r.x, r.y, r.x + r.width,
r.y + r.height );
break;
case polygon:
g.drawPolygon( poly );
break;
}
}
}
}
The javaDraw class implements the applet itself. The init() method first creates the shape Choice, then the fill Choice, and finally the shapeCanvas.
public class javaDraw extends java.applet.Applet
{
private Choice shapePopup, fillPopup;
private shapeCanvas sCanvas;
public void init()
{
shapePopup = new Choice();
shapePopup.addItem( "Rectangle" );
shapePopup.addItem( "3D Rectangle" );
shapePopup.addItem( "Rounded Rectangle" );
shapePopup.addItem( "Arc" );
shapePopup.addItem( "Oval" );
shapePopup.addItem( "Line" );
shapePopup.addItem( "Polygon" );
add( shapePopup );
fillPopup = new Choice();
fillPopup.addItem( "Fill Shapes" );
fillPopup.addItem( "Do Not Fill Shapes" );
add( fillPopup );
sCanvas = new shapeCanvas( 208, 110 );
add( sCanvas );
}
The applet's action() routine checks for events occurring in either popup. If the event was in the shape Choice, the shapeCanvas' SetShape() function is called, and an update event is queued for the canvas (repaint() is similar to invalRect(), though for an entire object. If the event was the fill Choice, the SetIsFilled() method is called and the canvas is again repainted. If neither case is true, the parent class' action() method is called and that result returned.
public boolean action( Event e, Object obj )
{
if ( e.target == shapePopup )
{
sCanvas.SetShape( shapePopup.getSelectedIndex() );
sCanvas.repaint();
return true;
}
else if ( e.target == fillPopup )
{
sCanvas.SetIsFilled( fillPopup.getSelectedIndex()
== 0 );
sCanvas.repaint();
return true;
}
else
return super.action( e, obj );
}
}
At this point, you should have a pretty good handle on Java's graphics mechanism. Spend some time exploring the rest of the Graphics class' methods. There are some pretty funky methods in there, and we'll get to them eventually. Before I sign off, I just wanted to mention that this column marks the start of my fifth year writing for MacTech Magazine. Can you believe it? Well, here's to four more years of Mac programming fun! See you next month...
