Variations on the map component of Christophe’s Restaurant Finder

As a Macromedia Certified Instructor, I’m certified to teach all of their Flex, Flash and ColdFusion courses.  The past few weeks, I’ve been teaching the Flex class quite a bit, which uses a variation on Christophe’s Restaurant Finder application for the labs.  The final chapter of the course introduces drag and drop to the applicaiton, and we build out the map section of the app.

Recently, I’ve been walking students through a variation on the original code.  One key learning point for anyone using Drag and Drop functionality in Flex is the use of the DragManager.  Oddly, this is entirely left out of the Map code originally provided, instead, working off of the mouseDown and mouseUp events of the <mx:Image />.  I’ve found the code becomes much cleaner, easier to understand, less verbose, and hits more key learning points by rebuilding it like this:

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas  xmlns:mx="http://www.macromedia.com/2003/mxml" >
 <mx:Image source="@Embed(‘../images/bostonmap.gif’)" dragEnter="event.handled=true" dragDrop="dragStop()" />
 <mx:Image id="selector" source="@Embed(‘../images/frame.gif’)" mouseDown="dragStart()"/>
 
 <mx:Metadata>
  [Event("selectionChanged")]
 </mx:Metadata>
          
 <mx:Script>
 <![CDATA[
  var startX;
  var startY;
  function dragStart(){
   startX = mouseX;
   startY = mouseY;
   mx.managers.DragManager.doDrag(selector);
  } 
  function dragStop(){
   selector.x+= mouseX-startX;
   selector.y += mouseY-startY;
   var evtObj = new Object();
   evtObj.x1 = selector.x;
   evtObj.x2 = selector.x+selector.width;
   evtObj.y1 = selector.y;
   evtObj.y2 = selector.y+selector.height;
   evtObj.type = ‘selectionChanged’;
   
   dispatchEvent(evtObj);
  } 
 
 ]]>
 </mx:Script>
</mx:Canvas>

Notice, that the dragEnter and dragDrop events are now coded for the map image, and we simply start dragging with the mouseDown event on the frame image.  All I’m really doing, is telling the map that it is capable of having items dragged onto it, and enabling the frame to be dragged.  Notice, the dragStart method now uses the DragManager class to enable the dragging, as opposed to the original, which set a flag on the mouseDown event of the frame, and then reacted to the mouseMove event throughout the application.  For comparison, the original can be seen here:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas mouseMove="doMouseMove()" xmlns:mx="
http://www.macromedia.com/2003/mxml">
 
 <mx:Metadata>
  [Event("selectionChanged")]
 </mx:Metadata>

 <mx:Script>
  <![CDATA[
     var bIsDown:Boolean = false;
     var lastX:Number;
     var lastY:Number;
 
     function doMouseDown()
     {
      bIsDown = true;
      lastX = mouseX;
      lastY = mouseY;
     }
 
     function doMouseUp()
     {
    bIsDown = false;
    dispatchEvent({type: ‘selectionChanged’, x1: selector.x, x2: selector.x+selector.width, y1: selector.y, y2: selector.y+selector.height})
     }
 
     function doMouseMove()
     {
      if (bIsDown)
      {
       var deltaX = mouseX – lastX;
       var deltaY = mouseY – lastY;
 
       selector.x += deltaX;
       selector.y += deltaY;
 
       lastX = mouseX;
       lastY = mouseY;
      }
     }
  ]]>
 </mx:Script>

 <mx:Image source="@Embed(‘../images/bostonmap.gif’)"/>
 <mx:Image source="@Embed(‘../images/frame.gif’)"
   mouseDown="doMouseDown()"
   id="selector" mouseUp="doMouseUp()"/>

</mx:Canvas>

There are no comments.

Leave a Reply