[flexcoders] Question about getting the type of item / component with drag and drop

2009-12-09 Thread timgerr 
Hello all, 
I have been tasked with creating a menu that gets build with drag and drop 
components.  I have followed this tutorial 
(http://www.flexafterdark.com/tutorials/Flex-Drag-and-Drop) and have learned a 
lot.

I have a few questions to get to the next stage so I will ask a few questions.

1. When I drop (or drag over) an item like a panel, how can I tell what that 
UIComponent is, how can I tell that is a panel?

2. How can I get that panel as an object so I can do something like 
panelid.addChild(new dropped item)?

Thanks for the read,
timgerr

Here is the code that I have from the tutorial.

?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
name=Drag and Drop tutorial creationComplete=Init()

mx:Script
![CDATA[
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.controls.Alert;

public function Init():void
{
// a mouseDown event will start the drag

this.redBox.addEventListener(MouseEvent.MOUSE_DOWN, BeginDrag);
// accepting a drag/drop operation...
this.blueBox.addEventListener( 
DragEvent.DRAG_ENTER,AcceptDrop);
// handling the drop...
this.blueBox.addEventListener( 
DragEvent.DRAG_DROP, handleDrop );
}

private function BeginDrag(mouseEvent:MouseEvent):void
{
// the drag initiator is the object being 
dragged (target of the mouse event)
var dragInitiator:IUIComponent = 
mouseEvent.currentTarget as IUIComponent;
  
// the drag source contains data about what's 
being dragged
var dragSource:DragSource = new DragSource();
  
// ask the DragManger to begin the drag
DragManager.doDrag( dragInitiator, dragSource, 
mouseEvent, null );
}

public function AcceptDrop(dragEvent:DragEvent):void
{
var dropTarget:IUIComponent = 
dragEvent.currentTarget as IUIComponent;
// accept the drop
DragManager.acceptDragDrop( dropTarget );
// show feedback
DragManager.showFeedback( DragManager.COPY );

}

public function handleDrop( dragEvent:DragEvent 
):void
{
var dragInitiator:IUIComponent = 
dragEvent.dragInitiator;
var dropTarget:IUIComponent = 
dragEvent.currentTarget as IUIComponent;
  
Alert.show( You dropped the Red Box on 
the Blue Box! );
var obj:Object = dragEvent.target;
}

]]
/mx:Script
mx:HBox horizontalGap=100
mx:Canvas id=redBox width=100 height=100 
backgroundColor=Red /
mx:Canvas id=blueBox width=100 height=100 backgroundColor=Blue 
/
/mx:HBox

/mx:Application

RE: [flexcoders] Question about getting the type of item / component with drag and drop

2009-12-09 Thread Gordon Smith 
1. if (dragEvent.currentTarget is Panel)

2. currentTarget is generically typed as Object, which doesn't have an 
addChild() method. But if you have already checked that the dropTarget is a 
Panel, it's safe to do a cast:

Panel(dragEvent.currentTarget).addChild(...);

Gordon Smith
Adobe Flex SDK Team

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf 
Of timgerr
Sent: Wednesday, December 09, 2009 12:01 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Question about getting the type of item / component with 
drag and drop



Hello all,
I have been tasked with creating a menu that gets build with drag and drop 
components. I have followed this tutorial 
(http://www.flexafterdark.com/tutorials/Flex-Drag-and-Drop) and have learned a 
lot.

I have a few questions to get to the next stage so I will ask a few questions.

1. When I drop (or drag over) an item like a panel, how can I tell what that 
UIComponent is, how can I tell that is a panel?

2. How can I get that panel as an object so I can do something like 
panelid.addChild(new dropped item)?

Thanks for the read,
timgerr

Here is the code that I have from the tutorial.

?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
name=Drag and Drop tutorial creationComplete=Init()

mx:Script
![CDATA[
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.controls.Alert;

public function Init():void
{
// a mouseDown event will start the drag
this.redBox.addEventListener(MouseEvent.MOUSE_DOWN, BeginDrag);
// accepting a drag/drop operation...
this.blueBox.addEventListener( DragEvent.DRAG_ENTER,AcceptDrop);
// handling the drop...
this.blueBox.addEventListener( DragEvent.DRAG_DROP, handleDrop );
}

private function BeginDrag(mouseEvent:MouseEvent):void
{
// the drag initiator is the object being dragged (target of the mouse event)
var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent;

// the drag source contains data about what's being dragged
var dragSource:DragSource = new DragSource();

// ask the DragManger to begin the drag
DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null );
}

public function AcceptDrop(dragEvent:DragEvent):void
{
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
// accept the drop
DragManager.acceptDragDrop( dropTarget );
// show feedback
DragManager.showFeedback( DragManager.COPY );

}

public function handleDrop( dragEvent:DragEvent ):void
{
var dragInitiator:IUIComponent = dragEvent.dragInitiator;
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;

Alert.show( You dropped the Red Box on the Blue Box! );
var obj:Object = dragEvent.target;
}

]]
/mx:Script
mx:HBox horizontalGap=100
mx:Canvas id=redBox width=100 height=100 backgroundColor=Red /
mx:Canvas id=blueBox width=100 height=100 backgroundColor=Blue /
/mx:HBox

/mx:Application