Creating an ImageRegionSelector Component

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

Introduction

Estimated Time Required: 10 mins

This sample shows how to create an ImageRegionSelector component and use it in an applet.

The source is in the mapexample.java file in the ImageRegionSelector Bean \samples\mapexample 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\mapexample directory into the same project.
4. Ensure the JFC class libraries are in the project path.
5. In the same project right-click the mapexample applet and Run it.

Using the Sample

To use the sample:

1. Move the mouse pointer over the map of the Anglian region of England. See how the "Lighten" emphasis style is applied to the image - where counties appear as a light green and the dots representing cities appear as light blue
2. Select a county. See how the cutaway image appears for the selected county. See that the name of the selected county appears at the bottom upon selection
3. Select a town or city. It is now represented by a red dot which again comes from the cutaway image. Any previous selections have disappeared.
4. Allow your mouse to hover over a selectable region . An annotation appears to display the specified tooltip text of the region

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 Mapexample 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[] regionNames = {"Lincolnshire", "Lincoln", ....., "Colchester"};
   private String[] tooltips = {"Click here for the county of Lincolnshire", ....., "Click here for the town of Colchester"};
   private ImageRegionSelector angliaSelector;
   private JLabel selectionLabel;
       

4. Create the ImageRegionSelector component. Note that it's size is set to the size of the display image. See the ImageRegionSelector class documentation for further details.

   angliaSelector = new ImageRegionSelector();
   angliaSelector.setLocation(selectorX, selectorY);
   angliaSelector.setDisplayImage("/com/ibm/eou/swingimageregionselector/anglia.gif");
   angliaSelector.setColorMapImage("/com/ibm/eou/swingimageregionselector/anglia_map.gif");
   angliaSelector.setCutawayImage("/com/ibm/eou/swingimageregionselector/anglia_cutaway.gif");
   angliaSelector.setSelectionEmphasisStyle(ImageRegionSelector.CUTAWAY);
   angliaSelector.setRolloverEmphasisStyle(ImageRegionSelector.LIGHTEN);
   angliaSelector.setRegionNames(regionNames);
   angliaSelector.setTooltips(tooltips);
   getContentPane().add(angliaSelector);
   angliaSelector.addItemListener(this);
   
       

5. Create the label to display the selected region.

   selectionLabel = new JLabel("No region selected");
   selectionLabel.setBounds(selectorX, selectorY + angliaSelector.getHeight(), 350, 20);
   getContentPane().add(selectionLabel);
       

6. Define the itemStateChanged method to handle the events.

   public void itemStateChanged(ItemEvent e) 
   {
   	if(e.getStateChange() == ItemEvent.SELECTED)
   	{
   		selectionLabel.setText("Region selected: "+angliaSelector.getSelectedItem());
   	}
   	else
   	{
   		selectionLabel.setText("No region selected");
   	}
   }