<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import ardisia.managers.cursorManager.CursorPriority;
import ardisia.managers.cursorManager.DefaultCursors;
import ardisia.managers.cursorManager.CursorManager;
import ardisia.managers.cursorManager.CursorManagerColorModes;
import cursors.basic.BusyCursor;
import cursors.donut.DonutBusyCursor;
import cursors.snake.SnakeBusyCursor;
protected var inScroll:Boolean;
protected var timer:Timer = new Timer(125, 1);
protected var regionACursor:String;
protected var regionANonNative:Boolean;
protected var regionAPriority:int;
protected var regionBCursor:String;
protected var regionBNonNative:Boolean;
protected var regionBPriority:int;
protected var regionCCursor:String;
protected var regionCNonNative:Boolean;
protected var regionCPriority:int;
public function creationComplete():void
{
initBusyCursors();
systemManager.addEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
CursorManager.removeAllCursors();
});
}
protected function nullHandler(event:Event):void
{
}
protected function colorLabel_creationCompleteHandler(event:FlexEvent):String
{
var os:String = osLabel.text=flash.system.Capabilities.os;
if (!os || os.length < 3)
return CursorManagerColorModes.WHITE;
var osShort:String = os.substr(0, 3).toLowerCase();
switch (osShort)
{
case "win":
return CursorManagerColorModes.WHITE;
break;
case "mac":
return CursorManagerColorModes.BLACK;
break;
default:
return CursorManagerColorModes.WHITE;
break;
}
return "white";
}
protected function group1_mouseWheelHandler(event:MouseEvent):void
{
if (inScroll)
{
timer.reset();
timer.start();
return;
}
inScroll = true;
CursorManager.setCursor(DefaultCursors.MOVE, 1, null, false, systemManager);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
timer.start();
}
protected function timerHandler(event:TimerEvent):void
{
inScroll = false;
timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
CursorManager.removeAllCursors();
}
protected function button1_clickHandler(event:MouseEvent):void
{
if (regionSelect.selectedIndex == 0)
{
regionACursor = cursorSelect.selectedItem.name;
regionANonNative = nonNativeSelect.selected;
regionAPriority = prioritySelect.value;
var contextRegion:UIComponent = regionA;
var contextCursor:String = regionACursor;
var contextNonNative:Boolean = regionANonNative;
var contextPriority:int = regionAPriority;
var cursorGroup:String = "regionACursorGroup";
var contextLabelCursor:Label = regionACursorDes;
var contextNonNativeLabel:Label = regionANonNativeDes;
var contextPriorityLabel:Label = regionAPriorityDes;
}
else if (regionSelect.selectedIndex == 1)
{
regionBCursor = cursorSelect.selectedItem.name;
regionBNonNative = nonNativeSelect.selected;
regionBPriority = prioritySelect.value;
contextRegion = regionB;
contextCursor = regionBCursor;
contextNonNative = regionBNonNative;
contextPriority = regionBPriority;
cursorGroup = "regionBCursorGroup";
contextLabelCursor = regionBCursorDes;
contextNonNativeLabel = regionBNonNativeDes;
contextPriorityLabel = regionBPriorityDes;
}
else
{
regionCCursor = cursorSelect.selectedItem.name;
regionCNonNative = nonNativeSelect.selected;
regionCPriority = prioritySelect.value;
contextRegion = regionC;
contextCursor = regionCCursor;
contextNonNative = regionCNonNative;
contextPriority = regionCPriority;
cursorGroup = "regionCCursorGroup";
contextLabelCursor = regionCCursorDes;
contextNonNativeLabel = regionCNonNativeDes;
contextPriorityLabel = regionCPriorityDes;
}
contextRegion.removeEventListener(MouseEvent.ROLL_OVER, mouseHandler);
contextRegion.removeEventListener(MouseEvent.ROLL_OUT, mouseHandler);
CursorManager.removeGroup(cursorGroup);
if (contextCursor == "default")
{
contextLabelCursor.text = "<none>";
contextNonNativeLabel.text = "--";
contextPriorityLabel.text = "--";
CursorManager.removeGroup(cursorGroup);
return;
}
else
{
contextLabelCursor.text = contextCursor;
contextNonNativeLabel.text = String(contextNonNative);
contextPriorityLabel.text = String(contextPriority);
}
contextRegion.addEventListener(MouseEvent.ROLL_OVER, mouseHandler);
contextRegion.addEventListener(MouseEvent.ROLL_OUT, mouseHandler);
}
protected function mouseHandler(event:MouseEvent):void
{
if (event.currentTarget == regionA)
{
var cursorGroup:String = "regionACursorGroup";
var contextCursor:String = regionACursor;
var contextPriority:int = regionAPriority;
var contextnative:Boolean = regionANonNative;
}
else if (event.currentTarget == regionB)
{
cursorGroup = "regionBCursorGroup";
contextCursor = regionBCursor;
contextPriority = regionBPriority;
contextnative = regionBNonNative;
}
else
{
cursorGroup = "regionCCursorGroup";
contextCursor = regionCCursor;
contextPriority = regionCPriority;
contextnative = regionCNonNative;
}
switch (event.type)
{
case MouseEvent.ROLL_OUT:
CursorManager.removeGroup(cursorGroup);
break;
case MouseEvent.ROLL_OVER:
if (contextCursor == "default")
return;
CursorManager.setCursor(contextCursor, contextPriority,
cursorGroup, contextnative, systemManager);
break;
}
}
protected function cursorSelect_changeHandler(event:IndexChangeEvent):void
{
priorityFormItem.enabled = cursorSelect.selectedItem.name == "default" ? false : true;
if (cursorSelect.selectedItem.name == "default" ||
cursorSelect.selectedItem.name == "hand" ||
cursorSelect.selectedItem.name == "ibeam" ||
cursorSelect.selectedItem.name == "button")
{
nonNativeFormItem.enabled = false;
}
else
{
nonNativeFormItem.enabled = true;
}
}
protected function initBusyCursors():void
{
var assets:Array = new BusyCursor();
CursorManager.registerCursor("basicBusy", new Point(14, 15), assets, 15);
assets = new DonutBusyCursor();
CursorManager.registerCursor("donutBusy", new Point(14, 14), assets, 45);
assets = new SnakeBusyCursor();
CursorManager.registerCursor("snakeBusy", new Point(16, 9), assets, 60);
}
protected function removedFromStageHandler(event:Event):void
{
systemManager.removeEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
CursorManager.removeAllCursors();
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="CursorManager Description"
description="The CursorManager component allows the developer to add, display, and manage mouse cursors natively within the user's operating system, rather than the Flash Player. If the user's Flash Player does not support native mouse cursors (v. 10.2+), this component will fall back to displaying Flash managed bitmaps as the mouse cursor. The Ardisia Component Set includes 15 default cursors, in multiple color schemes, to mimic the typical cursors found in web browsers. These default cursors can easily be modified through the theme CSS file. Some cursors also support a color theme (black or white). The color theme is initially set by analysis of the user's operating system. OS X users get a black theme and all others get a white theme. Developers can force a black or white theme for all users. Custom mouse cursors can also be added and displayed via the CursorManager. Cursors can be given group IDs and priorities to manage what cursor should be displayed when multiple cursors are set. This component is completely static so there is no need to initialize it before use."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Support Native:">
<s:Label id="supportNativeLabel"
verticalAlign="middle"
paddingTop="5"
text="{Mouse.supportsNativeCursor}" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True if your Flash Player version supports native cursors. Player version 10.2+"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Your OS:">
<s:Label id="osLabel"
creationComplete="osLabel.text=flash.system.Capabilities.os"
paddingTop="5"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The detected OS you are running. Used to set a color scheme for the cursors. Black for OS X, white for windows (white all others)."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Auto Color:">
<s:RichText id="colorLabel"
paddingTop="5"
creationComplete="colorLabel.text=colorLabel_creationCompleteHandler(event)"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The color scheme for cursors chosen based on your operating system (black for OS X, everything else white). Note: not all cursors have both black and white versions and the color theme has no effect on cursors that do not have both black and white versions. For example, the 'eastWest' cursor has both a black and white version but the 'allScroll' cursor does not, therefore the color theme will change the 'eastWest' cursor but not the 'allScroll' cursor."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Select Cursor Color Theme:"/>
<s:FormItem label="Select Theme:">
<s:DropDownList id="cursorColorThemeSelect"
width="100"
selectedIndex="0"
change="CursorManager.unregisterAllCursors();CursorManager.colorMode=cursorColorThemeSelect.selectedItem;">
<s:ArrayCollection>
<fx:String>auto</fx:String>
<fx:String>white</fx:String>
<fx:String>black</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="'Auto' to use the color scheme based on your OS. You can also force 'black' or 'white'. Note: not all cursors have both black and white versions and the color theme has no effect on cursors that do not have both black and white versions. For example, the 'eastWest' cursor has both a black and white version but the 'allScroll' cursor does not, therefore the color theme will change the 'eastWest' cursor but not the 'allScroll' cursor."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>This example allows the user to set different cursors for 3 different nested regions. Useful to see the different embedded cursors, and how priority will affect what cursor is displayed. Note: for this example, only the included cursors are available, but developers can easily add additional custom cursors via the CursorManager.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup top="10" bottom="10" left="10">
<s:Form>
<s:FormItem label="Region:">
<s:DropDownList id="regionSelect"
width="150"
selectedIndex="0"
requireSelection="true">
<s:ArrayCollection>
<fx:String>Region A</fx:String>
<fx:String>Region B</fx:String>
<fx:String>Region C</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The region below to set the custom cursor to display when moused over."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Cursor:">
<s:DropDownList id="cursorSelect"
width="150"
selectedIndex="1"
change="cursorSelect_changeHandler(event)">
<s:ArrayCollection>
<fx:Object label="Default" name="default"/>
<fx:Object label="All Scroll" name="allScroll"/>
<fx:Object label="Arrow Flex" name="arrowFlex"/>
<fx:Object label="Busy (animated)" name="busy"/>
<fx:Object label="Column Resize" name="colResize"/>
<fx:Object label="Crosshair" name="crosshair"/>
<fx:Object label="East West" name="eWResize"/>
<fx:Object label="Help" name="help"/>
<fx:Object label="Move" name="move"/>
<fx:Object label="North South" name="nSResize"/>
<fx:Object label="Northeast Southwest" name="neSwResize"/>
<fx:Object label="Northwest Southeast" name="nwSeResize"/>
<fx:Object label="Not Allowed" name="notAllowed"/>
<fx:Object label="Rotate" name="rotate"/>
<fx:Object label="Row Resize" name="rowResize"/>
<fx:Object label="Vertical Text" name="verticalText"/>
<fx:Object label="Button" name="button"/>
<fx:Object label="Hand" name="hand"/>
<fx:Object label="IBeam" name="ibeam"/>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The cursor to set when the mouse is hovered over the region. These cursors are always available."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem id="nonNativeFormItem"
label="Non-Native:">
<s:CheckBox id="nonNativeSelect"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Whether to force the cursor to be displayed via a Flex bitmap rather than a native cursor, even if native cursors are supported by the player."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="priorityFormItem"
label="Priority:">
<s:NumericStepper id="prioritySelect"
width="100"
minimum="0" maximum="1000" value="1"
snapInterval="1"
mouseOut="CursorManager.validateCursor();"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The priority of the cursor, used to select what cursor to display when multiple custom cursors are set."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:Button label="Set Cursor"
width="120"
fontWeight="bold"
click="button1_clickHandler(event)"/>
</data:toolbarContent>
<data:primaryContent>
<s:BorderContainer id="regionA"
top="20" right="20" bottom="20" left="20"
backgroundColor="#EEFFFF">
<s:Form top="10" left="20">
<s:FormHeading label="Region A"/>
<s:FormItem label="Cursor:">
<s:Label id="regionACursorDes"
fontStyle="italic"
text="<none>"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Non-Native:">
<s:Label id="regionANonNativeDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Priority:">
<s:Label id="regionAPriorityDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
</s:Form>
<s:BorderContainer id="regionB"
width="50%"
top="20" right="20" bottom="20"
backgroundColor="#FFEEEE">
<s:Form top="10" left="20">
<s:FormHeading label="Region B"/>
<s:FormItem label="Cursor:">
<s:Label id="regionBCursorDes"
fontStyle="italic"
text="<none>"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Non-Native:">
<s:Label id="regionBNonNativeDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Priority:">
<s:Label id="regionBPriorityDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
</s:Form>
<s:BorderContainer id="regionC"
height="50%"
right="20" bottom="20" left="20"
backgroundColor="#EEEEFF">
<s:Form top="10" left="20">
<s:FormHeading label="Region C"/>
<s:FormItem label="Cursor:">
<s:Label id="regionCCursorDes"
fontStyle="italic"
text="<none>"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Non-Native:">
<s:Label id="regionCNonNativeDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
<s:FormItem label="Priority:">
<s:Label id="regionCPriorityDes"
fontStyle="italic"
text="--"
paddingTop="5"/>
</s:FormItem>
</s:Form>
</s:BorderContainer>
</s:BorderContainer>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Animated Cursor Example</data:tabLabel>
<data:exampleDescription>This example displays an animated native cursor which is most commonly used to indicate loading or waiting. The default option below is embedded by default as the DEFAULT_CURSORS.BUSY cursor.</data:exampleDescription>
<data:toolbarContent>
<s:Form top="10" bottom="10" left="10">
<s:FormItem label="Cursor">
<s:DropDownList id="animatedCursorSelect"
width="150"
selectedIndex="0">
<s:ArrayCollection>
<fx:Object label="Default" name="busy"/>
<fx:Object label="Snake" name="snakeBusy"/>
<fx:Object label="Basic" name="basicBusy"/>
<fx:Object label="Donut" name="donutBusy"/>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Force Non-Native Cursor:">
<s:CheckBox id="nonNativeAnimatedSelect"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to force a non-native cursor and display a Flash managed bitmap instead. Will default to non-native if the user's Flash Player does not support native cursors."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:Button width="150"
label="Set Animated Cursor"
click="CursorManager.setCursor(animatedCursorSelect.selectedItem.name, CursorPriority.HIGH, null, nonNativeAnimatedSelect.selected, systemManager);"/>
<s:Button width="150"
label="Remove Cursor"
click="CursorManager.removeAllCursors();"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>On Mouse Down Example</data:tabLabel>
<data:exampleDescription>This example will change the mouse cursor when the mouse is down over the contextual region, demonstrating the manager's Flexibility when applying custom cursors.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer top="20" right="20" bottom="20" left="20"
backgroundColor="#EEFFFF"
mouseDown="CursorManager.removeAllCursors();CursorManager.setCursor(DefaultCursors.MOVE, 1, null, false, systemManager);
systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, function(event){
CursorManager.removeAllCursors();
});">
<s:Label top="20" left="20"
text="Press mouse down over this region"
fontWeight="bold"/>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>On Wheel Down</data:tabLabel>
<data:exampleDescription>This example will change the mouse cursor while scrolling via the mouse wheel, demonstrating the manager's flexibility when applying custom cursors.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer top="20" right="20" bottom="20" left="20"
backgroundColor="#EEFFFF"
mouseWheel="group1_mouseWheelHandler(event);">
<s:Scroller width="100%" height="100%">
<s:Group >
<s:Label top="20" left="20"
text="Use the mouse wheel to scroll this region"
fontWeight="bold"/>
<s:Group height="1000" />
</s:Group>
</s:Scroller>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #5 -->
<data:PrimaryContentData>
<data:tabLabel>Custom Cursor</data:tabLabel>
<data:exampleDescription>The CursorManager can also be used to register and display custom cursors. This example will register and display a custom bitmap as the mouse cursor via the CursorManager. Any bitmap can be registered and displayed as long as it is 32x32 pixels in size or smaller.</data:exampleDescription>
<data:toolbarContent>
<s:Form top="10" bottom="10" left="10">
<s:FormItem label="Bitmap To Register:">
<s:DropDownList id="bitmapSelect"
width="100"
requireSelection="true"
selectedIndex="0"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="Cross" icon="@Embed(source='icons/cross-red.png')" />
<fx:Object label="Home" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object label="Plus" icon="@Embed(source='icons/plus.png')" />
</s:ArrayCollection>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer height="40">
<s:HGroup left="10"
verticalCenter="0"
verticalAlign="middle">
<s:BitmapImage top="5" bottom="5"
horizontalCenter="0"
source="{data.icon}"/>
<s:Label text="{data.label}"/>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Force Non-Native Cursor:">
<s:CheckBox id="forceNonNativeBitmap"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to force a non-native cursor and display a Flash managed bitmap instead. Will default to non-native if the user's Flash Player does not support native cursors."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:Button width="100"
label="Set Cursor"
click="CursorManager.unRegisterCursor('custom');
CursorManager.registerCursor('custom', new Point(8, 8), [bitmapSelect.selectedItem.icon], 1);
CursorManager.setCursor('custom', 1, null, forceNonNativeBitmap.selected, systemManager);"/>
<s:Button width="100"
label="Remove"
click="CursorManager.removeAllCursors();"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #6 -->
<data:PrimaryContentData>
<data:tabLabel>Included Cursors</data:tabLabel>
<data:exampleDescription>Displayed below are the cursors included with the CursorManager by default and can be used without any additional work. Designed to give developers a set of cursors available to most web browsers. E.G. setting a move cursor is as simply as: CursorManager.setCursor(DEFAULT_CURSORS.MOVE).</data:exampleDescription>
<data:primaryContent>
<s:Image horizontalCenter="0" verticalCenter="0"
source="@Embed(source='images/cursors.png')" />
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>