3 Replies Latest reply on Nov 22, 2009 11:24 AM by harihisu

    Triggering pop-up event through drag & drop?

    JordTheFlexBeginner

      Hi everyone, I'm a newly registered member of this forum.

      I've roughly browsed though this forum to seek a solution for my problem, but I can't seem to find a suitable solution (perhaps i should continue looking).

       

      Scenario:

      Anyway, I'm facing some technical challenges in flex as I'm relatively new to it.

      I'm trying to create a web application, where users use drag & drop to input information.
      I visualize this process:

      • User selects icon from a list
      • User drags the icon onto target area
      • User releases icon over target area
      • Pop-up appears with a form for users to input information.
      • Users input information and submits
      • Information is stored in the database.

       

      Present knowledge:

      Because I'm new to Flex, I tried to break this down and learn by components:

      I'm able to:

      • Create a drag & drop effect
      • Create connection to database using HttpService

       

      Main Problem:

      I'm able to use the drag and drop functionality but I cannot trigger a pop-up event when the icon is dropped onto the target area.

       

       

       

      Sorry if the problem seems a little insignificant due to my lack in knowledge.

      I'm just a student trying to learn. Hope that someone can help me out here, or provide me with relevant links to learning resources.

       

      Thanks in advance,

      Jord

        • 1. Re: Triggering pop-up event through drag & drop?
          harihisu

          I think you can listen to DragEvent.DRAG_COMPLETE from the initator or DragEvent.DRAG_DROP from the target to do it.

          1 person found this helpful
          • 2. Re: Triggering pop-up event through drag & drop?
            JordTheFlexBeginner Level 1

            Hi,

            thanks so much for replying, but I would really appreciate a little bit more help.

             

            I vaguely understand the concepts of DragEvent.DRAG_DROP, but I'm not really familiar with the syntax of how to cause allow a pop-up to appear.

             

            This is how my script look like:

            <mx:Script>
                    <![CDATA[
                        import mx.events.DragEvent;
                        import mx.containers.Box;
                        import mx.managers.DragManager;
                        import mx.core.DragSource;
                       
                        import mx.collections.ArrayCollection;
                        import mx.rpc.events.ResultEvent;

             

                        [Embed("IconAssets/1.gif")]
                        [Bindable]
                        public var personalAsset:Class;

             

                        [Embed("IconAssets/2.gif")]
                        [Bindable]
                        public var investment:Class;
                       
                        [Bindable]
                        private var iconValue:uint;          

             

                        private function iconDrag (event:MouseEvent, value:uint):void
                            {
                                var dragInitiator:Image = event.currentTarget as Image;
                                var dragSource:DragSource = new DragSource();
                                dragSource.addData(value, 'value');
                                var dragProxy:Image = new Image();
                                dragProxy.source = event.currentTarget.source;
                                DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
                            }
            .
                        private function dragOver(event:DragEvent):void
                            {
                                var dropTarget:Box=event.currentTarget as Box;
                                if (event.dragSource.hasFormat('value'))
                                    {
                                        dropTarget.setStyle("borderThickness", 5);
                                        DragManager.acceptDragDrop(dropTarget);
                                    }
                            }

             

                        private function dragAway(event:DragEvent):void
                            {
                                var dropTarget:Box=event.currentTarget as Box;
                                revertTarget();             
                            }

             

                        private function dragAccept(event:DragEvent):void
                            {
                                var value:uint = event.dragSource.dataForFormat('value') as uint;
                               
                                The trigger for the Pop-up should be placed here.
                               
                                revertTarget();
                            }


                        private function revertTarget():void
                        {
                            fStatement.setStyle("borderThickness", 1);
                        }
                    ]]>
                </mx:Script>

             

            I'm not sure whether I'm correct to state (in bold, italic, & underline) above that the event trigger for the pop-up should be within that particular function.

             

            The difficulty I'm facing now is that the (structure of the) popup should be written in MXML and yet I have to place them in the ActionScript.

            (I sense that I have a fundamental misconception of how this works,so please correct me to the best of your knowledge.)

             

            I would greatly appreciate it if anyone is able to provide me with an example/sample of how this should be done.

             

             

            With Thanks,

            Jord

            • 3. Re: Triggering pop-up event through drag & drop?
              harihisu Level 2

              So, your problem now is open a popup.

              You can make your own popup display object (usually a seperate mxml file), then call PopUpManager.createPopUp function to show your popup. Remember to store the new popup window to refer or remove it in the future.

               

              var popupWindow:YourPopUpClass = PopUpManager.createPopUp( this, YourPopUpClass );
              
              1 person found this helpful