zoukankan      html  css  js  c++  java
  • Provide a Better Visual Feedback – Using Flex CursorManager

    Why do you need Flex CursorManager

    Flex is all about User Experience. A Rich Internet Application (RIA) is not just attractive skins or fancy animations. It also means interacting with users and helping them use your application better.

    One important part of User Experience is to provide a better visual feedback. For example, when someone types a model name and clicks Search button, it might take 2-3 seconds to get results from a web service.  What would a user do during that time? He or she probably keeps clicking the Search button, or thinks your application is dead.

    So how to let users know what is going on with your application? You need to give them some visual feedback: like show the busy cursor when waiting for the back end response, and then remove the busy cursor when the data is ready.

    To control the cursor image in Flex, you need CursorManager.

    How to use CursorManager

    Here is how you typically use CursorManager in Flex:

    - Display the default busy cursor
      CursorManager.setBusyCursor();
    
    - Remove the busy cursor
      CursorManager.removeBusyCursor();
    
    - Create a new Cursor from your own cursor class
      [Bindable]
      [Embed(source="assets/heart.gif")]
      private var HeartCursor:Class;
      var cursorID:int = CursorManager.setCursor(HeartCursor);
    
    - Removes a cursor from the cursor list
      CursorManager.removeCursor(cursorID);
    
    - Remove all cursors
      CursorManager.removeAllCursors();

    Sample Code

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute">
    
        <mx:Script>
          <![CDATA[
             import mx.managers.CursorManager;
    
             private var cursorId:int;
    
             [Bindable]
             [Embed(source="assets/heart.gif")]
             private var HeartCursor:Class;
    
             private function showBusyCursor():void {
               CursorManager.setBusyCursor();
             }
    
             private function removeBusyCursor():void {
               CursorManager.removeBusyCursor();
             }            
    
             private function showHeartCursor():void {
               cursorId = CursorManager.setCursor(HeartCursor);
             }
    
             private function removeHeartCursor():void {
               CursorManager.removeCursor(cursorId);
             }
         ]]>
        </mx:Script>
    
        <mx:Panel title="Flex Tutorial - Cursor Manager"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0" verticalGap="20"
            horizontalAlign="center" verticalAlign="middle">
    
            <mx:HBox>
              <mx:Button label="Show Busy Cursor"
                         click="showBusyCursor()"/>
              <mx:Button label="Remove Busy Cursor"
                         click="removeBusyCursor()"/>
            </mx:HBox>
    
            <mx:HRule width="95%"/>
    
            <mx:HBox>
              <mx:Button label="Show Heart Cursor"
                         click="showHeartCursor()"/>
              <mx:Button label="Remove Heart Cursor"
                         click="removeHeartCursor()"/>
            </mx:HBox>
       </mx:Panel>
    
    </mx:Application>

    Conclusion

    CursorManager offers a convienent way for you to control cursor display in Flex. By using it properly, you will provide a better visual feedback to users, thus enhance the user experience of your applicaton.

  • 相关阅读:
    剑指offer 44.知识迁移能力 翻转单词顺序列
    Spark Streaming 概述+DStream工作原理+与Storm对比+实时WordCount
    剑指offer 43.知识迁移能力 左旋转字符串
    剑指offer 42.知识迁移能力 和为S的两个数字
    剑指offer 41.知识迁移能力 和为S的连续正数序列
    剑指offer 40.知识迁移能力 数组中只出现一次的数字
    Spark 在yarn上运行模式详解:cluster模式和client模式
    10.25模拟赛
    线段树+Dfs序【p2982】[USACO10FEB]慢下来Slowing down
    线段树 (区间合并)【p2894】[USACO08FEB]酒店Hotel
  • 原文地址:https://www.cnblogs.com/wuhenke/p/1645232.html
Copyright © 2011-2022 走看看