A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Flex cookbook (share code)
- Adobe AIR cookbook (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
Flex Quick Start: Building a simple user interface
Table of contents
- Using controls
- Using containers
- Styling your components
- Adding effects
- Creating states
- Defining state transitions
- Using tooltips
- Controlling the cursor
Controlling the cursor
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
showBusyCursorproperty 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"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/CursorDefaultBusy/index.html" width="400" height="160" > <mx:Script> <![CDATA[ import mx.controls.Button; import mx.managers.CursorManager; import flash.events.*; private const ON_MESSAGE:String = "Busy Cursor ON"; private const OFF_MESSAGE:String = "Busy Cursor OFF"; private function busyCursorButtonHandler(event:MouseEvent):void { var toggleButton:Button = event.target as Button; if (toggleButton.selected) { CursorManager.setBusyCursor(); toggleButton.label = ON_MESSAGE; } else { CursorManager.removeBusyCursor(); toggleButton.label = OFF_MESSAGE; } } ]]> </mx:Script> <mx:Panel paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" verticalAlign="middle" title="Default busy cursor" > <!-- Toggle button turns default busy cursor on and off. --> <mx:Button label="{OFF_MESSAGE}" toggle="true" click="busyCursorButtonHandler(event);" /> <mx:Text text="Click the button to display or hide the busy cursor."/> </mx:Panel> </mx:Application>
Result
This content requires Flash
To view the full source, right-click the Flex application and select View Source from the context menu.
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.
Right-click on the example to download the source files, which includes the embedded SWF animation.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/CursorCustom/index.html" width="400" height="160" > <mx:Script> <![CDATA[ import mx.controls.Button; 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:Button = event.target as Button; 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. CursorManager.setCursor(HourGlassAnimation); toggleButton.label = ON_MESSAGE; } else { CursorManager.removeCursor(CursorManager.currentCursorID); toggleButton.label = OFF_MESSAGE; } } ]]> </mx:Script> <mx:Panel paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" verticalAlign="middle" title="Custom cursor" > <!-- Toggle button turns the custom cursor on and off. --> <mx:Button label="{OFF_MESSAGE}" toggle="true" click="busyCursorButtonHandler(event);" /> <mx:Text text="Click the button to display or hide the custom cursor."/> </mx:Panel> </mx:Application>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
- Using the Cursor Manager in the Adobe Flex 3 Help
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.
