6 Replies Latest reply on Mar 5, 2008 7:12 PM by peterent

    Activity or Busy indicator

    Tikis_Mikis Level 1
      Hi there so I am doing remoting in AS3 and it takes about 30 seconds for a large data set from PHP to be retrieved from a DB and then set to AS3 for processing.

      I want to create a "gauge" or "meter" that tell users "loading" and shows a "action taking place" sort of animation.

      Does anyone know how to attempt this?? I want the execution of my script to stop at the place of remote function call UNTIL the an ArrayCollection i have instantiated has a count > 0.
        • 1. Re: Activity or Busy indicator
          peterent Level 2
          You can use a ProgressBar or make any sort of component you want. When you send off your request you can put the ProgressBar into indeterminate mode which it will make it spin. When all of your data is available you can make it go away.

          You won't be able to stop any execution in Flex/Flash Player. Let the ProgressBar run and don't have any of your code execute until you get a ResultEvent
          • 2. Activity or Busy indicator
            Tikis_Mikis Level 1
            Ok, I have been trying to implement this solution but without success. I am a brand new AS3 programmer and still quite ignorant as to how to do these things. I am using AMFPHP (perhaps you are familiar with that).

            You mention "Let the ProgressBar run and don't have any of your code execute until you get a ResultEvent" however how do I get this "ResultEvent"?

            I use this class to connect to AMFPHP on my server:


            ###############################################

            package Remoting
            {
            import flash.net.NetConnection;
            import flash.net.ObjectEncoding;

            public class RemotingConnection extends NetConnection
            {
            public function RemotingConnection(sURL:String)
            {
            objectEncoding = ObjectEncoding.AMF0;

            if (sURL) {
            connect(sURL);
            }
            }

            public function AppendToGatewayUrl(s:String):void
            {

            }
            }
            }

            ###############################################

            To perform a remoting call from my app I do this:


            ###############################################

            var gatewayUrl:String = " http://localhost/myFirstProject/web/backend_dev.php/gateway/amfphp";
            gateway = new RemotingConnection(gatewayUrl);

            var newProgressBar:ProgressBar = new ProgressBar();
            newProgressBar.id = "newProgressBar";
            newProgressBar.indeterminate = true;
            newProgressBar.x = 10;
            newProgressBar.y = 10;
            settingsCanvas.addChild(newProgressBar);

            // call to retrieve data
            gateway.call("MyService.getPhpData", new Responder(onPhpDataResult, onFault));

            //newProgressBar.addEventListener(

            // ARRAY PHPDATA IS EMPTY HERE - HOW CAN I INSURE THAT IT IS POPULATED HERE AFTER THE REMOTING IS FINISHED
            for (var j:Number=0; j<phpData.length; j++) {
            Alert.show(phpData[j].label.toString());
            //valuesArray.push ({data: keyMultiSelect, label: tempValuesArray[keyMultiSelect]});
            if (j == 5) {
            break;
            }
            }

            public function onPhpDataResult(result:Array):void
            {
            phpData= new ArrayCollection(result);
            }

            ###############################################

            The ProgressBar object is never displayed and my phpData array is not populated at the time I try to display its output since AS3 keeps on running the script after the remoting call.

            So anyway I think I have to add an event listener somewhere. The real problem I am having is that the remoting isnt finished but AS3 continues running and thats why my phpData ArrayCollection is empty. Thats why I need a way to keep my code from continuing execution UNTIL that array is populated and thats why I need a ProgressBar.

            Please help me. I'm still new to all this AS3 stuff. Thank you!
            • 3. Activity or Busy indicator
              Tikis_Mikis Level 1
              Ok, I figured out WHY the progressbar is not added - or my eyes see it as NOT being added. Look at the following SAMPLE code:

              [as]
              var newProgressBar1:ProgressBar = new ProgressBar();
              newProgressBar1.id = "newProgressBar1";
              newProgressBar1.visible = true;
              newProgressBar1.indeterminate = true;
              newProgressBar1.x = 10;
              newProgressBar1.y = 10;
              settingsCanvas.addChild(newProgressBar1);


              var uI:Number = 0;
              while (uI<60000000) {
              //endtime = Math.floor(getTimer()/1000);
              uI++;
              }
              [/as]

              In the case above the progressbar is added until AFTER the count (while loop) is finished. WHY? I would have thought that the progressbar would FIRST be added to the canvas and THEN the count begins but it's not the case....so EVEN IF I WAIT a few seconds (as i do with the whileloop) the phpData array is stil empty even though that was enough time to populate! Argh!
              • 4. Re: Activity or Busy indicator
                peterent Level 2
                This is how the Flex framework works. All of the children of a component are created and added to their parent's display list (that's what addChild does) but those components are not yet rendered. The Flex framework is a multi-pass system. Once all of the children are added to the display list they are then given the opportunity to apply any properties (that's commitProperties). Once that's done they are then measured (that's measure). Finally they are sized and positioned (that's updateDisplayList). Every Flex component works like this. When you write your own components - and ever MXML file and ActionScript class that extends UIComponent is a component - you have to follow this pattern. Some components will do much of this for you, but when you create a child component yourself you won't see it until after your function that adds it has exited and the Flex framework can process the instructions.

                So your code up until the loop is fine. You need to put the loop in another location. Since you are really trying to get data back from the server. I would do this:

                1. newProgressBar1.visible = true;
                2. Make your remote data call.
                3. In your result event handler, process the data (the ProgressBar is still visible).
                4. newProgressBar1.visible = false;

                The result event handler is added to your net connection:
                gateway.addEventListener( ResultEvent.RESULT, yourHandlerFunction );

                Then you write your handler function:
                private function yourHandlerFunction( event:ResultEvent ) : void
                {
                // process the data coming back from the server
                newProgressBar1.visible = false;
                }


                • 5. Re: Activity or Busy indicator
                  Tikis_Mikis Level 1
                  I am so sorry to bug you again I feel so lost I been trying to figure this out for a long time.

                  I know the reason this isnt working is because I do not know how to trigger the event listener....what's confusing to me from your explanation above is the "Make your remote data call/add event listener" parts.

                  This is what I did in my code:

                  gateway.addEventListener(ResultEvent.RESULT, onTestHandler);
                  gateway.call("OrderFormWizzard.getCountries",
                  new Responder(onGetCountriesResult, onFault));

                  public function onTestHandler(event:ResultEvent):void
                  {
                  Alert.show("HELLO");
                  Alert.show(event.result.toString());
                  }

                  How do i trigger the event listener? of course 'onTestHandler' doesn't work because the "HELLO" is not output to screen. I know the code above is wrong somehow but thats where I am trying to fix this...I feel like I am blindfolded.
                  • 6. Re: Activity or Busy indicator
                    peterent Level 2
                    Let's say you were using HTTPService instead of trying to make the network connection on your own. You might write it like this:

                    var service:HTTPService = new HTTPService();
                    service.url = "someplace_on_the_net";
                    service.resultFormat = "e4x"; // if you were expecting XML
                    service.addEventListener( ResultEvent.RESULT, handleResult );

                    Then you'd make the remote call:
                    service.send();

                    The event listener will be invoke automatically when the result of the call has returned. The function named will be called:

                    private function handleResult( event:ResultEvent ) : void
                    {
                    // the data will be event.result
                    }

                    See if you can figure out how to make your code work from this example. Otherwise, browse the Flex and Flash documentation. What you are using, the NetConnection stuff, is really Flash. The Flex HTTPService, RemoteObject use that under the covers and make an easier interface.