flex 4.6 按钮和按钮皮肤类的实现

使用flex开发手机应用已经有一年多的时间，略有心得。在这里为自己的一点经验与大家分享一下。

实现的功能：flex 4.5以后的按钮跟以前的版本略有区别，主要体现在将按钮的皮肤单提出来，不在单纯依赖CSS。具体实现button类和buttonSkin皮肤类。


一、创建按钮，命名为GlobalBackBtn（全局返回按钮）
< ?xml version="1.0" encoding="utf-8"?>
< s:Button xmlns:fx=""
xmlns:s="library://ns.adobe.com/flex/spark"
left="5" top="2.5" bottom="2.5" width="80" height="40"
skinClass="com.richfit.mobileBI.componets.button.skins.GlobalBackBtnSkin">
< fxeclarations>
< !-- 将非可视元素（例如服务、值对象）放在此处 -->
< /fxeclarations>
< /s:Button>

二、创建按钮的皮肤类 GlobalBackBtnSkin
这里使用的MXML标签语言，当然也可用纯AS代码重写此类。有人认为纯AS代码性能更高，以前我也是这样认为，为此还做了试验，结果在我看来在二者在性能上相差无几（个人意见、仅供参考）。所以我选择使用更为简单易懂的mxml标签语言。
< ?xml version="1.0" encoding="utf-8"?>
< s:Skin xmlns:fx=""
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()"
alpha.disabled=".5">
< fx:Metadata>
[HostComponent("spark.components.Button")]
< /fx:Metadata>
< fx:Script>
< ![CDATA[
import com.richfit.mobileBI.tools.FilterLib;
protected function init():void
{
//为传入的文字添加滤镜
if(lableElement)
lableElement.filters = [FilterLib.bevelGradient, FilterLib.glowText];
}
]]>
< /fx:Script>
< !-- 按钮的四种状态states -->






< !-- 按下时添加阴影 -->
left="0" includeIn="down" >
< s:fill>
< s:SolidColor color="0xffffff" alpha="1"/>
< /s:fill>
< /s:Rect>
< !-- 按钮的背景和边框 -->
radiusY="4">
< s:fill>
< s:SolidColor alpha="0" color="#323333"/>
< /s:fill>
< s:stroke>
< s:SolidColorStroke alpha="0" color="#ffffff" weight="1"/>
< /s:stroke>
< /s:Rect>
< !-- 按钮添加高亮遮罩 -->

< s:fill>
< sinearGradient rotation="90">
< s:GradientEntry alpha=".5" color="0xFFFFFF"/>
< s:GradientEntry alpha="0" color="0xFFFFFF"/>
< /sinearGradient>
< /s:fill>
< /s:Rect>
< !-- 文字的样式text -->
abel id="lableElement" fontSize="20" horizontalCenter="0" text="{hostComponent.label}"
textAlign="center" verticalAlign="middle" verticalCenter="1"
visible.down="false"/>
< /s:Skin>


三、使用GlobalBackBtn按钮


四、效果图



五、高级按钮应用：
如果你有多个按钮，仅仅是图片内容不一样，完全没有必要为每张图片写一个按钮。可以为一个按钮传递不同图片路径即可。
具体方法是：
一、在创建按钮时，添加图片路径参数
< ?xml version="1.0" encoding="utf-8"?>
< s:Button xmlns:fx=""
  xmlns:s="library://ns.adobe.com/flex/spark"
  left="5" top="2.5" bottom="2.5" width="80" height="40"
skinClass="com.richfit.mobileBI.componets.button.skins.GlobalBackBtnSkin">
< fxeclarations>
< !-- 用于接收图片路径 -->
public var imageURL:String="";
< /fx:Declarations>
< /s:Button>

二、创建按钮的皮肤类时，接收父类传入的参数
< ?xml version="1.0" encoding="utf-8"?>
< s:Skin xmlns:fx=""
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init()"
alpha.disabled=".5">
< fx:Metadata>
[HostComponent("spark.components.Button")]
< /fx:Metadata>
< fx:Script>
< ![CDATA[
import com.richfit.mobileBI.tools.FilterLib;
protected function init():void
{
//为传入的图片路径
if (this.parent as  GlobalBackBtn){
  img.source=   GlobalBackBtn (this.parent).imageURL ;
}
}
]]>
< /fx:Script>
< !-- 按钮的四种状态states -->

< s:State name="up"/>
< s:State name="over"/>
< s:State name="down"/>
< s:State name="disabled"/>
< /s:states>
< !--按钮显示图片-->

< !--按钮下方显示文字-->
text="{hostComponent.label}"/>

< /s:Skin>


三、使用按钮，并传入图片地址

imgURL="assets/backBtn.png"/>