0 Replies Latest reply on Aug 8, 2010 11:49 PM by Eli7BBB

    NativeDragDrop into a data-xml tree

    Eli7BBB

      Hi,

       

      I am working on an Air app which uses nativeDragDrop.

       

      BUT

       

      The target of the drag-drop is not a file system but a tree whose DP is a logical XML (attached as hard-code in the example).

       

      The problem is that when a dragdrop event occurs, i.e. the user has dragged a file or multiple files from a windows-explorer for example, I can see the source files (in the clipboard) but the app does not know where I stand on the tree.

       

      The only way I can get around it, is to catch a roll-over event before....but this is not a good solution.

       

      Attached is my source code: I am looking for the selected item in the tree, or any thing else which can tell me my position.

       

      Thanks

       

      Elisheva

       

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

      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx"

         xmlns:c="com.everythingFlex.components.*"

         fontFamily="Verdana" fontSize="13"

       

         width="1200" height="800" xmlns:utils="classes.utils.*"

         initialize="windowedapplication1_initializeHandler(event)"

         creationComplete="windowedapplication1_creationCompleteHandler(event)"

         backgroundColor="#3A558C">

      <s:layout>

      <s:VerticalLayout horizontalAlign="center" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" gap="10"/>

      </s:layout>

       

      <fx:Declarations>

      <mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>

      <mx:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="1000"/>

       

      </fx:Declarations>

      <fx:Script>

      <![CDATA[

       

      import classes.utils.DisplayUtils;

      import classes.utils.UserUtils;

       

      import com.everythingFlex.components.ImageToolTip;

       

      import flash.desktop.NativeDragManager;

       

      import mx.charts.chartClasses.DataDescription;

      import mx.collections.ArrayCollection;

      import mx.collections.XMLListCollection;

      import mx.controls.Alert;

      import mx.controls.FileSystemDataGrid;

      import mx.controls.Image;

      import mx.controls.Menu;

      import mx.controls.ToolTip;

      import mx.controls.Tree;

      import mx.controls.dataGridClasses.DataGridItemRenderer;

      import mx.controls.treeClasses.DefaultDataDescriptor;

      import mx.core.DragSource;

      import mx.core.UIComponent;

      import mx.events.CloseEvent;

      import mx.events.DragEvent;

      import mx.events.FlexEvent;

      import mx.events.IndexChangedEvent;

      import mx.events.ListEvent;

      import mx.events.ToolTipEvent;

      import mx.events.ValidationResultEvent;

      import mx.managers.DragManager;

      import mx.managers.ToolTipManager;

       

      import mx.styles.StyleManager;

       

      import spark.components.List;

      import spark.components.supportClasses.ListBase;

      import spark.events.RendererExistenceEvent;

      import spark.layouts.supportClasses.DropLocation;

      import spark.skins.spark.BorderContainerSkin;

      import spark.skins.spark.WindowedApplicationSkin;

       

      [Bindable] public var mTreeDataXML:XML=

      <tree>

      <Backgrounds label="Backgrounds">

        <HappyStickers label="HappyStickers">

      <item asset_name="2009_0414april_09_tennis0012.JPG" location="C:\Documents and Settings\User\My Documents\game_111" asset_location="C:\Documents and Settings\User\My Documents\game_111\Backgrounds" tags="1"/>

      <item asset_name="choose_location.png" location="C:\Documents and Settings\User\My Documents\game_111" asset_location="C:\Documents and Settings\User\My Documents\game_111\Backgrounds" tags="1"/>

        </HappyStickers>

      </Backgrounds>

      <Stickers label="Stickers">

        <HappyStickers label="HappyStickers">

      <item asset_name="3d_friends_list_in_facebook.png" location="C:\Documents and Settings\User\My Documents\game_111" asset_location="C:\Documents and Settings\User\My Documents\game_111\Stickers" tags="1"/>

        </HappyStickers>

      </Stickers>

      <Masks label="Masks"/>

      <Models label="Models"/>

      <Pics label="Pics"/>

        </tree>;;

       

      private var _mCurrentRollOverLocation:String;

       

       

       

      public function createClipboard( sourceFile:File):Clipboard {

      var transfer:Clipboard = new Clipboard();

      transfer.setData(ClipboardFormats.FILE_LIST_FORMAT,

      new Array(sourceFile),

      false);

      // Standard file list format

      return transfer;

      }

       

      public function logMsg(log_str:String):void {

      logger.text += log_str + "\n";

      }

       

       

       

      private function get mCurrentRollOverLocation():String {

      return (_mCurrentRollOverLocation);

      }

       

      private function set mCurrentRollOverLocation(value:String):void {

      _mCurrentRollOverLocation = value;

      }

       

       

       

       

       

      protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void {

      DragManager.isDragging;

      }

       

       

       

      protected function windowedapplication1_initializeHandler(event:FlexEvent):void {

      ToolTipManager.showEffect = fadeIn;

      ToolTipManager.hideEffect = fadeOut;

      }

       

       

      protected function dataTree_dragEnterHandler(event:DragEvent):void

      {

      //logMsg("dataTree_dragEnterHandler");

      DragManager.acceptDragDrop(UIComponent(event.currentTarget));

      }

       

       

      protected function dataTree_itemRollOverHandler(event:ListEvent):void {

      // get the file full path from the xml

       

       

      var item:XML = event.itemRenderer.data as XML;

      mCurrentRollOverLocation = item.localName();

      //logMsg("dataTree_itemRollOverHandler "+item.localName());

      // I show tooltips only for items

      if (item.localName() == "item") {

      event.target.toolTip = null;

       

      var itemX:int = event.itemRenderer.x;

      var itemY:int = event.itemRenderer.y;

      var point:Point = event.currentTarget.contentToGlobal(new Point(itemX,itemY));

      event.target.toolTip =  String(item.@asset_location).concat("\\",item.@asset_name);

      ToolTipManager.currentToolTip.move(point.x + event.itemRenderer.width/2 , point.y - ToolTipManager.currentToolTip.height);

      }

       

      }

       

       

      protected function dataTree_itemRollOutHandler(event:ListEvent):void

      {

      mCurrentRollOverLocation = null;

      if (event.target.toolTip != null) {

      event.target.toolTip = null;

      }

      }

       

       

      protected function dataGrids_mouseDownHandler(event:MouseEvent):void {

       

      var fs:FileSystemDataGrid =FileSystemDataGrid(event.currentTarget);

       

      logMsg("dataGrids_mouseDownHandler "+(fs.selectedItem as File).nativePath);

      if (fs.selectedItem.isDirectory == true) {

      return;

      }

      if (fs.selectedItem != null) {

       

      var transferObject:Clipboard = createClipboard(fs.selectedItem as File);

      logMsg("dataGrids_mouseDownHandler "+(fs.selectedItem as File).nativePath);

      NativeDragManager.doDrag(InteractiveObject(event.target),

      transferObject,

      null,

      new Point(0,0));

       

      }

      }

       

      protected function sourceFileSystem_nativeDragEnterHandler(event:NativeDragEvent):void {

      NativeDragManager.dropAction = NativeDragActions.COPY;

      if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){

      NativeDragManager.acceptDragDrop(InteractiveObject(event.currentTarget)); //'this' is the receiving component

      }

       

      }

       

      protected function dataTree_nativeDragEnterHandler(event:NativeDragEvent):void

      {

      NativeDragManager.dropAction = NativeDragActions.COPY;

      if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){

      NativeDragManager.acceptDragDrop(InteractiveObject(event.currentTarget)); //'this' is the receiving component

      }

      }

       

      private function onIOError(event:IOErrorEvent):void {

      logMsg("onIOError " + event.text);

      }

       

      protected function dataTree_nativeDragDropHandler(event:NativeDragEvent):void

      {

      // list of files to copy

      logMsg("dataTree_nativeDragDropHandler");

      var dropObj:Object = (event.target as Tree).selectedItem;

      if (dropObj) {

      logMsg("dataTree_nativeDragDropHandler dropObj " + dropObj);

      }

      event.preventDefault();

      var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT, ClipboardTransferMode.ORIGINAL_PREFERRED) as Array;

       

      // get where I am from the rollover event

      var aCopyToLocation:String = mCurrentRollOverLocation;

      if (aCopyToLocation == null) {

      aCopyToLocation = "Backgrounds";

      }

      }

       

      private function onComplete(event:Event):void {

       

      }

       

      protected function dataTree_mouseUpHandler(event:MouseEvent):void

      {

      // TODO Auto-generated method stub

      }

       

      protected function treeItemClickHandler(event:ListEvent):void {

      // show the image in the image container

      //var aAssetname:String = String(event.itemRenderer.data);

      var item:XML = event.itemRenderer.data as XML;

      // I show tooltips only for items

      if (item.localName() == "item") {

      var aCurrentClickedFileName:String = String(item.@asset_location).concat("\\",item.@asset_name);

      logMsg("Loading "+aCurrentClickedFileName);

       

      }

      }

       

      private function treeLabelFunction(item:XML):String {

       

      if (item.localName() == "item") {

      var k:String = item.@asset_name;

      return (k);

      //item.@asset_name) as String;

      }

      var t:String = item.@label;

      return t;//item.@label as String;

      }

       

      protected function dataTree_changeHandler(event:ListEvent):void

      {

      logMsg("dataTree_changeHandler ");

      }

       

       

      ]]>

      </fx:Script>

       

      <mx:Tree id="dataTree" itemClick="treeItemClickHandler(event)" verticalScrollPolicy="auto"

      dataProvider="{mTreeDataXML.children()}"

       

      horizontalScrollPolicy="auto" paddingLeft="10" paddingRight="10"

      showRoot="false"

      change="dataTree_changeHandler(event)" width="100%" height="100%"

       

       

      itemRollOver="dataTree_itemRollOverHandler(event)" itemRollOut="dataTree_itemRollOutHandler(event)"

       

      mouseUp="dataTree_mouseUpHandler(event)"

      labelFunction="treeLabelFunction"

       

      nativeDragEnter="dataTree_nativeDragEnterHandler(event)"

      nativeDragDrop="dataTree_nativeDragDropHandler(event)"

       

      />

      <s:TextArea verticalScrollPolicy="auto" id="logger" width="450" height="200" borderVisible="true" alpha=".5"

      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>

      <s:Button label="clear" click="{logger.text=''}"/>

       

      </s:WindowedApplication>