Application Techniques

Using Several Images from a Single File on an Image Button

How to obtain individual button images from a larger (composite) image by specifying pixel coordinates.

About this technique



Java Client Techniques> Version 2 AWT-based controls


You'll learn about:

You can run this technique code from:

NOTE   First make sure that database is running on your localhost SilverStream Server

Related reading

See the chapter on the Form Designer in the Tools Guide

Uploading an image for each button in your application may cost you in computational speed. To avoid having to upload multiple images for the various buttons images, you can upload a composite image of all the buttons, then use each button's image properties to access the only relevant portion of the image. This cropping technique is useful if you want to minimize the number of individual image files you maintain for your application.

The example uses a single image file as the source for multiple button images. The single large image is actually a composite of several images. You can extract individual portions of the large image by specifying the pixel coordinates for the upper left corner and the width and height.

When you run the form and click on a button in the central frame, the pixel coordinates for the button are displayed in the text box. For example if you click on the up image for the ADD button, the following is displayed: "Coordinates of ImageButton: x=1, y=1, w = 63, h = 26."

Specifying a portion of an image in the Property Inspector   Top of page

The following describes how to specify cropping values for the composite image so that a button displays a portion of the composite image.

  1. Ensure that buttons.jpg is in the Examples3_Java/Media/Images store.

  2. In design mode select the blank (gray) button on the right side of the display and open the Property Inspector.

  3. Open Images on the property sheet

  4. Specify a file name and image coordinates for one of the Images fields. For example for the Up image, you might specify:

      buttons.JPG 1 30 63 26 

    This information specifies that:

Dynamically changing image properties of an image button   Top of page

The following code uses setUpImage() and setDownImage() to change the images assigned to an image button. The button has both Up and Down images. A second button lets the user switch between two pairs of images for the button. The images are in a single image file that is a composite of all the images.

This is a code fragment in the handle_listImages_valueChanged() method.

  //Get the image. 
  Image imgBig = getImage(agGeneral.getDatabaseURL() +  
  //Get the section you're interested in. (UP Image) 
  cropped= new FilteredImageSource (imgBig.getSource(), 
     new CropImageFilter (xCoordinate, yCoordinate,  
     width, height)); 
  //Assign to the image variable. 
  little = createImage (cropped); 
  //Set the up image property of the image button. 
  //ibDynamic is an AgcButtonImage object 
  //Get the section you're interested in. (DOWN Image) 
  cropped = new FilteredImageSource (imgBig.getSource(), 
     new CropImageFilter (xCoordinate, 30, width, height)); 
  //Assign to the image variable. 
  little = createImage (cropped); 
  //Set the down image property of the image button. 

Notes about the code

Copyright © 2000, SilverStream Software, Inc. All rights reserved.