Mar 28

Flex中如何格式化Slider中多个data tips数据的例子

FlexAdd comments

这个例子实际上和前面的Flex中格式化Slider控件的数据一样，除了实现的方法不一样以外，其效果上的差别只不过这个是带小数而且是多个的tips。这里主要是通过监听thumbPress和thumbRelease两个事件来记录是哪一个slider被滑动了。

另外需要注意的是，如果使用的是Flex Builder 3编译本例，那么有可能会因为类似下面的警告而无法创建发布程序：
Severity Description Resource In Folder Location Creation Time Id 1 Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead. main.mxml main line 65 2008/03/28 1:06:18 98

先来让我们先来看一下Demo：



下面是完整代码：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.             layout="vertical"
  4.             verticalAlign="middle"
  5.             backgroundColor="white"
  6.             applicationComplete="init();" > 
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.SliderEvent; 
  11.  
  12.             private var thumbPrefixArray:Array;
  13.             private var thumbIdx:int; 
  14.  
  15.             /**
  16.              * Initialize thumbPrefixArray with the two prefixes. There
  17.              * needs to be enough items in the thumbPrefix array to
  18.              * match the Slider's thumbCount property.
  19.              */
  20.             private function init():void {
  21.                 thumbPrefixArray = ["Minimum:", "Maximum:"];
  22.             } 
  23.  
  24.             /**
  25.              * Formatter function for the dataTip.
  26.              */
  27.             private function formatDataTip(item:Number):String {
  28.                 // Set the data tip prefix based on the currently
  29.                 // selected thumb and get the prefix string from the
  30.                 // thumbPrefixArray array.
  31.                 var prefix:String = thumbPrefixArray[thumbIdx]
  32.                 return String(prefix + " $" + item.toFixed(2));
  33.             } 
  34.  
  35.             /**
  36.              * Set/clear the thumbIdx variable depending on the
  37.              * event that called this function. The thumbIdx variable
  38.              * will be used to control the text that gets displayed in
  39.              * the data tip.
  40.              */
  41.             private function setThumbIdx(evt:SliderEvent):void {
  42.                 switch (evt.type) {
  43.                     case SliderEvent.THUMB_PRESS:
  44.                         thumbIdx = evt.thumbIndex;
  45.                         break;
  46.                     case SliderEvent.THUMB_RELEASE:
  47.                         thumbIdx = undefined;
  48.                         break;
  49.                 }
  50.             }
  51.         ]]>
  52.     </mx:Script> 
  53.  
  54.     <mx:HSlider id="slider"
  55.             thumbCount="2"
  56.             values="[10, 90]"
  57.             minimum="0"
  58.             maximum="100"
  59.             liveDragging="true"
  60.             thumbPress="setThumbIdx(event);"
  61.             thumbRelease="setThumbIdx(event);"
  62.             dataTipFormatFunction="formatDataTip" />
  63.  
  64.     <mx:Label id="minimumLabel"
  65.             text="Minimum: ${Number(slider.values[0]).toFixed(2)}" />
  66.  
  67.     <mx:Label id="maximumLabel"
  68.             text="Maximum: ${Number(slider.values[1]).toFixed(2)}" /> 
  69.  
  70. </mx:Application>
文中代码来自：flexexamples

written by Minidxer  |  tags: , , , , ,

Related Post

One Response to “Flex中如何格式化Slider中多个data tips数据的例子”

  1. Minidxer Says:
    March 28th, 2008 at 12:43 am

    忘记了,代码也可以通过下面地址察看:
    http://blog.minidx.com/ext/formatting-multiple-data-tips-in-a-slider/srcview/index.html

Leave a Reply