创建伸缩和拖拽的flex组件

主程序

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:myComp="myComponents.*"  creationComplete="creationCompleteHandler();">   

   <mx:Script>       

<![CDATA[        

    import mx.managers.DragManager;     

       import mx.core.DragSource;      

      import mx.events.DragEvent;       

     import flash.events.MouseEvent;   

         import mx.containers.Canvas;        

    import mx.containers.Panel;  

 import myComponents.DragPanel;

   // Define static constant for event type. 

 public static const RESIZE_CLICK:String = "resizeClick";

   // Creation complete event handler adds the resizing event.

   // resizeButtonClicked is a custom event type for this application.   

protected function creationCompleteHandler():void    { 

   addEventListener(RESIZE_CLICK, resizeHandler);

   }

// // D&D event handlers. //

            // Creation complete handler for each panel to add the     

       // mouseMove event handler to the title bar.     

       // Clicking the mouse button, then moving the mouse on the title bar     

       // initiates the d&d operation.            

private function myPanelCCHandler(event:Event):void             {              event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);             }

            // Variables used to hold the mouse pointer's location in the title bar.    

        // Since the mouse pointer can be anywhere in the title bar, you have to 

           // compensate for it when you drop the panel.          

  public var xOff:Number;           

public var yOff:Number;                      

  // Function called by the canvas dragEnter event; enables dropping            

private function doDragEnter(event:DragEvent):void {                 DragManager.acceptDragDrop(Canvas(event.target));          

  }

            // Drag initiator event handler for           

// the title bar's mouseMove event.            

private function tbMouseMoveHandler(event:MouseEvent):void {

                var dragInitiator:Panel=Panel(event.currentTarget.parent); 

               var ds:DragSource = new DragSource(); 

               ds.addData(event.currentTarget.parent, 'panel');

                             // Update the xOff and yOff variables to show the

             // current mouse location in the Panel. 

                xOff = event.currentTarget.mouseX; 

               yOff = event.currentTarget.mouseY;  

                              // Initiate d&d.               

DragManager.doDrag(dragInitiator, ds, event);  

                             }           

            // Function called by the Canvas dragDrop event;

            // Sets the panel's position,            

// "dropping" it in its new location.           

private function doDragDrop(event:DragEvent):void             { 

   // Compensate for the mouse pointer's location in the title bar.   

 var tempX:int = event.currentTarget.mouseX - xOff;   

 event.dragInitiator.x = tempX;         

var tempY:int = event.currentTarget.mouseY - yOff;    

event.dragInitiator.y = tempY;         

// Put the dragged panel on top of all other components.    

v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);               

}

// // Resizing event handlers. //

   // Save panel being resized.   

protected var resizingPanel:Panel;   

// Global coordinates of lower left corner of panel.  

 protected var initX:Number;   

protected var initY:Number;

   // Resize area of panel clicked.   

protected function resizeHandler(event:MouseEvent):void    {   

 resizingPanel = Panel(event.target);   

 initX = event.localX;   

 initY = event.localY;         

// Place the rubber band over the panel.    

rbComp.x = event.target.x;    

rbComp.y = event.target.y;    

rbComp.height = event.target.height;    

rbComp.width = event.target.width;        

 // Make sure rubber band is on top of all other components.    

v1.setChildIndex(rbComp, v1.numChildren-1);   

 rbComp.visible=true;        

 // Add event handlers so that the SystemManager handles    

// the mouseMove and mouseUp events.    

// Set useCapure flag to true to handle these events    

// during the capture phase so no other component tries to handle them.     systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);     systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);   

}       

// Resizes the rubber band as the user moves the cursor  

 // with the mouse key down.   

protected function mouseMoveHandler(event:MouseEvent):void    {      event.stopImmediatePropagation();              

rbComp.height = rbComp.height + event.stageY - initY;     

 rbComp.width = rbComp.width + event.stageX - initX;           

initX = event.stageX;      initY = event.stageY;        

 }     

  // Sizes the panel to the size of the rubber band when the  

 // user releases the mouse key.  

 // Also removes the event handlers from the SystemManager.   

protected function mouseUpHandler(event:MouseEvent):void    {    

event.stopImmediatePropagation();  

    // Use a minimum panel size of 150 x 50.   

 if (rbComp.height <= 50)     {    

 resizingPanel.height = 50;     

}     else     {    

 resizingPanel.height = rbComp.height;         

 } 

            if (rbComp.width <= 150)     { 

    resizingPanel.width = 150;       

 }     else     { 

    resizingPanel.width = rbComp.width;     

   }    

    // Put the resized panel on top of all other components.    

v1.setChildIndex(resizingPanel, v1.numChildren-1);

    // Hide the rubber band until next time.    

rbComp.x = 0;    

rbComp.y = 0;   

 rbComp.height = 0;  

  rbComp.width = 0;   

 rbComp.visible = false;         

systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);     systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true );  

 }         ]]>   

</mx:Script>       

<!-- The Canvas is the drag target -->    

<mx:Canvas id="v1"         width="500" height="500"          borderStyle="solid"         backgroundColor="#DDDDDD"         dragEnter="doDragEnter(event);"         dragDrop="doDragDrop(event);">                    

<myComp:DragPanel  id="dp1" title="Drag Panel 1"      paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"      x="19" y="10"      creationComplete="myPanelCCHandler(event);">

  <mx:TextArea text="Location in Canvas: x = {String(dp1.x)}, and y = {String(dp1.y)}" width="90%"/>     </myComp:DragPanel>

    <myComp:DragPanel  id="dp2"  title="Drag Panel 2"      paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"      x="149" y="149"      creationComplete="myPanelCCHandler(event);"> 

 <mx:TextArea text="Location in Canvas: x = {String(dp2.x)}, and y = {String(dp2.y)}" width="90%"/>                    

</myComp:DragPanel>

    <myComp:DragPanel id="dp3"  title="Drag Panel 3"      paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"       x="241" y="283"      creationComplete="myPanelCCHandler(event);">  

<mx:TextArea text="Location in Canvas: x = {String(dp3.x)}, and y = {String(dp3.y)}" width="90%"/>                     

</myComp:DragPanel>

    <myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>

    </mx:Canvas>

</mx:Application>

DragPanel类

package myComponents {

 import mx.containers.Panel; 

import mx.core.UIComponent; 

import mx.core.SpriteAsset; 

import mx.events.FlexEvent;

 import flash.events.MouseEvent; 

import flash.events.Event;

 public class DragPanel extends Panel  { 

 // Add the creationCOmplete event handler.  

public function DragPanel()   {   

super();   

addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler); 

 }    

 // Expose the title bar property for draggin and dropping. 

 [Bindable]  

public var myTitleBar:UIComponent;        

private function creationCompleteHandler(event:Event):void   {   

myTitleBar = titleBar; 

     // Add the resizing event handler.    

addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);  

}

protected var minShape:SpriteAsset;  

protected var restoreShape:SpriteAsset;

  override protected function createChildren():void   { 

   super.createChildren();      

 // Create the SpriteAsset's for the min/restore icons and  

 // add the event handlers for them.   

minShape = new SpriteAsset();   

minShape.addEventListener(MouseEvent.MOUSE_DOWN, minPanelSizeHandler);    titleBar.addChild(minShape);

   restoreShape = new SpriteAsset();    restoreShape.addEventListener(MouseEvent.MOUSE_DOWN, restorePanelSizeHandler);    titleBar.addChild(restoreShape);   }       override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void   {    super.updateDisplayList(unscaledWidth, unscaledHeight);        // Create invisible rectangle to increase the hit area of the min icon.    minShape.graphics.clear();    minShape.graphics.lineStyle(0, 0, 0);    minShape.graphics.beginFill(0xFFFFFF, 0.0);    minShape.graphics.drawRect(unscaledWidth - 35, 12, 8, 8);

   // Draw min icon.    minShape.graphics.lineStyle(2);    minShape.graphics.beginFill(0xFFFFFF, 0.0);    minShape.graphics.drawRect(unscaledWidth - 35, 18, 8, 2);         // Draw restore icon.    restoreShape.graphics.clear();    restoreShape.graphics.lineStyle(2);    restoreShape.graphics.beginFill(0xFFFFFF, 0.0);    restoreShape.graphics.drawRect(unscaledWidth - 20, 12, 8, 8);    restoreShape.graphics.moveTo(unscaledWidth - 20, 15);    restoreShape.graphics.lineTo(unscaledWidth - 12, 15);

   // Draw resize graphics if not minimzed.        graphics.clear()    if (isMinimized == false)    {     graphics.lineStyle(2);     graphics.moveTo(unscaledWidth - 6, unscaledHeight - 1)     graphics.curveTo(unscaledWidth - 3, unscaledHeight - 3, unscaledWidth - 1, unscaledHeight - 6);           graphics.moveTo(unscaledWidth - 6, unscaledHeight - 4)     graphics.curveTo(unscaledWidth - 5, unscaledHeight - 5, unscaledWidth - 4, unscaledHeight - 6);          }   }         private var myRestoreHeight:int;   private var isMinimized:Boolean = false;         // Minimize panel event handler.   private function minPanelSizeHandler(event:Event):void   {    if (isMinimized != true)    {     myRestoreHeight = height;      height = titleBar.height;     isMinimized = true;      // Don't allow resizing when in the minimized state.     removeEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);    }       }      // Restore panel event handler.   private function restorePanelSizeHandler(event:Event):void   {    if (isMinimized == true)    {     height = myRestoreHeight;     isMinimized = false;      // Allow resizing in restored state.         addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);    }   }

  // Define static constant for event type.   public static const RESIZE_CLICK:String = "resizeClick";

  // Resize panel event handler.   public  function resizeHandler(event:MouseEvent):void   {    // Determine if the mouse pointer is in the lower right 7x7 pixel    // area of the panel. Initiate the resize if so.        // Lower left corner of panel    var lowerLeftX:Number = x + width;    var lowerLeftY:Number = y + height;         // Upper left corner of 7x7 hit area    var upperLeftX:Number = lowerLeftX-7;    var upperLeftY:Number = lowerLeftY-7;         // Mouse positionin Canvas    var panelRelX:Number = event.localX + x;    var panelRelY:Number = event.localY + y;

   // See if the mousedown is in the lower right 7x7 pixel area    // of the panel.    if (upperLeftX <= panelRelX && panelRelX <= lowerLeftX)    {     if (upperLeftY <= panelRelY && panelRelY <= lowerLeftY)     {        event.stopPropagation();        var rbEvent:MouseEvent = new MouseEvent(RESIZE_CLICK, true);      // Pass stage coords to so all calculations using global coordinates.      rbEvent.localX = event.stageX;      rbEvent.localY = event.stageY;      dispatchEvent(rbEvent);      }    }       }    } }

RubberBandComp类

package myComponents {  import mx.core.UIComponent;

 public class RubberBandComp extends UIComponent  {   public function RubberBandComp()   {    super();   }

  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void   {    super.updateDisplayList(unscaledWidth, unscaledHeight);         // Draw rubber band with a 1 pixel border, and a grey fill.         graphics.clear();            graphics.lineStyle(1);    graphics.beginFill(0xCCCCCC, 0.5);    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);   }     } }