How to code a button with image

[rose deng]

Hi.
I want to have a button with image background,but i don't want to use Swing.
How to?
Thanks your answer in advance.

[Nathan Pruett]

Rose,
Basically, all you have to do is extend Component, Button, Panel, Canvas... any of the AWT types you could use to draw an image on... you would send the image into your new class via the constructor, or a set method, and have the new component paint the image in it's paint() method... you would need to make it create ActionEvents( since that's what buttons create ) when it is clicked on... you would probably do this by making the new class implement MouseListener and KeyListener( to get mouse clicks and key presses on this new class ) and have it draw the new class differently( i.e. different image, border change, something to show it is "pressed" ) and have it create the ActionEvent...
Then you just use this new AWT component in your applet or application.
I know that I was kind of sketchy on the details... please ask if something is not understandable, or if you need an example.
HTH,
-Nate

[Nathan Pruett]

Rose,
Here is an example of some code to create a button with an image on it... if it meets your needs, great! If not, hopefully it can be modified to do just what you want!

import java.awt.Button;
import java.awt.Image;
import java.awt.Graphics;
import java.awt.MediaTracker;
import java.awt.Dimension;
import java.awt.event.MouseEvent;
import java.awt.image.PixelGrabber;
import java.awt.image.MemoryImageSource;
/**
 * ImageButton is a Button that has an Image superimposed on it.
 * If it is set with no Image, it looks like a regular Button with
 * no label.  
 *
 * @author Nathan Pruett
 * @version 1.0
 * @see Button
 **/
public class ImageButton extends Button
{
    /**
     * The image that the button is currently displaying.
    **/
    private Image showingImage;
    /**
     * The image that the button displays when it is 'up'.
     **/
    private Image upImage;
    /**
     * The image that the button displays when it is 'down'.
     **/
    private Image downImage;
    /**
     * Constructor.
     * With no image an ImageButton looks just like a Button with
     * no label, so this constructor is not very useful to call.
     * Enables MouseEvents so that the ImageButton will show 
     * different images for 'up' and 'down' states.
     **/
    public ImageButton()
    {
        super();
        enableEvents( MouseEvent.MOUSE_PRESSED |
                      MouseEvent.MOUSE_RELEASED );
    }
    /**
     * Constructor.
     * Creates an ImageButton with the specified Image.
     *
     * @param image The Image that the button will display.
     **/
    public ImageButton( Image image )
    {
        this();
        this.setImage( image );
    }
    /**
     * Used by layout managers to set the size of the ImageButton.
     * The preferred size of the ImageButton is the size of the 
     * Image that it is displaying.
     *
     * @return The Dimensions of this ImageButton.
     **/
    public Dimension getPreferredSize()
    {
        Dimension d;
        if( showingImage != null )
        {
            d = new Dimension( showingImage.getWidth( this ), 
                               showingImage.getHeight( this ) );
        }
        else
        {
            d = super.getPreferredSize();
        }
        return d;
    }
    /**
     * Allows the Image that this ImageButton displays to be set.
     * The 'up' and 'down' images are generated from the original
     * image.
     * 
     * @param image The image to be displayed.
     **/
    public void setImage( Image image )
    {
        // MediaTracker must be used to load the Image, or the
        // correct size of the image will not be returned.
        MediaTracker tracker = new MediaTracker( this );
        tracker.addImage( image, 0 );
        try
        {
            tracker.waitForID( 0 );
        }
        catch( InterruptedException x )
        {
            System.err.println( "Could not load image into ImageButton" );
        }
        // Call the ImageButtonizer to get 'up' and 'down' images.
        ImageButtonizer ib = new ImageButtonizer();
        this.upImage = ib.getUpImage( image );
        this.downImage = ib.getDownImage( image );
        // Set the current image to the 'up' image.
        this.showingImage = this.upImage;
        // Make sure the ImageButton displays at the right size.
        this.setSize( image.getWidth( this ), image.getHeight( this ) );
        this.invalidate();
    }   
    /**
     * Takes care of painting the ImageButton to the screen.
     *
     * @param g The graphics context of this ImageButton.
     **/
    public void paint( Graphics g )
    {
        if( showingImage != null )
        {    
            g.drawImage( showingImage, 0, 0, getWidth(), getHeight(), this );
        }
    }
    /**
     * Processes mouse events on this ImageButton.
     *
     * @param e The mouse event being processed.
     **/
    protected void processMouseEvent( MouseEvent e )
    {
        if( e.getID() == MouseEvent.MOUSE_PRESSED )
        {
            showingImage = downImage;
            repaint();
        }
        else if( e.getID() == MouseEvent.MOUSE_RELEASED )
        {
            showingImage = upImage;
            repaint();
        }
    }
    /**
     * Inner class that takes care of generating the 'up' and
     * 'down' images of the ImageButton. Based on the button() 
     * method and others in the ImageProcessor class in Tonny
     * Espeset's book "KickAss Java Programming".
     *
     * @author Nathan Pruett
     * @version 1.0
     **/
    private class ImageButtonizer
    {
        /**
         * Creates the 'up' image for the button.
         *
         * @param i The original image.
         * @return The 'up' button image.
         **/
        public Image getUpImage( Image i )
        {
            return buttonize( i, false );
        }
        /**
         * Creates the 'down' image for the button.
         *
         * @param i The original image.
         * @return The 'down' button image.
         **/
        public Image getDownImage( Image i )
        {
            return buttonize( i, true );
        }
        /**
         * Does operations on an Image to create a new image
         * that looks shaded around the edges... like a button!
         *
         * @param i The original image.
         * @param pushed Indicates if the button image is the 'down'
         *               or 'up' image.
         * @return The new 'down' or 'up' image.
         **/
        private Image buttonize( Image i, boolean pushed )
        {
            // How much the edges should contrast.
            int intensity = 25;
            // Width of the image.
            int width = i.getWidth( ImageButton.this );
            // Height of the image.
            int height = i.getHeight( ImageButton.this );
            // The 'buttonized' borders width.
            int borderSize = ( width + height ) / 30;
            // The pixels in the image.
            int pixels[] = new int[ width * height ];
            // Grab pixels.
            PixelGrabber pg = new PixelGrabber( i, 0, 0, width, height,
                    pixels, 0, width );
            try
            {
                pg.grabPixels();
            }
            catch( InterruptedException x )
            {
                System.err.println( "Cannot buttonize image on ImageButton" );
            }
            // If this is the 'down' button reverse shaded sides.
            if( pushed )
            {
                intensity = -intensity;
            }
            // Draw top and bottom border
            for( int y = 0; y < borderSize; y++ )
            {
                for( int x = 0; x < width - y; x++ )
                {
                    // Draw top border
                    // Get the current pixel color.
                    int c = pixels[ x + y * width ];
                    // Get red of current color.
                    int r = ( c & 0xFF0000 ) >> 16;
                    // Get green of current color.
                    int g = ( c & 0xFF00 ) >> 8;
                    // Get blue of current color.
                    int b = ( c & 0xFF );
                    // Make the colors brighter.
                    r = Math.max( Math.min( r + intensity, 255 ), 0 );
                    g = Math.max( Math.min( g + intensity, 255 ), 0 );
                    b = Math.max( Math.min( b + intensity, 255 ), 0 );
                    // Put the new color back in the pixel.
                    pixels[ x + y * width ] = ( c & 0xFF000000 ) + 
                            ( r << 16 ) + ( g << 8 ) + b;
                    // Draw bottom border
                    c = pixels[ width - x - 1 + ( height - y - 1 ) * width ];
                    r = ( c & 0xFF0000 ) >> 16;
                    g = ( c & 0xFF00 ) >> 8;
                    b = ( c & 0xFF );
                    // Make the colors darker.
                    r = Math.min( Math.max( r - intensity, 0 ), 255 );
                    g = Math.min( Math.max( g - intensity, 0 ), 255 );
                    b = Math.min( Math.max( g - intensity, 0 ), 255 );
                    pixels[ width - x - 1 + ( height - y - 1 ) * width ] =
                            ( c & 0xFF000000 ) + ( r << 16 ) + ( g << 8 ) + b;
                }
            }
            // Draw side borders
            for( int x = 0; x < borderSize; x++ )
            {
                for( int y = borderSize; y < height - x; y++ )
                {
                    // Draw left border.
                    int c = pixels[ x + y * width ];
                    int r = ( c & 0xFF0000 ) >> 16;
                    int g = ( c & 0xFF00 ) >> 8;
                    int b = ( c & 0xFF );
                    // Make the colors brighter.
                    r = Math.max( Math.min( r + intensity, 255 ), 0 );
                    g = Math.max( Math.min( g + intensity, 255 ), 0 );
                    b = Math.max( Math.min( b + intensity, 255 ), 0 );
                    pixels[ x + y * width ] = ( c & 0xFF000000 ) +
                            ( r << 16 ) + ( g << 8 ) + b;
                    
                    // Draw right border.
                    c = pixels[ width - x -1 + ( y - ( borderSize - x ) ) * width ];
                    r = ( c & 0xFF0000 ) >> 16;
                    g = ( c & 0xFF00 ) >> 8;
                    b = ( c & 0xFF );
                    // Make the colors darker.
                    r = Math.min( Math.max( r - intensity, 0 ), 255 );
                    g = Math.min( Math.max( g - intensity, 0 ), 255 );
                    b = Math.min( Math.max( b - intensity, 0 ), 255 );
                    pixels[ width - x - 1 + ( y - ( borderSize - x ) ) * width ] = 
                            ( c & 0xFF000000 ) + ( r << 16 ) + ( g << 8 ) + b;
                }
            }
            // Create a new image from the pixels and return it.
            return( createImage( new MemoryImageSource( width, height,
                    pixels, 0, width ) ) );
        }
    }
}

Just use it like a normal Button in your applets or applications!
Email me or post on here if you have any problems with it!
HTH,
-Nate