4 Replies Latest reply on Oct 26, 2010 12:00 AM by esrefatak

    Data loading animation

    svekaria
      Hi, I've got datagrids and charts in my application. When the user clicks on an item in the datagrid, it then updates the chart and other tables. The issue is that the volume of data involved is large, and I want some way to show the user that the data is loading! I've seen so many Flex apps (e.g. the Flex showcase) where there is a simple animation to show that something is being loaded, but I don't know how to add this to my app.

      Any help would be appreciated!
        • 1. Re: Data loading animation
          flashharry! Level 1
          HI

          Create a pop window with the pop up manager, show the pop up just before you fetch your data, then close it on return. Don't forget to close it on error.

          import mx.managers.PopUpManager; //manages pop ups
          import user_admin_classes.waitScreen; //wait screen is mxml component

          private var waitWin:waitScreen;//create wait screen object

          // call this function to show wait screen
          private function showWaitScreen():void {
          waitWin = waitScreen(PopUpManager.createPopUp(this,waitScreen,true));
          }

          to show wait screen call
          showWaitScreen();

          to close call
          waitWin.closePopUp();

          Now you need the mxml component.
          I have an swf file with repeating frames of animation. You can cheat, find one of the many animated gifs on the web, create a new flash stage the same size as the gif, import the gif into flash. Each gif frame will be a flash frame. Publish this out as you wait animation.

          Here is my waitScreen.mxml, it lives in my folder user_admin_classes

          Change it to what you use and reflect that in you import statement.
          [Embed(source="/images/LoadingSpiner.swf")]
          if the flash swf that just repeats to let the user know the app is busy.

          <?xml version="1.0" encoding="utf-8"?>
          <Canvas xmlns=" http://www.adobe.com/2006/mxml" creationComplete="handleCreationComplete();">
          <Script>
          <![CDATA[
          import mx.managers.PopUpManager;
          [Bindable]
          [Embed(source="/images/LoadingSpiner.swf")]
          private var loadingIcon:Class;

          public function closePopUp():void {
          PopUpManager.removePopUp(this);
          }
          private function handleCreationComplete():void {
          // Center the Canvas container
          // over the control that created it.
          PopUpManager.centerPopUp(this);
          }
          ]]>
          </Script>
          <Image source="{loadingIcon}" />
          </Canvas>


          Let me know if you have any questions.
          Remember this is a module screen, the user can not do any thing if you don't close this screen, so remember to close on errors. For testing you can add a close box to the title window. Allowing you to close the wait screen while debugging, but take that out before you publish.

          Dean
          • 2. Re: Data loading animation
            esrefatak

            hi,

             

            This way dont gives a good result if i use centerpopup function in/from another window/popup. is there any another good way? You can see the result below. popup is not in center.

             

             

            Untitled.png

             

             

            thanks.

            Esref Atak

            • 3. Re: Data loading animation
              rtalton Level 4

              You can use the parent parameter of the PopUpManager.addPopUp method to specify which object in the display list it will center on. Something like this.parent.parent, etc.

              • 4. Re: Data loading animation
                esrefatak Level 1

                Hi rtalton,

                 

                Thanks for you help, really.

                 

                Esref Atak

                http://blog.vukuf.com