Display only text field of Numeric Stepper in Flex

Question

Is there any property of Numeric Stepper in Flex which can be used to display only the text field of Numeric Stepper and hide the arrow buttons? I need to display the complete Numeric Stepper on Mouse Roll over.

Answer 1

In flex 4 create custom skin with new state: over. Create new class NumericStepperExtends extends NumericStepper, listen rollover and rollout events, and change skin state. NumericStepperExtends:

package classes
{
    import flash.events.MouseEvent;

    import spark.components.NumericStepper;

    public class NumericStepperExtends extends NumericStepper
    {

        private var _over:Boolean = false;

        public function NumericStepperExtends()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();

            addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
            addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);
        }

        override protected function getCurrentSkinState():String
        {
            if (_over) return "over";

            return super.getCurrentSkinState();
        }

        protected function onRollOutHandler(event:MouseEvent):void
        {
            _over = false;

            invalidateSkinState();
        }

        protected function onRollOverHandler(event:MouseEvent):void
        {
            _over = true;

            invalidateSkinState();
        }
    }
}

Skin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.NumericStepper")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        static private const exclusions:Array = ["textDisplay", "decrementButton", "incrementButton"];

        /**
         * @private
         */  
        override public function get colorizeExclusions():Array {return exclusions;}

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }

        private var cornerRadiusChanged:Boolean;
        private var borderStylesChanged:Boolean;

        /**
         *  @private
         */
        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;
            }
        }

        /**
         *  @private
         */
        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>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="over" />
    </s:states>

    <s:Button id="incrementButton" right="0" top="0" height="50%" tabEnabled="false"
              includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
              skinClass="spark.skins.spark.NumericStepperIncrementButtonSkin" />

    <s:Button id="decrementButton" right="0" bottom="0" height="50%" tabEnabled="false" 
              includeInLayout.normal="false" visible.normal="false" includeInLayout.over="true"
              skinClass="spark.skins.spark.NumericStepperDecrementButtonSkin" />

    <s:TextInput id="textDisplay" left="0" top="0" right="18" bottom="0"
        skinClass="spark.skins.spark.NumericStepperTextInputSkin" />

</s:SparkSkin>

Don't forget add css for bind new component and new skin:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace classes "classes.*";

    classes|NumericStepperExtends
    {
        skinClass: ClassReference("skins.NumericStepper");
    }


</fx:Style>

Answer 2

you can create a mask (tutorial here), what is applied when mouse is not over.

so you have to: 1) create a masking object, 2) mask the stepper (stepper.mask = mymask) 3) add rollover and rollout listeners to mask, where you set or remove the mask.

Answer 3

You can try a very simple way: Use mx_internal:

var n : NumericStepper = new NumericStepper();
n.mx_internal::nextButton.visible = false;
n.mx_internal::prevButton.visible = false;