Sychronizing map and datagrid interaction with the ArcGIS API for Flex

There are many samples in the Flex API resource center that show how to render the results of queries on to a graphics layer and also how to populate a component such as datagrid with attributes. The example application discussed in this post shows how mouse events can be synchronized between the graphics layer and the datagrid.

As you hover your mouse over a state, both the state and its corresponding information in the datagrid are highlighted. Also when you hover your mouse pointer over a datagrid row, the corresponding state gets highlighted. This approach adds a greater degree of interactivity to your Web application.

Let’s see how the mouse events are synchronized in this example. Events are an important concept in the Flex framework that enable an application to respond to user interactions. Flex components have built in events that generate and dispatch events, and components can also listen for other events. Refer to Adobe’s Flex framework documentation to learn more about this important concept.

In this example we will add event listeners that will react to the mouse-over and mouse-out events on the graphic and the roll-out and roll-over events on datagrid.

1. Add listeners to each graphic that can respond to mouse-over and mouse-out events. Before adding each graphic to the graphics layer, add event listeners like this:

   for each( var graphic : Graphic in featureSet.features )
   {
     graphic.addEventListener( MouseEvent.MOUSE_OVER, onMouseOver );
     graphic.addEventListener( MouseEvent.MOUSE_OUT, onMouseOut );
     myGraphicsLayer.add( graphic );    			
   }    
   

   When the mouse cursor enters the boundary of a graphic, the onMouseOver function is called and when the cursor leaves the boundary of a graphic, the onMouseOut function is called. Here’s some more detail on what these two functions do.

   onMouseOver: Obtains the graphic from the event and changes its symbol. Loops through all the rows in the datagrid and finds the index of the object that matches the attributes object of the graphic. Assigns this index as the selectedIndex of the datagrid. Optionally you can also use this index such that the datagrid automatically scrolls to that row.

   private function onMouseOver( event : MouseEvent ) : void
   {
     var graphic : Graphic = Graphic( event.target );
     graphic.symbol = highlightSymbol;
       			
     for each( var attributes : Object in resultsGrid.dataProvider )
     {
       if (attributes === graphic.attributes)
       {
         resultsGrid.selectedIndex = (resultsGrid.dataProvider as ArrayCollection).getItemIndex(attributes)						
       }
     }	    	    
     resultsGrid.scrollToIndex(resultsGrid.selectedIndex);
   }
   

   onMouseOut: Resets the symbol of the graphic to its original symbol and resets the selectedIndex of the datagrid.

   private function onMouseOut( event : MouseEvent ) : void
   {   			   			    		
     Graphic( event.target ).symbol = resultsSymbol;	    		  			
     resultsGrid.selectedIndex = -1;  			
   }
   

2. Add functions that can respond to the roll-over and roll-out event of the datagrid. When a user hovers the mouse cursor over a row in the datagrid , the onItemRollOver function is called and when the cursor leaves the row, the onItemRollOut function is called. In both these functions, the symbol associated with graphic is changed accordingly. The implementation of the functions looks like this:

   private function onItemRollOver( event : ListEvent ) : void
   {
     findGraphicByAttribute(event.itemRenderer.data).symbol = highlightSymbol;    			    			
   }
       		
   private function onItemRollOut( event : ListEvent ) : void
   {
     findGraphicByAttribute(event.itemRenderer.data).symbol = resultsSymbol;
   }
   	
   public function findGraphicByAttribute( attributes : Object ) : Graphic
   {
     for each( var graphic : Graphic in myGraphicsLayer.graphicProvider)
     {
       if ( graphic.attributes === attributes)
       {
         return graphic;
       }
     }			
     return null;
   }
   

In this article you have seen how you can take advantage of the Flex eventing mechanism to add more interactivity to your application. To view and download the source for the example application, right click anywhere outside the map and click “View Source”.

Contributed by Antony Jayaprakash of the ArcGIS API for Flex development team