Lesson 11.2 Canvas

Canvas & Component

Now that you know how to paint, it's time to look at where you should paint. In Java, you have six different choices:

• You can paint right on your applet, as we've been doing.
• You can paint on a Panel. You can paint on a Canvas.
• You can paint on a Window. You can paint on a Frame.
• You can paint on a Component or Container.

Inheritance Revisited

Before we take a closer look at these classes, let's step back and take a look at their AWT family tree. In Java, the Object class is ultimate superclass for all classes. Although important, in the Abstract Window Toolkit [AWT], the Component class is probably more important. Component is the superclass for most AWT GUI "widgets" such as Label, Button, and TextField, as you can see from the illustration. [click image to enlarge].

If you look closely at the illustration, you might notice that the Canvas class is nowhere to be found, but that's only because the illustration is abbreviated. The Canvas class is a subclass of Component just like Button or Label. The Component class is an abstract class; it has methods, but you cannot create Component objects. For that, you have to use one of Component's concrete subclasses, such as Button or Label. You can also create your own Component subclasses, which you'll learn to do shortly. One of the most important of the Component subclasses is the Container class. A Container is a Component that can "hold" other Components. Like Component, Container is also an abstract class; you must use one of the concrete Container subclasses such as Panel, Frame, and Window, or you must create your own Container subclass.

Back to Top

The Canvas Class

The solution is to write your own Button or Label class "from scratch." That way you can be sure that your Buttons will look and work the same on every platform.

Heavyweights & Lightweights

• Your custom components will work in Java 1.0 as well as Java 1.1 browsers.
• The code is slightly simpler than that required by the alternative methods.

The disadvantages of using heavyweight components are:

• Your O/S normally has a limited number of window peers, so using them for buttons and labels depletes system resources. 
• The heavyweight window peer is opaque, so all of your controls must appear to be rectangular.

Lightweight components can also contain transparent regions, so you can create round or irregularly shaped components. You'll get your chance to build a lightweight component shortly. Right now, let's look at creating your own classes using the Canvas class as a starting point. We'll start by building a very simple class--XCanvas--and then we'll look at a more realistic project.

Back to Top

Extending Canvas

Canvas objects don't have a "default" size, and if you fail to override getPreferredSize() your component won't appear at all when placed in a FlowLayout controlled container. In addition to getPreferredSize(), you'll also need to override the paint() method.

The XCanvas Class

To write XCanvas you follow these steps:

• Create a new class extending Canvas. Override getPreferredSize() returning a new 50x50 Dimension object.
• Override the paint() method, using drawLine() to create your mark.

It doesn't get much simpler than that. Here's the finished XCanvas class:

Here's an applet that tests the XCanvas class. Note that you can send any Component message to an XCanvas object: setBackground() works, as does setForeground() and setLocation(). Remember, though, that when placed into a FlowLayout controlled applet, like TestX.java, every Component is resized according to its preferred size, so all three XCanvii [plural of XCanvas] end up 50 pixels wide.

TestX.java

// Test XCanvas import java.awt.*; import java.applet.*; public class TestX extends Applet {   public void init()   {     XCanvas red = new XCanvas();     XCanvas grn = new XCanvas();     XCanvas blu = new XCanvas();     red.setBackground(Color.red);     red.setForeground(Color.green);     grn.setBackground(Color.green);     grn.setForeground(Color.red);     blu.setBackground(Color.blue);     blu.setForeground(Color.yellow);     grn.setSize(100, 100);     add(red);     add(grn);     add(blu);   } }

Now that you've mastered the Canvas "basics", [what few there are], it's time to look at a more extensive example, that involves a little more complex code. This second Canvas example, BorderLabel, works like a regular Label except that it allows you to set one of several different borders around the label.

Designing BorderLabel

• We'll write only a single constructor, BorderLabel(String). We won't worry about alignment; we'll center everything. We'll have only four border styles: PLAIN, RAISED, SUNKEN, and LINE.
• The default border thickness will be 2 pixels wide.

Back to Top

Attributes

• Four public static final constants for the border styles. A String attribute to hold the label's text.
• A pair of int attributes to hold the border style and the thickness of the border.

Methods

• A single-argument constructor that takes a String. The String will be used to initialize the label's text property. An accessor/mutator pair for the text property. A mutator for the border thickness property, and another for the border style property.
• We'll need to override getPreferredSize() [as previously mentioned] as well as paint().

Here's a "skeleton" class that meets these requirements:

Back to Top

The Constructor

Of all the methods, the constructor is the easiest; all it has to do is set the value of the text field like this:

Accessors & Mutators

Each of the accessor and mutator methods is equally simple. The accessor requires only a single line of text, while the mutators each require a second line to apply their changes to the label like this:

Back to Top

getPreferredSize()

• Measure the height and width of the text, given the current font. This requires both a Graphics object, and a FontMetrics object.
• Decide on the overall width and height of the label based upon the thickness of the border and the size of the rendered text. You'll also want to allow a little extra for spacing between the border and the label's text.

The first part of this is pretty straightforward: 

Notice that after calling getGraphics() we check to see if the call succeeded. It's possible that getPreferredSize() will be called when the Graphics context is not yet initialized. After measuring the size of the text, we can calculate a new height and width like this:

• The width will be the width of the text plus the thickness of the border on the left and on the right, plus fourteen to provide a seven-pixel spacing between the border and each end of the text. [When you improve on this course, you may want to add adjustable insets to take care of this].
• The height of the label will be the height of the text plus the thickness of the top and bottom borders plus ten, to provide a five-pixel spacing above and below the text.

Here's the line you need to add to meet those requirements:

Back to Top

The paint() Method

1. First draw the border.
2. Then draw the text.

To draw the border, you use an if statement or a switch statement like this: 

Once the border has been drawn, just compute the "x,y" position for your text like this:

Then you can draw your text using drawString() like this: 

Try It Out

Here's an applet, TestBL.java, that puts the BorderLabel class through its paces. Here's the completed source code for BorderLabel.java as well.

Back to Top

Extending the Component Class

The advantage of this is that lightweight components require less resources [memory] than heavyweight components. The disadvantage is that such components can be, occasionally, temperamental. You may find yourself forced to write code to carry out actions that were previously performed by the operating system, "behind the scenes". As we did with the Canvas class, we'll look at two examples: the XCanvas class converted to a lightweight--we'll call it the XComponent class--and the BorderLabel class, likewise converted from Canvas to Component.

The XComponent Class

1. Copy XCanvas.java to XComponent.java. Change the class name. Change extends Canvas to extends Component.
2. Recompile.

1. Copy TestX.java to TestXLW.java. Replace the class name with TestXLW. Globally change all references from XCanvas to XComponent.
2. Recompile.

Whassup!

The problem lies, not with the lightweight component, but with the Graphics object used to draw your X. Every Graphics object is intimately connected to a native window peer. Since your lightweight components don't have a peer, they also don't have their own dedicated Graphics object. Each of your lightweight components has to "borrow" a Graphics object from its nearest heavyweight companion. In this case, the nearest heavyweight is the Applet where the three XComponents reside. It might seem that such a deficiency would render lightweight components unusable. After all, if you can't even change their colors... Fortunately, such is not the case. To make your lightweight components as well behaved as their heavyweight cousins, you must remember to initialize the drawing pen and any fonts you use inside your paint() method. Note, though, that when you use the latest version of Java 2, this is done automatically, as you can see if you run this applet in the appletviewer. To retrieve the foreground color you send your component the getForeground() message. Using getBackground() retrieves the background color. Here's a revised set of lightweight XComponents showing their green, blue, and yellow:

Where's the Background?

Of course, that's one of the advantages of lightweight components; with lightweights you can have an opaque colored background if you choose. With heavyweights, the background must be opaque.

Back to Top

Lightweight Border Labels

Let's see if it works. Here is LWBorderLabel.java and the TestLWBL.java applet which exercises it. You can see the TestLWBL applet running below.

Something to Talk About

• Download and compile XComponent.java and TestXLW.java. 
• Change the XComponent class, so that the TestXLW applet works just like the TestX applet.

Please continue to the next section of this lesson.

Back to Top