Adobe Flex 3 Help

Using a busy cursor

Flex defines a default busy cursor that you can use to indicate that your application is processing, and that users should wait until that processing completes before the application will respond to inputs. The default busy cursor is an animated clock.

You can control a busy cursor in several ways:

  • You can use Cursor Manager methods to set and remove the busy cursor.
  • You can use the showBusyCursor property of the SWFLoader, WebService, HttpService, and RemoteObject classes to automatically display the busy cursor.

Setting a busy cursor

The following static Cursor Manager methods control the busy cursor:

Method

Description

setBusyCursor()

Displays the busy cursor.

removeBusyCursor()

Removes the busy cursor from the cursor list. If other busy cursor requests are still active in the cursor list, which means that you called the setBusyCursor() method more than once, a busy cursor does not disappear until you remove all busy cursors from the list.

You can modify the example in Creating and removing a cursor to use the default busy cursor, as the following example shows:

<?xml version="1.0"?>
<!-- cursors\DefBusyCursorApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script> 
        <![CDATA[
            import mx.managers.CursorManager;
            import flash.events.*;
            
            private function initImage(event:MouseEvent):void {
                CursorManager.setBusyCursor();
                image1.load("../assets/DSC00034.JPG");
            }
    
            private function loadComplete(event:Event):void {
                CursorManager.removeBusyCursor();
            }    
        ]]>
    </mx:Script>

    <mx:VBox>
        <!-- Image control to load the image. -->
        <mx:Image id="image1" 
            height="50"
            width="100"
            scaleContent="true"
            complete="loadComplete(event);"/>
        
        <!-- Button triggers the load. --> 
        <mx:Button id="myButton" label="Show" click="initImage(event);"/>
    </mx:VBox>
</mx:Application>

The executing SWF file for the previous example is shown below:

Setting the busy cursor does not prevent a user from interacting with your application; a user can still enter text or select buttons. However, all containers support the enabled property. By default, this property is set to true to enable user interaction with the container and with the container's children. If you set the enabled property to false when you display a busy cursor, Flex dims the color of the container and of all of its children, and blocks user input to the container and to all of its children.

You can also disable user interaction for the entire application by setting the Application.application.enabled property to false. If you are in a subclass or an ActionScript-only application, you must either explicitly import the mx.core.Application class, or specify mx.core.Application.application.enabled to set the property's value.

The busy cursor has a priority of CursorManagerPriority.LOW. Therefore, if the cursor list contains a cursor with a higher priority, the busy cursor does not appear until you remove the higher-priority cursor. To create a default busy cursor at a higher priority level, use the setCursor() method, as the following example shows:

<?xml version="1.0"?>
<!-- cursors\ShowBusyCursorAppHighP.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script> 
        <![CDATA[
            import mx.managers.CursorManager;
            import mx.managers.CursorManagerPriority;
            import flash.events.*;
            
            // Define a variable to hold the cursor ID.
            private var cursorID:Number = 0;
                       
            // Define event listener to display the busy cursor
            // and to load the image.
            private function initImage(event:MouseEvent):void {
                // Set busy cursor.
                cursorID=CursorManager.setCursor(
StyleManager.getStyleDeclaration("CursorManager").getStyle("busyCursor"),
CursorManagerPriority.HIGH);
                // Load large image.
                image1.load("../assets/DSC00034.JPG");
            }

            // Define an event listener to remove the wait cursor.
            private function loadComplete(event:Event):void {
                CursorManager.removeCursor(cursorID);   
            }               
        ]]>
    </mx:Script>

    <mx:VBox>
        <!-- Image control to load the image. -->
        <mx:Image id="image1" 
            height="50"
            width="100"
            scaleContent="true"
            complete="loadComplete(event);"/>

        <!-- Button triggers the load. --> 
        <mx:Button id="myButton" label="Show" click="initImage(event);"/>
    </mx:VBox>
</mx:Application>

The executing SWF file for the previous example is shown below:

This statement uses the static getStyleDeclaration() method of the StyleManager class to get the CSStyleDeclaration object for the Cursor Manager, and uses this object's getStyle() method to get the busy cursor, which it sets as a high priority cursor.

When you use this technique, you must also use the cursor ID in the removeCursor() method to remove the busy cursor.

Using the showBusyCursor property

The SWFLoader and Image controls, and the <mx:WebService>, <mx:HttpService>, and <mx:RemoteObject> tags have a showBusyCursor property that automatically displays the default busy cursor until the class completes loading data. The default value is false for the SWFLoader control and Image, and for the <mx:WebService>, <mx:HttpService> and <mx:RemoteObject> tags.

If you set the showBusyCursor property to true, Flex displays the busy cursor when the first progress event of the control is triggered, and hides the busy cursor when the complete event is triggered. The following example shows how you can simplify the example in the section Setting a busy cursor by using the showBusyCursor property:

<?xml version="1.0"?>
<!-- cursors\ShowBusyCursorApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <!-- Image control to load the image. -->
        <mx:Image id="image1" 
            height="50"
            width="100"
            scaleContent="true"
            showBusyCursor="true"/>
    
        <!-- Button triggers the load. --> 
        <mx:Button id="myButton" label="Show" 
            click="image1.load('../assets/DSC00034.JPG');"/>    
    </mx:VBox>
</mx:Application>

The executing SWF file for the previous example is shown below: