5 Replies Latest reply on May 27, 2006 2:31 AM by poonamsheth

    Example doesn't work in Flex 2.0

    Kwooda
      I am looking at the drag and drop example on http://flexapps.macromedia.com/flex15/explorer/explorer.mxml -- I copied the code into Flex 2.0 Beta 2 and am getting errors. The first was this error in Product.mxml:
      Conflict with inherited definition 'flash.display isplayObject.name' in namespace 'public mx.core:IFlexDisplayObject '

      I then renamed all "name" references to "aname" and now I get this error on the DataGridColumns in ClassDragDrop.mxml:
      Cannot resolve attribute 'columnName' for component type mx.controls.dataGridClasses.DataGridColumn.

      How do I make this work?
        • 1. Re: Example doesn't work in Flex 2.0
          GordonSmith Level 4
          I'm not sure what was in Beta 2, but Beta 3 has an Explorer with Drag&Drop examples. Maybe it would be easier to start with that rather than trying to port the 1.5 Explorer examples. A s you probably know, a lot has changed between Flex 1.X and Flex 2 because of the new AS3 and Player 9 features.
          • 2. Re: Example doesn't work in Flex 2.0
            poonamsheth Level 1
            hey friend, this example work perfectly, and would give u the perfect understanding of drag and drop events.

            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="500" height="620" borderStyle="solid" creationComplete="initApp();">

            main.mxml
            ---------------
            <mx:Script>
            <![CDATA[
            import mx.events.DragEvent;
            import mx.controls.List;
            import mx.controls.listClasses.DataProvider;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.collections.IList;

            private var placeHolder bject = {label:"First", blah:"blah"};

            private function initApp():void {
            var dp:Array = ([
            {label:"First", data:"1"},
            {label:"Second", data:"2"},
            {label:"Third", data:"3"},
            {label:"Fourth", data:"4"},
            ]);
            firstList.dataProvider = dp;
            secondList.dataProvider = [];
            }

            private function doDragEnter(event ragEvent):void {
            var dragInitiator:List=List(event.currentTarget);
            tiEnter.text += "dragEnter triggered" + "\n";
            DragManager.acceptDragDrop(dragInitiator);
            }

            private function doDragOver(event ragEvent):void {
            tiOver.text += "dragOver triggered" + "\n";
            if (event.ctrlKey)
            DragManager.showFeedback(DragManager.COPY);
            else if (event.shiftKey)
            DragManager.showFeedback(DragManager.LINK);
            else
            DragManager.showFeedback(DragManager.MOVE);
            }

            private function doDragDrop(event ragEvent):void {
            var dropTarget:List=List(event.currentTarget);
            tiDrop.text += "dragDrop triggered" + "\n";
            doDragExit(event);
            var items:Array =event.dragSource.dataForFormat("items") as Array;
            var dropLoc:int = dropTarget.calculateDropIndex(event);

            tiDrop.text += "length: " + String(items.length) + "\n" +
            "dropLoc: " + String(dropLoc) + "\n" + "format: " +
            String(event.dragSource.formats[0])+ "\n";

            for(var i:uint=0; i < items.length; i++)

            {
            tiDrop.text += "\n" + "label: " + items .label + "\n" +
            String(dropLoc);
            IList(dropTarget.dataProvider).addItemAt(items
            , dropLoc );
            }
            }

            private function doDragComplete(event ragEvent):void {
            tiComplete.text += "dragComplete triggered" + "\n";
            }

            private function doDragExit(event ragEvent):void {
            var dropTarget:List=List(event.currentTarget);
            tiExit.text += "dragExit triggered" + "\n";
            dropTarget.hideDropFeedback(event);
            }
            ]]>
            </mx:Script>

            <mx:Label text="Drag items from left list to right list to see the
            triggered events."/>
            <mx:HBox>
            <mx:List id="firstList" dragEnabled="true"
            allowMultipleSelection="true" dragComplete="doDragComplete(event);" height="100"/>

            <mx:List id="secondList" dragEnter="doDragEnter(event);"
            dragExit="doDragExit(event);" dragOver="doDragOver(event);"
            dragDrop="doDragDrop(event);" dragEnabled="true" height="100"/>
            </mx:HBox>

            <mx:VBox horizontalAlign="right">
            <mx:HBox>
            <mx:Label text="dragEnter: "/>
            <mx:TextArea id="tiEnter" width="200" height="80"/>
            </mx:HBox>

            <mx:HBox>
            <mx:Label text="dragDrop: "/>
            <mx:TextArea id="tiDrop" width="200" height="200"/>
            </mx:HBox>

            <mx:HBox>
            <mx:Label text="dragOver: "/>
            <mx:TextArea id="tiOver" width="200" height="80"/>
            </mx:HBox>

            <mx:HBox>
            <mx:Label text="dragExit: "/>
            <mx:TextArea id="tiExit" width="200" height="80"/>
            </mx:HBox>

            <mx:HBox>
            <mx:Label text="dragComplete: "/>
            <mx:TextArea id="tiComplete" width="200" height="80"/>
            </mx:HBox>
            </mx:VBox>
            </mx:Application>


            only this statement is chqanged from
            import mx.controls.listClasses.DataProvider;

            to

            import mx.controls.*;

            • 3. Re: Example doesn't work in Flex 2.0
              poonamsheth Level 1
              hey i have found the solution to the program of 1.5 flex drag and drop and there are many changes from beta2 to beta3
              many coding syntax changes.

              i have rewritten the code :

              changes are

              beginDrag(event) : new function added at initialization initApp()
              public var cart as an arraycollection is where it will be displayed

              return types are given """":void"""" compulsary.

              mouseMove="beginDrag(event)" -- event is included in Product.mxml

              functions are to be declared private

              private function doDragEnter(event ragEvent):void

              well, event ragEvent has to be done in functions compulsary

              the modified code is

              ---------
              ClassDragDrop
              ----------
              <?xml version="1.0"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" creationComplete="initApp()">

              <mx:Script>

              import mx.core.*;
              import mx.managers.DragManager;
              import mx.events.DragEvent;
              import mx.collections.ArrayCollection;

              [Bindable]
              public var cart : ArrayCollection;

              private function initApp() : void {
              products.product={names: 'Siemens SX1', price: 99.99, image: 'assets/products/Siemens_SX1.png'};
              cart = new ArrayCollection();
              }
              private function doDragEnter(event ragEvent): void {
              if (event.dragSource.hasFormat("product"))
              {
              DragManager.acceptDragDrop(IUIComponent(event.target));
              event.preventDefault();
              }
              }


              private function doDragDrop(event ragEvent): void {

              var item = event.dragSource.dataForFormat("product");
              cart.addItem(item);
              event.preventDefault();
              }

              </mx:Script>

              <mx:Label text="Drag the product thumbnail and drop it in the datagrid"/>

              <mx:HBox horizontalGap="30" height="100%">

              <Product id="products"/>

              <mx ataGrid id="dg" dataProvider="{cart}"
              dragEnter="doDragEnter(event)"
              width="100%" height="100%"
              dragDrop="doDragDrop(event)">
              <mx:columns>
              <mx:Array>
              <mx ataGridColumn dataField="names" headerText="Product"/>
              <mx ataGridColumn dataField="price" headerText="Price"/>
              </mx:Array>
              </mx:columns>
              </mx ataGrid>

              </mx:HBox>

              </mx:Application>

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

              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
              mouseMove="beginDrag(event)"
              paddingTop="4" paddingBottom="4"
              paddingLeft="4" paddingRight="4"
              borderStyle="solid" verticalAlign="middle"
              backgroundColor="#FFFFFF"
              width="170" height="130"
              horizontalScrollPolicy="off"
              verticalScrollPolicy="off">

              <mx:Script>

              import mx.managers.DragManager;
              [Bindable]
              public var product bject;
              [Bindable]
              public var names bject;
              [Bindable]
              public var image bject;
              [Bindable]
              public var price bject;

              public function beginDrag(event:MouseEvent):void {

              var ds = new mx.core.DragSource();
              ds.addData(product, "product");
              var proxy:Thumbnail = new Thumbnail(); //The drag proxy
              proxy.product = product;
              DragManager.doDrag(this, ds, event, proxy, 16-mouseX, -mouseY, 0.5, false);
              }

              </mx:Script>



              <mx:Image id="img" source="{product.image}" width="75" height="70"/>
              <mx:Label text="{product.names}" fontSize="11" fontWeight="bold"/>
              <mx:Label text="Price: ${product.price}"/>

              </mx:VBox>
              -----------------
              its working on this side,, kindly check ur side
              bye.




              • 4. Re: Example doesn't work in Flex 2.0
                poonamsheth Level 1
                hey,,

                the link to flex2 beta3 example or samplefiles is as below:

                http://www.macromedia.com/go/flex2beta3_explorer_sample
                • 5. Re: Example doesn't work in Flex 2.0
                  poonamsheth Level 1
                  am really sorry , but there are errors in Product.mxml in the above code posted..

                  am posting the right code below.
                  only the change is :

                  from var proxy:Thumbnail= new Thumbnail(); //The drag proxy
                  to var proxy roduct = new Product(); //The drag proxy
                  ----------------------
                  Product.mxml
                  ------------------
                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
                  mouseMove="beginDrag(event)"
                  paddingTop="4" paddingBottom="4"
                  paddingLeft="4" paddingRight="4"
                  borderStyle="solid" verticalAlign="middle"
                  backgroundColor="#FFFFFF"
                  width="170" height="130"
                  horizontalScrollPolicy="off"
                  verticalScrollPolicy="off">

                  <mx:Script>

                  import mx.managers.DragManager;
                  [Bindable]
                  public var product bject;
                  [Bindable]
                  public var names bject;
                  [Bindable]
                  public var image bject;
                  [Bindable]
                  public var price bject;

                  public function beginDrag(event:MouseEvent):void {

                  var ds = new mx.core.DragSource();
                  ds.addData(product, "product");
                  var proxy roduct = new Product(); //The drag proxy
                  proxy.product = product;
                  DragManager.doDrag(this, ds, event, proxy, 16-mouseX, -mouseY, 0.5, false);
                  }

                  </mx:Script>



                  <mx:Image id="img" source="{product.image}" width="75" height="70"/>
                  <mx:Label text="{product.names}" fontSize="11" fontWeight="bold"/>
                  <mx:Label text="Price: ${product.price}"/>

                  </mx:VBox>