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

By Minidxer | May 21, 2008

接下来的例子演示了Flex中如何通过downArrowSkinupArrowSkin样式设置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">
  6.  
  7.     <mx:ApplicationControlBar dock="true">
  8.         <mx:Button label="Click here to remove focus from the NumericStepper control" />
  9.     </mx:ApplicationControlBar>
  10.  
  11.     <mx:NumericStepper id="numericStepper"
  12.             downArrowSkin="@Embed('assets/bullet_arrow_down.png')"
  13.             upArrowSkin="@Embed('assets/bullet_arrow_up.png')" />
  14.  
  15. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

Topics: Flex | 1 Comment » | 36 views Tags: , , , ,

Related Post

One comment | Add One

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Archives