7 Replies Latest reply on Aug 26, 2009 3:47 PM by AngeloAnolin

    DragDrop Question With Alert.show

    AngeloAnolin

      Hi Everyone,


      I have some list controls which I have set the property dropEnabled="true".


      <mx:HBox label="SMR Vessels" height="220" width="100%" horizontalAlign="left" dropEnabled="true">

        <mx:List id="ls1" width="100%" height="100%" dropEnabled="true" dragDrop="ls1_dragDrop(event)"  >
        </mx:List>

        <mx:List id="ls2" width="100%" height="100%" dragEnabled="true" dragMoveEnabled="false"  >
         </mx:List>

      </mx:HBox>



      private function ls1_dragDrop(evt:DragEvent):void

      {

        // Get the data from the dragEvent parameter.

        objDragSource = evt.dragSource.dataForFormat("items");

        //.... Do some things


        //Call an alert.show function to confirm from user if proceed.

        Alert.show('Proceed?', 'TITLE', Alert.YES | Alert.NO, null, alertHandler, null, Alert.YES);


        // Some scripts here...but these are executed right away even before the alert.show's button is clicked.

      // ????


      }


      When the alert message shows, the only recourse I have is to continue the operation in the alertHandler event.  But I how will I be able to reference the dragDrop event parameter from the alertHandler?


      I am banging my head the whole day on this.  Shouldn't it be that the script after the alert.show only continue once the alertHandler has finished executing its scripts.  But apparently, with Flex, that is not the case since it executes the script after the alert.show was called concurrently with the alerthandler.


      Inputs highly appreciated.

      Thanks.



       

       

        • 1. Re: DragDrop Question With Alert.show
          babo_ya Level 3

          where is the alertHandler? can you put the method in the same class? and just create a variable and save the item and then use it later?

           

          BaBo,

          • 2. Re: DragDrop Question With Alert.show
            AngeloAnolin Level 1

            The alert handler is also declared in the same MXML file.


            <mx:HBox label="SMR Vessels" height="220" width="100%" horizontalAlign="left" dropEnabled="true">

              <mx:List id="ls1" width="100%" height="100%" dropEnabled="true" dragDrop="ls1_dragDrop(event)"  >
              </mx:List>

              <mx:List id="ls2" width="100%" height="100%" dragEnabled="true" dragMoveEnabled="false"  >
               </mx:List>

            </mx:HBox>



            private function ls1_dragDrop(evt:DragEvent):void

            {

              // Get the data from the dragEvent parameter.

              objDragSource = evt.dragSource.dataForFormat("items");

              //.... Do some things


              //Call an alert.show function to confirm from user if proceed.

              Alert.show('Proceed?', 'TITLE', Alert.YES | Alert.NO, null, alertHandler, null, Alert.YES);


              // Some scripts here...but these are executed right away even before the alert.show's button is clicked.

            // ????


            }


            private function alertHandler(evt:CloseEvent):void

            {

              if(evt.detail == Alert.YES)

              {

                // Continue with the drag and drop processing here.

                // Take note that I need to reference the dragEvent parameter which was only visible in the ls1_dragDrop event.

              }

              else

              {

                // Here i should be calling the dragEvent's preventDefault function to prevent the drag and drop from happening since the user

                // does not confirm to proceed with the operation

              }

            }


            I tried to declare a application level scope variable, and set the value, but the scripts after the alert.show are executed right away without checking the values set in the alertHandler event.  Thus, I am getting incorrect execution.

            • 3. Re: DragDrop Question With Alert.show
              babo_ya Level 3

              can you copy/paste the whole code? or create a sample app?

               

              BaBo,

              • 4. Re: DragDrop Question With Alert.show
                babo_ya Level 3

                Maybe you are referencing the "item" value and once the drop happens the data is gone?

                If it is a class make sure you make a copy and save it to a local variable.

                BaBo,

                • 5. Re: DragDrop Question With Alert.show
                  AngeloAnolin Level 1

                  Here's a quick sample:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="creationCompleteHandler();">
                      <mx:Script>
                          <![CDATA[
                          import mx.controls.Alert;
                          import mx.events.DragEvent;
                          import mx.events.CloseEvent;
                         
                          private var _alertVal:int;
                         
                                  private function creationCompleteHandler():void
                                  {

                                      srclist.dataProvider = ['Angel', 'Bart', 'Calvin', 'Dante', 'Erich', 'Fox', 'Gale', 'Helen'];       
                                      destlist.dataProvider = [];
                                  }
                                 
                                  private function destlist_dragDropHandler(evt:DragEvent):void
                                  {
                                      _alertVal = 0;
                                      Alert.show('Proceed', 'Title', Alert.YES | Alert.NO, null, handleAlert, null, Alert.YES);
                                     
                                      if(_alertVal == -1)
                                      {
                                          evt.preventDefault();
                                      }
                                      Alert.show(String(_alertVal), 'This Should Be Triggered After the Alert!!');
                                  }
                                 
                                  private function handleAlert(evt:CloseEvent):void
                                  {
                                      if (evt.detail == Alert.YES)
                                      {
                                          _alertVal = 1;
                                      }
                                      else
                                      {
                                          _alertVal = -1;
                                      }
                                  }

                   

                          ]]>
                      </mx:Script>
                     
                      <mx:Panel title="Select Names" layout="horizontal">
                          <mx:VBox width="50%">

                   

                              <mx:Label text="Names"/>

                   

                              <mx:List
                                  id="srclist" width="100%" height="400"
                                  allowMultipleSelection="false"               
                                  dragEnabled="true"
                                 

                   

                              />

                   

                          </mx:VBox>

                   

                          <mx:VBox width="50%">
                              <mx:Label text="People Selected"/>

                   

                              <!-- Drop target -->
                              <mx:List 
                                  id="destlist" width="100%" height="400"
                                  dropEnabled="true"
                                  dragDrop="destlist_dragDropHandler(event)"

                   

                              />

                   

                          </mx:VBox>
                      </mx:Panel>
                  </mx:Application>

                   

                   

                  As you may notice, the Alert.show with the Yes and No selection is not yet completed (no button has been clicked) but the second alert has already been triggered.

                   

                  I want that the continuation of the script only happen after the Yes or No button has been clicked.

                  • 6. Re: DragDrop Question With Alert.show
                    babo_ya Level 3

                    private function handleAlert(evt:CloseEvent):void

                                    {

                                        if (evt.detail == Alert.YES)

                                        {

                                            _alertVal = 1;

                                        }

                                        else

                                        {

                                            _alertVal = -1;

                                        }

                     

                     

                                        Alert.show(String(_alertVal), 'This Should Be Triggered After the Alert!!');

                     

                                    }

                     

                     

                    Maybe the second Alert should be inside of the handleAlert function?

                     

                    BaBo,

                    • 7. Re: DragDrop Question With Alert.show
                      AngeloAnolin Level 1

                      No, the second alert should not be on the alertHandler function.

                       

                      As I mentioned, I want to continue execution of the scripts in the dragHandler event depending on the outcome of the selection in the initial Alert.  Say if the user presses Yes, then I continue with the process.  If user clicks on No, then I need to do another thing.  But the same should be executed inside the dragHandler event and not on the alertHandler event.