Creating a non-editable Spark NumericStepper control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ -->
<s:Application name="Spark_NumericStepper_textInput_editable_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">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                numericStepper.textDisplay.editable = false;
            }
        ]]>
    </fx:Script>
 
    <s:NumericStepper id="numericStepper"
            minimum="0" maximum="100"
            horizontalCenter="0" verticalCenter="0"
            initialize="init();" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ -->
<s:Application name="Spark_NumericStepper_textInput_editable_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 mx.events.FlexEvent;
            import spark.components.NumericStepper;
 
            private var numericStepper:NumericStepper;
 
            private function init():void {
                numericStepper = new NumericStepper();
                numericStepper.minimum = 0;
                numericStepper.maximum = 100;
                numericStepper.horizontalCenter = 0;
                numericStepper.verticalCenter = 0;
                numericStepper.addEventListener(FlexEvent.INITIALIZE, numericStepper_initialize);
                addElement(numericStepper);
            }
 
            private function numericStepper_initialize(evt:FlexEvent):void {
                numericStepper.textDisplay.editable = false;
            }
        ]]>
    </fx:Script>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ -->
<s:Application name="Spark_NumericStepper_textInput_editable_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="0" maximum="100"
            skinClass="skins.CustomNumericStepperSkin"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ -->
<s:SparkSkin name="CustomNumericStepperSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minHeight="23" minWidth="40"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.NumericStepper")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For numeric stepper, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["textDisplay", "decrementButton", "incrementButton"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            private var cornerRadiusChanged:Boolean;
            private var borderStylesChanged:Boolean;
 
            override protected function commitProperties():void {
                super.commitProperties();
 
                if (cornerRadiusChanged) {
                    var cr:Number = getStyle("cornerRadius");
                    if (incrementButton) {
                        incrementButton.setStyle("cornerRadius", cr);
                    }
                    if (decrementButton) {
                        decrementButton.setStyle("cornerRadius", cr);
                    }
                    cornerRadiusChanged = false;
                }
 
                if (borderStylesChanged) {
                    textDisplay.setStyle("borderAlpha", getStyle("borderAlpha"));
                    textDisplay.setStyle("borderColor", getStyle("borderColor"));
                    textDisplay.setStyle("borderVisible", getStyle("borderVisible"));
                    borderStylesChanged = false;
                }
            }
 
            override public function styleChanged(styleProp:String):void {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
 
                super.styleChanged(styleProp);
 
                if (allStyles || styleProp == "cornerRadius") {
                    cornerRadiusChanged = true;
                    invalidateProperties();
                }
 
                if (allStyles || styleProp.indexOf("border") == 0) {
                    borderStylesChanged = true;
                    invalidateProperties();
                }
            }
        ]]>
    </fx:Script>
 
    <!--- The default class is NumericStepperIncrementButtonSkin. -->
    <s:Button id="incrementButton"
            right="0" top="0" height="50%"
            skinClass="spark.skins.spark.NumericStepperIncrementButtonSkin" />
 
    <!--- The default class is NumericStepperDecrementButtonSkin. -->
    <s:Button id="decrementButton"
            right="0" bottom="0" height="50%"
            skinClass="spark.skins.spark.NumericStepperDecrementButtonSkin" />
 
    <!--- The default class is NumericStepperTextInputSkin. -->
    <s:TextInput id="textDisplay"
            editable="false"
            left="0" top="0" right="18" bottom="0"
            skinClass="spark.skins.spark.NumericStepperTextInputSkin" />
 
</s:SparkSkin>

/** http://blog.flexexamples.com/2009/06/12/creating-a-non-editable-spark-numericstepper-control-in-flex-4/ */
package skins {
    import spark.skins.spark.NumericStepperSkin;
 
    public class CustomNumericStepperSkinAS extends NumericStepperSkin {
        public function CustomNumericStepperSkinAS() {
            super();
            textDisplay.editable = false;
        }
    }
}