by Adobe

adobe_logo_bio

Created

22 March 2010

Requirements
User level
All
The Adobe Flex Cursor Manager lets you control the cursor image in your Flex application. For example, if your application performs processing that requires the user to wait until the processing completes, you can change the cursor to a custom cursor image, such as an hourglass, so it reflects the waiting period.
 
You also can change the cursor to provide feedback to the user to indicate the actions that the user can perform. For example, you can use one cursor image to indicate that user input is enabled, and another to indicate that input is disabled.
 
The CursorManager class controls a prioritized list of cursors, where the cursor with the highest priority is currently visible. If the cursor list contains more than one cursor with the same priority, the Cursor Manager displays the most recently created cursor.
 

 
Using the default 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 responds to user input. The default busy cursor is an animated clock.
 
You can control a busy cursor in several ways:
 
  • You can use CursorManager 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.
The following example uses the static setBusyCursor() and removeBusyCursor() methods of the CursorManager class to display and hide the default Flex busy cursor based on the state of a toggle button.
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- CursorDefaultBusy --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="160"> <s:layout> <s:VerticalLayout paddingTop="20" horizontalAlign="center"/> </s:layout> <fx:Script> <![CDATA[ import spark.components.ToggleButton; import mx.managers.CursorManager; import flash.events.*; private const OFF_MESSAGE:String = "Busy Cursor ON"; private const ON_MESSAGE:String = "Busy Cursor OFF"; private function busyCursorButtonHandler(event:MouseEvent):void { var toggleButton:ToggleButton = event.target as ToggleButton; if ( toggleButton.selected ) { CursorManager.setBusyCursor(); toggleButton.label = ON_MESSAGE; } else { CursorManager.removeBusyCursor(); toggleButton.label = OFF_MESSAGE; } } ]]> </fx:Script> <s:Panel title="Default busy cursor"> <s:layout> <s:VerticalLayout paddingTop="20" paddingLeft="10" paddingRight="10" gap="10" horizontalAlign="center"/> </s:layout> <!-- Toggle button turns default busy cursor on/off. --> <s:ToggleButton label="{OFF_MESSAGE}" click="busyCursorButtonHandler(event);"/> <s:Label text="Click the button to display or hide the busy cursor."/> </s:Panel> </s:Application>

 
Using a custom cursor

You can use a JPEG, GIF, PNG, or SVG image, a Sprite object, or a SWF file as the cursor image.
 
To use the Cursor Manager, you import the mx.managers.CursorManager class into your application, and then reference its properties and methods.
 
The following example embeds a SWF animation of an hourglass created in Adobe Flash and uses it as a custom cursor. In the example, you create a custom cursor by calling the setCursor() static method of the CursorManager class and passing it a reference to the class of the embedded asset you want to use as the custom cursor. You can remove an active custom cursor by calling the removeCursor() static method of the CursorManager class and passing it the currentCursorID static property of the CursorManager class.
 
 
Example
<?xml version="1.0" encoding="utf-8"?> <!-- CursorCustom --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="160"> <s:layout> <s:VerticalLayout paddingTop="20" horizontalAlign="center"/> </s:layout> <fx:Script> <![CDATA[ import spark.components.ToggleButton; import mx.managers.CursorManager; import flash.events.*; // Embed the SWF that will be used as // the custom cursor. [Embed(source="assets/hourglass.swf")] public var HourGlassAnimation:Class; private const ON_MESSAGE:String = "Custom Cursor ON"; private const OFF_MESSAGE:String = "Custom Cursor OFF"; private function busyCursorButtonHandler(event:MouseEvent):void { var toggleButton:ToggleButton = event.target as ToggleButton; if ( toggleButton.selected ) { // The setCursor() method returns a numeric ID for // the cursor being set. You can store and use this // ID later in a removeCursor() call, or, you can // use the static currentCursorID property of the // CursorManager class to achieve the same result, // as we have done in this example. CursorManager.setCursor(HourGlassAnimation); toggleButton.label = ON_MESSAGE; } else { CursorManager.removeCursor( CursorManager.currentCursorID ); toggleButton.label = OFF_MESSAGE; } } ]]> </fx:Script> <s:Panel title="Custom cursor"> <s:layout> <s:VerticalLayout paddingTop="20" paddingLeft="10" paddingRight="10" gap="10" horizontalAlign="center"/> </s:layout> <!-- Toggle button turns the custom cursor on/off. --> <s:ToggleButton label="{OFF_MESSAGE}" click="busyCursorButtonHandler(event);"/> <s:Label text="Click the button to display or hide the custom cursor."/> </s:Panel> </s:Application>

 
For more information