[Flex]文章翻译-控制光标(Controlling the cursor)

英文原文:《Flex Quick Starts: Building a simple user interface-Controlling the cursor》 

原文地址:http://www.adobe.com/devnet/flex/quickstart/controlling_the_cursor/ 

翻译:Kenshin
地址:http://www.k-zone.cn  http://www.flex2.org 

Adobe Flex 的CursorManager可以让你在你的Flex应用程序里面控制你的光标。举例来说,如果你的应用程序执行处理需要使用者等到处理完成时,你可以改变光标的默认定制,象这样的一个沙漏表现了等待的过程。

你还可以改变光标提供反馈给用户的需要完成的动作。举例来说,你能使用一个光标图像,一个指出用户可以进行输入, 另外一个指出不可以进行的输入。

CursorManager类控制一个光标的优先位的列表,和最高的优先级的光标是可见的。如果光标列表包换多于一个相同优先级的光标,CursorManager 显示的是最近声明的光标。
使用默认的忙状态的光标
Flex定义了一个默认的忙状态的光标指出你的应用程序的在处理中,直到处理完成后才可以做出用户输入的反应。默认忙状态的光标是一个活生生的时钟。
你可以控制忙状态的光标在这几个地方:

1、你可以使用CursorManager方法设定或删除忙状态的光标。
2、你可以使用showBusyCursor这个属性在SWFLoader, WebService, HttpService, and RemoteObject类里面使其自动的显示忙状态的光标。

以下的例子使用了CursorManager类的静态的setBusyCursor() 和 removeBusyCursor()方法来显示和隐藏Flex默认的忙状态。

例子:
<?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>

使用定制的光标

你可以使用a JPEG, GIF, PNG, or SVG image, a Sprite object, or a SWF file作为光标图像。
如果要使用CursorManager类,需要引入mx.managers.CursorManager类到你的应用程序中。
在以下的例子中,插入了一个flash的动画沙漏所建立的flash程序并且使用了自己定制的光标。在这个例子中,你可以建立一个自己定制的光标使用CursorManager类的静态setCursor()方法。你可以使用CursorManager类的静态removeCursor()方法删除一个活动的定制的光标。

<?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>