改变NumericStepper控件上下箭头的外观.

NumericStepper 控件的downArrowSkin 和 upArrowSkin 样式学习。通过5种方式实现。
示例：

第一种方式
代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-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:Button label="Click here to remove focus from the NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="@Embed('assets/bullet_arrow_down.png')"
            upArrowSkin="@Embed('assets/bullet_arrow_up.png')" />

</mx:Application>

第2种方式：在<style>标签中设置

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            downArrowSkin: Embed("assets/bullet_arrow_down.png");
            upArrowSkin: Embed("assets/bullet_arrow_up.png");
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

第3种方式，通过绑定[Embed]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Bindable]
            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="{downArrowIcon}"
            upArrowSkin="{upArrowIcon}" />

</mx:Application>

第4种方式：使用绑定和AS

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;

            private function init():void {
                numericStepper.setStyle("downArrowSkin", downArrowIcon);
                numericStepper.setStyle("upArrowSkin", upArrowIcon);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" initialize="init();" />

</mx:Application>

第5种方式：通过自定义组件
comps/MyNumericStepper.as文件：

/**
 * http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.controls.NumericStepper;

    public class MyNumericStepper extends NumericStepper {
        [Embed("assets/bullet_arrow_down.png")]
        public var downArrowIcon:Class;

        [Embed("assets/bullet_arrow_up.png")]
        public var upArrowIcon:Class;

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

        private function init():void {
            setStyle("downArrowSkin", downArrowIcon);
            setStyle("upArrowSkin", upArrowIcon);
        }
    }
}

mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-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">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <comps:MyNumericStepper id="numericStepper" />

</mx:Application>

来自：http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/