Flex的數字控制元件

Flex 4中，常用的有四種數字控制元件，Flex 4 Spark型別、原來Flex 3 Halo型別的各兩種，分別是：

1. NumericStepper - Spark
2. Spinner - Spark
3. HSlider - Halo
4. VSlider - Halo

當然Halo型別的Slider在Spark型別包中，也有對應物，但Spark中的對應物比較“原始”，主要用於定製控制元件時使用，屬於可“skinned”的，要自己定義刻度、標籤等。

來看程式碼：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
              fontFamily="微軟雅黑" fontSize="12">
   <fx:Declarations>
       <!-- 將非可視元素（例如服務、值物件）放在此處 -->
   </fx:Declarations>
   <fx:Script>
       <![CDATA[ 
           import mx.controls.Alert;
           public function showMsg(msg:String):void
           {
               Alert.show(msg);
           }
       ]]>
   </fx:Script>
   <s:Panel title="演示" left="10" top="10">
       <s:layout>
           <s:HorizontalLayout/>
       </s:layout>
       <s:VGroup paddingBottom="10" paddingLeft="10" paddingRight="10"
                 paddingTop="10">
           <s:Label fontWeight="bold" text="你有幾個孩子？"/>
           <s:NumericStepper id="kids"
                             minimum="0" 
                             maximum="10"
                             stepSize="1"
                             change="showMsg(kids.value.toString())"/>
           <s:HGroup>
               <s:Label fontWeight="bold" text="幾個在讀大學？"/> 
               <s:Spinner minimum="0" maximum="10" id="collegeKids"/>
               <s:Label text="{collegeKids.value}個在讀大學。"/> 
           </s:HGroup>
           <s:Label fontWeight="bold" text="你乘車上下班要幾分鐘？"/>
           <mx:HSlider id="commuteTimeRange" minimum="0" maximum="180" 
                       snapInterval="5"
                       tickInterval="15"
                       labels="[0 mins,180 mins]"
                       thumbCount="2" 
                       change="showMsg(commuteTimeRange.values.toString())">
           </mx:HSlider>

           <s:Label fontWeight="bold" text="你有多高？"/>
           <mx:VSlider id="yourHeight" minimum="0" maximum="300"
                       tickInterval="50" snapInterval="1"
                       labels="[0,50,100,150,200,250,300]"
                       change="showMsg(yourHeight.values.toString())"/>
       </s:VGroup>
   </s:Panel>
</s:Application>

執行結果如下：

Slider控制元件屬性說明：
snapInterval：移動滑塊時滑塊的增值
tickInterval：刻度線相對於控制元件maximum值的間距
labels="[0 mins,180 mins]"：滑塊標籤
thumbCount：Slider控制元件所允許的滑塊數量，可能的值為 1 或 2。
commuteTimeRange.values.toString中的values：thumbCount 大於 1 時，每個滑塊的值構成的陣列。