Flex Examples » stepSize http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the step size interval on a Spark NumericStepper control in Flex 4 http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/ http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/#comments Sat, 30 May 2009 06:59:56 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/ The following example shows how you can set the value interval on a Spark NumericStepper control in Flex 4 by setting the snapInterval property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/ --> <s:Application name="Spark_NumericStepper_snapInterval_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <s:NumericStepper id="numericStepper" minimum="-50" maximum="50" snapInterval="2" horizontalCenter="0" verticalCenter="0" />   </s:Application>

View source is enabled in the [...]]]> The following example shows how you can set the value interval on a Spark NumericStepper control in Flex 4 by setting the snapInterval property.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/ -->
<s:Application name="Spark_NumericStepper_snapInterval_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:NumericStepper id="numericStepper"
            minimum="-50"
            maximum="50"
            snapInterval="2"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/ -->
<s:Application name="Spark_NumericStepper_snapInterval_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import spark.components.NumericStepper;
 
            private var numericStepper:NumericStepper;
 
            private function init():void {
                numericStepper = new NumericStepper();
                numericStepper.minimum = -50;
                numericStepper.maximum = 50;
                numericStepper.stepSize = 2;
                numericStepper.horizontalCenter = 0;
                numericStepper.verticalCenter = 0;
                addElement(numericStepper);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/05/29/setting-the-value-interval-on-a-spark-numericstepper-control-in-flex-4/feed/ 5 Setting the value interval on a FxHSlider control in Flex Gumbo http://blog.flexexamples.com/2008/10/27/setting-the-value-interval-on-a-fxhslider-control-in-flex-gumbo/ http://blog.flexexamples.com/2008/10/27/setting-the-value-interval-on-a-fxhslider-control-in-flex-gumbo/#comments Tue, 28 Oct 2008 05:57:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/27/setting-the-value-interval-on-a-fxhslider-control-in-flex-gumbo/ The following example shows how you can set the value interval on a Flex FxHSlider control in Gumbo by setting the stepSize and valueInterval properties.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For [...]]]> The following example shows how you can set the value interval on a Flex FxHSlider control in Gumbo by setting the stepSize and valueInterval properties.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/27/setting-the-value-interval-on-a-fxhslider-control-in-flex-gumbo/ -->
<FxApplication name="FxHSlider_valueInterval_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <VGroup horizontalCenter="0" verticalCenter="0">
        <FxHSlider id="slider"
                minimum="0"
                maximum="10"
                stepSize="0.1"
                valueInterval="0.1"
                liveDragging="true" />
        <Label text="{slider.value.toFixed(1)}"
                width="100%"
                textAlign="right" />
    </VGroup>

</FxApplication>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2008/10/27/setting-the-value-interval-on-a-fxhslider-control-in-flex-gumbo/feed/ 0 Setting the step size on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/#comments Sat, 17 May 2008 05:44:08 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ The following code shows how you can adjust the step size on a Flex NumericStepper control by setting the stepSize property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="stepSize:"> <mx:HSlider id="slider" minimum="1" maximum="10" value="1" snapInterval="1" tickInterval="1" [...]]]> The following code shows how you can adjust the step size on a Flex NumericStepper control by setting the stepSize property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="stepSize:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="10"
                        value="1"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            minimum="0"
            maximum="100"
            stepSize="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

And due to popular demand, here is the “same” application, written in ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyComp id="myComp" />

</mx:Application>

comps/MyComp.as

/**
 * http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.ApplicationControlBar;
    import mx.containers.Canvas;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.controls.HSlider;
    import mx.controls.NumericStepper;
    import mx.core.Application;
    import mx.events.SliderEvent;

    public class MyComp extends Canvas {
        public var appControlBar:ApplicationControlBar;
        public var form:Form;
        public var formItem:FormItem;
        public var slider:HSlider;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        public function init():void {
            slider = new HSlider();
            slider.minimum = 1;
            slider.maximum = 10;
            slider.value = 1;
            slider.snapInterval = 1;
            slider.tickInterval = 1;
            slider.liveDragging = true;
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            formItem = new FormItem();
            formItem.label = "stepSize:";
            formItem.addChild(slider);

            form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            Application.application.addChildAt(appControlBar, 0);

            numericStepper = new NumericStepper();
            numericStepper.minimum = 0;
            numericStepper.maximum = 100;
            addChild(numericStepper);
        }

        private function slider_change(evt:SliderEvent):void {
            numericStepper.stepSize = evt.value;
        }
    }
}

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/feed/ 2