Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子

接下来的例子演示了 Flex中如何通过 downArrowSkin和 upArrowSkin样式设置 NumericStepper控件的上下箭头的 Skin。皮肤（ Skin）牵涉到各种素材图片的问题，当然还有字体，好在网络上总是有好人会分享自己的劳动成果，免费的好的图片，免费的字体都可以在网上找到。你可以在这里（ 480+ free and fresh icon sets help you to create your beautiful skins and themes in Flex）挑选符合自己主题的图标icons,可以在这里（ 100000+ Free Fonts To Make Your Flex UI(skins and themes) Stand Out From The Crowd）挑选自己需要的字体。当然还有这个（ a list of the best free vector graphics,free icons,images and sounds website）。当然，下面的例子实际上仅仅是设置了两个属性，离真正的Skin设计还很远，但是凡是总归是从简单得做起。
让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

 

下面是完整代码(或 点击这里查看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:ApplicationControlBar dock="true">
8.         <mx:Button label="Click here to remove focus from the NumericStepper control" />
9.     </mx:ApplicationControlBar>
11.     <mx:NumericStepper id="numericStepper"
12.             downArrowSkin="@Embed('assets/bullet_arrow_down.png')"
13.             upArrowSkin="@Embed('assets/bullet_arrow_up.png')" />
15. </mx:Application>