actionscript-3 - Flex で Numeric Stepper のテキスト フィールドのみを表示する

Question

Numeric Stepper のテキスト フィールドのみを表示し、矢印ボタンを非表示にするために使用できる Flex の Numeric Stepper のプロパティはありますか? マウス ロール オーバーで完全な数値ステッパーを表示する必要があります。

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

非常に簡単な方法を試すことができます: mx_internal を使用します。

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

Answer 3

マウスが上にないときに適用されるマスク（チュートリアルはこちら）を作成できます。

1) マスキング オブジェクトを作成し、2) ステッパーをマスクします (stepper.mask = mymask) 3) ロールオーバーおよびロールアウト リスナーをマスクに追加し、マスクを設定または削除します。