Flex spark spinner, swap arrows behavior

Question

Is there a simple way to swap the incremental and decremental buttons behaviors? so the up arrow decreases the value and the down arrow increases it.

Answer 1

This skin, for the spark spinner component, solves the problem . I inverted the skin class property and the top down attribute value.

<?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" alpha.disabled="0.5" minHeight="23" minWidth="12">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Spinner")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. 
           For spinner, the skin itself is colorized but the individual parts are not. */
        static private const exclusions:Array = [ "incrementButton","decrementButton",];

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

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

        private var cornerRadiusChanged: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);
            }
        }

        /**
         *  @private
         */
        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp == "cornerRadius")
            {
                cornerRadiusChanged = true;
                invalidateProperties();
            }
        }
    </fx:Script>

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



    <!--- decrement button with increment skin -->
    <s:Button id="decrementButton" left="0" right="0" top="0" height="50%" tabEnabled="false"  
              skinClass="spark.skins.spark.SpinnerIncrementButtonSkin" />

     <!--- increment button with decrement skin -->
    <s:Button id="incrementButton" left="0" right="0" bottom="0" height="50%" tabEnabled="false" 
              skinClass="spark.skins.spark.SpinnerDecrementButtonSkin" /> 



</s:SparkSkin>