6 Replies Latest reply on Oct 14, 2009 2:59 PM by msakrejda

    Display elapsed processing time in browser

    RedOctober57

      My FlashBuilder 4 app executes some functions that take a while.  I would like to display the ellapsed time to the user, in a little status bar at the bottom of the page.  I need two "global" variables... one to hold the current exact start time  in one process, and another variable in a "called" process where everything ends.  I've noticed that FlashBuilder is multi-threaded, and it doesn't "wait" for one line of code to finish processing if it thinks it can move on to the nest line, so timing within one process will probably always return an ellapsed time of 0 seconds, even if the response was 30 seconds, but handled by a called function.

       

      - How do I declare a variable who's scope is visible to all procedures in my mxml, but not visible to other users?

       

          <fx:Script>
               <![CDATA[
                   import mx.events.ListEvent;
                   import mx.events.FlexEvent;
                   import mx.controls.Alert;

       

                // Some kind of "var" delcaration in here I would assume?

       

       

      - I want to display ellapsed hours, minutes and seconds in a label.. how do I convert the resulant difference to an hh:mm"ss string?

       

      Here is what I've found so far:

       

       

                  public function getDateOffset(dateStart:Date, dateFinish:Date):Date
                  {
                      var resultingDate:Date = new Date();
                      var timeOffset:uint;
         
                      var numHours:uint;
                      var numMinutes:uint;
                      var numSeconds:uint;
         
                      timeOffset = dateFinish.getTime() - dateStart.getTime();
         
                      // 1 minute is 60,000 milliseconds
         
                      numHours = Math.floor(timeOffset / 60 / 60000);
                      numMinutes = Math.floor((timeOffset - (numHours * 60 * 60000)) / 60000);
                      numSeconds = Math.floor((timeOffset - (numHours * 60 * 60000) - (numMinutes * 60000)) / 1000);
         
                      resultingDate.setHours(numHours);
                      resultingDate.setMinutes(numMinutes);
                      resultingDate.setSeconds(numSeconds);
         
                      return(resultingDate);
         
                  }

       

      So, using the above... I call it like so...

       

                  protected function btnGo_clickHandler(event:MouseEvent):void
                  {
                      var beg_tm: Date;
                      var end_tm: Date;
                                     
                      beg_tm = new Date();

                     // Some kind of lengthy process


                   end_tm = new Date();
                   lblResponseTime.text = getDateOffset(beg_tm, end_tm).toTimeString();               
                  }

       

      The above always returns 00:00:00 GMT-6

       

      Maybe the 00:000 is correct, but how to I get rid of the "GMT-6" ?

       

      Plus you'll note that I'm declaring beg_tim and end_tm within one function.  I need these to be visible to all other functions, within this same user's session.

       

      Am I wrong about the "line-by-line" processing?  Does FlashBuilder wait for each line to process? If so, then my job is even easier.

       

      Thanks in advance for any help.

        • 1. Re: Display elapsed processing time in browser
          msakrejda Level 4

          It's not exactly multithreaded, but it is asynchronous. Some types of method calls return (go on to the next line) right away, but they kick off some sort of process "in the background". Typically, only network communication code is asynchronous in Flex--is your calculation making some web service calls? In any case, add a handler for whatever event signifies the conclusion of the processing, and set the end time in that handler. Then use a Timer to notify the user of updates until the end handler executes.

          1 person found this helpful
          • 2. Re: Display elapsed processing time in browser
            RedOctober57 Level 1

            Ok, that's good to know.  Can you (anyone?) give me a code snippet of how to declare the "Start/End" variables so that they will be visible to all functions in all files within a project, but *not* to other user sessions?

             

            Also, how do I format the Date value that's holding the ellapsed time so that the "GMT-6" doesnt' show up?  Thanks in advance.

            • 3. Re: Display elapsed processing time in browser
              msakrejda Level 4

              For the second part, take a look at DateFormatter. For the start / end variables, I'm not quite sure what you're trying to achieve, but you may want to declare these as 'internal', meaning they will only be visible to classes in the same package. As long as your other code is in the same package, it will be able to see these, but code in other packages will not.

              1 person found this helpful
              • 4. Re: Display elapsed processing time in browser
                RedOctober57 Level 1

                Since the begin date/time will be in one event procedure and the end date/time will be in another event procedure, I need to declare the beg_tm, and end_tm varialbes in such a way that they will be visible from two different event processors.  I tried the following but it gives me the error message:

                 

                    <fx:Script>
                        <![CDATA[
                            public var beg_tm: new Date;
                            public var end_tm: new Date;

                <!--- Error: Expecting semicolon before date, new is not a valid type --->

                 

                    <fx:Script>
                         <![CDATA[
                             public var beg_tm: Date;
                             public var end_tm:  Date;

                <!--- Warning: Date behaves that same as DateToString() --->

                 

                    <fx:Script>
                         <![CDATA[
                             public var beg_tm = Now();
                             public var end_tm = Now();

                <!--- Error: Method Now() undefined --->

                 

                The function that I'm using to figure out the difference between a start date/time and a finish date/time is:

                 

                            public function getDateOffset(dateStart:Date, dateFinish:Date):Date
                            {
                                var resultingDate:Date = new Date();
                                var timeOffset:uint;
                   
                                var numHours:uint;
                                var numMinutes:uint;
                                var numSeconds:uint;
                   
                                timeOffset = dateFinish.getTime() - dateStart.getTime();
                   
                                // 1 minute is 60,000 milliseconds
                   
                                numHours = Math.floor(timeOffset / 60 / 60000);
                                numMinutes = Math.floor((timeOffset - (numHours * 60 * 60000)) / 60000);
                                numSeconds = Math.floor((timeOffset - (numHours * 60 * 60000) - (numMinutes * 60000)) / 1000);
                   
                                resultingDate.setHours(numHours);
                                resultingDate.setMinutes(numMinutes);
                                resultingDate.setSeconds(numSeconds);
                   
                                return(resultingDate);
                   
                            }

                 

                 

                Here is the function that contains the start date/time:

                 

                            protected function btnGo_clickHandler(event:MouseEvent):void
                            {               
                                beg_tm = Date();
                                getSBJsResult.token = baa_data_svc.getSBJs(cmbSrch.text);                                           
                            }

                 

                 

                Here is the function that contains the end date/time:

                 

                            protected function grdSBJs_updateCompleteHandler(event:FlexEvent):void
                            {

                             end_tm = new Date();
                              lblResponseTime.text = tfHMS.format(getDateOffset(beg_tm, end_tm));              

                            }

                 

                 

                As you can see, I need the beg_tm and end_tm to be visible from both these functions.  How do I correctly declare variables to be in a scope that both functions can "see" them.  However... I do not want to declare variables that are "visible" to other user sessions, meaning that, if user A clicks on the Go button in his browser and thereby fills the beg_tm with a value, then 1 second later, User B clicks on the Go button in her browser, User B's beg_tm value must be from, and stored in, her session, and User A's copy of beg_tm must still contain User A's start time.   Or am I worrying about nothing?  Is the no chance at all that user sessions will become visible to each other, and store values in each other's same named variables?

                 

                Also, my lblResponseTime.Text no longer shows "-GMT-6" however, it ALWAYS shows 24:10:00 which is wrong.

                 

                I would like the time elapsed to be shown correctly, for example:    00:00:05   (For 5 seconds ellapsed)

                What am I still doing wrong?

                Thanks in advance.

                • 5. Re: Display elapsed processing time in browser
                  RedOctober57 Level 1

                  Here is the date formatter:  (forgot to include it in previous post)

                   

                  <mx:DateFormatter id="tfHMS" formatString="HH:MM:SS"/>

                   

                  (It's in the Declarations part)

                  • 6. Re: Display elapsed processing time in browser
                    msakrejda Level 4

                    The interactions of different users with your app are completely separate--you have nothing to worry about there. Just make them member variables in your component

                     

                         public var beg_tm:Date = new Date();

                     

                    For getDateOffset(), since you're already calculating minutes, hours, and seconds, just format them directly:

                     

                         var elapsed:Array = [];

                         for each (var interval:uint in [ numHours, numMinutes, numSeconds ]) {

                            if (interval < 10) {

                              elapsed.push('0' + interval);

                            } else {

                              elapsed.push(interval);

                           }

                         }

                         return elapsed.join(':');