Flex 3快速入门（13）: 构建简单的用户界面 控制和使用光标

 

控制光标

使用 Adobe® Flex™ 光标

管理器可以控制 Flex 应用程序中的光标图像。 例如, 如果应用程序执行的处理需要用户等待, 直到处理完成为止, 则可以将光标更改为某个自定义的光标图像, 比如沙漏, 以使它反映该等待期。

您还可以更改光标以向用户提供反馈, 指示用户可以执行的操作。 例如, 您可以使用一个光标图像来指示用户输入被启用, 而使用另一个光标图像来指示输入被禁用。

CursorManager 类控制一个光标优先顺序列表, 在其中具有最高优先级的光标当前是可见的。 如果光标列表包含具有相同优先级的多个光标, 则光标管理器会显示最近创建的光标。

使用默认的忙光标

Flex 定义了一个默认的忙光标, 可用来指示应用程序正在处理, 且在应用程序对用户输入作出响应之前, 用户应等待, 直到处理完成。 默认的忙光标是一个动画时钟。

可以使用以下几种方式来控制忙光标:

可以使用 CursorManager 方法来设置和删除忙光标。
可以使用 SWFLoader、WebService、HttpService 和 RemoteObject 类的 showBusyCursor 属性自动显示忙光标。
下面的示例使用 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>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

使用自定义光标

可以使用 JPEG、GIF、PNG 或 SVG 图像, Sprite 对象或 SWF 文件作为光标图像。

若要使用光标管理器, 您将 mx.managers.CursorManager 类导入到应用程序中, 然后引用其属性和方法。

下面的示例嵌入一个在 Adobe Flash 中创建的沙漏的 SWF 动画, 并将它用作一个自定义光标。 在该示例中, 创建自定义光标的方法是, 调用 CursorManager 类的 setCursor() 静态方法, 然后将它传送给对您希望用作自定义光标的嵌入资源的类的引用。 可以通过调用 CursorManager 类的 removeCursor() 静态方法并将它传送给 CursorManager 类的 currentCursorID 静态属性来删除活动的自定义光标。

示例

<?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="自定义光标" > <!--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>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。