Using ImageRegionSelectors to Control an Applet

• Introduction
• Running the Sample
• Using the Sample
• Understanding the Sample

Introduction

Estimated Time Required: 10 mins

This sample shows an applet that is controlled by two ImageRegionSelectors. The applet is used by people searching for a new house by allowing them to specify the area (either a county or a town) that they would like to live in and the type of house required. These variables are captured with separate ImageRegionSelector components - with the list of suitable houses updated whenever the selection in either component is changed

The source is in the irsexample.java file in the ImageRegionSelector Bean \samples\irsexample directory.

Running the Sample

If your default browser supports Java 1.1, you can see the applet running below. Please note it may take a few seconds to load.

As ImageRegionSelector 1.0 uses Swing you will need to have swing.jar from Swing 1.0.3 in your classpath. Also, if you are using Netscape, you need version 4.06, or higher.

You can also run the sample in the Appletviewer or in VisualAge for Java.

To run the applet using Appletviewer:

To run the applet using VisualAge for Java:

1. Open VisualAge for Java.
2. Import the class files and resources from s_imageregionselector.jar into the project you use to contain all imported Beans and samples, if you haven't already done so. We call this project Mybeans. Add all the available beans to an appropriate palette category when prompted.
3. Import the java files, class files and resources from the samples\irsexample directory into the same project.
4. Ensure the JFC class libraries are in the project path.
5. In the same project right-click the irsexample applet and Run it.

Using the Sample

The applet lets users specify two pieces of data. The map ImageRegionSelector allows you to specify the area in which you are interested in finding a house. You can see that as the mouse rolls over selectable regions their color lightens since "Lighten" is specified for the rollover emphasis style. Upon selection of such a region you can see that the cutaway image is displayed for that region. You can also see that details of available houses in that region have been displayed on the right had side of the applet

The ImageRegionSelector that is displaying a row of houses allows you to specify the type of house that is being looked for. The display image shows terraced housing, semi-detached housing, flats and detached housing. Again, when the mouse rolls over these different types of houses the regions are lightened. Upon selection a cutaway image is again shown to emphasise the selection. This also updates the house details shown as only houses of the type selected are displayed.

Understanding the Sample

The lines of code relevant to the use of the ImageRegionSelector are described below.

1. Import the classes for the ImageRegionSelector component, along with classes describing the events of the ImageRegionSelector

   import com.ibm.eou.swingimageregionselector.*;
   import java.awt.event.*;
       

2. Create the applet which must implement the ItemListener interface in order to receive the events from the ImageRegionSelector. This means that applet must define an itemStateChanged method.

   public class Irsexample extends com.sun.java.swing.JApplet implements ItemListener 
       

3. Define the constants and variables needed below. (for a full list of region names and tooltips see the source code)

   private String[] mapRegionNames = {"Lincolnshire", "Lincoln", ....., "Colchester"};
   private String[] mapTooltips = {"Click here for the county of Lincolnshire", ....., "Click here for the town of Colchester"};
   private String[] houseRegionNames = {"Terraced", "Semi", "Flat", "Detached"};
   private String[] houseTooltips = {"Click here to select terraced housing", "Click here to select semi-detached housing",
   	"Click here to select flats", "Click here to select detached housing"		};
   private ImageRegionSelector iMapSelector;
   private ImageRegionSelector iHouseSelector;
   private String regionSelected = null;
   private String houseType = null;
       

4. Create the ImageRegionSelector component to display the map of East Anglia. Note that it's size is set to the size of the display image. See the ImageRegionSelector class documentation for further details. The house selector component is initialized in the same way but with different image file names and a different location.

   iMapSelector = new ImageRegionSelector();
   iMapSelector.setLocation(0, 20);
   iMapSelector.setDisplayImage("/com/ibm/eou/swingimageregionselectorsamples/anglia.gif");
   iMapSelector.setColorMapImage("/com/ibm/eou/swingimageregionselectorsamples/anglia_map.gif");
   iMapSelector.setCutawayImage("/com/ibm/eou/swingimageregionselectorsamples/anglia_cutaway.gif");
   iMapSelector.setSelectionEmphasisStyle(ImageRegionSelector.CUTAWAY);
   iMapSelector.setRolloverEmphasisStyle(ImageRegionSelector.LIGHTEN);
   iMapSelector.setRegionNames(mapRegionNames);
   iMapSelector.setTooltips(mapTooltips);
   iMapSelector.addItemListener(this);
   getContentPane().add(iMapSelector);
       

5. Define the itemStateChanged method to handle the events. This method is called when a selection/ deselection is made on either of the ImageRegionSelectors. The ItemEvent holds which component fired the event and what type of event it was. This method uses this information to update the regionSelected and houseType strings which are used in the displayHouses() method to display the relevant house information.

   public void itemStateChanged(ItemEvent e) 
   {
   	if(e.getItem() == iMapSelector)
   	{
   		if(e.getStateChange() == ItemEvent.SELECTED)
   		{
   			regionSelected = (String)iMapSelector.getSelectedItem();
   		}
   		else
   		{
   			regionSelected = null;
   		}
   	}
   
   	if(e.getItem() == iHouseSelector)
   	{
   		if(e.getStateChange() == ItemEvent.SELECTED)
   		{
   			houseType = (String)iHouseSelector.getSelectedItem();
   		}
   		else
   		{
   			houseType = null;
   		}
   	}
   
   	displayHouses();
   }