The following code shows how you can toggle the “busy” cursor in Flex using the static setBusyCursor() and removeBusyCursor() methods in the CursorManager class, as well as using your own custom cursors by calling the static setCursor() and removeCursor() methods.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/changing-the-cursor-in-a-flex-application-using-the-cursormanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.managers.CursorManager;
 
            [Bindable]
            [Embed(source="assets/bug.png")]
            private var BugIcon:Class;
 
            [Bindable]
            [Embed(source="assets/bug_delete.png")]
            private var BugDeleteIcon:Class;
 
            private var cursorID:int;
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="setBusyCursor()"
                click="CursorManager.setBusyCursor();" />
        <mx:Button label="removeBusyCursor()"
                click="CursorManager.removeBusyCursor();" />
    </mx:ApplicationControlBar>
 
    <mx:Button label="setCursor()"
            width="100"
            height="100"
            rollOver="cursorID = CursorManager.setCursor(BugIcon);"
            rollOut="CursorManager.removeCursor(cursorID);" />
 
</mx:Application>

View source is enabled in the following example.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

15 Responses to Changing the cursor in a Flex application using the CursorManager class

  1. bLb says:

    As usual very useful! Thanks!

  2. Anz says:

    Hi,

    I set the cursor of a textinput using CursorManager

    The new cursor is showing but it also showing the default text cursor on roll over of the text box.

    How can I solve it?

    Thanks
    Anz
    http://www.flickrmailer.com

  3. Divya says:

    I was using the setBusyCursor() and removeBusyCursor() methods in my application,until I had two tabs in my app which loaded once my Application initialized.Both these tabs make remote method calls,and display the busy cursor until the results come back.This resulted in the busy cursor getting converted into a normal cursor before the data come back.Here is a blog post related to this and how we could use a progress bar instead and pointers on ProgressBar:
    http://flex-j2ee.blogspot.com/2008/01/flex-progressbar-versus-cursormanager.html

  4. sammy says:

    I am trying to create a custom set of cursors for my app tha dont have to be turned on, can this code be edited so it is automatically switched on without a button needed to be pressed?

  5. Naj says:

    Very useful tip ,

    Thanks

    Can we set tooptip for busy cursor instead of loading image ?

  6. molaro says:

    I have an application where when the user clicks a button I removeAllChildren() from an HBOX, and then run a loop through my data to add new children to the same HBOX (I’m paginating the children). The first line of my function sets the busy cursor and the last line removes it as it takes a second or so to swap the children. However, when I click the button my cursor just disappears instead of showing the busy cursor. Then when the process is done the regular cursor returns. Why does my BusyCursor disappear when removing / adding children? Is there a way to prevent that from happening? Is this a bug or performance issue?

  7. Migs says:

    I have the same problem Anz has.

    The new cursor and the text cursor overlay each other. Does anybody know how to fix this problem?

  8. David Zamora says:

    Hi,
    I am changing the cursor successfully, but I need to disable the cursor click event while the information that I am retrieving is displayed?
    Can I do this? How can I do it?

  9. Anonymous says:

    Gracias, este artículo es de mucha utilidad!!!!!!

  10. Farooq says:

    Thank you so much…

  11. ChennaPavan says:

    Its really cool….

  12. Thank! Waiting for tutorial about native cursors in 10.2 ;)

  13. Nick JackSon says:

    Nice Tutorial
    Thanks a Lot

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree