Thursday, January 28, 2010

Using Flex's default cursors

So I made my own component, and I wanted the default move cursor that Flex has built in to appear on the mouse over of my component. I thought this would be an easy task - oh how wrong I was.

An hour of researching later I was no further ahead, besides discovering that mx.skins.cursor.moveCursor was in fact a style and the image was in Assets.css (from this helpful webpage here: http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm). It occurred to me that I know how to get a value out of a CSS file, and therein lied the solution.


[Bindable]
public var myCursor:Class;

//Called on creation complete
public function complete():void
{
myCursor = mx.styles.StyleManager.getStyleDeclaration('DragManager').getStyle('moveCursor');
}

//Called on mouseover of the component
protected function mouseOverWindow(evt:MouseEvent):void
{
CursorManager.setCursor(myCursor);
}

//Called on mouseout of the component
protected function mouseOutWindow(evt:MouseEvent):void
{
CursorManager.removeCursor(CursorManager.currentCursorID);
}

Getting a value out of CSS file

I keep forgetting how to do this:

mx.styles.StyleManager.getStyleDeclaration('.styleclassname').getStyle('style')

This gets a value out of the CSS. So for example if you had a .lineStroke style with a style property of color and you wanted to use that for a stroke declared in MXML you could do this:

<mx:Stroke id="myStroke"
weight="1" color="{mx.styles.StyleManager.getStyleDeclaration('.lineStroke').getStyle('color')}"/>