Question

am having an issue with a project I am working on in Flash Builder.
Following is my stack and code example. Could someone please tell me what I am doing wrong?

Thank you for your time.

— Stack —

ReferenceError: Error #1069: Property page4 not found on WOAPPv2 and there is no default value.
at WOAPPv2/dragDropHandler()[/Users/martinw/Documents/Adobe Flash Builder 4/WOAPPv2/src/WOAPPv2.mxml:165]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:12528]
at mx.managers.dragClasses::DragProxy/_dispatchDragEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\dragClasses\DragProxy.as:374]
at mx.managers.dragClasses::DragProxy/mouseUpHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\dragClasses\DragProxy.as:599]

–Code Example — This what works

import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;

        private function initiateDrag(event:MouseEvent,value:String):void{

            var dragInitiator:Image= event.currentTarget as Image;   

            var dragSource:DragSource = new DragSource();
            dragSource.addData(value, 'value');
            DragManager.doDrag(dragInitiator, dragSource, event);
        } 

        private function dragEnterHandler(event:DragEvent):void {
            var dropTarget:VBox =event.currentTarget as VBox;
            if (event.dragSource.hasFormat('value')) {
                DragManager.acceptDragDrop(dropTarget);
            }
        }

private function dragDropHandler(event:DragEvent):void {
            var pageName:String = event.currentTarget.name as String;
            var value:String = event.dragSource.dataForFormat('value') as String;
            this[pageName].source = "assets/big/"+value; 


        }

<s>

<s:HGroup id="hGr"
              requestedColumnCount="2"
              variableColumnWidth="false"
              columnWidth="475"
              height="450"
              gap="100"
              clipAndEnableScrolling="true" paddingLeft="10" paddingRight="10">


        <mx:VBox name="page1"
                 backgroundColor="#EFEFF0"
                 verticalScrollPolicy="off" 
                 horizontalScrollPolicy="off"
                 horizontalAlign="center" verticalAlign="middle"
                 dragEnter="dragEnterHandler(event)"
                 dragDrop="dragDropHandler(event)"
                 width="475"
                 x="0">


            <mx:Image id="page1" showBusyCursor="true" width="713" height="692" scaleContent="true" maintainAspectRatio="true" minWidth="713" minHeight="692" scaleX="1" scaleY="1" horizontalAlign="center" verticalAlign="top"/>
        </mx:VBox>


    </s:HGroup>

It Breaks If I do it this way by creating the containers and Images on runtime

<script>


   private function initVars():void {
            createSpreads();
        }


        public function createSpreads():void {

            var s:VBox = new VBox();
            s.name ="page4";

            s.setStyle("backgroundColor","#fe0000"); 
            s.verticalScrollPolicy="off";
            s.horizontalScrollPolicy="off";
            s.setStyle("horizontalAlign","center");
            s.setStyle("verticalAlign","middle");
            s.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
            s.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
            s.width= 475;
            s.setStyle("x","0");
            hGr.addElement(s);

            hGrCol4.text = "Vboxname: "+s.name+"VboxID: "+s.id;

            var page3:Image = new Image();
            page3.id ="page4";

            page3.showBusyCursor = true;
            page3.width = 713;
            page3.height = 692
            page3.scaleContent = true;
            page3.maintainAspectRatio = true;
            page3.minWidth = 713;
            page3.minHeight = 692;
            page3.scaleX = 1;
            page3.scaleY = 1;
            page3.source = "assets/big/IMG_7112.jpg";
            page3.setStyle("backgroundColor","#ffffff");
            page3.setStyle("horizontalAlign","center");
            page3.setStyle("verticalAlign","top");
            s.addElement(page3);

            hGrCol3.text = "Imagename: "+page3.name+"ImageID: "+page3.id;
        }


import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;

        private function initiateDrag(event:MouseEvent,value:String):void{

            var dragInitiator:Image= event.currentTarget as Image;   

            var dragSource:DragSource = new DragSource();
            dragSource.addData(value, 'value');
            DragManager.doDrag(dragInitiator, dragSource, event);
        } 

        private function dragEnterHandler(event:DragEvent):void {
            var dropTarget:VBox =event.currentTarget as VBox;
            if (event.dragSource.hasFormat('value')) {
                DragManager.acceptDragDrop(dropTarget);
            }
        }

private function dragDropHandler(event:DragEvent):void {
            var pageName:String = event.currentTarget.name as String;
            var value:String = event.dragSource.dataForFormat('value') as String;
            this[pageName].source = "assets/big/"+value; 

        }


</script>

<s>

<s:HGroup id="hGr"
              requestedColumnCount="2"
              variableColumnWidth="false"
              columnWidth="475"
              height="450"
              gap="100"
              clipAndEnableScrolling="true" paddingLeft="10" paddingRight="10">

    </s:HGroup>

</s>

Above with no containers in HGroup returns the ‘property page4 not found on WOAPPv2 and there is no default value’ – My end result should be this

page4.source = “assets/big/imagename.jpg”;

I am stumped. Im rethinking it and may just create the vboxes and then set a trigger to create the image and populate in the samedragDropHandler.
Thoughts?

Below is the solution – again – thanks goes to alxx. Now I need to start contributing my knowledge to other folks on here.

public function dragDropHandler(event:DragEvent):void {

        // Retrieve the Image Name from Drop
        var value:String = event.dragSource.dataForFormat('value') as String;

                    //
        event.currentTarget.getChildAt(0).source = "assets/big/"+value;

        }

Answer 1

…continuing here for proper formatting
Problem line:

var value:String = event.dragSource.dataForFormat('value') as String;
this[pageName].source = "assets/big/"+value;

My goal was to addelement a vbox and
image child that shared the name with
an id and use the event to grab the
currenttarget name being the image
control

Not sure if I understand it right. If event.currentTarget is Image you need, you can just cast it to Image. Or you need to find another Image somewhere (one generated in Repeater)?

update

“I am trying to use the name of the VBox as a string to use for dot notation to reference the Image inside of it”

Names of DisplayObjects are only labels, not references. If you think you can traverse object hierarchy with names like in JS DOM, then no, it’s done other way in Flash. You can get reference to VBox with event.currentTarget – it’s more useful that its name (String). You can get Image inside it with getChildAt.