Flex中如何利用stepSize属性调整NumericStepper控件每一步操作大小以及ActionScript代码实现同样功能的例子

By Minidxer | May 17, 2008

接下来的例子演示了Flex中如何利用stepSize属性调整NumericStepper控件每一步操作大小。和Flex中如何通过设置cornerRadius样式设定NumericStepper控件边缘棱角圆滑幅度(corner radius)的例子中一样，例子中利用了HSlider控件来调整每步的尺度。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里查看)：

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.  
  7.     <mx:ApplicationControlBar dock="true">
  8.         <mx:Form styleName="plain">
  9.             <mx:FormItem label="stepSize:">
  10.                 <mx:HSlider id="slider"
  11.                         minimum="1"
  12.                         maximum="10"
  13.                         value="1"
  14.                         snapInterval="1"
  15.                         tickInterval="1"
  16.                         liveDragging="true" />
  17.             </mx:FormItem>
  18.         </mx:Form>
  19.     </mx:ApplicationControlBar>
  20.  
  21.     <mx:NumericStepper id="numericStepper"
  22.             minimum="0"
  23.             maximum="100"
  24.             stepSize="{slider.value}" />
  25.  
  26. </mx:Application>
作为一种流行趋势，下面同样给出用ActionScript实现同样功能的代码：
Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         xmlns:comps="comps.*"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <comps:MyComp id="myComp" />
  9.  
  10. </mx:Application>
Download: MyComp.as
  1. package comps {
  2.     import mx.containers.ApplicationControlBar;
  3.     import mx.containers.Canvas;
  4.     import mx.containers.Form;
  5.     import mx.containers.FormItem;
  6.     import mx.controls.HSlider;
  7.     import mx.controls.NumericStepper;
  8.     import mx.core.Application;
  9.     import mx.events.SliderEvent;
  10.  
  11.     public class MyComp extends Canvas {
  12.         public var appControlBar:ApplicationControlBar;
  13.         public var form:Form;
  14.         public var formItem:FormItem;
  15.         public var slider:HSlider;
  16.         public var numericStepper:NumericStepper;
  17.  
  18.         public function MyComp() {
  19.             super();
  20.             init();
  21.         }
  22.  
  23.         public function init():void {
  24.             slider = new HSlider();
  25.             slider.minimum = 1;
  26.             slider.maximum = 10;
  27.             slider.value = 1;
  28.             slider.snapInterval = 1;
  29.             slider.tickInterval = 1;
  30.             slider.liveDragging = true;
  31.             slider.addEventListener(SliderEvent.CHANGE, slider_change);
  32.  
  33.             formItem = new FormItem();
  34.             formItem.label = "stepSize:";
  35.             formItem.addChild(slider);
  36.  
  37.             form = new Form();
  38.             form.styleName = "plain";
  39.             form.addChild(formItem);
  40.  
  41.             appControlBar = new ApplicationControlBar();
  42.             appControlBar.dock = true;
  43.             appControlBar.addChild(form);
  44.  
  45.             Application.application.addChildAt(appControlBar, 0);
  46.  
  47.             numericStepper = new NumericStepper();
  48.             numericStepper.minimum = 0;
  49.             numericStepper.maximum = 100;
  50.             addChild(numericStepper);
  51.         }
  52.  
  53.         private function slider_change(evt:SliderEvent):void {
  54.             numericStepper.stepSize = evt.value;
  55.         }
  56.     }
  57. }
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads