Learn how to extend the AWT with your own image buttons

Subclass an AWT component so you can build an image button for toolbars, palettes, and other "icon-friendly" environments

By Rich Kadel, JavaWorld.com, 03/01/97

Before you start cursing the AWT (yet again), let me assure you that a solution exists. The most straightforward approach and the technique we'll be examining in this article involves subclasssing the AWT's Canvas class. Although the primary purpose of the Canvas class is drawing (perfect for our purposes), it doesn't provide the mouse handling or any of the typical button-press effects (let alone mouse-over effects) you would expect for a button. We'll address these limitations by working with several classes I've created to support fully flexible, active image buttons.

Getting started with the ImageButton class

   
public class ImageButton extends Canvas {

Determining button states

When the user is not interacting with the button in any way, the button is in its UNARMED state. To follow suit with many applications, such as Internet Explorer and the new Netscape Navigator 4.0 pre-release, we're going to implement an OVER state, which will highlight a button as the user moves the mouse over it. The ARMED state, which we'll represent by showing a depressed button, occurs when the user clicks and holds on a button. If the user releases the mouse while the button is in the ARMED state, the corresponding action will be performed; however, users can return to the UNARMED state by moving the mouse off of the button without releasing the mouse. The last state we'll be supporting is DISABLED, which is implemented through the ImageButton programming interface by calling the AWT disabled function. A disabled button should not respond to any user action. We'll be using a grayed-out effect to indicate a disabled button.

Our image button will support only one state at a time (a button can't very well be ARMED and UNARMED at the same time now, can it?). We'll represent the four states in a single int, with four constants, as shown here:

   
    public static final int UNARMED = 0;
    public static final int ARMED = 1;
    public static final int OVER = 2;
    public static final int DISABLED = 3;

    private int buttonState = UNARMED;

Defining borders

We will have to draw the borders ourselves, so our next step is to decide what type of borders we want and which states they will correspond with. By implementing the border features in a separate class (we'll call this class Border), we can use one or more instances of the class in our ImageButton and switch between them as the states change.

Currently, the most popular kind of border is the shaded 3D-style border. We can actually use this border style for two of our button states: To indicate a button is unarmed, we'll use this style with darker bottom and right edges and lighter top and left edges; to indicate a button is armed (depressed) we'll use this style with darker top and left edges and lighter bottom and right edges.

I have implemented a very configurable class (Border.java) that supports multiple border styles, including NONE, THREED_OUT, and THREED_IN, among others. Two of Border's methods -- getInsets() and paint() -- do the bulk of the work. The getInsets() method returns the number of pixels at the top, left, bottom, and right that are necessary to make space for the border. (Note that the border is not required to be symmetrical.) The getInsets() method is used both to determine the size of the image button and to calculate the appropriate location at which to draw the button's image. As shown in the following snippet, getInsets() takes into account the border thickness and variable margins at each edge:

   
public Insets getInsets() {
        int top = borderThickness + topMargin;
        int left = borderThickness + leftMargin;
        int bottom = borderThickness + bottomMargin;
        int right = borderThickness + rightMargin;
        return new Insets( top, left, bottom, right );
    }

The Border paint() method, which is similar to the AWT Component paint() method, takes a Graphics parameter as input and draws the border in its current configuration. Border does not maintain the x-y coordinates or size of the image button, so these are passed to paint(). Also, the border color, if not set explicitly, can be derived from the button's current background color, another parameter to paint(). (This approach is desirable for borders like the 3D borders that should be given brighter and darker colors relative to the current background color.) Here is the function declaration for paint():

    
public void paint( Graphics g, Color background, 
                       int x, int y, int width, int height );

Different styles for different states

Back in the ImageButton class, a button needs to maintain variables for, potentially, four different borders and four different images for each of the four button states. Since we already defined the states as integers 0 through 3, we can use these values as indexes into the following arrays:

Free Download - 5 Minute Product Review. When slow equals Off: Manage the complexity of Web applications - Symphoniq

Free Download - 5 Minute Product Review. Realize the benefits of real user monitoring in less than an hour. - Symphoniq