Flex Cursor Manager Example


 

Flex Cursor Manager Example

In this tutorial you can see how to use cursor manager in flex application.

In this tutorial you can see how to use cursor manager in flex application.

CursorManager in Flex:-

CurserManager provide the full control of the cursor in your flex application. The most important work of the cursor manager is to provide the feedback to the user to gives the information about the processing. If the user don't want to use the system cursor then cursor manager are provide the property to change the look of the cursor with the help of setCursor() method. this method pass five parameters. first is cursorClass that is class name of the cursor to display. Second is  priority which is integer type that are provide the high low and mediom priority of the cursor. If more then one cursor is define for one component then that cursor are work that have higher priority. By default the priority is 2 that is indicate low. Third parameter is xoffset that is the cursor relative mouse pointer. Forth parameter is yoffset that is the cursor relative mouse pointer. Last is setter which is UIComponent that is set the cursor. The cursor manager is import in the mx.managers.CursorManager package.

public static setCursor(cursorClass:Class, priority:int = 2, xOffset:Number = 0, yOffset:Number = 0, setter:IUIComponent = null):int

And if user want to remove the cursor then use the static method removeCursor(cursorID:int) method when passing the cursorID in remove cursor method.

static removeCursor(cursorID:int):void

If user want to remove all cursor in the application then use removeAllCursor() method.
Example:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.managers.CursorManager;

import flash.events.*;

[Embed(source="assets/button1.jpeg")]

private var symbol:Class;

private function init(event:MouseEvent):void {

CursorManager.setCursor(symbol);

img1.load("assets/t3.jpeg");

img2.load("assets/t3.jpeg");

img3.load("assets/t3.jpeg");

img4.load("assets/t3.jpeg");

img5.load("assets/t3.jpeg");

img6.load("assets/t3.jpeg");

img7.load("assets/t3.jpeg");

img8.load("assets/t3.jpeg");

img9.load("assets/t3.jpeg");

img10.load("assets/t3.jpeg");

}

private function loadComplete(event:Event):void {

CursorManager.removeAllCursors();

}

]]>

</mx:Script>

0

<mx:Panel width="600" height="150" title="Cursor Manager Example">

<mx:VBox>

<mx:HBox paddingTop="20">

1

<mx:Image id="img1" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img2" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img3" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

2

<mx:Image id="img4" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img5" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img6" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

3

<mx:Image id="img7" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img8" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

<mx:Image id="img9" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

4

<mx:Image id="img10" height="50" width="50" scaleContent="true" complete="loadComplete(event);"/>

</mx:HBox>

<mx:Button id="butt" label="Load Image" click="init(event);"/>

5

</mx:VBox>

</mx:Panel>

</mx:Application>

6

Output:-

In the out put you can see the set image as a cursor.

7

 

Ads