{"id":253,"date":"2011-02-01T08:22:50","date_gmt":"2011-02-01T07:22:50","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=253"},"modified":"2011-02-01T10:25:01","modified_gmt":"2011-02-01T09:25:01","slug":"adobe-flex-3-drag-and-drop-api","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=253","title":{"rendered":"Adobe Flex 3: Drag and Drop API"},"content":{"rendered":"

Aufgabenstellung<\/h1>\n

UI-Komponenten sollen per Drag and Drop verschoben werden k\u00f6nnen. <\/p>\n

Ansatz<\/h1>\n

Dieser Artikel beschreibt die notwendigen Flex-APIs (DragManager) f\u00fcr die Implementierung einer Drag and Drop-Funktionalit\u00e4t am Beispiel der (siehe Nachfolgeartikel) eLearning-Anwendung f\u00fcr das V-Modell. <\/p>\n

L\u00f6sung<\/h1>\n

1.) Definition der verschiebbaren Komponenten und der Beh\u00e4lter-Komponenten.<\/p>\n

\r\n<!-- WIRD VERSCHOBEN -->\r\n<mx:Button dragComplete="dragCompleteHandler(event);" \r\nlabel="System-Entwurf" id="btnSystementwurf"  \/>\r\n<mx:Button dragComplete="dragCompleteHandler(event);" \r\nlabel="Software-Entwurf" id="btnSoftwareentwurf"  \/>\r\n..\r\n\r\n<!-- WIRD HINEINGESCHOBEN -->\r\n<mx:HBox verticalAlign="middle" verticalScrollPolicy="off" \r\nhorizontalScrollPolicy="off" id="dropField1" \/>\r\n<mx:HBox verticalAlign="middle" verticalScrollPolicy="off" \r\nhorizontalScrollPolicy="off" id="dropField2" \/>\r\n<\/pre>\n
2.) Registrierung der Eventlistener<\/p>\n
\r\n\r\n<mx:Application creationComplete="{onCreationComplete()} ...\r\n\r\npublic function onCreationComplete():void\r\n{\r\n   \/\/ Registrierung des Buttons "Anforderungsanalyse" f\u00fcr das Verschieben in ein Feld\r\n   this.btnAnforderungsnanalyse.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );\r\n\r\n   \/\/ Registrierung des Buttons "AbnahmeEntwurf" f\u00fcr das Verschieben in ein Feld\r\n   this.btnAbnahmeEntwurf.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );\r\n\r\n...\r\n\r\n   \/\/ Die DropListener werden an die UI-Komponten, bzw. die Komponeten, in die \r\n   \/\/ die Objekte geschoben werden k\u00f6nnen, angeh\u00e4ngt\r\n   this.dropField1.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );\r\n   this.dropField2.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );\r\n   ..\r\n   this.dropField1.addEventListener( DragEvent.DRAG_DROP, handleDrop );\r\n   this.dropField2.addEventListener( DragEvent.DRAG_DROP, handleDrop );\r\n}\r\n&#91;\/actionscript3&#93;\r\n\r\n3.) Implementierung der Logik - Hier: \u00dcberpr\u00fcfung ob alles richtig verschoben ist\r\n&#91;actionscript3&#93;\r\nprivate function dragCompleteHandler(event:DragEvent):void {\r\n     var draggedButton:Button = event.dragInitiator as Button;\r\n     var dragInitCanvas:HBox = event.dragInitiator.parent as HBox;\r\n\r\n     var stimmt1:Boolean = getButtons(dropField1).indexOf('btnAnforderungsnanalyse')>-1;\r\n     var stimmt2:Boolean = getButtons(dropField2).indexOf('btnSystemarchitektur')>-1;\r\n               \t\r\n     if(stimmt1&&stimmt2) \r\n     {\r\n          Alert.show('Congratulations you did it!'); \r\n     }                \t \r\n}  \r\n<\/pre>\n
4.) Welche Buttons sind in den Container? (Hier HBOX) <\/p>\n
private function getButtons(box:HBox):String
\n{
\n   var btnString:String=“;
\n   var numChildren:Number = box.numChildren;<\/p>\n
   for (var i:int = 0; i < numChildren; i++) \n   {\n        if(box.getChildAt(i)[\"id\"])\n        {\n           btnString=box.getChildAt(i)[\"id\"];\n        }\n    }            \t\n            \t\n     return btnString;\n}\t\t\n[\/actionscript3]\n\n5.) Management der Drag and Drop Funktionalit\u00e4t\n[actionscript3]\npublic function beginDrag( mouseEvent:MouseEvent ):void\n{\n   \/\/ the drag initiator is the object being dragged (target of the mouse event)\n   var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent;\n      \n   \/\/ the drag source contains data about what's being dragged\n   var dragSource:DragSource = new DragSource();\n    \t\t\t\n    \/\/ add some information to the drag source\n   dragSource.addData( \"name\", dragInitiator.name );\n   dragSource.addData( \"parent\", dragInitiator.parent.name );\n   \n    \/\/ ask the DragManger to begin the drag\n    DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null );\n}\n\npublic function handleDrop( dragEvent:DragEvent ):void\n{\n    var dragInitiator:Button = Button( dragEvent.dragInitiator );\n    var dropTarget:HBox = dragEvent.currentTarget as HBox;\n      \t\t\t      \t\t\t      \t\t\t\n    HBox(dropTarget).addChild(dragInitiator);\n}\n\npublic function acceptDrop( dragEvent:DragEvent ):void\n{\n   var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;\n   var dragSource:DragSource = dragEvent.dragSource;\n   \n    \/\/ accept the drop\n    DragManager.acceptDragDrop( dropTarget ); \n    \t\t\t\n    \/\/ show feedback\n    DragManager.showFeedback( DragManager.MOVE );      \t\t\t\n}\n[\/actionscript3]\n<\/p>\n